/* --------------------------- Horizontal Wrapper --------------------------- */

.twae-horizontal-timeline {
    --tw-ibx-position: 50;
    --tw-cbx-text-align: center;
    --tw-cbx-bd-top-width: 3px;
    --tw-cbx-bd-right-width: 0px;
    --tw-cbx-bd-bottom-width: 0px;
    --tw-cbx-bd-left-width: 0px;
    --tw-line-filling-color: rgba(0, 0, 0, 0.5);
    --tw-cbx-img-order: 0;
    --nav-icon-height: 24px;
    --nav-icon-width: 24px;
    --nav-icon-color: var(--tw-line-bg, #222);
    --nav-icon-radius: 0;
    overflow: visible;
}

.twae-horizontal-timeline.twae-wrapper.style-2 {
    --tw-cbx-img-order: 2;
    --tw-ibx-radius: 0;
    --tw-ibx-bd-width: calc(var(--tw-line-bd-width, var(--tw-line-width)) * 1px);
    --tw-cbx-radius: 0px 0px 0px 0px;
    --tw-cbx-padding: 0px;
    --tw-cbx-bd-top-width: 0px;
    --tw-cbx-title-color: #fff;
    --tw-cbx-title-bg: var(--tw-ibx-bg);
    --tw-cbx-title-padding: 8px 12px 8px 12px;
    --tw-cbx-title-margin: 0px 0px 0px 0px;
    --tw-cbx-des-padding: 0px 10px 0px 10px;
}

.twae-horizontal-timeline.twae-wrapper.style-3 {
    --tw-cbx-radius: 0px 0px 0px 0px;
    --tw-cbx-padding: 0px;
    --tw-cbx-bd-top-width: 0px;
    --tw-cbx-bg: #fff;
    --tw-cbx-shadow: 0px;
}

.twae-horizontal-timeline.twae-wrapper.style-4 {
    --tw-cbx-radius: 0px 0px 0px 0px;
    --tw-cbx-bd-top-width: 0px;
    --tw-cbx-bg: #fff;
    --tw-cbx-shadow: 0px;
}

.twae-horizontal-highlighted-timeline {
    --tw-highlighted-color: '';
}

.twae-horizontal-timeline.twae-wrapper.style-4 .twae-content {
    background: transparent !important;
}

.twae-horizontal-timeline.twae-wrapper {
    width: calc(100% - var(--nav-icon-width) * 2);
    margin: 0 var(--nav-icon-width);
}

.twae-wrapper-inside {
    overflow: hidden;
}


/* ------------------------ Horizontal Wrapper - END ------------------------ */


/* ------------------------ container style start ------------------------ */

.twae-wrapper.twae-horizontal-timeline.twae-bg-multicolor .twae-story:nth-child(4n-2) .twae-content {
    background: var(--tw-cbx-bg2, var(--tw-cbx-bg));
}

.twae-wrapper.twae-horizontal-timeline.twae-bg-multicolor .twae-story:nth-child(4n-1) .twae-content {
    background: var(--tw-cbx-bg3, var(--tw-cbx-bg));
}

.twae-wrapper.twae-horizontal-timeline.twae-bg-multicolor .twae-story:nth-child(4n) .twae-content {
    background: var(--tw-cbx-bg4, var(--tw-cbx-bg));
}


/* ------------------------ container style end ------------------------ */


/* --------------------------------- Slider --------------------------------- */

.twae-horizontal-timeline.twae-wrapper .twae-slider-container {
    width: calc(100% - var(--tw-cbx-space));
    margin: 0 calc(var(--tw-cbx-space) * 0.5px);
    display: block;
    position: relative;
    padding-bottom: 1rem;
    padding-top: 0;
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-slider-container {
    padding-top: 1rem;
    padding-bottom: 0;
}

.twae-horizontal-timeline.twae-wrapper .twae-slider-container.swiper-container {
    overflow: hidden;
}

.twae-horizontal-timeline .twae-slideshow.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.twae-horizontal-timeline .twae-media :where(.twae-slideshow, .swiper-wrapper) {
    width: 100%;
}

.twae-horizontal-timeline .twae-slider-wrapper.default-height .twae-media .twae-slideshow :where(.swiper-slide a, .swiper-slide img) {
    height: 100% !important;
}

.twae-horizontal-timeline .twae-slider-wrapper.default-height .twae-media .twae-slideshow .swiper-slide img {
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center;
}

.twae-horizontal-timeline .twae-slideshow.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
    height: auto;
}


/* ------------------------------ Slider - END ------------------------------ */


/* --------------------------- Next / Prev Buttons -------------------------- */

.twae-horizontal-timeline.twae-wrapper .twae-button-prev,
.twae-horizontal-timeline.twae-wrapper .twae-button-next {
    position: absolute;
    top: calc(calc(0px + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px + var(--tw-ibx-size) - var(--nav-icon-height) * .5 + var(--lbl-bd-width)*2));
    background: var(--nav-icon-background);
    color: var(--nav-icon-color);
    width: var(--nav-icon-width);
    height: var(--nav-icon-height);
    font-size: calc(var(--nav-icon-height) - 4px);
    line-height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    cursor: pointer;
}

.twae-horizontal-timeline.twae-wrapper :where(.twae-button-prev, .twae-button-next) svg {
    fill: var(--nav-icon-color);
    width: calc(var(--nav-icon-height) - 4px);
    height: calc(var(--nav-icon-height) - 4px);
}

.twae-horizontal-timeline.twae-wrapper .twae-button-prev.swiper-button-disabled,
.twae-horizontal-timeline.twae-wrapper .twae-button-next.swiper-button-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

.twae-horizontal-timeline.twae-wrapper.label_content_top .twae-button-next,
.twae-horizontal-timeline.twae-wrapper.label_content_top .twae-button-prev {
    top: calc(calc(0px + var(--tw-ibx-size) - var(--nav-icon-height) * .5));
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom.label_content_top .twae-button-next,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom.label_content_top .twae-button-prev {
    bottom: calc(calc(0px + var(--tw-ibx-size) - var(--nav-icon-height) * .5));
}

.twae-horizontal-timeline.twae-wrapper .twae-button-next {
    right: calc(0px - var(--nav-icon-width));
}

.twae-horizontal-timeline.twae-wrapper .twae-button-prev {
    left: calc(0px - var(--nav-icon-width));
}

.twae-button-next i.fas.fa-long-arrow-alt-right {
    display: block !important;
}


/* ------------------------ Next / Prev Buttons - END ----------------------- */


/* ---------------------------- Horizontal Line ---------------------------- */

.twae-horizontal-timeline .twae-wrapper .twae-story-line {
    position: absolute;
    top: calc(0px - var(--tw-ibx-size) - var(--tw-line-width) / 2);
    left: calc(0px - var(--tw-cbx-space) * 0.5px);
    display: block;
    width: calc(100% + var(--tw-cbx-space) * 1px);
    height: var(--tw-line-width);
    background-color: var(--tw-line-bg);
    border-width: calc(var(--tw-line-bd-width) * 1px) 0px calc(var(--tw-line-bd-width) * 1px) 0px;
    border-style: var(--tw-line-bd-style);
    border-color: var(--tw-line-bd-color);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-story-line,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1) .twae-story-line {
    top: auto;
    bottom: calc(0px - var(--tw-ibx-size) - var(--tw-line-width) / 2);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1):before,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1):after {
    content: "";
    position: absolute;
    width: var(--tw-line-width);
    height: calc(100% - (var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px - var(--tw-line-width)));
    bottom: calc(0px - var(--tw-ibx-size) - var(--tw-line-width) / 2);
    background-color: var(--tw-line-bg);
    border-width: 0px calc(var(--tw-line-bd-width) * 1px) 0px calc(var(--tw-line-bd-width) * 1px);
    border-style: var(--tw-line-bd-style);
    border-color: var(--tw-line-bd-color);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1):before {
    left: calc(0px - var(--tw-cbx-space) * 0.5px - var(--tw-line-width) / 2);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1):after {
    right: calc(0px - var(--tw-cbx-space) * 0.5px - var(--tw-line-width) / 2);
}


/* -------------------------- Horizontal Line - END ------------------------ */


/* -------------------------------- Line Fill ------------------------------- */

.twae-horizontal-timeline.twae-wrapper .twae-h-line {
    position: absolute;
    top: calc(0px + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px + var(--tw-ibx-size) - var(--tw-line-width) * 0.5);
    left: 0;
    display: block;
    width: 100%;
    height: var(--tw-line-width);
    background-color: var(--tw-line-bg);
    border-width: calc(var(--tw-line-bd-width) * 1px) 0px calc(var(--tw-line-bd-width) * 1px) 0px;
    border-style: var(--tw-line-bd-style);
    border-color: var(--tw-line-bd-color);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-story-line {
    top: auto;
    bottom: calc(0px + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px + var(--tw-ibx-size) - var(--tw-line-width) * 0.5);
}

.twae-line-fill.swiper-pagination-progressbar {
    position: absolute;
    top: calc(0px + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px + var(--tw-ibx-size) - var(--tw-line-width) * .5 + var(--lbl-bd-width)*2);
    left: 0;
    width: 100%;
    height: var(--tw-line-width);
    background: transparent;
}

.twae-line-fill.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: var(--tw-line-filling-color);
}

.twae-line-filler .twae-story-line {
    display: none;
}


/* ----------------------------- Line Fill - END ---------------------------- */


/* ------------------------ Line Year Box Horizontal ------------------------ */

.twae-horizontal-timeline.twae-wrapper .twae-year {
    position: absolute;
    top: calc(var(--tw-ibx-size) / 2 - var(--tw-ibx-size) * 2 - (var(--tw-ybx-size) * ((60 + var(--tw-ibx-radius) / 1.25) / 100) - var(--tw-ibx-size)) / 2);
    left: 10px;
    margin: 0;
    justify-content: flex-start;
    width: auto;
}

.twae-horizontal-timeline.twae-wrapper .twae-year .twae-year-text {
    transition: all .2s ease-out;
}

.twae-horizontal-timeline.twae-wrapper .twae-year.twae-in-view-port .twae-year-text {
    border-color: var(--tw-line-filling-color);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-year,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1) .twae-year {
    top: auto;
    bottom: calc(var(--tw-ibx-size) / 2 - var(--tw-ibx-size) * 2 - (var(--tw-ybx-size) * ((60 + var(--tw-ibx-radius) / 1.25) / 100) - var(--tw-ibx-size)) / 2);
}

.twae-horizontal-timeline.twae-wrapper .twae-year-text:before,
.twae-horizontal-timeline.twae-wrapper .twae-year-text:after {
    width: calc(var(--tw-ybx-bd-width) + var(--tw-line-width) * 0.1);
    height: calc(var(--tw-line-width) - var(--tw-line-bd-width) * 2px);
    top: calc(50% - (var(--tw-line-width) - var(--tw-line-bd-width) * 2px) / 2);
}

.twae-horizontal-timeline.twae-wrapper .twae-year-text:before {
    left: 0;
}

.twae-horizontal-timeline.twae-wrapper .twae-year-text:after {
    right: 0;
}


/* --------------------- Line Year Box Horizontal - END --------------------- */


/* ---------------------------- Labels Horizontal --------------------------- */

.twae-horizontal-timeline.twae-wrapper .twae-labels {
    justify-content: var(--tw-lbl-justify);
    top: calc(0px - (var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2) - var(--tw-ibx-size) * 2);
    left: calc(var(--tw-ibx-position) * 1% - var(--tw-ibx-size) * var(--tw-ibx-position)/ 100 + var(--tw-ibx-size) / 2);
    height: calc(var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2);
    text-align: center;
    width: auto;
}

.twae-horizontal-timeline:not(.twae-label-content-inside) .swiper-slide .twae-labels {
    transform: translateX(-50%);
}

.twae-wrapper.twae-label-content-inside .twae-labels,
.twae-wrapper.twae-label-content-top .twae-labels {
    text-align: var(--tw-cbx-text-align);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-labels,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1) .twae-labels {
    top: auto;
    bottom: calc(0px - (var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2) - var(--tw-ibx-size) * 2);
}


/*------------------- Label CSS Style - Start  -------------------*/

.twae-horizontal-timeline .twae-label-bg.twae-labels {
    align-items: center;
    height: calc(var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 22px + var(--lbl-bd-width)*2) !important;
    bottom: auto;
    top: calc(0px - (var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2) - var(--tw-ibx-size) * 2 - 16px - var(--lbl-bd-width)*2) !important;
}

.twae-horizontal-timeline .twae-label-bg .twae-label-small {
    line-height: 1em;
}

.twae-horizontal-timeline.label_content_top .twae-label-bg.twae-labels {
    height: auto !important;
}

.twae-horizontal-timeline.label_content_top .twae-label-bg.twae-labels:has(.twae-label-small) {
    height: calc(var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 16px + var(--lbl-bd-width)*2) !important;
}

.twae-horizontal-timeline.twae-label-content-inside .twae-label-bg.twae-labels {
    align-items: initial;
}

.twae-horizontal-timeline.twae-horizontal-bottom.twae-wrapper .twae-labels.twae-label-bg {
    top: auto !important;
    bottom: calc(0px - (var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2) - var(--tw-ibx-size) * 2 - var(--lbl-bd-width)*2) !important;
    margin-bottom: 0.75em;
}

.twae-horizontal-timeline.twae-horizontal-bottom.twae-wrapper:not(.twae-post-timeline) .twae-labels.twae-label-bg {
    bottom: calc(0px - (var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap)) - var(--tw-ibx-size) * 2 - var(--lbl-bd-width)*2 - 15px) !important;
    margin-bottom: 0px;
}

