
.ctl-wrapper .ctl-vertical-wrapper .ctl-icon {
    -webkit-box-shadow: 0 0 0 4px white, inset 0 0 0 2px rgba(0, 0, 0, 0.05), 0 0 0 8px var(--ctw-line-bg);
    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);
}
/* ----------------------------- Vertical Styles ---------------------------- */
/* ---------------------------- Vertical Wrapper ---------------------------- */

.ctl-wrapper .ctl-vertical-wrapper {
    --ctw-ibx-position: 0;
    --ctw-cbx-text-align: left;
    --ctw-cbx-img-order: 2;
    max-width: 1600px;
    padding: calc(var(--ctw-line-width) * 3) 10px;
    margin: 0 auto;
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-story.odd {
    --ctw-arw-bg: var( --ctw-first-story-color, var(--ctw-second-story-color, var(--ctw-cbx-title-color)));
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-story.even {
    --ctw-arw-bg: var(--ctw-second-story-color, var(--ctw-first-story-color, var(--ctw-cbx-title-color)));
}


.ctl-wrapper .ctl-vertical-wrapper.ctl-clean-skin .ctl-story.odd{
    --ctw-cbx-title-color: var(--ctw-first-story-color);
    --ctw-lbl-big-color: var(--ctw-first-story-color)
}
.ctl-wrapper .ctl-vertical-wrapper.ctl-clean-skin .ctl-story.even{
    --ctw-cbx-title-color: var(--ctw-second-story-color);
    --ctw-lbl-big-color: var(--ctw-second-story-color)
}

.ctl-wrapper .ctl-one-sided .ctl-story {
    --ctw-cbx-bottom-margin: 50px;
}

/* ------------------------- Vertical Wrapper - END ------------------------- */
/* -------------------- Timeline Start/End Dots Vertical -------------------- */

.ctl-wrapper .ctl-vertical-wrapper .ctl-start,
.ctl-wrapper .ctl-vertical-wrapper .ctl-end {
    background-color: var(--ctw-line-bg);
    width: calc(var(--ctw-line-width) * 3);
    height: calc(var(--ctw-line-width) * 3);
    display: inline-block;
    position: absolute;
    left: calc(50% - var(--ctw-line-width) * 1.5);
    z-index: 1;
    border-width: calc(var(--ctw-line-bd-width) * 1px);
    border-style: var(--ctw-line-bd-style);
    border-color: var(--ctw-line-bd-color);
    border-radius: calc(var(--ctw-ibx-radius) * 1%);
    -webkit-border-radius: calc(var(--ctw-ibx-radius) * 1%);
    -moz-border-radius: calc(var(--ctw-ibx-radius) * 1%);
    -ms-border-radius: calc(var(--ctw-ibx-radius) * 1%);
    -o-border-radius: calc(var(--ctw-ibx-radius) * 1%);
}


.ctl-wrapper .ctl-vertical-wrapper.ctl-content-empty:where(.ctl-start, .ctl-end, .ctl-timeline:before, .ctl-inner-line) {
    display: none;
}

.ctl-wrapper .ctl-post-timeline .ctl-end {
    bottom: inherit !important;
}

.ctl-wrapper .ctl-vertical-wrapper:where(.ctl-start:after, .ctl-end:after) {
    content: "";
    position: absolute;
    height: calc(var(--ctw-line-bd-width) * 1px + var(--ctw-line-width) * 0.1);
    width: calc(var(--ctw-line-width) - var(--ctw-line-bd-width) * 2px);
    background-color: var(--ctw-line-bg);
    left: calc(50% - (var(--ctw-line-width) - var(--ctw-line-bd-width) * 2px) / 2);
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-start:after {
    bottom: calc(0px - var(--ctw-line-bd-width) * 1px);
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-end:after {
    top: calc(0px - var(--ctw-line-bd-width) * 1px);
}

/* ----------------- Timeline Start/End Dots Vertical - END ----------------- */
/* ------------------------- Timeline Line Vertical ------------------------- */

.ctl-wrapper .ctl-vertical-wrapper .ctl-timeline {
    position: relative;
    margin: 0px;
    padding: 22px 0;
    display: flow-root;
    width: 100% !important;
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-timeline:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - var(--ctw-line-width) / 2);
    display: block;
    width: var(--ctw-line-width);
    background-color: var(--ctw-line-bg);
    border-width: 0px calc(var(--ctw-line-bd-width) * 1px) 0px calc(var(--ctw-line-bd-width) * 1px);
    border-color: var(--ctw-line-bd-color);
}
/* ---------------------- Timeline Line Vertical - END ---------------------- */
/* --------------------- Timeline Line Filling Vertical --------------------- */

.ctl-wrapper .ctl-vertical-wrapper .ctl-inner-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - var(--ctw-line-width) / 2);
    display: block;
    width: var(--ctw-line-width);
    background-color: var(--ctw-line-filling-color);
    z-index: 1;
    height: 0px;
    max-height: 100%;
    transition: all .6 ease-in-out;
}
/* ------------------ Timeline Line Filling Vertical - END ------------------ */
/* ------------------------- Line Year Box Vertical ------------------------- */

.ctl-wrapper .ctl-vertical-wrapper .ctl-year {
    position: relative;
    margin: 0px 0 50px 0px;
    justify-content: center;
    width: 100%;
    z-index: 2;
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-year:nth-child(2) {
    margin: 22px 0 50px 0px;
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-year:first-child {
    margin-top: 0px !important;
}

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

.ctl-wrapper .ctl-vertical-wrapper .ctl-year-text:before {
    top: 0;
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-year-text:after {
    bottom: 0;
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-media.small {
    align-items: start;
    padding: 15px 15px;
}

/* ---------------------- Line Year Box Vertical - END ---------------------- */
/* ----------------------------- Labels Vertical ---------------------------- */

.ctl-wrapper .ctl-vertical-wrapper .ctl-labels {
    justify-content: space-between;
    top: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100 - (var(--ctw-lbl-big-size) / 2 - var(--ctw-ibx-size) / 1.5));
    right: calc(100% + var(--ctw-ibx-size) * 2);
    text-align: var(--ctw-cbx-date-text-align);
    color: var(--ctw-arw-bg);
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-labels {
    left: calc(100% + var(--ctw-ibx-size) * 2);
    text-align: left;
    color: var(--ctw-arw-bg);
}

.ctl-post-timeline.ctl-vertical-wrapper.ctl-vertical-left .ctl-story-left .ctl-labels {
    left: calc(100% + var(--ctw-ibx-size) * 2);
    text-align: left;
    right: auto;
}

/* -------------------------- Labels Vertical - END ------------------------- */
/* ------------------------- Icon / Dot Box Vertical ------------------------ */

.ctl-wrapper .ctl-vertical-wrapper:where(.ctl-both-sided, .ctl-one-sided) .timeline-year~.ctl-story:nth-child(3) {
    margin-top: 0px;
}

.ctl-wrapper .ctl-vertical-wrapper:where(.ctl-both-sided, .ctl-one-sided) .ctl-story:nth-child(2) {
    margin-top: 50px;
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-icon {
    left: calc(var(--ctw-ibx-size) / 2 - var(--ctw-ibx-size) * 1.95);
    top: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) + 7px);
}

.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-icon {
    left: calc(var(--ctw-ibx-size) / 2 - var(--ctw-ibx-size) * 2);
}

.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story.innerViewPort .ctl-icon {
    background-color: var(--ctw-line-filling-color)!important;
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-icon {
    left: auto;
    right: calc(var(--ctw-ibx-size) / 2 - var(--ctw-ibx-size) * 1.9);
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-icondot {
    left: calc(var(--ctw-ibx-size) * 0.75 - var(--ctw-ibx-size) * 2);
    top: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100 + var(--ctw-ibx-size) / 2.5);
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-icondot {
    left: auto;
    right: calc(var(--ctw-ibx-size) * 0.76 - var(--ctw-ibx-size) * 2);
}

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

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

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

/* ---------------------- Icon / Dot Box Vertical - END --------------------- */


/* ------------------------ Story Box Arrow Vertical ------------------------ */

.ctl-wrapper .ctl-vertical-wrapper .ctl-arrow {
    background: linear-gradient(to top right, var(--ctw-arw-bg) 52%, transparent 48%);
    left: calc(var(--ctw-ibx-size) / 7 - var(--ctw-ibx-size) / 2.6 + var(--ctw-cbx-bd-left-width) / 3);
    border-width: 0 0 var(--ctw-cbx-bd-left-width) var(--ctw-cbx-bd-left-width);
    box-shadow: -4px 4px 8px -4px rgb(0, 0, 0, 0.4);
    top: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100 + var(--ctw-ibx-size) / 2 - var(--ctw-ibx-size) / 7)
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-bg-hover:hover .ctl-arrow {
    background: linear-gradient(to top right, var(--ctw-cbx-title-bg, var(--ctw-cbx-bg-hover)) 52%, transparent 48%);
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-bg-hover.ctl-story-left:hover .ctl-arrow {
    background: linear-gradient(to bottom left, var(--ctw-cbx-title-bg, var(--ctw-cbx-bg-hover)) 52%, transparent 48%);
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-arrow {
    left: auto;
    right: calc(var(--ctw-ibx-size) / 7 - var(--ctw-ibx-size) / 2.5 + var(--ctw-cbx-bd-left-width) / 3);
    background: linear-gradient(to bottom left, var(--ctw-arw-bg) 52%, transparent 48%);
    border-width: var(--ctw-cbx-bd-left-width) var(--ctw-cbx-bd-left-width) 0px 0px;
    box-shadow: 4px -4px 8px -4px rgb(0, 0, 0, 0.4);
}


/* --------------------- Story Box Arrow Vertical - END --------------------- */
/* --------------------------- Story Box Vertical --------------------------- */

.ctl-wrapper .ctl-vertical-wrapper .ctl-story {
    position: relative;
    width: calc(50% - var(--ctw-ibx-size));
    float: right;
    clear: both;
    z-index: 2;
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left {
    float: left;
}


.ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-content {
    box-shadow: var(--ctw-cbx-shadow);
    border-width: var(--ctw-cbx-bd-top-width) var(--ctw-cbx-bd-left-width) var(--ctw-cbx-bd-bottom-width) var(--ctw-cbx-bd-right-width);
    border-radius: var(--ctw-cbx-radius-left);
    -webkit-border-radius: var(--ctw-cbx-radius-left);
    -moz-border-radius: var(--ctw-cbx-radius-left);
    -ms-border-radius: var(--ctw-cbx-radius-left);
    -o-border-radius: var(--ctw-cbx-radius-left);
}


.ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left:hover .ctl-content,
.ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-right:hover .ctl-content {
    box-shadow: var(--ctw-cbx-shadow);
    border-radius: var(--ctw-cbx-radius-left-hover);
    -webkit-border-radius: var(--ctw-cbx-radius-left-hover);
    -moz-border-radius: var(--ctw-cbx-radius-left-hover);
    -ms-border-radius: var(--ctw-cbx-radius-left-hover);
    -o-border-radius: var(--ctw-cbx-radius-left-hover);
}

.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper,.ctl-clean-skin) .ctl-story.even .ctl-title {
    background: var(--ctw-second-story-color);
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-media {
    justify-content: var(--ctw-cbx-img-align);
    align-self: flex-start;
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-description {
    text-align: var(--ctw-cbx-desc-text-align);
}

.ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-button {
    justify-content: var(--ctw-cbx-btn-align);
}

.ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper,.ctl-clean-skin) .ctl-story.odd .ctl-title {
    background: var(--ctw-first-story-color);
}

.ctl-wrapper .ctl-vertical-wrapper .odd .ctl-icon {
    background-color: var(--ctw-first-story-color);
}
/* ------------------------ Story Box Vertical - END ------------------------ */
/* -------------------------- Vertical Styles - END ------------------------- */

.ctl-vertical-wrapper .ctl-year-label.ctl-year-text {
    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-vertical-wrapper .innerViewPort .ctl-year-label.ctl-year-text {
    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);
}



/* ---------------------------- One Sided Styles ---------------------------- */
/* ------one sided layout css start--------- */



.ctl-wrapper .ctl-one-sided {
    max-width: 1200px;
    margin-left: 0px;
    width: 100%;
    position: relative;
    margin-right: 0px;
    padding-left: 300px;
}

.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-year {
    justify-content: flex-start;
}

.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-year:after {
    content: '';
    width: 37px;
    height: var(--ctw-line-width);
    background: var(--ctw-line-bg);
    z-index: -1;
}

.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-inner-line,
.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-timeline:before {
    left: 0px;
}

.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-start,
.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-end {
    left: 297px;
}

.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-year.innerViewPort:after {
    background: var(--ctw-line-filling-color);
}

.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-year {
    left: -115px;
}
.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided:not(.ctl-compact-wrapper,.ctl-clean-skin) .ctl-story.ctl-story-right.odd .ctl-title {
    background: var(--ctw-first-story-color);
}

.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-story.ctl-story-right.odd {
    --ctw-arw-bg: var(--ctw-first-story-color, var(--ctw-second-story-color, var(--ctw-cbx-title-color)));
}

.ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-story-right.odd .ctl-icon {
    background-color: var(--ctw-first-story-color);
}

.ctl-wrapper .ctl-one-sided .ctl-story.even {
    --ctw-lbl-big-color: var(--ctw-lbel-big-color, var(--ctw-second-story-color));
}

.ctl-wrapper .ctl-one-sided .ctl-story.odd {
    --ctw-lbl-big-color: var( --ctw-lbel-big-color, var(--ctw-first-story-color));
}
/* one-sided layout css end */

@media only screen and (min-width: 768px) {
    /* ------------------------ One Sided Vertical Right ------------------------ */
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-right .ctl-start,
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-right .ctl-end {
        left: calc(33.33% - var(--ctw-line-width) * 1.5);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-right .ctl-timeline:before,
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-right .ctl-inner-line {
        left: calc(33.33% - var(--ctw-line-width) / 2);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-right .ctl-year {
        justify-content: left;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-right .ctl-year-text:before,
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-right .ctl-year-text:after {
        left: calc(25.33% - (var(--ctw-line-width) - var(--ctw-line-bd-width) * 2px) / 2);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-left .ctl-year-text:before,
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-left .ctl-year-text:after {
        left: calc(66.66% - (var(--ctw-line-width) - var(--ctw-line-bd-width) * 2px) / 2);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-right .ctl-labels {
        right: auto;
        left: calc((-100% + var(--ctw-ibx-size)) / 2 - var(--ctw-ibx-size) * 2);
        top: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100 - (var(--ctw-lbl-big-size) / 2 - var(--ctw-ibx-size) / 2));
        width: calc((100% + var(--ctw-ibx-size)) / 2 - var(--ctw-ibx-size));
        text-align: right;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-right .ctl-story {
        width: calc(66.66% - var(--ctw-ibx-size));
        float: right;
        margin-bottom: var(--ctw-cbx-bottom-margin);
        text-align: left;
        top: auto;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-right .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);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-right .ctl-icon {
        right: auto;
        left: calc(var(--ctw-ibx-size) / 2 - var(--ctw-ibx-size) * 2);
        top: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-right .ctl-icondot {
        right: auto;
        left: calc(var(--ctw-ibx-size) * 0.75 - var(--ctw-ibx-size) * 2);
        top: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100 + var(--ctw-ibx-size) / 4);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-right .ctl-arrow {
        background: linear-gradient(to top right, var(--ctw-arw-bg) 52%, transparent 48%);
        border-width: 0 0 var(--ctw-cbx-bd-left-width) var(--ctw-cbx-bd-left-width);
        right: auto;
        left: calc(var(--ctw-ibx-size) / 7 - var(--ctw-ibx-size) / 3.5 + var(--ctw-cbx-bd-left-width) / 3 + 1px);
        box-shadow: -4px 4px 8px -4px rgb(0, 0, 0, 0.4);
    }

    .ctl-wrapper .ctl-one-sided .ctl-story {
        width: calc(100% - var(--ctw-ibx-size));
    }
    /* --------------------- One Sided Vertical Right - END --------------------- */
    /* ------------------------ One Sided Vertical Left ------------------------ */
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-left .ctl-start,
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-left .ctl-end {
        left: calc(66.66% - var(--ctw-line-width) * 1.5);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-left .ctl-timeline:before,
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-left .ctl-inner-line {
        left: calc(66.66% - var(--ctw-line-width) / 2);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-left .ctl-year {
        justify-content: left;
        padding-left: calc(66.66% - var(--ctw-ybx-size) / 2);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-left .ctl-story .ctl-labels {
        left: auto;
        right: calc((-100% + var(--ctw-ibx-size)) / 2 - var(--ctw-ibx-size) * 2);
        top: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100 - (var(--ctw-lbl-big-size) / 2 - var(--ctw-ibx-size) / 2));
        width: calc((100% + var(--ctw-ibx-size)) / 2 - var(--ctw-ibx-size));
        text-align: left;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-left .ctl-story {
        float: left;
        width: calc(66.66% - var(--ctw-ibx-size));
        margin-bottom: var(--ctw-cbx-bottom-margin);
        text-align: left;
        top: auto;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-left .ctl-content {
        border-width: var(--ctw-cbx-bd-top-width) var(--ctw-cbx-bd-left-width) var(--ctw-cbx-bd-bottom-width) var(--ctw-cbx-bd-right-width);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-left .ctl-icon {
        left: auto;
        right: calc(var(--ctw-ibx-size) / 2 - var(--ctw-ibx-size) * 2);
        top: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-left .ctl-icondot {
        left: auto;
        right: calc(var(--ctw-ibx-size) * 0.75 - var(--ctw-ibx-size) * 2);
        top: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100 + var(--ctw-ibx-size) / 4);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-left .ctl-arrow {
        left: auto;
        right: calc(var(--ctw-ibx-size) / 7 - var(--ctw-ibx-size) / 3.5 + var(--ctw-cbx-bd-left-width) / 3);
        background: linear-gradient(to bottom left, var(--ctw-arw-bg) 52%, transparent 48%);
        border-width: var(--ctw-cbx-bd-left-width) var(--ctw-cbx-bd-left-width) 0px 0px;
        box-shadow: 4px -4px 8px -4px rgb(0, 0, 0, 0.4);
    }

    /* --------------------- One Sided Vertical left - END --------------------- */
    /* ------------------------ One Sided Vertical Center ----------------------- */
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-center .ctl-labels {
        top: calc(0px - var(--ctw-ibx-size) * 2 - (var(--ctw-lbl-big-size) / 2 - var(--ctw-ibx-size) / 2));
        left: calc(50% + var(--ctw-ibx-size));
        width: calc(50% - var(--ctw-ibx-size));
        text-align: left;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-center .ctl-icon {
        top: calc(0px - var(--ctw-ibx-size) * 2);
        left: calc(50% - var(--ctw-ibx-size) / 2);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-center .ctl-icondot {
        top: calc(0px - var(--ctw-ibx-size) * 1.75);
        left: calc(50% - var(--ctw-ibx-size) / 4);
    }

    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-center .ctl-story {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        float: none;
        text-align: center;
        top: calc(var(--ctw-ibx-size) * 2.5);
        margin-bottom: calc(var(--ctw-ibx-size) * 2.5 + var(--ctw-cbx-bottom-margin));
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-center .ctl-content {
        border-width: var(--ctw-cbx-bd-left-width) var(--ctw-cbx-bd-right-width) var(--ctw-cbx-bd-left-width) var(--ctw-cbx-bd-right-width);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-center:where(.ctl-story:before, .ctl-story:after) {
        content: " ";
        position: absolute;
        height: calc(var(--ctw-cbx-bd-left-width) + 10px);
        width: calc(var(--ctw-line-width) - var(--ctw-line-bd-width) * 2px);
        background: var(--ctw-line-bg);
        left: calc(50% - (var(--ctw-line-width) - var(--ctw-line-bd-width) * 2px) / 2);
        opacity: var(--ctw-line-bd-width);
        z-index: 1;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-center .ctl-story:before {
        top: -10px;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-vertical-center .ctl-story:after {
        bottom: -10px;
    }
    
    /* --------------------- One Sided Vertical Center - END -------------------- */

}
/* ------------------------- One Sided Styles - END ------------------------- */
/* --------pagination css-------- */

.ctl-pagination {
    display: flex;
    align-items: stretch;
    gap: 5px;
}

.cool-timeline-wrapper:not(.ctl-one-sided) .ctl-pagination {
    justify-content: center;
}

.ctl-vertical-wrapper .ctl-pagination a,
.ctl-vertical-wrapper .ctl-pagination span {
    display: inline-block;
    padding: 2px 10px;
}

.ctl-vertical-wrapper .ctl-pagination a {
    background-color: #ebebeb;
    color: #777;
    text-decoration: none;
    position: relative;
}

.ctl-vertical-wrapper .ctl-pagination .prev.page-numbers,
.ctl-vertical-wrapper .ctl-pagination .next.page-numbers {
    font-size: 15px;
    fill: #777;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ctl-vertical-wrapper .ctl-pagination a.ctl-btn-click-effect::after{
    content: '';
    position: absolute;
    top: calc(100% / 9 - (100% * 1.7)/ 4);
    left: calc(100% / 9 - (100% * 1.7)/ 4);
    width: calc(100% * 1.6);
    height: calc(100% * 1.6);
    background-color: var(--ctw-line-bg);
    animation: ctl-btn-effect 0.6s forwards;
    z-index: -1;
    opacity: .2;
}

@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-vertical-wrapper .ctl-pagination .prev.page-numbers:hover,
.ctl-vertical-wrapper .ctl-pagination .next.page-numbers:hover {
    fill: #ffffff;
}

.ctl-vertical-wrapper .ctl-pagination a:hover {
    background-color: var(--ctw-line-bg);
    color: #fff;
}


.ctl-vertical-wrapper .ctl-pagination span.dots {
    padding: 0;
    color: #dcdcdc;
}

.ctl-vertical-wrapper .ctl-pagination span.current {
    background-color: var(--ctw-line-bg);
    color: #fff;
}


.ctl-vertical-wrapper nav.ctl-pagination {
    text-align: center;
    position: relative;
    margin: 20px 0px;
}

.ctl-vertical-wrapper.ctl-one-sided nav.ctl-pagination {
    text-align: left;
}



@media (min-width: 280px) {
    .ctl-vertical-wrapper nav.ctl-pagination {
        top: 0;
    }
}

@media only screen and (max-width: 325px) {
    .ctl-wrapper .ctl-vertical-wrapper .ctl-year .ctl-year-text:before {
        width: calc(var(--ctw-ibx-size) - var(--ctw-line-width) / 10 + var(--ctw-line-bd-width) * 1px + 1px);
    }
    .ctl-wrapper .ctl-vertical-wrapper.cool-timeline-wrapper:not(.ctl-compact-wrapper) .ctl-start,
    .ctl-wrapper .ctl-vertical-wrapper.cool-timeline-wrapper:not(.ctl-compact-wrapper) .ctl-end {
        left: calc(6% - var(--ctw-line-width) / 10)!important;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-story {
        left: calc(5% - var(--ctw-line-width) - 7.8px)!important;
    }
    .ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-icon {
        left: calc(var(--ctw-ibx-size) / 2 - var(--ctw-ibx-size) * 2.05)!important;
    }
    /* .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-icon {
        left: calc(var(--ctw-ibx-size) / 1.8 - var(--ctw-ibx-size) * 2)!important;
    } */
    /* .ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-one-sided .ctl-icondot {
        left: calc(var(--ctw-ibx-size) * 0.75 - var(--ctw-ibx-size) * 2)!important;
    } */
    .ctl-wrapper .ctl-vertical-wrapper .ctl-year {
        margin: 22px 0 50px 0px!important;
    }
    .ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-one-sided .ctl-story {
        left: 5px;
    }
    .ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-one-sided .ctl-start,
    .ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-one-sided .ctl-end {
        left: calc(3% - var(--ctw-line-width) + 2px)!important;
    }
}

@media only screen and (min-width: 769px) {
    .ctl-vertical-wrapper nav.ctl-pagination {
        top: 15px;
        margin-bottom: 30px;
    }
    /* one-sided css start */
    /* one-sided css start */
    .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-story {
        max-width: 600px;
        width: calc(100% - (calc(51px + var(--ctw-ibx-size) / 2)));
        left: calc(31px + var(--ctw-ibx-size) / 4);
        float: unset;
    }
    .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-story.ctl-story-icon {
        left: calc(31px + var(--ctw-ibx-size) / 2);
    }
    .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-icondot {
        left: calc(-30px - var(--ctw-ibx-size) / 4);
        transform: translateX(-50%);
    }
    .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-icon {
        left: calc(-30px - var(--ctw-ibx-size) / 2);
        transform: translateX(-50%);
    }
    /* one-sided css end */
}



.ctl-wrapper .ctl-timeline-wrapper .ctl-vertical-wrapper .innerViewPort .ctl-icondot {
    background: var(--ctw-line-filling-color) !important;
}

.ctl-wrapper .ctl-vertical-wrapper.ctl-content-empty :where(.ctl-timeline .ctl-inner-line, .ctl-start, .ctl-end) {
    display: none;
}

.ctl-wrapper .ctl-vertical-wrapper.ctl-content-empty .ctl-timeline:before {
    display: none;
}

@media only screen and (max-width: 767px) {
    .ctl-wrapper .ctl-vertical-wrapper .ctl-timeline:before,
    .ctl-wrapper .ctl-vertical-wrapper .ctl-inner-line {
        left: calc(5% - var(--ctw-line-width) / 1)!important;
    }
    .ctl-wrapper .ctl-vertical-wrapper:not(.ctl-one-sided) .ctl-start,
    .ctl-wrapper .ctl-vertical-wrapper:not(.ctl-one-sided) .ctl-end {
        left: calc(5% - var(--ctw-line-width) + 6px)!important;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-start,
    .ctl-wrapper .ctl-vertical-wrapper .ctl-end {
        left: calc(5% - var(--ctw-line-width) / 2 - var(--ctw-line-width) * 1.6)!important;
    }
    
    .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided {
        padding-left: 0px;
    }

    .ctl-vertical-wrapper .ctl-pagination a,
    .ctl-vertical-wrapper .ctl-pagination span {
        margin: 2px 0px;
    }
    
    .ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-label-small {
        margin-bottom: -15px;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-icondot,
    .ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-icondot {
        left: calc(var(--ctw-ibx-size) / 2 - var(--ctw-ibx-size) * 1.85);
    }
    .ctl-wrapper .ctl-vertical-wrapper:where(.ctl-timeline:before, .ctl-inner-line) {
        left: calc(0px - var(--ctw-line-width) / 2 + var(--ctw-ibx-size) / 2);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-year {
        justify-content: flex-start;
        left: calc(5% - var(--ctw-line-width) / 1)!important;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-year .ctl-year-text:after {
        left: calc(0px + var(--ctw-ibx-size) / 2 - var(--ctw-line-width) / 2 + var(--ctw-line-bd-width) / 2);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-story {
        width: calc(100% - var(--ctw-ibx-size) * 1.5);
        float: unset;
        text-align: left;
        margin-bottom: calc(var(--ctw-cbx-bottom-margin));
        top: 0;
        left: calc(5% - var(--ctw-line-width) / 1 + 45px)!important;
    }
    .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-story {
        float: unset;
        /* left: calc(5% - var(--ctw-line-width) / 1 + 45px)!important; */
    }
    .ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story .ctl-labels {
        position: relative;
        left: 0;
        top: 0;
        text-align: left!important;
        width: 100%;
        margin: 20px 5px 20px;
    }
    .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-icondot {
        left: calc(var(--ctw-ibx-size) / 2 - var(--ctw-ibx-size) * 1.85);
    }

    .ctl-wrapper .ctl-vertical-wrapper .ctl-icon {
        top: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100 + (var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) - 20px) - ((var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + 12px) * var(--ctw-ibx-position) / 100) - 5px + var(--lbl-bd-width) * 2);
        transform: translateY(-50%)!important;
        left: calc(var(--ctw-ibx-size) / 2 - var(--ctw-ibx-size) * 2.05);
    }

    .ctl-wrapper .ctl-vertical-wrapper .ctl-labels~.ctl-icon {
        top: calc(var(--ctw-ibx-position) * 1% - var(--ctw-ibx-size) * var(--ctw-ibx-position) / 100 + (var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + -8px) - ((var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap)) * var(--ctw-ibx-position) / 100) + 16px + var(--lbl-bd-width) * 2 + var(--ctw-cbx-date-line-height));
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-labels~.ctl-icondot {
        top: calc(var(--ctw-ibx-size) * var(--ctw-ibx-position) + var(--ctw-ibx-size) / 2 + (var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + -7px) - ((var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap)) * var(--ctw-ibx-position) / 10) + var(--lbl-bd-width) * 2 + var(--ctw-cbx-date-line-height) - 15PX);
    }
   
    .ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left {
        float: unset;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-labels {
        right: 0;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-arrow,
    .ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-arrow {
        border-width: 0 0 var(--ctw-cbx-bd-left-width) var(--ctw-cbx-bd-left-width);
        left: calc(var(--ctw-ibx-size) / 7 - var(--ctw-ibx-size) / 2.6 + var(--ctw-cbx-bd-left-width) / 3);
        box-shadow: -4px 4px 8px -4px rgb(0, 0, 0, 0.4);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-arrow,
    .ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-arrow {
        background: linear-gradient(to top right, var(--ctw-arw-bg) 52%, transparent 48%)!important;
    }
    .ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-labels~.ctl-arrow,
    .ctl-wrapper .ctl-vertical-wrapper:not(.ctl-compact-wrapper) .ctl-story.ctl-story-left .ctl-labels~.ctl-arrow {
        top: calc(var(--ctw-ibx-size) * var(--ctw-ibx-position) + var(--ctw-ibx-size) / 2 + (var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap) + -24px) - ((var(--ctw-lbl-big-size) + var(--ctw-lbl-small-size) + var(--ctw-lbl-gap)) * var(--ctw-ibx-position) / 10) + var(--lbl-bd-width) * 2 + var(--ctw-cbx-date-line-height));
    }


    .ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-icon {
        left: calc(var(--ctw-ibx-size) / 2.5 - var(--ctw-ibx-size) * 2);
        right: auto;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-story .ctl-title {
        text-align: left;
        justify-content: left!important;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-media {
        justify-content: var(--ctw-cbx-img-align, var(--ctw-cbx-text-align));
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-story.ctl-story-left .ctl-button {
        justify-content: var(--ctw-cbx-btn-align, var(--ctw-cbx-text-align));
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-year .ctl-year-text {
        position: relative;
        overflow: visible;
        left: calc(var(--ctw-ibx-size) - var(--ctw-line-width) / 10 + var(--ctw-line-bd-width) * 1px);
        right: auto;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-year .ctl-year-text:before {
        height: var(--ctw-line-width);
        left: auto;
        right: calc(95% + var(--ctw-ybx-bd-width)) !important;
        width: calc(var(--ctw-ibx-size) - var(--ctw-line-width) / 10 + var(--ctw-line-bd-width) * 1px);
        background-color: var(--ctw-line-bg);
        opacity: 1;
        z-index: -1;
    }
   
    .ctl-wrapper .ctl-vertical-wrapper .ctl-year-label.ctl-year-text::after {
        right: 100%;
        left: auto;
        width: var(--ctw-ybx-bd-width);
        height: var(--ctw-line-width);
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-year-label.ctl-year-text::after,
    .ctl-wrapper .ctl-vertical-wrapper .ctl-year .ctl-year-text:before {
        top: calc(50% - var(--ctw-line-width) / 2) !important;
        border-width: calc(var(--ctw-line-bd-width) * 1px) 0 calc(var(--ctw-line-bd-width) * 1px) 0;
        border-style: var(--ctw-line-bd-style);
        border-color: var(--ctw-line-bd-color);
    }
   
    .ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-one-sided .ctl-story {
        left: -4px;
        width: calc(94% - var(--ctw-ibx-size))!important;
    }
    

    .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-icon {
        left: calc(var(--ctw-ibx-size) / 2.2 - var(--ctw-ibx-size) * 2);
    }
}

.ctl-wrapper .cool-timeline-wrapper .ctl-vertical-wrapper .ctl-year {
    left:  calc(5% - 22px);
}

@media only screen and (max-width: 950px) {
    .ctl-vertical-wrapper nav.ctl-pagination {
        margin: 40px 0px;
    }
}

@media only screen and (max-width: 428px) {
    .ctl-wrapper .cool-timeline-wrapper.ctl-vertical-wrapper.ctl-one-sided .ctl-year:after {
        display: none!important;
    }
    .ctl-wrapper .ctl-vertical-wrapper .ctl-start,
    .ctl-wrapper .ctl-vertical-wrapper .ctl-end {
        left: calc(5% - var(--ctw-line-width) + 6px)!important;
    }
    .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-start,
    .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-end {
        left: calc(3% - var(--ctw-line-width) + 4px)!important;
    }
}

@media only screen and (max-width: 378px) {
    /* .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-icondot {
        left: calc(var(--ctw-ibx-size) * 0.68 - var(--ctw-ibx-size) * 2);
    } */
    .ctl-wrapper .ctl-vertical-wrapper .ctl-year {
        margin: 22px 0 50px 0px;
    }
    .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-icon {
        left: calc(var(--ctw-ibx-size) / 2.2 - var(--ctw-ibx-size) * 2);
    }
    .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-start,
    .ctl-wrapper .ctl-vertical-wrapper.ctl-one-sided .ctl-end {
        left: calc(3% - var(--ctw-line-width) + 3px)!important;
    }
}