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

.ctl-horizontal-timeline {
    --ctw-ibx-position: 50;
    --ctw-ybx-size: 50px;
    --ctw-ybx-text-size: 16px;
    --ctw-cbx-text-align: center;
    --ctw-cbx-img-order: 0;
    --nav-icon-height: 30px;
    --nav-icon-width: 30px;
    --nav-icon-color: var(--ctw-line-bg, #222);
    --nav-icon-radius: 0;
    --nav-icon-bd-width: 0px;
    --nav-icon-bd-clr: var(--ctw-line-bg);
    --nav-icon-bd-style: solid;
    overflow: visible;
    --ctw-ibx-radius: 0;
    padding: 0px;
    max-width: 100%;
    --ctw-cbx-img-padding: 10px 10px 10px 10px;
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-default, .ctl-design-1) {
    --ctw-cbx-title-padding: 15px 0px 5px 0px;
    --ctw-cbx-des-padding: 0px;
    --ctw-cbx-padding: 10px;
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default, .ctl-design-1) {
    --ctw-ybx-size: 75px;
    --ctw-ybx-text-size: 19px;
    --nav-icon-bd-width: 2px;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-3 {
    --ctw-cbx-radius: 0px 0px 0px 0px;
    --ctw-cbx-padding: 0px;
    --ctw-cbx-des-padding: 0px 15px 0px 15px;
    --ctw-cbx-bd-top-width: 0px;
    --ctw-cbx-bg: #fff;
    --ctw-cbx-shadow: 0px;
    --ctw-cbx-title-font-weight: 500;
    --ctw-cbx-text-align: left;
    --ctw-cbx-date-font-weight: 400;
    --ctw-cbx-title-padding: 0px 15px 15px 15px;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 {
    --ctw-cbx-radius: 8px 8px 5px 5px;
    --ctw-cbx-bd-top-width: 0px;
    --ctw-cbx-bg: #fff;
    --ctw-cbx-padding: 10px;
    --ctw-cbx-shadow: 0 2px 8px -2px rgba(0, 0, 0, .3);
    --ctw-cbx-des-padding: 0px;
    --nav-icon-bd-width: 2px;
    --ctw-lbl-justify: initial;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4.dark-skin {
    --ctw-cbx-des-background: transparent;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5 {
    --ctw-ibx-radius: 50;
    --ctw-cbx-text-align: left;
    --ctw-cbx-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
    --ctw-cbx-date-font-weight: 400;
    --ctw-cbx-title-color: #000000;
    --ctw-cbx-title-font-size: 22px;
    --ctw-cbx-title-font-weight: 400;
    --ctw-cbx-img-order: -1;
    --nav-icon-bd-width: 2px;
    --ctw-cbx-des-padding: 0px 15px 15px 15px;
    --ctw-line-width: 2px;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5.light-skin {
    --ctw-cbx-img-padding: 10px 10px 10px 10px;
    --ctw-line-bg: #aeaeae;
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-design-6, .ctl-design-8) {
    --ctw-cbx-padding: 10px;
    --ctw-cbx-title-padding: 5px 5px;
    --ctw-cbx-img-padding: 5px 5px 5px 5px;
    --ctw-cbx-des-padding: 0px 5px;
    --ctw-cbx-text-align: left;
    --ctw-cbx-bd-top-width: 1px;
    --ctw-cbx-bd-right-width: 1px;
    --ctw-cbx-bd-bottom-width: 1px;
    --ctw-cbx-bd-left-width: 1px;
    --ctw-cbx-bd-color: #000;
    --ctw-cbx-title-color: var(--ctw-cbx-des-color);
    --ctw-ibx-size: 45px;
    --ctw-ybx-size: 70px;
    --ctw-line-width: 2px;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 {
    --ctw-cbx-date-font-weight: 500;
    --ctw-cbx-title-font-size: 15px;
    --ctw-cbx-title-font-weight: 500;
    --ctw-ybx-size: 60px;
    --ctw-ybx-text-size: 15px;
    --ctw-ybx-text-weight: 500;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-1 {
    --ctw-ybx-size: 65px;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-1.light-skin {
    --ctw-cbx-padding: 0px 0px 0px 0px;
    --ctw-cbx-img-padding: 10px 10px 10px 10px;
}

.ctl-wrapper .ctl-horizontal-timeline.dark-skin.ctl-design-1 .ctl-description {
    background-color: var(--ctw-first-story-color, var(--ctw-second-story-color));
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-1 .ctl-icon {
    border-radius: 50%;
    box-shadow: 0 0 0 3px white, inset 0 0 0 2px rgba(0, 0, 0, 0.05), 0 0 0 6px var(--ctw-line-bg);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-1 .ctl-year-label.ctl-year-text {
    border-radius: 50%;
}

.ctl-wrapper .ctl-horizontal-timeline.dark-skin:where(.ctl-default,.ctl-design-1) .swiper-slide-active :where(.ctl-label-big, .ctl-label-small, .ctl-label-small a) {
    color: var(--ctw-first-story-color)!important;
}

.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-wrapper:where(.ctl-default,.ctl-design-1).dark-skin {
    --ctw-cbx-des-color: #ffffff;
    --ctw-cbx-title-color: #ffffff;
}

.ctl-wrapper .ctl-horizontal-wrapper.dark-skin.ctl-design-2 {
    --ctw-cbx-title-color: #ffffff;
    --ctw-cbx-des-color: #ffffff;
}

.ctl-wrapper .ctl-horizontal-wrapper.light-skin.ctl-design-2 {
    --ctw-cbx-title-color: #ffffff;
    --ctw-cbx-img-padding: 0px 0px 0px 0px;
}

.ctl-wrapper .ctl-horizontal-wrapper.dark-skin.ctl-design-4 {
    --ctw-cbx-img-bg: #000000;
    --ctw-cbx-title-color: #ffffff;
    --ctw-cbx-des-color: #ffffff;
}

.ctl-wrapper .ctl-horizontal-wrapper.light-skin.ctl-design-4 {
    --ctw-arw-bg: #aeaeae;
}

.ctl-wrapper .ctl-horizontal-wrapper.dark-skin.ctl-design-5 {
    --ctw-cbx-des-background: #ffffff;
    --ctw-cbx-bd-color: #000000;
    --ctw-cbx-des-color: #000000;
}

.ctl-wrapper .ctl-horizontal-wrapper.dark-skin.ctl-design-6 {
    --ctw-cbx-des-background: #ffffff;
    --ctw-cbx-title-color: #000000;
    --ctw-cbx-des-color: #000000;
}

.ctl-wrapper .ctl-horizontal-timeline.light-skin:not(.ctl-design-6, .ctl-design-8) {
    --ctw-second-story-color: #aeaeae;
    --ctw-first-story-color: #aeaeae;
    --ctw-ibx-color: #eaeaea;
    --ctw-cbx-bd-top-width: 0px;
    --ctw-cbx-bd-right-width: 0px;
    --ctw-cbx-bd-bottom-width: 0px;
    --ctw-cbx-bd-left-width: 0px;
}

.ctl-wrapper .ctl-horizontal-timeline.light-skin.ctl-design-3 {
    --ctw-arw-bg: #aeaeae;
}

.ctl-wrapper .ctl-horizontal-wrapper.light-skin:where(.ctl-design-6, .ctl-design-8) {
    --ctw-cbx-bd-color: #aeaeae;
    --ctw-ibx-color: #ffffff;
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-default,.ctl-design-1) .ctl-labels :where(.ctl-label-big, .ctl-label-small) {
    color: var(--ctw-lbel-big-color, #000);
}

.ctl-wrapper .ctl-horizontal-wrapper:not(.dark-skin) .ctl-story.odd :where(.ctl-label-big, .ctl-label-small) {
    --ctw-lbl-big-color: var(--ctw-lbel-big-color, var(--ctw-first-story-color));
}

.ctl-wrapper .ctl-horizontal-wrapper:not(.dark-skin) .ctl-story.even :where(.ctl-label-big, .ctl-label-small) {
    --ctw-lbl-big-color: var(--ctw-lbel-big-color, var(--ctw-second-story-color));
}

.ctl-wrapper .ctl-horizontal-timeline {
    width: 100%;
    display: block;
    position: relative;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-2:not(.light-skin) .ctl-title a {
    color: var(--ctw-cbx-title-color);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5 .ctl-icon {
    border: 1px solid var(--ctw-arw-bg);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5 .ctl-icon i,
.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5 .ctl-icon svg path {
    color: var(--ctw-arw-bg);
    fill: var(--ctw-arw-bg);
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-design-6, .ctl-design-8) .ctl-icon svg,
.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-design-6, .ctl-design-8) .ctl-icon img {
    transform: rotate(316deg);
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-design-6, .ctl-design-8) .ctl-icon img {
    height: 20px;
    width: 20px;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5 .ctl-title,
.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5:not(.light-skin) .ctl-icon {
    background-color: var(--ctw-cbx-des-background)!important;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5 .ctl-content {
    border: 1px solid var(--ctw-arw-bg);
    padding: 5px;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5 .ctl-arrow {
    background: var(--ctw-cbx-des-background)!important;
    border: 1px solid;
    border-image: linear-gradient(to bottom right, var(--ctw-arw-bg, var(--ctw-cbx-title-bg)) 51%, transparent 48%);
    border-image-slice: 1;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5 .ctl-labels {
    text-align: left;
    padding: 5px;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5 .ctl_read_more {
    align-self: start;
    border-color: var(--ctw-arw-bg);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5.light-skin .ctl-content {
    border: 1px solid #aeaeae;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5.light-skin .ctl-arrow {
    border-image: linear-gradient(to bottom right, #aeaeae 52%, transparent 48%);
    border-image-slice: 1;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-5.light-skin .ctl-icon {
    border: 1px solid #aeaeae;
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-design-6, .ctl-design-8).light-skin .ctl-labels {
    border: 2px solid #aeaeae;
    background-color: #aeaeae;
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8).light-skin .ctl-icon {
    border: 2px solid #aeaeae;
}

.ctl-wrapper .ctl-horizontal-timeline.dark-skin:not(.ctl-default,.ctl-design-1, .ctl-design-2, .ctl-design-4, .ctl-design-5) .ctl-content {
    background: #ffffff;
}

.ctl-wrapper .ctl-horizontal-timeline.dark-skin:not(.ctl-default,.ctl-design-1, .ctl-design-3, .ctl-design-5, .ctl-design-6, .ctl-design-8) .ctl-story .ctl-content {
    background-color: var(--ctw-first-story-color, var(--ctw-second-story-color));
}

.ctl-wrapper .ctl-horizontal-wrapper.light-skin :where(.ctl-icondot, .ctl-icon) {
    background: #aeaeae;
}

.ctl-wrapper .ctl-horizontal-timeline.light-skin:not(.ctl-default,.ctl-design-1, .ctl-design-3, .ctl-design-4, .ctl-design-5, .ctl-design-6, .ctl-design-7, .ctl-design-8) .ctl-story .ctl-title,
.ctl-wrapper .ctl-horizontal-timeline.light-skin .ctl-icondot {
    background: #aeaeae!important;
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8).dark-skin .ctl-arrow {
    background: linear-gradient(to bottom right, #ffffff 52%, transparent 48%);
}

.ctl-wrapper .ctl-horizontal-timeline.light-skin .ctl-story :where(.ctl-label-big, .ctl-label-small),
.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7.light-skin .ctl-story .ctl-title a,
.ctl-wrapper .ctl-horizontal-timeline.light-skin:where(.ctl-design-3, .ctl-design-4, .ctl-design-5, .ctl-design-6, .ctl-design-8) .ctl-story .ctl-title a {
    color: #aeaeae!important;
}

.ctl-wrapper .ctl-horizontal-timeline.light-skin:not(.ctl-default,.ctl-design-1, .ctl-design-4, .ctl-design-6, .ctl-design-8) .ctl-arrow {
    background: linear-gradient(to bottom right, #aeaeae 52%, transparent 48%);
}

.ctl-wrapper .ctl-horizontal-timeline.light-skin.ctl-design-7 .ctl-arrow {
    background: linear-gradient(to bottom, #aeaeae 0, rgba(229, 229, 229, 0) 100%)!important;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-3.light-skin .ctl-story :where(.ctl-label-big, .ctl-label-small) {
    color: #ffffff!important;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-3.light-skin .ctl-content {
    border-top: 4px solid #aeaeae !important;
    border: 1px solid #aeaeae;
}

.ctl-wrapper .ctl-horizontal-wrapper.light-skin.ctl-design-3 .ctl-label-big:after {
    border-top: 8px solid #aeaeae;
}

.ctl-wrapper .ctl-horizontal-wrapper.light-skin:where(.ctl-design-6, .ctl-design-8) .ctl-label-big:after {
    background: #aeaeae;
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-design-6, .ctl-design-8):not(.dark-skin) .ctl-story .ctl-title a {
    color: var(--ctw-arw-bg);
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .swiper-backface-hidden .swiper-slide {
    text-align: right;
    display: flex;
    justify-content: center;
}

.ctl-wrapper .ctl-horizontal-timeline.cool-timeline-wrapper:where(.ctl-design-6, .ctl-design-8) .ctl-icon {
    border: 2px solid var(--ctw-line-bg);
    box-shadow: inset 0 0 0 2px #fff;
    transform: rotate(45deg);
    top: calc(var(--ctw-ibx-size) / 1.3 - var(--ctw-ibx-size) * 2);
    left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 1px);
}

.ctl-wrapper .ctl-horizontal-timeline.cool-timeline-wrapper:where(.ctl-design-6, .ctl-design-8) .ctl-arrow {
    background: linear-gradient(to bottom right, var(--ctw-cbx-des-background) 52%, transparent 48%);
    border-color: var(--ctw-cbx-bd-color);
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-design-6, .ctl-design-8) .ctl-year-label.ctl-year-text {
    top: -13px;
    border: 2px solid var(--ctw-line-bg);
    box-shadow: inset 0 0 0 2px #fff;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-6 .ctl-icon i {
    transform: rotate(314deg);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-6 .ctl-label-big:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: calc(var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 16px - var(--ctw-cbx-date-font-size));
    background: var(--ctw-line-bg);
    transform: translate(-50%, 0px);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-6 .ctl-label-full .ctl-label-big:after{
    height: calc(var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 16px - var(--ctw-cbx-date-font-size) + var(--ctw-ibx-size) / 4);
}


.ctl-wrapper .ctl-horizontal-timeline.cool-timeline-wrapper:where(.ctl-design-6, .ctl-design-8) .ctl-icondot {
    left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 85 + var(--ctw-ibx-size) / 2.9);
    transform: rotate(45deg);
    top: calc(var(--ctw-ibx-size) * 2 - var(--ctw-ibx-size) * 3);
    border: 2px solid var(--ctw-line-bg);
    box-shadow: inset 0 0 0 2px #fff;
}

.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-timeline:where(.ctl-design-2, .ctl-design-4, .ctl-design-3) .ctl-button-prev,
.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-timeline:where(.ctl-design-2, .ctl-design-4, .ctl-design-3) .ctl-button-next {
    border: 3px solid var(--ctw-line-bg);
    border-radius: 3px;
}

.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .ctl-button-prev,
.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .ctl-button-next {
    border: 2px solid var(--ctw-line-bg);
    border-radius: 3px;
}

.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-timeline:where(.ctl-design-3, .ctl-design-4) .ctl-button-prev,
.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-timeline:where(.ctl-design-3, .ctl-design-4) .ctl-button-next {
    background-color: var(--ctw-line-bg);
    color: rgb(255, 255, 255);
}

.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-timeline.ctl-design-4 .ctl-button-prev:hover,
.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-timeline.ctl-design-4 .ctl-button-next:hover {
    border: 1px solid var(--ctw-line-bg);
    border-radius: 3px;
    background-color: #ffffff!important;
}

.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-timeline.ctl-design-4 .ctl-button-prev:hover i,
.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-timeline.ctl-design-4 .ctl-button-next:hover i {
    color: var(--ctw-line-bg);
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-default,.ctl-design-1) .ctl-description p {
    align-items: center;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-3 .ctl-description p {
    align-items: flex-start;
}

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

.ctl-wrapper-inside {
    overflow: hidden;
    position: relative;
}


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


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

.ctl-wrapper .ctl-horizontal-timeline .ctl-slider-container {
    width: calc(100% - var(--ctw-cbx-space));
    margin: 0 calc(var(--ctw-cbx-space) * 0.5px);
    display: block;
    position: relative;
}

.ctl-wrapper .ctl-horizontal-timeline .ctl-slider-container.swiper-container {
    overflow: hidden;
    transition: height .3s ease-in-out;
}



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


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

.ctl-wrapper .ctl-horizontal-timeline .ctl-button-prev,
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-next {
    position: absolute;
    top: calc(calc(0px + var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 20px + var(--ctw-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) - 6px);
    line-height: 1em;
    border: var(--nav-icon-bd-width) var(--nav-icon-bd-style) var(--nav-icon-bd-clr);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9;
    cursor: pointer;
    border-radius: 50%;
    font-size: 17px;
}

.ctl-wrapper .ctl-horizontal-timeline :where(.ctl-button-prev,.ctl-button-next).ctl-btn-click-effect::after{
    content: '';
    position: absolute;
    width: calc(100% * 1.9);
    height: calc(100% * 1.9);
    background-color: var(--ctw-line-bg);
    transform: scale3d(1.2, 1.2, 1);
    animation: ctl-btn-effect 0.6s forwards;
    z-index: -1;
    border-radius: 50%;
}

.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-timeline:where(.ctl-design-2,.ctl-design-4,.ctl-design-3) :where(.ctl-button-prev,.ctl-button-next).ctl-btn-click-effect::after{
    border-radius: 3px;
}

@keyframes ctl-btn-effect {
    0% {
        transform: scale3d(0.3, 0.3, 1);
    }
    25%, 50% {
        opacity: .2;
    }
    100% {
        opacity: 0;
        transform: scale3d(1.2, 1.2, 1);
    }
}

.ctl-wrapper .ctl-horizontal-timeline .ctl-button-prev svg path,
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-next svg path {
    fill: var(--nav-icon-color);
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-3, .ctl-design-4) .ctl-button-prev svg path,
.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-3, .ctl-design-4) .ctl-button-next svg path {
    fill: #ffffff;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-button-prev:hover svg path,
.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-button-next:hover svg path {
    fill: var(--nav-icon-color);
}

.ctl-wrapper .ctl-horizontal-timeline .ctl-button-prev:hover svg path,
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-next:hover svg path {
    fill: #ffffff;
}

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

.ctl-wrapper .ctl-horizontal-timeline .ctl-button-prev:hover,
.ctl-wrapper .ctl-horizontal-timeline .ctl-button-next:hover {
    background: var(--ctw-line-bg)!important;
    color: #ffffff!important;
    border-color: var(--ctw-line-bg)!important;
}

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

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

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


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


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

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

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-story-line {
    top: auto;
    bottom: calc(0px - var(--ctw-ibx-size) - var(--ctw-line-width) / 2);
}


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


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

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

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

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

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

.ctl-wrapper .ctl-line-filler .ctl-story-line {
    display: none;
}

.ctl-wrapper .ctl-horizontal-timeline.cool-timeline-wrapper.ctl-design-6 .ctl-year-swiper-slide.ctl-in-view-port :where(.ctl-icondot,.ctl-icon){
    border-color: var(--ctw-line-filling-color);
}

.ctl-wrapper .ctl-horizontal-timeline.cool-timeline-wrapper:where(.ctl-design-1, .ctl-design-2) .ctl-story.ctl-in-view-port .ctl-icon{
    box-shadow: 0 0 0 3px white, inset 0 0 0 2px rgba(0, 0, 0, 0.05), 0 0 0 6px var(--ctw-line-filling-color);
}

.ctl-wrapper .ctl-horizontal-timeline.cool-timeline-wrapper.ctl-design-6 .ctl-year-swiper-slide.ctl-in-view-port .ctl-labels{
    border-color: var(--ctw-line-filling-color);
}

.ctl-wrapper .ctl-horizontal-timeline.cool-timeline-wrapper.ctl-design-6 .ctl-year-swiper-slide.ctl-in-view-port .ctl-label-big:after{
    background: var(--ctw-line-filling-color);
}


.ctl-wrapper .ctl-horizontal-timeline.cool-timeline-wrapper:where(.ctl-design-2, .ctl-design-6) .ctl-year-label.ctl-in-view-port{
    box-shadow: 0 0 0 2px white, inset 0 0 0 2px rgba(0, 0, 0, 0.05), 0 0 0 5px var(--ctw-line-filling-color);
}


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


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

.ctl-wrapper .ctl-horizontal-timeline .ctl-year {
    position: absolute;
    top: calc(0px - 40px - var(--ctw-line-width) / 2);
    margin: 0;
    justify-content: flex-start;
    width: auto;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-year {
    top: auto;
    bottom: calc(0px - var(--ctw-ibx-size) + var(--ctw-line-width) / 2 - (var(--ctw-ybx-size) * ((70 + var(--ctw-ibx-radius) / 1.25) / 100)) / 2);
}

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

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

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

.ctl-wrapper .ctl-horizontal-wrapper .ctl-year-label.ctl-year-text {
    position: absolute;
    left: calc(100% - var(--ctw-ybx-size) * 1.6);
    box-shadow: 0 0 0 2px white, inset 0 0 0 2px rgba(0, 0, 0, 0.05), 0 0 0 5px var(--ctw-line-bg);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-4 .ctl-year-label.ctl-year-text{
    left: calc(100% - var(--ctw-ybx-size) * 1.9);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-year-label.ctl-year-text {
    left: calc(100% - var(--ctw-ybx-size) * 1.5);
}

.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-wrapper.ctl-design-4 .ctl-year-label.ctl-year-text {
    width: calc(var(--ctw-ybx-size) + 10px);
    height: calc(var(--ctw-ybx-size) * ((70 + var(--ctw-ibx-radius) / 1.25) / 100));
    bottom: 0;
    top: -34px;
    box-shadow: unset;
}

.ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-wrapper.ctl-design-3 .ctl-year-label.ctl-year-text {
    box-shadow: unset;
    width: calc(var(--ctw-ybx-size) + 10px);
    height: calc(var(--ctw-ybx-size) * ((80 + var(--ctw-ibx-radius) / 1.25) / 100));
    top: calc(1px - (var(--ctw-ybx-size) * ((80 + var(--ctw-ibx-radius) / 1.25) / 100)) / 2);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-year-text {
    box-shadow: none;
}


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


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

.ctl-wrapper .ctl-horizontal-timeline .ctl-labels {
    justify-content: var(--ctw-lbl-justify);
    top: calc(0px - (var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap)) - var(--ctw-ibx-size) * 2 + 10px);
    height: calc(var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap));
    text-align: center;
}

.ctl-wrapper .ctl-horizontal-timeline .ctl-labels.ctl-label-full {
    top: calc(0px - (var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap)) - var(--ctw-ibx-size) * 2);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-labels {
    top: auto;
    bottom: calc(0px - (var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap)) - var(--ctw-ibx-size) * 2);
}

.ctl-wrapper .ctl-vertical-wrapper.ctl-horizontal-wrapper:where(.ctl-default,.ctl-design-1) .ctl-story :where(.ctl-label-big, .ctl-label-small) {
    color: var(--ctw-lbl-big-color, var(--ctw-second-story-color));
}


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

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-design-3, .ctl-design-6, .ctl-design-8) :where(.ctl-label-big, .ctl-label-small) {
    color: #ffffff!important;
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-design-3, .ctl-design-6, .ctl-design-8) .ctl-label-small a {
    color: #ffffff!important;
}

.ctl-wrapper .ctl-horizontal-wrapper.dark-skin:where(.ctl-design-3, .ctl-design-6, .ctl-design-8) .ctl-label-big {
    color: #ffffff;
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-default,.ctl-design-1, .ctl-design-3, .ctl-design-6, .ctl-design-7, .ctl-design-8) .ctl-label-small {
    margin-bottom: 0px;
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-design-3, .ctl-design-6, .ctl-design-8) .ctl-labels {
    flex-direction: column;
    justify-content: center !important;
    height: unset;
    top: calc(0px - (var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap)) - var(--ctw-ibx-size) * 1.6);
    display: flex;
    width: auto;
    background: var(--ctw-arw-bg);
    padding: 5px;
}

.ctl-wrapper .ctl-horizontal-wrapper.cool-timeline-wrapper:where(.ctl-design-6, .ctl-design-8) .ctl-labels {
    margin-left: calc(var(--ctw-line-width) / 2);
    border: 2px solid var(--ctw-line-bg);
    box-shadow: inset 0 0 0 2px #fff;
    top: calc(0px - (var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap)) - var(--ctw-ibx-size) * 1.4);
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-design-3, .ctl-design-6, .ctl-design-8) .ctl-labels.ctl-label-full {
    top: calc(0px - (var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap)) - var(--ctw-ibx-size) * 2);
}

.ctl-wrapper .ctl-horizontal-wrapper :where(.ctl-design-3, .ctl-design-6, .ctl-design-8) .ctl-story.odd .ctl-label-big {
    --ctw-lbl-big-color: var(--ctw-lbel-big-color, var(--ctw-first-story-color, var(--ctw-cbx-des-color)));
}

.ctl-wrapper .ctl-horizontal-wrapper :where(.ctl-design-3, .ctl-design-6, .ctl-design-8) .ctl-story.even .ctl-label-big {
    --ctw-lbl-big-color: var(--ctw-lbel-big-color, var(--ctw-second-story-color, var(--ctw-cbx-des-color)));
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-3 .ctl-label-big:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid var(--ctw-arw-bg);
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-default,.ctl-design-1) .ctl-story:nth-child(odd) .ctl-label-big {
    color: var(--ctw-first-story-color, var(--ctw-lbel-big-color));
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-default,.ctl-design-1) .ctl-story:nth-child(even) .ctl-label-big {
    color: var(--ctw-second-story-color, var(--ctw-lbel-big-color));
}


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


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

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .swiper-container .ctl-slider-wrapper {
    height: 100%!important;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-story {
    margin-bottom: calc(var(--ctw-ibx-size) * 2 + var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 20px + var(--lbl-bd-width)*2) !important;
}

.ctl-wrapper .ctl-horizontal-timeline:not(.ctl-design-4) .ctl-story {
    margin-bottom: 10px;
    margin-top: calc(var(--ctw-ibx-size) * 2 + var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 20px + var(--lbl-bd-width)*2) !important;
    display: flex;
    justify-content: center;
}

/* .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1, .ctl-design-6, .ctl-design-8) .ctl-slider-container {
    margin-top: calc(var(--ctw-ibx-size) * 2 + var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 20px + var(--lbl-bd-width)*2 - 15px);
    padding-top: 18px;
} */

/* .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1, .ctl-design-6, .ctl-design-8) .swiper-slide.ctl-story {
    margin-top: 0px !important;
} */


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

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

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


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


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


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

.ctl-wrapper .ctl-horizontal-timeline .ctl-icon {
    left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100);
    top: calc(var(--ctw-ibx-size) / 2 - var(--ctw-ibx-size) * 2);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-3 .ctl-icon {
    left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 1px);
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1, .ctl-design-3, .ctl-design-5, .ctl-design-7) .ctl-icon {
    top: calc(0px - 38px - (var(--ctw-ibx-size) - 2.5px) / 2 - var(--ctw-line-width) / 2);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-icon {
    top: auto;
    bottom: calc(0px - var(--ctw-ibx-size) - (var(--ctw-line-width) * .5) / 4 - (var(--ctw-ibx-size) - 5px) / 2);
}

.ctl-wrapper .ctl-horizontal-timeline .ctl-icondot {
    top: calc(0px -  39px - var(--ctw-ibx-size) / 4 - var(--ctw-line-width) / 2);
    left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100 + var(--ctw-ibx-size) / 4);
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-5, .ctl-default, .ctl-design-1) .ctl-icondot {
    top: calc(0px - 39px - var(--ctw-ibx-size) / 4 - var(--ctw-line-width) / 2);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-icondot {
    top: auto;
    bottom: calc(var(--ctw-ibx-size) * 0.75 - var(--ctw-ibx-size) * 2);
    left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100 + var(--ctw-ibx-size) / 5);
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1) :where(.ctl-icondot, .ctl-icon) {
    --ctw-ibx-radius: 50;
    background-color: #000;
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1) :where(.ctl-media, .swiper-wrapper .swiper-slide) img {
    width: auto;
    max-height: 400px;
    object-fit: contain;
    height: auto;
    object-position: unset;
    min-width: auto;
    margin: auto!important;
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1) .ctp-story-slider {
    overflow: hidden;
    position: relative;
    margin-inline: auto;
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1) .ctp-story-slider img {
    width: 100%;
    object-fit: cover;
}

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

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1) .swiper-slide-active :where(.ctl-icon, .ctl-icondot) {
    --ctw-ibx-size: 55px;
    background: var(--ctw-first-story-color);
    /* top: calc(0px - 38px - (var(--ctw-ibx-size) - 2.5px) / 2 - var(--ctw-line-width) / 2); */
}

/* .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1) .swiper-slide-active .ctl-icondot {
    top: calc(0px -  41px - var(--ctw-ibx-size) / 4 - var(--ctw-line-width) / 2);
} */

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1):not(.light-skin) .swiper-slide-active :where(.ctl-label-big, .ctl-label-small) {
    color: var(--ctw-first-story-color);
}

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

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

.ctl-wrapper .ctl-horizontal-wrapper .ctl-media a {
    width: calc(var(--ctw-cbx-img-width) - (var(--ctw-cbx-img-margin-left) + var(--ctw-cbx-img-margin-right)));
}


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


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

.ctl-wrapper .ctl-horizontal-timeline :where(.ctl-story, .ctl-year-swiper-slide) {
    display: flex;
    justify-content: center;
}

.ctl-wrapper .ctl-nav-swiper .ctl-year-swiper-slide.ctl_previous_slide {
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.ctl-wrapper .ctl-horizontal-timeline:not(.light-skin) :where(.ctl-story, .ctl-year-swiper-slide):nth-child(odd) {
    --ctw-arw-bg: var(--ctw-first-story-color, var(--ctw-cbx-des-color, var(--ctw-cbx-title-color)));
}

.ctl-wrapper .ctl-horizontal-timeline:not(.light-skin) :where(.ctl-story, .ctl-year-swiper-slide):nth-child(even) {
    --ctw-arw-bg: var(--ctw-second-story-color, var(--ctw-cbx-des-color, var(--ctw-cbx-title-color)));
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1) .ctl-story:nth-child(odd) {
    --ctw-arw-bg: var(--ctw-first-story-color, var(--ctw-line-bg));
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1) .ctl-story:nth-child(even) {
    --ctw-arw-bg: var(--ctw-second-story-color, var(--ctw-line-bg));
}

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

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-6 .ctl-arrow {
    top: calc(var(--ctw-ibx-size) / 7 - var(--ctw-ibx-size) / 2.5 + var(--ctw-cbx-bd-top-width) / 3);
}

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

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1) :where(.ctl-arrow-line, .ctl-arrow) {
    display: none;
}

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

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

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


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


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

.ctl-wrapper .ctl-horizontal-timeline .ctl-story {
    margin-top: calc(var(--ctw-ibx-size) * 2 + var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 20px);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-story {
    margin-top: 0px;
    margin-bottom: calc(var(--ctw-ibx-size) * 2 + var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 20px);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-story {
    align-self: flex-end;
}

.ctl-wrapper .ctl-design-4 .equal-height-slides .ctl-story {
    align-self: stretch;
}

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

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


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


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

.ctl-wrapper .ctl-horizontal-timeline .ctl-content {
    flex-flow: row;
    flex-wrap: wrap;
    margin: 0 10px;
    height: 100%;
    width: 100%;
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .ctl-content {
    display: block;
    text-align: left;
    width: 100%;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-3 .ctl-content {
    border-radius: unset;
    border-top: 4px solid var(--ctw-arw-bg) !important;
    border: 1px solid #e1e1e1;
    padding: 10px 0px;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-3 .ctl-media {
    padding-bottom: 15px;
}

.ctl-wrapper .ctl-horizontal-timeline :where(.ctl-media, .full-width, .ctp-media-slider) {
    width: 100%;
    overflow: hidden;
    z-index: 9;
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1) :where(.ctl-media, .full-width) {
    width: 70%;
    margin: 0 auto;
}

.ctl-horizontal-wrapper .ctl-content .ctl-media~.ctl-description,
.ctl-content .full-width~.ctl-description,
.ctl-content .ctp-media-slider~.ctl-description {
    width: 100%;
}

.ctl-wrapper .ctl-horizontal-timeline .ctl-title {
    width: 100%;
    order: unset;
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1) .ctl-title {
    --ctw-cbx-title-text-align: center;
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1, .ctl-design-6, .ctl-design-8) .ctl-story .ctl-title {
    background-color: transparent;
    order: 1;
}

.ctl-wrapper .ctl-horizontal-timeline.dark-skin:not(.ctl-default,.ctl-design-1,  .ctl-design-3, .ctl-design-5, .ctl-design-6, .ctl-design-8) .ctl-story .ctl-content,
.ctl-wrapper .ctl-horizontal-timeline.dark-skin:not(.ctl-default,.ctl-design-1,  .ctl-design-3, .ctl-design-5, .ctl-design-6, .ctl-design-8) .ctl-story .ctl-content .ctl-description {
    background-color: var(--ctw-first-story-color, var(--ctw-second-story-color));
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default, .ctl-design-1, .ctl-design-7) .ctl-icon img {
    border-radius: 50%;
}

.ctl-wrapper .ctl-horizontal-timeline:not(.ctl-design-4, .ctl-default,.ctl-design-1, .ctl-design-6, .dark-skin, .ctl-design-8) .ctl-story:nth-child(odd) .ctl-title {
    background-color: var(--ctw-first-story-color, var(--ctw-cbx-des-color, var(--ctw-cbx-des-background)));
}

.ctl-wrapper .ctl-horizontal-timeline:not(.ctl-design-4, .ctl-default,.ctl-design-1, .ctl-design-6, .dark-skin, .ctl-design-8) .ctl-story:nth-child(even) .ctl-title {
    background-color: var(--ctw-second-story-color, var(--ctw-cbx-des-color, var(--ctw-cbx-des-background)));
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-4, .ctl-design-3, .ctl-design-5) .ctl-story:nth-child(odd) .ctl-title a {
    color: var(--ctw-first-story-color, var(--ctw-cbx-title-color));
}

.ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-4, .ctl-design-3, .ctl-design-5) .ctl-story:nth-child(even) .ctl-title a {
    color: var(--ctw-second-story-color, var(--ctw-cbx-title-color));
}

.ctl-wrapper .ctl-horizontal-timeline.dark-skin:where(.ctl-design-4, .ctl-design-3, .ctl-design-5) .ctl-story .ctl-title a {
    color: var(--ctw-cbx-title-color);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-3 .ctl-title {
    order: 1;
    background-color: var(--ctw-cbx-des-background) !important;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-title {
    background-color: #ffffff00 !important;
    text-align: center;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-story.even .ctl-content {
    padding-top: 40px;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-story .ctl-content {
    padding-top: 90px;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-label-full~.ctl-content {
    padding-top: 115px;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-story.even .ctl-label-full~.ctl-content {
    padding-top: 65px;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-story:nth-child(odd) .ctl-title :where(a, a:hover) {
    color: var(--ctw-first-story-color);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-story.even .ctl-title :where(a, a:hover) {
    color: var(--ctw-second-story-color);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 :where(.ctl-media, .ctp-media-slider, .full-width, .ctl-description) {
    display: none !important;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-content {
    background-color: #ffffff00 !important;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-icondot {
    border-radius: 50%;
}


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


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

.ctl-horizontal-timeline.ctl-design-4 {
    --ctw-cbx-bd-top-width: 0px;
    --ctw-cbx-bd-bottom-width: 3px;
}

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

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

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-button-next:hover,
.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-button-prev:hover {
    background-color: var(--ctw-line-bg);
    color: rgb(255, 255, 255);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-content {
    border-width: var(--ctw-cbx-bd-top-width) var(--ctw-cbx-bd-right-width) var(--ctw-cbx-bd-bottom-width) var(--ctw-cbx-bd-left-width);
    border-color: var(--ctw-first-story-color, var(--ctw-cbx-bd-color));
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-story:nth-child(odd) .ctl-content {
    border-color: var(--ctw-first-story-color, var(--ctw-cbx-des-color, var(--ctw-cbx-bd-color)));
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-story:nth-child(even) .ctl-content {
    border-color: var(--ctw-second-story-color, var(--ctw-cbx-des-color, var(--ctw-cbx-bd-color)));
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-arrow {
    content: '';
    width: 4px;
    height: calc(var(--ctw-ibx-size) - var(--ctw-line-width) * .5);
    background: var(--ctw-arw-bg);
    top: 100%;
    transform: rotate(1deg);
    transform: translate(-50%, 0px);
    z-index: -9;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-3 .ctl-arrow {
    top: calc(var(--ctw-ibx-size) / 7 - var(--ctw-ibx-size) / 2.5 + var(--ctw-cbx-bd-top-width) / 3);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-arrow {
    transform: rotate(360deg);
    width: 2px;
    height: 36px;
    background: linear-gradient(to bottom, var(--ctw-arw-bg) 0, rgba(229, 229, 229, 0) 100%);
    top: calc(var(--ctw-ibx-size)/ 6 - var(--ctw-ibx-size) + var(--ctw-cbx-bd-top-width)/ 1 - 5px);
    left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 150 + var(--ctw-ibx-size) / 2.2 - var(--ctw-ibx-size) / 7);
    z-index: 1;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-story:nth-child(odd) .ctl-arrow {
    background: linear-gradient(to bottom, var(--ctw-arw-bg) 0, rgba(229, 229, 229, 0) 100%);
    height: 92px;
}


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

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

.ctl-nav-slider-container {
    position: relative;
    top: 148px;
    overflow: visible !important;
}

.ctl-nav-slider-wrapper {
    position: absolute;
}

.ctl-wrapper .ctl-horizontal-wrapper .ajax_load_more {
    display: none;
}

.ctl-wrapper .ctl-category-container.ctl-category-design-4 {
    position: absolute;
    bottom: -52px;
    left: calc(50% - 102px);
    margin-inline: 0;
}

.ctl-wrapper .ctl-category-container:not(.ctl-category-dropdown).ctl-category-design-4 {
    left: 50%;
    transform: translateX(-50%);
}

.ctl-wrapper .ctl-navigation-bar.ctl-nav-design-4 {
    position: absolute;
    bottom: -25px;
    width: 100%;
    left: 0px;
}

.ctl-wrapper .ctl-category-container~.ctl-navigation-bar.ctl-nav-design-4 {
    bottom: -110px;
}

.ctl-wrapper :where(.ctl-navigation-bar, .ctl-category-container)~.cool-timeline-wrapper.ctl-design-4 {
    margin-bottom: 65px;
}

.ctl-wrapper .ctl-category-container~.ctl-navigation-bar~.cool-timeline-wrapper.ctl-design-4 {
    margin-bottom: 160px;
}

.ctl-wrapper .ctl-navigation-bar button.ctl-nav-dropdown-button ~ ul.ctl-nav{
    padding: 0px;
    background: #fff;
}

.ctl-wrapper .ctl-navigation-bar button.ctl-nav-dropdown-button ~ ul.ctl-nav li{
    padding: 3px 19px;
    margin: 0px 0px;
}

.ctl-wrapper .ctl-horizontal-timeline .ctp-media-slider .ctp-story-slider .ctl_glightbox_gallery {
    width: 100%;
}

@media (min-width: 768px) {
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .ctl-media,
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .ctp-media-slider,
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .full-width {
        margin-right: 10px;
        float: left;
        width: calc(var(--ctw-cbx-img-width));
        max-width: calc(35% - 10px);
    }
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .ctl-media iframe,
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .ctl-media img {
        float: left;
        width: calc(100% - (var(--ctw-cbx-img-margin-left) + var(--ctw-cbx-img-margin-right)));
        object-fit: cover;
        object-position: center;
    }
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .ctl-story:not(.ctl-no-media) .ctl-content .ctl-title {
        display: inline-block;
        min-width: 65%;
        width: calc(100% - var(--ctw-cbx-img-width) - 10px)!important;
    }
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .ctl-content .ctl-media~.ctl-description,
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .ctl-content .ctp-media-slider~.ctl-description,
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .ctl-content .full-width~.ctl-description {
        display: inline-block;
        min-width: 65%;
        width: calc(100% - var(--ctw-cbx-img-width) - 10px)!important;
    }
    .ctl-wrapper .ctl-horizontal-timeline.ctl-design-5 .ctl-arrow {
        left: calc(var(--ctw-ibx-size) + 10px);
    }
    .ctl-wrapper .ctl-horizontal-timeline.ctl-design-5 .ctl-icon {
        left: calc(var(--ctw-ibx-size) + 2px);
    }
    .ctl-wrapper .ctl-horizontal-timeline.ctl-design-5 .ctl-labels {
        left: calc(var(--ctw-ibx-size));
        transform: translate(-25%);
    }
    .ctl-wrapper .ctl-horizontal-timeline.ctl-design-5 .ctl-icondot {
        left: calc(var(--ctw-ibx-size) + 10px);
    }
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-labels {
    top: unset;
    z-index: 9;
    padding-top: 70px;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-story.odd .ctl-label-big {
    color: var(--ctw-lbl-big-color);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-story.even .ctl-label-big {
    color: var(--ctw-lbl-big-color);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-story.even .ctl-labels {
    padding-top: 20px;
}

.ctl-wrapper .ctl-horizontal-wrapper:not(.ctl-default,.ctl-design-1, .ctl-design-6, .ctl-design-8) .ctl-year-label.ctl-year-text {
    top: calc(0px - (var(--ctw-ybx-size) * ((61 + var(--ctw-ibx-radius) / 1.25) / 100)) / 2);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-1 .ctl-year-label.ctl-year-text {
    top: calc(0px - var(--ctw-ybx-size) / 2);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-2 .ctl-icon {
    box-shadow: 0 0 0 2px white, inset 0 0 0 2px rgba(0, 0, 0, 0.05), 0 0 0 5px var(--ctw-line-bg);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-2 .ctl-icon {
    width: calc(var(--ctw-ibx-size) - 10px);
    height: calc(var(--ctw-ibx-size) - 10px);
    left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 120);
    top: calc(var(--ctw-ibx-size) / 2 - var(--ctw-ibx-size) * 1.9);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-icon {
    z-index: 2;
    border-radius: 50%;
    left: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 115);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-2 .ctl-content {
    border: 1px solid #f0f2f4;
    border-top: 0px;
    padding: 0px;
    border-radius: unset;
}

.ctl-wrapper .ctl-horizontal-wrapper:not(.ctl-design-5, .ctl-design-6, .ctl-design-8).dark-skin .ctl-content {
    border: unset;
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-default,.ctl-design-1) .ctl-year-label.ctl-year-text {
    box-shadow: unset;
    border-radius: 50%;
}

.ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-default, .ctl-design-1) .ctl-year-text {
    width: var(--ctw-ybx-size);
    height: calc(var(--ctw-ybx-size) * ((100 + var(--ctw-ibx-radius) / 1.25) / 100));
}

.ctl-horizontal-navigationBar .ctl-year-nav {
    border: 1px solid;
    border-color: var(--ctw-ybx-bd-color);
    padding: 4px;
    text-align: center;
    color: var(--ctw-ybx-text-color);
    filter: brightness(0.9);
    background-color: var(--ctw-ybx-bg);
}

.ctl-horizontal-navigationBar .ctl-year-nav.active {
    font-weight: bold;
    filter: brightness(1);
}

.horizontalSwiper.ctl-horizontal-navigationBar {
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    padding: 5px;
    display: flex;
}

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

.ctl-hor-nav-wrapper {
    --ctw-nav-align: left;
    position: relative;
    width: calc(100% - 32px);
    margin: 0 16px 0 16px;
}

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

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

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

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

.ctl-hor-nav-wrapper .ctl-nav-next i,
.ctl-hor-nav-wrapper .ctl-nav-prev i {
    color: var(--ctw-ybx-text-color);
}

.ctl-horizontal-navigation-items {
    justify-content: var(--ctw-nav-align);
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-content-empty .ctl-button-prev,
.ctl-wrapper .ctl-horizontal-wrapper.ctl-content-empty .ctl-button-next,
.ctl-wrapper .ctl-horizontal-wrapper.ctl-content-empty .ctl-h-line {
    display: none;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-content-empty .ctl-slider-wrapper {
    display: flex;
    justify-content: center;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-content-empty .ctl-slider-container {
    margin-top: 0px;
}

.ctl-wrapper .ctl-horizontal-wrapper .ctl_load_more_pagination {
    display: none;
}

/* Flat Design CSS start */

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-8 .ctl-slider-container{
    padding-top: 5px;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-8 .ctl-icondot{
    transform: rotate(0deg);
    border: unset;
    box-shadow: unset;
    width: calc(var(--ctw-ibx-size) / 3);
    height: calc(var(--ctw-ibx-size) / 3);
    top: calc(var(--ctw-ibx-size) * 2 - var(--ctw-ibx-size) * 3 + 3px);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-8 .ctl-icon{
    transform: rotate(0deg);
    border-width: 0px;
    box-shadow: unset;
    width: calc(var(--ctw-ibx-size) - 18px);
    height: calc(var(--ctw-ibx-size) - 18px);
    top: calc(var(--ctw-ibx-size) / 1.3 - var(--ctw-ibx-size) * 2 + 8px);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-8 .ctl-icon i{
    font-size: calc(var(--ctw-ibx-text-size) - 7px);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-8 .ctl-content,
.ctl-wrapper .ctl-horizontal-timeline.ctl-design-8 .ctl-content .ctl-description {
    border-width: 0px;
    background: transparent;
}
.ctl-wrapper .ctl-horizontal-timeline.dark-skin.ctl-design-8 .ctl-content,
.ctl-wrapper .ctl-horizontal-timeline.dark-skin.ctl-design-8 .ctl-content .ctl-description {
    background: var(--ctw-cbx-des-background);
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-8 .ctl-arrow{
    border-width: 0px;
    background: transparent;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-8 .ctl-year-label.ctl-year-text{
    border: unset;
    box-shadow: unset;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-8 .ctl-labels{
    border: unset;
    box-shadow: unset;
    background-color: transparent;
}

.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-8 .ctl-year-swiper-slide .timeline-year{
   display: none;
}

.ctl-wrapper .ctl-horizontal-wrapper.cool-timeline-wrapper.ctl-design-8 :where(.ctl-label-big,.ctl-label-small),
.ctl-wrapper .ctl-horizontal-wrapper.cool-timeline-wrapper.ctl-design-8 :where(.ctl-label-big,.ctl-label-small) *{
    color: var(--ctw-arw-bg) !important;
}

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-8 .ctl-year-swiper-slide.swiper-slide-active :where(.ctl-icondot, .ctl-icon)::before,
.ctl-wrapper .ctl-horizontal-timeline.ctl-design-8 .ctl-year-swiper-slide.swiper-slide-active :where(.ctl-icondot, .ctl-icon)::after{
    width: 100%;
    height: 100%;
    background: transparent;
    top: 0px;
    left: 0px;
    box-shadow: 0 0 0 0 var(--ctw-arw-bg);
    opacity: 1;
    border-radius: 3px;
    animation: iconAnimation 3s infinite;
    transition: all ease .4s;
    opacity: 0.5;
}   

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-8 .ctl-year-swiper-slide.swiper-slide-active :where(.ctl-icondot,.ctl-icon)::before{
    animation-delay: .9s;
}  

.ctl-wrapper .ctl-horizontal-timeline.ctl-design-8 .ctl-year-swiper-slide.swiper-slide-active :where(.ctl-icondot,.ctl-icon)::after{
    animation-delay: .6s;
}

@keyframes iconAnimation{
    70%{
        box-shadow: 0 0 0 calc(var(--ctw-ibx-size) / 3) var(--ctw-arw-bg);
        opacity: 0;
    }100%{
        box-shadow: 0 0 0 0 var(--ctw-arw-bg);
        opacity: 0;
    }
}

/* Flat Design CSS end */

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

@media screen and (max-width:768px) {
    .ctl-wrapper .ctl-horizontal-wrapper:where(.ctl-default, .ctl-design-1) {
        --ctw-cbx-des-padding: 15px 15px 15px 15px;
    }
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8):where(.ctl-description, .ctl-title) {
        width: 100% !important;
        display: block;
    }
    .ctl-wrapper .ctl-horizontal-timeline .ctl-media,
    .ctl-wrapper .ctl-horizontal-timeline .full-width,
    .ctl-wrapper .ctl-horizontal-timeline .ctp-media-slider,
    .ctl-horizontal-wrapper .ctl-content .ctl-media~.ctl-description,
    .ctl-content .full-width~.ctl-description,
    .ctl-content .ctp-media-slider~.ctl-description,
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .ctl-media,
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .full-width {
        width: 100% !important;
    }
    .ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-wrapper .ctl-year-label.ctl-year-text {
        left: calc(100% - var(--ctw-ybx-size) * 2);
    }
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default, .ctl-design-1, .ctl-design-6, .ctl-design-8) .swiper-slide.ctl-story {
        margin-top: unset;
    }
    .ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-slider-container {
        margin-inline: 0px;
    }
    .ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-story.swiper-slide,
    .ctl-wrapper .ctl-horizontal-timeline.ctl-design-4 .ctl-description {
        padding: 0px 10px;
    }
    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-design-6, .ctl-design-8) .ctl-content .ctl-description {
        padding: 10px;
    }
    .ctl-wrapper .ctl-horizontal-timeline .ctp-media-slider .swiper-wrapper img {
        object-fit: cover;
        height: 60vw!important;
    }
}

@media (max-width: 445px) {
    .ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-wrapper .ctl-year-label.ctl-year-text {
        left: calc(100% - var(--ctw-ybx-size) * 1.6);
    }
    .ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-wrapper:where(.ctl-design-3, .ctl-design-4) .ctl-year-label.ctl-year-text {
        left: calc(50% - var(--ctw-ybx-size) - var(--ctw-ibx-size) / 1);
    }
    .ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-wrapper.ctl-design-2 .ctl-year-label.ctl-year-text {
        left: calc(100% - var(--ctw-ybx-size) * 2);
    }
    .ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-wrapper:where(.ctl-design-6, .ctl-design-8) .ctl-year-label.ctl-year-text {
        left: calc(50% - var(--ctw-ybx-size) - var(--ctw-ibx-size) / 1.9);
        top: -12px;
        width: calc(var(--ctw-ybx-size) * 0.85);
    }
    .ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-wrapper.ctl-design-1 .ctl-year-label.ctl-year-text {
        left: calc(100% - var(--ctw-ybx-size) * 1.45);
        width: calc(var(--ctw-ybx-size) * 0.90);
        height: calc(var(--ctw-ybx-size) * 0.90);
        top: -30px;
    }
    .ctl-wrapper .ctl-horizontal-timeline:not(.ctl-design-3, .ctl-design-4, .ctl-design-6, .ctl-design-8) .ctl-icon img {
        border-radius: 50%;
    }
    .ctl-wrapper .ctl-horizontal-timeline .ctl-icon img {
        max-height: unset!important;
        object-fit: cover!important;
        height: 100%!important;
    }
    .ctl-wrapper .ctl-horizontal-timeline .ctl_load_more_pagination {
        display: none;
    }
    .ctl-wrapper .ctl-horizontal-timeline .ctl-content {
        margin: 0px;
        padding: 0px;
    }

    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1, .ctl-design-6, .ctl-design-8) .ctl-content {
        margin-inline: 10px !important;
    }

    .ctl-wrapper .ctl-horizontal-timeline:where(.ctl-default,.ctl-design-1, .ctl-design-6, .ctl-design-8) .ctl-story:not(.swiper-slide-active) .ctl-year-container {
        visibility: hidden;
    }

    .ctl-wrapper .cool-timeline-wrapper.ctl-horizontal-wrapper:where(.ctl-default, .ctl-design-1) .ctl-year-label.ctl-year-text {
        left: calc(50% - var(--ctw-ybx-size) - var(--ctw-ibx-size) / 1.3);
        top: -35px;
    }
}