.twae-label-bg .twae-inner-label {
    border: var(--lbl-bd-width) var(--lbl-bd-style) var(--lbl-bd-color);
}


/* -------------------Label CSS Style - End ------------------- */


/* ----------------------Label Arrow CSS - Start----------------------*/

.twae-horizontal-timeline .twae-label-bg.twae-lbl-arrow .twae-inner-label:before {
    background: linear-gradient(to bottom left, var(--lbl-arw-bg) 52%, transparent 48%);
    left: calc(50% - (var(--tw-ibx-size)/3.5)/2);
    border-width: var(--lbl-bd-width) var(--lbl-bd-width) 0px 0px;
}

.twae-horizontal-timeline .twae-label-bg.twae-lbl-arrow .twae-inner-label::before {
    bottom: calc(0px - (var(--tw-ibx-size)/3.5)/2 - var(--lbl-bd-width)/2);
    rotate: 136deg;
}

.twae-horizontal-timeline.twae-horizontal-bottom .twae-label-bg.twae-lbl-arrow .twae-inner-label::before {
    top: calc(0px - (var(--tw-ibx-size)/3.5)/2 - var(--lbl-bd-width));
    transform: rotate(179deg);
}


/* ----------------------Label Arrow CSS - END----------------------*/


/* ----------------------Label Arrow-Line CSS - Start----------------------*/

