| Current Path : /storage/v11800/affypharma/public_html/wp-content/plugins/cool-timeline/includes/shortcodes/assets/css/ |
Linux v11800 5.3.0-1023-aws #25~18.04.1-Ubuntu SMP Fri Jun 5 15:19:18 UTC 2020 aarch64
|
| Current File : /storage/v11800/affypharma/public_html/wp-content/plugins/cool-timeline/includes/shortcodes/assets/css/ctl-vertical-timeline.css |
.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;
justify-content: center;
align-items: stretch;
gap: 5px;
}
.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;
}
}