.twae-horizontal-timeline .twae-label-bg.twae-lbl-arrow-line .twae-inner-label::after {
    width: var(--tw-line-width);
    height: calc(var(--tw-ibx-size) * 0.5 + var(--lbl-bd-width) + var(--tw-ibx-bd-width));
    left: calc(50% - var(--tw-line-width)/2);
    border-width: 0px calc(var(--tw-line-bd-width) * 1px) 0px calc(var(--tw-line-bd-width) * 1px);
    bottom: calc(0px - var(--tw-ibx-size)/2 - var(--lbl-bd-width) - var(--tw-ibx-bd-width));
}

.twae-horizontal-bottom .twae-label-bg.twae-lbl-arrow-line .twae-inner-label::after {
    border-width: 0px calc(var(--tw-line-bd-width) * 1px) 0px calc(var(--tw-line-bd-width) * 1px);
}

.twae-horizontal-timeline.twae-horizontal-bottom .twae-label-bg.twae-lbl-arrow-line .twae-inner-label::after {
    top: calc(0px - var(--tw-ibx-size)/2 - var(--lbl-bd-width) - var(--tw-ibx-bd-width));
}

.twae-horizontal-timeline .twae-story-no-dot .twae-label-bg.twae-lbl-arrow-line .twae-inner-label::after {
    height: calc(var(--tw-ibx-size) + var(--lbl-bd-width));
    bottom: calc(0px - var(--tw-ibx-size) - var(--lbl-bd-width));
}

.twae-horizontal-timeline.twae-horizontal-bottom .twae-story-no-dot .twae-label-bg.twae-lbl-arrow-line .twae-inner-label::after {
    top: calc(0px - var(--tw-ibx-size) - var(--lbl-bd-width));
    bottom: auto;
}

.twae-horizontal-timeline .twae-story-no-icon .twae-label-bg.twae-lbl-arrow-line .twae-inner-label::after {
    height: calc(var(--tw-ibx-size) * 0.75 + var(--lbl-bd-width) + var(--tw-ibx-bd-width));
    bottom: calc(0px - var(--tw-ibx-size)*0.75 - var(--lbl-bd-width) - var(--tw-ibx-bd-width));
}

.twae-horizontal-timeline.twae-horizontal-bottom .twae-story-no-icon .twae-label-bg.twae-lbl-arrow-line .twae-inner-label::after {
    top: calc(0px - var(--tw-ibx-size)*0.75 - var(--lbl-bd-width) - var(--tw-ibx-bd-width));
}


/* ----------------------Label Arrow-Line CSS - End----------------------*/

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-slider-container.swiper-container .twae-slider-wrapper {
    margin-top: calc(var(--tw-ibx-size) * 2 + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px + var(--lbl-bd-width)*2) !important;
}

.twae-horizontal-timeline.twae-wrapper:not(.twae-horizontal-bottom) .twae-slider-container.swiper-container .twae-slider-wrapper {
    margin-bottom: var(--tw-cbx-bottom-margin);
}

.twae-horizontal-timeline.twae-wrapper:not(.twae-horizontal-bottom) .twae-story {
    margin-bottom: 0;
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-story,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1) {
    margin-bottom: calc(var(--tw-ibx-size) * 2 + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px + var(--lbl-bd-width)*2) !important;
}

.twae-horizontal-timeline.twae-wrapper:not(.twae-horizontal-bottom):not(.label_content_top) .twae-slider-container.swiper-container .twae-slider-wrapper {
    margin-top: calc(var(--tw-ibx-size) * 2 + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px + var(--lbl-bd-width)*2) !important;
}

.twae-horizontal-timeline.twae-wrapper.label_content_top:not(.twae-horizontal-bottom) .twae-slider-container.swiper-container .twae-slider-wrapper {
    margin-top: calc(var(--tw-ibx-size) * 2) !important;
}

.twae-horizontal-timeline.twae-wrapper.label_content_top.twae-horizontal-bottom .twae-slider-container.swiper-container .twae-slider-wrapper {
    margin-top: calc(var(--tw-ibx-size) * 2) !important;
}

.twae-horizontal-timeline.twae-wrapper.label_content_top.twae-horizontal-bottom .twae-story {
    margin-bottom: calc(var(--tw-ibx-size) * 2) !important;
}


/* ----------------------horizontal-line css style - start  ----------------------*/

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-h-line,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-line-fill.swiper-pagination-progressbar {
    bottom: calc(0px + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px + var(--tw-ibx-size) - var(--tw-line-width) * .5 + var(--lbl-bd-width)*2) !important;
}

.twae-horizontal-timeline.twae-wrapper:not(.twae-horizontal-bottom):not(.label_content_top) .twae-h-line,
.twae-horizontal-timeline.twae-wrapper:not(.twae-horizontal-bottom) .twae-line-fill.swiper-pagination-progressbar {
    top: calc(0px + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px + var(--tw-ibx-size) - var(--tw-line-width) * .5 + var(--lbl-bd-width)*2) !important;
}

.twae-horizontal-timeline.twae-wrapper.label_content_top:not(.twae-horizontal-bottom) .twae-h-line,
.twae-horizontal-timeline.twae-wrapper.label_content_top:not(.twae-horizontal-bottom) .twae-line-fill.swiper-pagination-progressbar {
    top: calc(0px + var(--tw-ibx-size) - var(--tw-line-width) * .5) !important;
}

.twae-horizontal-timeline.twae-wrapper.label_content_top.twae-horizontal-bottom .twae-h-line,
.twae-horizontal-timeline.twae-wrapper.label_content_top.twae-horizontal-bottom .twae-line-fill.swiper-pagination-progressbar {
    bottom: calc(0px + var(--tw-ibx-size) - var(--tw-line-width) * .5) !important;
}


/* ----------------------horizontal-line css style - end  ----------------------*/


/* ------------------------- Labels Horizontal - END ------------------------ */


/* ------------------------ Icon / Dot Box Horizontal ----------------------- */

.twae-horizontal-timeline.twae-wrapper .twae-icon {
    transition: all .2s ease-out;
    left: calc(var(--tw-ibx-position) * 1% - var(--tw-ibx-size) * var(--tw-ibx-position) / 100);
    top: calc(var(--tw-ibx-size) / 2 - var(--tw-ibx-size) * 2);
}

.twae-horizontal-timeline.twae-wrapper .swiper-slide.twae-in-view-port :where(.twae-icon, .twae-icondot) {
    border-color: var(--tw-line-filling-color);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-icon,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1) .twae-icon {
    top: auto;
    bottom: calc(var(--tw-ibx-size) / 2 - var(--tw-ibx-size) * 2);
}

.twae-horizontal-timeline.twae-wrapper .twae-icondot {
    top: calc(var(--tw-ibx-size) * 0.75 - var(--tw-ibx-size) * 2);
    left: calc(var(--tw-ibx-position) * 1% - var(--tw-ibx-size) * var(--tw-ibx-position) / 100 + var(--tw-ibx-size) / 4);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-icondot,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1) .twae-icondot {
    top: auto;
    bottom: calc(var(--tw-ibx-size) * 0.75 - var(--tw-ibx-size) * 2);
}

.twae-horizontal-timeline.twae-wrapper .twae-icondot:before,
.twae-horizontal-timeline.twae-wrapper .twae-icondot:after,
.twae-horizontal-timeline.twae-wrapper .twae-icon:before,
.twae-horizontal-timeline.twae-wrapper .twae-icon:after {
    width: calc(var(--tw-ibx-bd-width) + var(--tw-line-width) * 0.1);
    height: calc(var(--tw-line-width) - var(--tw-line-bd-width) * 2px);
    top: calc(50% - (var(--tw-line-width) - var(--tw-line-bd-width) * 2px) / 2);
}

.twae-horizontal-timeline.twae-wrapper .twae-icondot:before,
.twae-horizontal-timeline.twae-wrapper .twae-icon:before {
    left: calc(0px - var(--tw-ibx-bd-width));
}

.twae-horizontal-timeline.twae-wrapper .twae-icondot:after,
.twae-horizontal-timeline.twae-wrapper .twae-icon:after {
    right: calc(0px - var(--tw-ibx-bd-width));
}


/* --------------------- Icon / Dot Box Horizontal - END -------------------- */


/* ----------------------- Story Box Arrow Horizontal ----------------------- */

.twae-horizontal-timeline.twae-wrapper .twae-arrow {
    background: linear-gradient(to bottom right, var(--tw-arw-bg, var(--tw-cbx-title-bg)) 52%, transparent 48%);
    top: calc(var(--tw-ibx-size) / 7 - var(--tw-ibx-size) / 3.5 + var(--tw-cbx-bd-top-width) / 3);
    left: calc(var(--tw-ibx-position) * 1% - var(--tw-ibx-size) * var(--tw-ibx-position) / 100 + var(--tw-ibx-size) / 2 - var(--tw-ibx-size) / 7);
    border-width: var(--tw-cbx-bd-top-width) 0 0 var(--tw-cbx-bd-top-width);
}

.twae-horizontal-timeline.twae-wrapper.twae-bg-hover .twae-story:hover .twae-arrow,
.twae-horizontal-timeline.twae-wrapper.twae-bg-gradient.twae-bg-hover .twae-story:hover .twae-arrow,
.twae-horizontal-timeline.twae-wrapper.twae-bg-multicolor.twae-bg-hover .twae-story:hover .twae-arrow {
    background: linear-gradient(to bottom right, var(--tw-cbx-title-bg, var(--tw-cbx-bg-hover)) 52%, transparent 48%);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom.twae-bg-hover .twae-story:hover .twae-arrow,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom.twae-bg-gradient.twae-bg-hover .twae-story:hover .twae-arrow,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom.twae-bg-multicolor.twae-bg-hover .twae-story:hover .twae-arrow {
    background: linear-gradient(to top left, var(--tw-cbx-title-bg, var(--tw-cbx-bg-hover)) 52%, transparent 48%);
}

.twae-horizontal-timeline.twae-wrapper.twae-bg-multicolor .twae-story:nth-child(4n - 2) .twae-arrow {
    background: linear-gradient(to bottom right, var(--tw-arw-bg2, var(--tw-arw-bg)) 52%, transparent 48%);
}

.twae-horizontal-timeline.twae-wrapper.twae-bg-multicolor .twae-story:nth-child(4n - 1) .twae-arrow {
    background: linear-gradient(to bottom right, var(--tw-arw-bg3, var(--tw-arw-bg)) 52%, transparent 48%);
}

.twae-horizontal-timeline.twae-wrapper.twae-bg-multicolor .twae-story:nth-child(4n) .twae-arrow {
    background: linear-gradient(to bottom right, var(--tw-arw-bg4, var(--tw-arw-bg)) 52%, transparent 48%);
}

.twae-horizontal-timeline.twae-horizontal-bottom.twae-wrapper.twae-bg-multicolor .twae-story:nth-child(4n - 2) .twae-arrow {
    background: linear-gradient(to top left, var(--tw-arw-bg2, var(--tw-arw-bg)) 52%, transparent 48%);
}

.twae-horizontal-timeline.twae-horizontal-bottom.twae-wrapper.twae-bg-multicolor .twae-story:nth-child(4n - 1) .twae-arrow {
    background: linear-gradient(to top left, var(--tw-arw-bg3, var(--tw-arw-bg)) 52%, transparent 48%);
}

.twae-horizontal-timeline.twae-horizontal-bottom.twae-wrapper.twae-bg-multicolor .twae-story:nth-child(4n) .twae-arrow {
    background: linear-gradient(to top left, var(--tw-arw-bg4, var(--tw-arw-bg)) 52%, transparent 48%);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-arrow,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1) .twae-arrow {
    background: linear-gradient(to top left, var(--tw-arw-bg) 52%, transparent 48%);
    top: auto;
    bottom: calc(var(--tw-ibx-size) / 7 - var(--tw-ibx-size) / 3.5 + var(--tw-cbx-bd-top-width) / 3);
    border-width: 0px var(--tw-cbx-bd-bottom-width) var(--tw-cbx-bd-bottom-width) 0px;
}

.twae-horizontal-timeline.twae-wrapper .twae-arrow-line {
    top: calc(0px - var(--tw-ibx-size) * 0.5);
    left: calc(var(--tw-ibx-position) * 1% - var(--tw-ibx-size) * var(--tw-ibx-position) / 100 + var(--tw-ibx-size) / 2 - var(--tw-line-width) / 2);
    height: calc(var(--tw-ibx-size) * 0.5);
    width: var(--tw-line-width);
    border-width: 0px calc(var(--tw-line-bd-width) * 1px) 0px calc(var(--tw-line-bd-width) * 1px);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-arrow-line,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1) .twae-arrow-line {
    top: auto;
    bottom: calc(0px - var(--tw-ibx-size) * 0.5);
}

.twae-horizontal-timeline.twae-wrapper .twae-story-no-icon .twae-arrow-line {
    height: calc(var(--tw-ibx-size) * 0.75);
    top: calc(0px - var(--tw-ibx-size) * 0.75);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-story-no-icon .twae-arrow-line,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1).twae-story-no-icon .twae-arrow-line {
    top: auto;
    bottom: calc(0px - var(--tw-ibx-size) * 0.75);
}

.twae-horizontal-timeline.twae-wrapper .twae-story-no-dot .twae-arrow-line {
    height: calc(var(--tw-ibx-size) - var(--tw-line-width) * 0.5);
    top: calc(0px - var(--tw-ibx-size) + var(--tw-line-width) * 0.5);
}

.twae-horizontal-timeline.twae-wrapper .twae-arrow-line:before,
.twae-horizontal-timeline.twae-wrapper .twae-arrow-line:after {
    width: var(--tw-line-width);
    left: calc(0px - calc(var(--tw-line-bd-width) * 1px));
    border-width: 0px calc(var(--tw-line-bd-width) * 1px) 0px calc(var(--tw-line-bd-width) * 1px);
}

.twae-horizontal-timeline.twae-wrapper .twae-arrow-line:before {
    height: calc(var(--tw-ibx-bd-width));
    top: calc(0px - var(--tw-ibx-bd-width));
}

.twae-horizontal-timeline.twae-wrapper .twae-arrow-line:after {
    height: calc(var(--tw-cbx-bd-top-width));
    bottom: calc(0px - var(--tw-cbx-bd-top-width));
}


/* -------------------- Story Box Arrow Horizontal - END -------------------- */


/* -------------------------- Story Box Horizontal -------------------------- */

.twae-horizontal-timeline.twae-wrapper .twae-slider-container.swiper-container .twae-slider-wrapper {
    margin-top: calc(var(--tw-ibx-size) * 2 + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-slider-container.swiper-container .twae-slider-wrapper {
    margin-top: calc(var(--tw-ibx-size) * 2 + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-story,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1) {
    margin-top: 0px;
    margin-bottom: calc(var(--tw-ibx-size) * 2 + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px);
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-story {
    align-self: flex-end;
}

.twae-horizontal-bottom.twae-wrapper .equal-height-slides .twae-story {
    align-self: stretch;
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(2n + 1) {
    align-self: flex-start;
}

.twae-horizontal-timeline.twae-wrapper .equal-height-slides .twae-story {
    height: auto !important;
}

.twae-horizontal-timeline.twae-wrapper .twae-story.swiper-slide {
    overflow: visible;
}


/* ----------------------- Story Box Horizontal - END ----------------------- */


/* ------------------------ Story Content Horizontal ------------------------ */

.twae-horizontal-timeline.twae-wrapper .twae-content {
    height: 100%;
}

.twae-horizontal-timeline.twae-wrapper.twae-bg-gradient .twae-story .twae-content {
    background-image: linear-gradient(to bottom, var(--tw-cbx-bg), var(--tw-cbx-bg-gradient));
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom.twae-bg-gradient .twae-story .twae-content,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both.twae-bg-gradient .twae-story:nth-child(2n + 1) .twae-content {
    background-image: linear-gradient(to top, var(--tw-cbx-bg), var(--tw-cbx-bg-gradient));
}


/* --------------------- Story Content Horizontal - END --------------------- */


/* --------------Horizontal bottom start ------*/

.twae-horizontal-timeline.twae-horizontal-bottom {
    --tw-cbx-bd-top-width: 0px;
    --tw-cbx-bd-bottom-width: 3px;
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-h-line,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-line-fill.swiper-pagination-progressbar {
    bottom: calc(0px + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px + var(--tw-ibx-size) - var(--tw-line-width) * 0.5);
    top: auto;
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-button-next,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-button-prev {
    bottom: calc(0px + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px + var(--tw-ibx-size) - var(--nav-icon-height) * .5 + var(--lbl-bd-width)*2);
    top: auto;
}

.twae-horizontal-bottom .twae-content {
    border-width: var(--tw-cbx-bd-top-width) var(--tw-cbx-bd-right-width) var(--tw-cbx-bd-bottom-width) var(--tw-cbx-bd-left-width);
}

.twae-horizontal-bottom.twae-label-content-inside .twae-content {
    flex-direction: column-reverse;
}

.twae-horizontal-timeline.twae-wrapper.twae-horizontal-both .twae-story:nth-child(odd) .twae-arrow,
.twae-horizontal-timeline.twae-wrapper.twae-horizontal-bottom .twae-arrow {
    bottom: calc(var(--tw-ibx-size) / 7 - var(--tw-ibx-size) / 3.5 + var(--tw-cbx-bd-bottom-width) / 3);
}

.twae-wrapper.twae-horizontal-bottom .twae-story-no-dot .twae-arrow-line {
    top: auto;
    bottom: calc(0px - var(--tw-ibx-size) + var(--tw-line-width) * 0.5);
}


/* --------------Horizontal bottom End ------*/

.twae-wrapper .year-swiper-container {
    position: absolute;
    width: 100%;
    overflow: hidden;
    z-index: 99;
}

.twae-horizontal-highlighted-timeline.twae-wrapper .year-swiper-container .swiper-slide {
    margin-bottom: 10px;
    margin-top: calc(var(--tw-ibx-size) * 2 + var(--tw-lbl-big-size) + var(--tw-lbl-small-size) + var(--tw-lbl-gap) * 2 + 20px + var(--lbl-bd-width)*2) !important;
    overflow: visible;
    opacity: 1;
    transition: opacity .6s ease-in-out;
}

@media (min-width: 768px) {
    .twae-horizontal-highlighted-timeline.twae-wrapper .thumb .twae-content {
        display: block;
    }
    .twae-horizontal-highlighted-timeline.twae-wrapper .thumb .twae-media {
        margin-right: 10px;
        float: left;
        width: calc(var(--tw-cbx-img-width));
        max-width: calc(50% - 10px);
    }
    .twae-horizontal-highlighted-timeline.twae-wrapper :not(.twae-popup-bg) .thumb .twae-media iframe,
    .twae-horizontal-highlighted-timeline.twae-wrapper :not(.twae-popup-bg) .thumb .twae-media img {
        float: left;
        width: calc(100% - (var(--tw-cbx-img-margin-left) + var(--tw-cbx-img-margin-right)));
        object-fit: cover;
        object-position: center;
    }
    .twae-horizontal-highlighted-timeline.twae-wrapper:not([data-enable-popup="yes"]) .thumb .twae-content:not(.twae-hg-image-not) .twae-title {
        display: inline-block;
        min-width: 50%;
        width: calc(100% - var(--tw-cbx-img-width) - 10px);
    }
    .twae-horizontal-highlighted-timeline.twae-wrapper .thumb .twae-content:not(.twae-hg-image-not) .twae-description {
        display: inline-block;
        min-width: 50%;
        width: calc(100% - var(--tw-cbx-img-width) - 10px);
    }
}

@media (max-width: 767px) {
    .twae-horizontal-highlighted-timeline.twae-wrapper .year-swiper-container .swiper-slide:where(.swiper-slide-next, .swiper-slide-prev) {
        opacity: 0;
    }
}

.twae-horizontal-highlighted-timeline.twae-wrapper .swiper-slide-active .twae-label-big {
    transition: all .2s ease-in;
    color: var(--tw-highlighted-color);
}

.twae-horizontal-highlighted-timeline.twae-wrapper .swiper-slide-active .twae-icon,
.twae-horizontal-highlighted-timeline.twae-wrapper .swiper-slide-active .twae-icondot {
    transition: all .2s ease-in;
    background: var(--tw-highlighted-color) !important;
}

.twae-horizontal-navigationBar .twae-year-nav {
    border: 1px solid;
    border-color: var(--tw-ybx-text-color);
    padding: 4px;
    text-align: center;
    color: var(--tw-ybx-text-color);
}

.twae-horizontal-navigationBar.twae-horizontal-navigation-center .twae-year-nav:first-child {
    margin-left: auto !important;
}

.twae-horizontal-navigationBar.twae-horizontal-navigation-center .twae-year-nav:last-child {
    margin-right: auto !important;
}

.twae-horizontal-navigationBar.twae-horizontal-navigation-right .twae-year-nav:first-child {
    margin-left: auto !important;
}

.twae-horizontal-navigationBar .twae-year-nav.active {
    border: 2px solid;
    border-color: var(--tw-ibx-color);
    font-weight: bold;
    color: var(--tw-ibx-color)
}

.twae-horizontal-navigationBar {
    overflow: hidden;
    position: relative;
    width: calc(100% - 40px);
    margin: 0 20px;
    padding: 2px 5px;
    display: flex;
}

.twae-hor-nav-wrapper :where(.swiper-button-prev, .swiper-button-next) {
    display: none;
}

.twae-hor-nav-wrapper {
    position: relative;
    width: calc(100% - 32px);
    margin: 0 16px 20px 16px;
}

.twae-hor-nav-wrapper .twae-horizontal-navigationBar .swiper-wrapper,
.twae-horizontal-timeline.twae-wrapper .twae-slider-container.swiper-container .swiper-wrapper,
.twae-horizontal-timeline.twae-wrapper .year-swiper-container .swiper-wrapper {
    overflow: visible !important;
}

.twae-hor-nav-wrapper .swiper-button-next,
.twae-hor-nav-wrapper .swiper-button-prev {
    position: absolute;
    transform: translateY(-50%);
    margin-top: 0px;
    width: auto;
    height: auto;
    font-size: 16px;
}

.twae-hor-nav-wrapper :where(.swiper-button-next, .swiper-button-prev)::after {
    content: '';
}

.twae-hor-nav-wrapper .swiper-button-next,
.twae-hor-nav-wrapper .swiper-container-rtl .swiper-button-prev {
    right: -16px;
}

.twae-hor-nav-wrapper .swiper-button-prev,
.twae-hor-nav-wrapper .swiper-container-rtl .swiper-button-next {
    left: -16px;
}

.twae-hor-nav-wrapper .swiper-button-next,
.twae-hor-nav-wrapper .swiper-button-prev {
    background-image: none !important;
}

.twae-hor-nav-wrapper .twae-nav-next i,
.twae-hor-nav-wrapper .twae-nav-prev i {
    color: var(--tw-ybx-text-color);
    display: block;
}

@media screen and (max-width:1024px) {
    .twae-horizontal-navigation-right .twae-horizontal-navigation-items,
    .twae-horizontal-navigation-center .twae-horizontal-navigation-items {
        justify-content: left !important;
    }
}