.monkey-timeline-wrap{width:100%;overflow:hidden}.monkey-timeline-inner{width:100%;margin:0 auto}.monkey-timeline-header{margin-bottom:70px}.monkey-timeline-eyebrow{letter-spacing:.28em;text-transform:uppercase;font-size:14px;margin-bottom:12px}.monkey-timeline-title{margin:0;font-family:Georgia,serif;font-size:42px;line-height:1.08}.monkey-timeline-header-desc{max-width:680px;margin:18px auto 0;font-family:Georgia,serif;font-size:17px;line-height:1.65}.monkey-timeline-header-desc p{margin:0 0 10px}.monkey-timeline-header-desc p:last-child{margin-bottom:0}.monkey-timeline-subtitle{font-family:Georgia,serif;font-size:34px;font-style:italic;line-height:1.1}.monkey-timeline-header-line{display:inline-block;width:90px;height:1px;margin-top:28px}.monkey-timeline-list{position:relative;padding:0 0 10px}.monkey-timeline-line{position:absolute;top:0;bottom:0;left:50%;display:block}.monkey-timeline-item{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:150px}.monkey-timeline-card{position:relative;width:100%;box-sizing:border-box}.monkey-side-left .monkey-timeline-card{grid-column:1;justify-self:end;margin-right:45px}.monkey-side-right .monkey-timeline-card{grid-column:2;justify-self:start;margin-left:45px}.monkey-timeline-connector{position:absolute;top:50%;left:50%;width:45px;height:1px;transform:translateY(-50%)}.monkey-side-left .monkey-timeline-connector{transform:translate(-100%,-50%)}.monkey-side-right .monkey-timeline-connector{transform:translate(0,-50%)}.monkey-timeline-dot{position:absolute;left:50%;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;border:2px solid;border-radius:999px;z-index:2}.monkey-timeline-dot svg{display:block;fill:currentColor}.monkey-timeline-tag{display:inline-block;letter-spacing:.16em;text-transform:uppercase;font-size:12px;padding:3px 10px;margin-bottom:9px}.monkey-timeline-step{letter-spacing:.16em;text-transform:uppercase;font-weight:700;font-size:13px;margin-bottom:6px}.monkey-timeline-item-title{margin:0 0 14px;font-family:Georgia,serif;font-size:20px;line-height:1.25}.monkey-timeline-desc{font-family:Georgia,serif;font-size:17px;line-height:1.65}.monkey-timeline-desc p{margin:0 0 10px}.monkey-timeline-desc p:last-child{margin-bottom:0}.monkey-timeline-animate{opacity:1}.monkey-timeline-js.monkey-anim-fade-up .monkey-timeline-animate,.monkey-timeline-js.monkey-anim-fade-in .monkey-timeline-animate,.monkey-timeline-js.monkey-anim-slide-left .monkey-timeline-animate,.monkey-timeline-js.monkey-anim-slide-right .monkey-timeline-animate,.monkey-timeline-js.monkey-anim-scale-soft .monkey-timeline-animate{opacity:0;transition:opacity .7s ease,transform .7s ease}.monkey-timeline-js.monkey-anim-fade-up .monkey-timeline-animate{transform:translateY(28px)}.monkey-timeline-js.monkey-anim-fade-in .monkey-timeline-animate{transform:none}.monkey-timeline-js.monkey-anim-slide-left .monkey-timeline-animate{transform:translateX(-35px)}.monkey-timeline-js.monkey-anim-slide-right .monkey-timeline-animate{transform:translateX(35px)}.monkey-timeline-js.monkey-anim-scale-soft .monkey-timeline-animate{transform:scale(.96)}.monkey-timeline-animate.is-visible{opacity:1!important;transform:none!important}@media(max-width:767px){.monkey-timeline-header{text-align:left!important;margin-bottom:45px}.monkey-timeline-list{padding-left:34px}.monkey-timeline-line{left:12px!important}.monkey-timeline-item{display:block;min-height:0;margin-bottom:35px!important}.monkey-side-left .monkey-timeline-card,.monkey-side-right .monkey-timeline-card{margin:0!important;max-width:none!important}.monkey-timeline-dot{left:12px!important}.monkey-timeline-connector{left:12px!important;width:22px!important;transform:translate(0,-50%)!important}.monkey-timeline-card{margin-left:34px!important}.monkey-timeline-title{font-size:34px}.monkey-timeline-header-desc{max-width:none;margin-left:0;margin-right:0}.monkey-timeline-subtitle{font-size:28px}} .monkey-timeline-wrap,.monkey-timeline-inner,.monkey-timeline-list,.monkey-timeline-item{visibility:visible!important;} .monkey-anim-none .monkey-timeline-animate{opacity:1!important;transform:none!important;} /* Timeline button - same base style as Monkey product page button */ .monkey-timeline-button{ width:100%; max-width:430px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border:1px solid #eee6d8; background:#f7f1e7; color:#fff; padding:13px 26px; border-radius:6px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; cursor:pointer; text-decoration:none; transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease; margin-top:18px; } .monkey-timeline-button i{line-height:1;} .monkey-timeline-button svg{display:block; width:16px; height:16px;} .monkey-timeline-button:hover{ background:#4b2f20; color:#fff; text-decoration:none; } .monkey-timeline-button:focus, .monkey-timeline-button:visited{ color:#fff; text-decoration:none; } /* v1.0.68: isolate every timeline text part so typography controls do not bleed into each other */ .monkey-timeline-card .monkey-timeline-tag, .monkey-timeline-card .monkey-timeline-step, .monkey-timeline-card .monkey-timeline-item-title, .monkey-timeline-card .monkey-timeline-desc, .monkey-timeline-card .monkey-timeline-desc p{ box-sizing:border-box; } .monkey-timeline-card .monkey-timeline-step{ display:block; margin-top:0; font-family:inherit; } .monkey-timeline-card .monkey-timeline-item-title{ display:block; margin-top:0; } .monkey-timeline-card .monkey-timeline-desc, .monkey-timeline-card .monkey-timeline-desc p{ display:block; } /* v1.0.73: timeline image layouts */ .monkey-timeline-card-inner{display:flex;gap:18px;align-items:stretch;width:100%;box-sizing:border-box;} .monkey-timeline-card.monkey-image-top .monkey-timeline-card-inner{flex-direction:column;} .monkey-timeline-card.monkey-image-bottom .monkey-timeline-card-inner{flex-direction:column;} .monkey-timeline-card.monkey-image-left .monkey-timeline-card-inner{flex-direction:row;align-items:center;} .monkey-timeline-card.monkey-image-right .monkey-timeline-card-inner{flex-direction:row;align-items:center;} .monkey-timeline-text-content{min-width:0;flex:1 1 auto;} .monkey-timeline-image{display:block;overflow:hidden;margin:0;width:100%;height:180px;flex:0 0 auto;border-radius:12px;} .monkey-timeline-image img{display:block;width:100%;height:100%;object-fit:cover;} .monkey-timeline-card.monkey-image-left .monkey-timeline-image,.monkey-timeline-card.monkey-image-right .monkey-timeline-image{width:42%;height:180px;} @media(max-width:767px){.monkey-timeline-card.monkey-image-left .monkey-timeline-card-inner,.monkey-timeline-card.monkey-image-right .monkey-timeline-card-inner{flex-direction:column;align-items:stretch}.monkey-timeline-card.monkey-image-left .monkey-timeline-image,.monkey-timeline-card.monkey-image-right .monkey-timeline-image{width:100%;}} /* v1.0.74: fix image left/right so vertical and horizontal timeline image layouts both work cleanly */ .monkey-timeline-card.has-image .monkey-timeline-card-inner{ display:grid; gap:18px; width:100%; box-sizing:border-box; align-items:stretch; } .monkey-timeline-card.monkey-image-top .monkey-timeline-card-inner, .monkey-timeline-card.monkey-image-bottom .monkey-timeline-card-inner{ grid-template-columns:1fr; grid-auto-flow:row; } .monkey-timeline-card.monkey-image-left .monkey-timeline-card-inner, .monkey-timeline-card.monkey-image-right .monkey-timeline-card-inner{ grid-template-columns:minmax(90px, var(--monkey-timeline-image-col, 42%)) minmax(0, 1fr); grid-auto-flow:column; align-items:center; } .monkey-timeline-card.monkey-image-right .monkey-timeline-card-inner{ grid-template-columns:minmax(0, 1fr) minmax(90px, var(--monkey-timeline-image-col, 42%)); } .monkey-timeline-card.monkey-image-left .monkey-timeline-image, .monkey-timeline-card.monkey-image-right .monkey-timeline-image{ width:100%!important; max-width:100%; min-width:0; } .monkey-timeline-card.monkey-image-left .monkey-timeline-text-content, .monkey-timeline-card.monkey-image-right .monkey-timeline-text-content{ width:100%; min-width:0; } .monkey-timeline-card.no-image .monkey-timeline-card-inner{ display:block; } @media(max-width:767px){ .monkey-timeline-card.monkey-image-left .monkey-timeline-card-inner, .monkey-timeline-card.monkey-image-right .monkey-timeline-card-inner{ grid-template-columns:1fr!important; grid-auto-flow:row; align-items:stretch; } } /* v1.0.75: keep left/right timeline images landscape instead of portrait */ .monkey-timeline-card.monkey-image-left .monkey-timeline-image, .monkey-timeline-card.monkey-image-right .monkey-timeline-image{ aspect-ratio:16/9; height:auto!important; } .monkey-timeline-card.monkey-image-left .monkey-timeline-image img, .monkey-timeline-card.monkey-image-right .monkey-timeline-image img{ width:100%; height:100%; object-fit:cover; } /* v1.0.76: automatic left/right timeline image columns Keeps horizontal image layouts simple: the image gets a sensible automatic column and the text receives the remaining space so it does not get squeezed. */ .monkey-timeline-card{ container-type:inline-size; } .monkey-timeline-card.monkey-image-left .monkey-timeline-card-inner{ display:grid!important; grid-template-columns:minmax(120px, clamp(130px, 34%, 240px)) minmax(0, 1fr)!important; align-items:center!important; } .monkey-timeline-card.monkey-image-right .monkey-timeline-card-inner{ display:grid!important; grid-template-columns:minmax(0, 1fr) minmax(120px, clamp(130px, 34%, 240px))!important; align-items:center!important; } .monkey-timeline-card.monkey-image-left .monkey-timeline-image, .monkey-timeline-card.monkey-image-right .monkey-timeline-image{ width:100%!important; max-width:240px!important; justify-self:stretch; aspect-ratio:16/9; height:auto!important; } .monkey-timeline-card.monkey-image-left .monkey-timeline-text-content, .monkey-timeline-card.monkey-image-right .monkey-timeline-text-content{ min-width:0!important; width:auto!important; max-width:none!important; } @container (max-width: 520px){ .monkey-timeline-card.monkey-image-left .monkey-timeline-card-inner, .monkey-timeline-card.monkey-image-right .monkey-timeline-card-inner{ grid-template-columns:1fr!important; grid-auto-flow:row!important; } .monkey-timeline-card.monkey-image-left .monkey-timeline-image, .monkey-timeline-card.monkey-image-right .monkey-timeline-image{ max-width:100%!important; } } /* v1.0.77: split timeline image commands Top/bottom and left/right no longer share the same sizing logic. */ .monkey-timeline-card.monkey-image-top .monkey-timeline-card-inner, .monkey-timeline-card.monkey-image-bottom .monkey-timeline-card-inner{ display:grid!important; grid-template-columns:1fr!important; grid-auto-flow:row!important; align-items:stretch!important; } .monkey-timeline-card.monkey-image-top .monkey-timeline-image, .monkey-timeline-card.monkey-image-bottom .monkey-timeline-image{ max-width:100%!important; justify-self:stretch; aspect-ratio:auto!important; flex:none!important; } .monkey-timeline-card.monkey-image-left .monkey-timeline-card-inner{ display:grid!important; grid-template-columns:minmax(90px, var(--monkey-timeline-horizontal-image-size, 34%)) minmax(0, 1fr)!important; grid-auto-flow:column!important; align-items:center!important; } .monkey-timeline-card.monkey-image-right .monkey-timeline-card-inner{ display:grid!important; grid-template-columns:minmax(0, 1fr) minmax(90px, var(--monkey-timeline-horizontal-image-size, 34%))!important; grid-auto-flow:column!important; align-items:center!important; } .monkey-timeline-card.monkey-image-left .monkey-timeline-image, .monkey-timeline-card.monkey-image-right .monkey-timeline-image{ width:100%!important; max-width:none!important; height:auto!important; min-width:0!important; justify-self:stretch!important; flex:none!important; } .monkey-timeline-card.monkey-image-left .monkey-timeline-text-content, .monkey-timeline-card.monkey-image-right .monkey-timeline-text-content{ min-width:0!important; width:auto!important; } @media(max-width:767px){ .monkey-timeline-card.monkey-image-left .monkey-timeline-card-inner, .monkey-timeline-card.monkey-image-right .monkey-timeline-card-inner{ grid-template-columns:1fr!important; grid-auto-flow:row!important; align-items:stretch!important; } .monkey-timeline-card.monkey-image-left .monkey-timeline-image, .monkey-timeline-card.monkey-image-right .monkey-timeline-image{ max-width:100%!important; } } /* v1.0.78: Timeline Style 2 - swirly line with per-card position controls */ .monkey-timeline-style2 .monkey-timeline-list{ padding:30px 0 30px; } .monkey-timeline-style2 .monkey-timeline-line{ left:0!important; top:0; bottom:0; width:100%!important; margin-left:0!important; background:transparent!important; pointer-events:none; color:#1f5a38; z-index:0; } .monkey-timeline-style2 .monkey-timeline-swirly{ display:block; width:100%; height:100%; overflow:visible; } .monkey-timeline-style1 .monkey-timeline-swirly{display:none;} .monkey-timeline-style2 .monkey-timeline-item{ display:grid; grid-template-columns:1fr 1fr; min-height:220px; margin-bottom:42px; position:relative; z-index:1; } .monkey-timeline-style2 .monkey-side-left .monkey-timeline-card, .monkey-timeline-style2 .monkey-side-right .monkey-timeline-card{ transform:translate(var(--monkey-style2-x,0px), var(--monkey-style2-y,0px)); } .monkey-timeline-style2 .monkey-side-left .monkey-timeline-card{ grid-column:1; justify-self:end; margin-right:var(--monkey-style2-card-line-space,75px); } .monkey-timeline-style2 .monkey-side-right .monkey-timeline-card{ grid-column:2; justify-self:start; margin-left:var(--monkey-style2-card-line-space,75px); } .monkey-timeline-style2 .monkey-timeline-connector{ display:none!important; } .monkey-timeline-style2 .monkey-timeline-dot{ z-index:3; } .monkey-timeline-style2 .monkey-timeline-card{ z-index:2; } @media(max-width:767px){ .monkey-timeline-style2 .monkey-timeline-line{ left:0!important; width:100%!important; opacity:.35; } .monkey-timeline-style2 .monkey-timeline-item{ display:block; min-height:0; } .monkey-timeline-style2 .monkey-side-left .monkey-timeline-card, .monkey-timeline-style2 .monkey-side-right .monkey-timeline-card{ transform:none!important; margin-left:34px!important; margin-right:0!important; } } /* v1.0.79: automatic horizontal timeline card fix Left/right image layouts need more horizontal room than top/bottom layouts. This prevents the text from being squeezed while keeping top/bottom card sizing unchanged. */ .monkey-timeline-card.monkey-image-left, .monkey-timeline-card.monkey-image-right{ width:min(100%, 680px)!important; max-width:680px!important; } .monkey-timeline-card.monkey-image-left .monkey-timeline-card-inner, .monkey-timeline-card.monkey-image-right .monkey-timeline-card-inner{ display:grid!important; gap:clamp(18px, 4%, 34px)!important; align-items:center!important; } .monkey-timeline-card.monkey-image-left .monkey-timeline-card-inner{ grid-template-columns:minmax(180px, 40%) minmax(260px, 1fr)!important; } .monkey-timeline-card.monkey-image-right .monkey-timeline-card-inner{ grid-template-columns:minmax(260px, 1fr) minmax(180px, 40%)!important; } .monkey-timeline-card.monkey-image-left .monkey-timeline-image, .monkey-timeline-card.monkey-image-right .monkey-timeline-image{ width:100%!important; max-width:none!important; aspect-ratio:16/9!important; height:auto!important; } .monkey-timeline-card.monkey-image-left .monkey-timeline-text-content, .monkey-timeline-card.monkey-image-right .monkey-timeline-text-content{ min-width:260px!important; width:auto!important; max-width:none!important; } @media(max-width:900px){ .monkey-timeline-card.monkey-image-left .monkey-timeline-card-inner, .monkey-timeline-card.monkey-image-right .monkey-timeline-card-inner{ grid-template-columns:1fr!important; } .monkey-timeline-card.monkey-image-left .monkey-timeline-text-content, .monkey-timeline-card.monkey-image-right .monkey-timeline-text-content{ min-width:0!important; } } /* v1.0.80: link the Style 2 timeline icon/dot to the card movement. The per-card horizontal/vertical position controls now move the whole item, so the dot stays attached to its card instead of staying stuck on the main line. */ .monkey-timeline-style2 .monkey-timeline-item{ transform:translate(var(--monkey-style2-x,0px), var(--monkey-style2-y,0px)); } .monkey-timeline-style2 .monkey-side-left .monkey-timeline-card, .monkey-timeline-style2 .monkey-side-right .monkey-timeline-card{ transform:none!important; } .monkey-timeline-style2 .monkey-timeline-dot, .monkey-timeline-style2 .monkey-timeline-connector{ will-change:transform; } @media(max-width:767px){ .monkey-timeline-style2 .monkey-timeline-item{ transform:none!important; } } /* v1.0.81: Style 2 position + connector real fix Use CSS translate instead of transform so Elementor/animation transforms do not cancel the card position. The connector line is visible again and moves with the card/dot because it belongs to the moved item. */ .monkey-timeline-style2 .monkey-timeline-item{ transform:none!important; translate:var(--monkey-style2-x,0px) var(--monkey-style2-y,0px); } .monkey-timeline-style2 .monkey-timeline-connector{ display:block!important; background:currentColor; color:inherit; z-index:2; } .monkey-timeline-style2 .monkey-side-left .monkey-timeline-connector{ left:50%!important; transform:translate(-100%,-50%)!important; } .monkey-timeline-style2 .monkey-side-right .monkey-timeline-connector{ left:50%!important; transform:translate(0,-50%)!important; } .monkey-timeline-style2 .monkey-timeline-dot{ left:50%!important; } @media(max-width:767px){ .monkey-timeline-style2 .monkey-timeline-item{translate:0 0!important;} } /* v1.0.82: Style 2 pattern mode The dotted swirly line is now a real pattern connector, with 4-card and 5-card presets. Auto pattern positions can be disabled to return to the per-card horizontal/vertical sliders. */ .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list{ min-height:1150px; padding:40px 0 60px!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-line{ inset:0!important; width:100%!important; height:100%!important; left:0!important; color:#1f5a38; opacity:1; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-swirly path{ vector-effect:non-scaling-stroke; } .monkey-timeline-style2.monkey-style2-custom .monkey-timeline-swirly{ opacity:.85; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item{ position:absolute!important; display:block!important; width:min(100%, 520px); min-height:0!important; margin:0!important; z-index:2; translate:none!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-card{ margin:0!important; max-width:100%!important; width:100%!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-connector{ display:none!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-dot{ left:0!important; top:50%!important; transform:translate(-50%,-50%)!important; z-index:4; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(1){left:8%;top:60px;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(2){right:6%;top:250px;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(3){left:16%;top:455px;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(4){right:8%;top:680px;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(5){left:23%;top:900px;} .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-list{min-height:980px;} .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(1){left:8%;top:70px;} .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(2){right:7%;top:300px;} .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(3){left:13%;top:535px;} .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(4){right:12%;top:760px;} .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(n+5){display:none!important;} .monkey-timeline-style2-pattern_5.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(n+6){display:none!important;} @media(max-width:900px){ .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list{ min-height:0!important; padding-left:34px!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-line{ left:12px!important; width:2px!important; background:currentColor!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-swirly{display:none!important;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item{ position:relative!important; display:block!important; width:auto!important; left:auto!important; right:auto!important; top:auto!important; margin-bottom:35px!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-card{ margin-left:34px!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-dot{ left:12px!important; top:50%!important; transform:translate(-50%,-50%)!important; } } /* v1.0.83: explicit left/right pattern aliases */ .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-list{min-height:980px;} .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(1){left:8%;top:70px;} .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(2){right:7%;top:300px;} .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(3){left:13%;top:535px;} .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(4){right:12%;top:760px;} .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(n+5){display:none!important;} .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(1){left:8%;top:60px;} .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(2){right:6%;top:250px;} .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(3){left:16%;top:455px;} .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(4){right:8%;top:680px;} .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(5){left:23%;top:900px;} .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(n+6){display:none!important;} /* v1.0.84: Style 2 left/right pattern overlap + icon-on-line fix The automatic pattern now uses two clear columns instead of free absolute positions that can collide. Dots are attached to the side of each card that faces the timeline line. */ .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list{ position:relative!important; min-height:1180px!important; padding:40px 0 70px!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item{ position:absolute!important; display:block!important; width:min(42%, 430px)!important; max-width:430px!important; min-width:280px!important; margin:0!important; z-index:3!important; translate:none!important; transform:none!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-card{ width:100%!important; max-width:100%!important; margin:0!important; position:relative!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-side-left{ left:0!important; right:auto!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-side-right{ right:0!important; left:auto!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(1){top:60px!important;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(2){top:285px!important;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(3){top:510px!important;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(4){top:735px!important;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(5){top:960px!important;} .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-list{ min-height:990px!important; } .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(1), .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(1){top:70px!important;} .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(2), .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(2){top:310px!important;} .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(3), .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(3){top:550px!important;} .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(4), .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(4){top:790px!important;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-dot{ top:50%!important; z-index:6!important; pointer-events:none; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-side-left .monkey-timeline-dot{ left:auto!important; right:0!important; transform:translate(50%,-50%)!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-side-right .monkey-timeline-dot{ left:0!important; right:auto!important; transform:translate(-50%,-50%)!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-connector{ display:block!important; position:absolute!important; top:50%!important; height:2px!important; background:currentColor!important; opacity:.8; z-index:2!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-side-left .monkey-timeline-connector{ left:100%!important; right:auto!important; width:var(--monkey-style2-card-line-space,75px)!important; transform:translate(0,-50%)!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-side-right .monkey-timeline-connector{ right:100%!important; left:auto!important; width:var(--monkey-style2-card-line-space,75px)!important; transform:translate(0,-50%)!important; } @media(max-width:900px){ .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list{min-height:0!important;padding-left:34px!important;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item{ position:relative!important;display:block!important;width:auto!important;max-width:none!important;min-width:0!important; left:auto!important;right:auto!important;top:auto!important;margin-bottom:35px!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-card{margin-left:34px!important;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-side-left .monkey-timeline-dot, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-side-right .monkey-timeline-dot{ left:12px!important;right:auto!important;transform:translate(-50%,-50%)!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-side-left .monkey-timeline-connector, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-side-right .monkey-timeline-connector{ left:12px!important;right:auto!important;width:22px!important;transform:translate(0,-50%)!important; } } /* v1.0.88: Style 2 real line alignment fix The dot/icon is now positioned on the swirly SVG path with JS, and the small connector is recalculated from the card edge to that exact line point. */ .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-dot{ position:absolute!important; right:auto!important; top:50%!important; transform:translate(-50%,-50%)!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-connector{ position:absolute!important; right:auto!important; top:50%!important; transform:translate(0,-50%)!important; transform-origin:left center!important; } @media(max-width:900px){ .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-dot{left:12px!important;right:auto!important;transform:translate(-50%,-50%)!important;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-connector{left:12px!important;right:auto!important;width:22px!important;transform:translate(0,-50%)!important;} } /* v1.0.89: manual card controls + reliable Style 2 position sliders */ .monkey-timeline-card{ overflow:hidden; } .monkey-timeline-tag-wrap{ width:100%; } .monkey-timeline-tag-wrap .monkey-timeline-tag{ display:inline-block; } /* Force the per-card X/Y controls to move the whole item, even when automatic pattern mode is on. This keeps the card, icon and connector linked together. */ .monkey-timeline-style2 .monkey-timeline-item{ translate:var(--monkey-style2-x,0px) var(--monkey-style2-y,0px)!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item{ translate:var(--monkey-style2-x,0px) var(--monkey-style2-y,0px)!important; } .monkey-timeline-style2 .monkey-timeline-card{ transform:none!important; } @media(max-width:900px){ .monkey-timeline-style2 .monkey-timeline-item, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item{ translate:0 0!important; } } /* v1.0.90: unlimited Style 2 items + automatic height No more cutoff after 5 cards. The list grows from the real item count and the swirly line fills the full height. */ .monkey-timeline-wrap{ overflow:visible!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list{ min-height:var(--monkey-style2-list-height, 1180px)!important; height:auto!important; overflow:visible!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-line{ height:var(--monkey-style2-list-height, 1180px)!important; bottom:auto!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-swirly{ height:var(--monkey-style2-list-height, 1180px)!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item{ top:var(--monkey-style2-auto-top, 60px)!important; display:block!important; } .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(n+5), .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(n+5), .monkey-timeline-style2-pattern_5.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(n+6), .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-item:nth-of-type(n+6){ display:block!important; } @media(max-width:900px){ .monkey-timeline-wrap{overflow:hidden!important;} .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list{ min-height:0!important; height:auto!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-line, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-swirly{ height:100%!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item{ top:auto!important; } } /* v1.0.93: Main timeline mobile layout fix Fixes the classic/main timeline on mobile: removes double left offset, prevents card overflow/cutoff, keeps the vertical line, dot and connector aligned with the card. */ @media(max-width:767px){ .monkey-timeline-wrap{ overflow:visible!important; } .monkey-timeline-list{ padding-left:0!important; padding-right:0!important; overflow:visible!important; } .monkey-timeline-line{ left:14px!important; right:auto!important; bottom:0!important; height:auto!important; } .monkey-timeline-item{ display:block!important; width:100%!important; max-width:100%!important; min-width:0!important; min-height:0!important; overflow:visible!important; margin-bottom:35px!important; } .monkey-side-left .monkey-timeline-card, .monkey-side-right .monkey-timeline-card, .monkey-timeline-card{ margin-left:44px!important; margin-right:0!important; width:calc(100% - 44px)!important; max-width:calc(100% - 44px)!important; min-width:0!important; justify-self:auto!important; } .monkey-timeline-dot{ left:14px!important; right:auto!important; top:50%!important; transform:translate(-50%,-50%)!important; } .monkey-timeline-connector{ left:14px!important; right:auto!important; width:30px!important; transform:translate(0,-50%)!important; } .monkey-timeline-card-inner, .monkey-timeline-card.has-image .monkey-timeline-card-inner{ max-width:100%!important; min-width:0!important; } } /* v1.0.93: Style 2 mobile must not hide/crop the automatic-height timeline. */ @media(max-width:900px){ .monkey-timeline-wrap{ overflow:visible!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list{ overflow:visible!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-line{ bottom:0!important; height:auto!important; } } /* v1.0.94: Mobile header + first card text visibility fix Keeps the main title/subtitle/description visible on phones and prevents the first timeline card text from being hidden by mobile layout/animation rules. */ @media(max-width:767px){ .monkey-timeline-header, .monkey-timeline-eyebrow, .monkey-timeline-title, .monkey-timeline-subtitle, .monkey-timeline-header-desc, .monkey-timeline-header-line{ display:block!important; visibility:visible!important; opacity:1!important; transform:none!important; position:relative!important; z-index:5!important; max-width:100%!important; overflow:visible!important; } .monkey-timeline-header{ width:100%!important; margin:0 0 38px!important; padding:0!important; min-height:0!important; } .monkey-timeline-title{ font-size:clamp(28px, 9vw, 38px)!important; line-height:1.08!important; margin:0!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; } .monkey-timeline-subtitle{ font-size:clamp(22px, 7vw, 30px)!important; line-height:1.12!important; margin-top:4px!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; } .monkey-timeline-header-desc, .monkey-timeline-header-desc p{ font-size:16px!important; line-height:1.55!important; margin-top:14px!important; white-space:normal!important; word-break:normal!important; overflow-wrap:break-word!important; } .monkey-timeline-header-line{ display:inline-block!important; } .monkey-timeline-item:first-child, .monkey-timeline-item:first-child .monkey-timeline-card, .monkey-timeline-item:first-child .monkey-timeline-text-content, .monkey-timeline-item:first-child .monkey-timeline-item-title, .monkey-timeline-item:first-child .monkey-timeline-desc, .monkey-timeline-item:first-child .monkey-timeline-desc p{ display:block!important; visibility:visible!important; opacity:1!important; transform:none!important; max-height:none!important; overflow:visible!important; } } /* v1.0.95: Timeline icon exact center fix Elementor's icon circle size control adds a negative margin-left for the classic desktop layout. Style 2 and mobile already use translate(-50%, -50%), so that margin made the icon sit too far left. This resets the extra offset only where translate centering is used. */ .monkey-timeline-style2 .monkey-timeline-dot{ margin-left:0!important; } @media(max-width:767px){ .monkey-timeline-dot{ margin-left:0!important; } } @media(max-width:900px){ .monkey-timeline-style2 .monkey-timeline-dot, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-dot{ margin-left:0!important; } } /* v1.0.104: Style 1 desktop timeline alignment fix The icon circle is centered with translate(-50%, -50%) instead of a negative margin. This keeps every icon exactly centered on the vertical line in Style 1, matching mobile and Style 2. */ .monkey-timeline-style1 .monkey-timeline-dot{ left:50%!important; margin-left:0!important; transform:translate(-50%,-50%)!important; } .monkey-timeline-style1 .monkey-timeline-line{ left:50%!important; } .monkey-timeline-style1 .monkey-timeline-item{ overflow:visible!important; } .monkey-timeline-style1 .monkey-timeline-card{ box-sizing:border-box!important; } .monkey-timeline-style1 .monkey-side-left .monkey-timeline-connector{ left:50%!important; transform:translate(-100%,-50%)!important; } .monkey-timeline-style1 .monkey-side-right .monkey-timeline-connector{ left:50%!important; transform:translate(0,-50%)!important; } /* v1.0.107: Style 1 repeating pattern fix The PHP now assigns monkey-side-left / monkey-side-right from a true repeating pattern. These rules make the card and connector follow that class only, so the last item can never be forced by nth-of-type CSS. */ @media(min-width:768px){ .monkey-timeline-style1 .monkey-side-left .monkey-timeline-card{ grid-column:1!important; justify-self:end!important; margin-left:0!important; margin-right:45px!important; } .monkey-timeline-style1 .monkey-side-right .monkey-timeline-card{ grid-column:2!important; justify-self:start!important; margin-left:45px!important; margin-right:0!important; } .monkey-timeline-style1 .monkey-side-left .monkey-timeline-connector{ left:50%!important; right:auto!important; transform:translate(-100%,-50%)!important; } .monkey-timeline-style1 .monkey-side-right .monkey-timeline-connector{ left:50%!important; right:auto!important; transform:translate(0,-50%)!important; } } /* v1.0.108: final Style 1 fix. No nth-of-type / last-item rule is allowed here. The PHP side class is the only source of truth. This keeps the repeat pattern working forever when new cards are added. */ @media(min-width:768px){ .monkey-timeline-style1 .monkey-timeline-item{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important; align-items:center!important; overflow:visible!important; } .monkey-timeline-style1 .monkey-timeline-item.monkey-side-left .monkey-timeline-card{ grid-column:1!important; justify-self:end!important; margin-left:0!important; margin-right:45px!important; } .monkey-timeline-style1 .monkey-timeline-item.monkey-side-right .monkey-timeline-card{ grid-column:2!important; justify-self:start!important; margin-left:45px!important; margin-right:0!important; } .monkey-timeline-style1 .monkey-timeline-item.monkey-side-left .monkey-timeline-connector{ left:50%!important; right:auto!important; transform:translate(-100%,-50%)!important; } .monkey-timeline-style1 .monkey-timeline-item.monkey-side-right .monkey-timeline-connector{ left:50%!important; right:auto!important; transform:translate(0,-50%)!important; } .monkey-timeline-style1 .monkey-timeline-item:last-child, .monkey-timeline-style1 .monkey-timeline-item:last-of-type{ margin-bottom:0!important; } } /* v1.0.110: Style 1 final fix. Removed the old nth-of-type grid-column override. Style 1 now follows only the PHP class monkey-side-left / monkey-side-right, so saved Elementor CSS cannot push the last card to the wrong column. */ @media(min-width:768px){ .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item.monkey-side-left > .monkey-timeline-card{ grid-column:1!important; justify-self:end!important; margin-left:0!important; margin-right:45px!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item.monkey-side-right > .monkey-timeline-card{ grid-column:2!important; justify-self:start!important; margin-left:45px!important; margin-right:0!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item.monkey-side-left > .monkey-timeline-connector{ left:50%!important; right:auto!important; transform:translate(-100%,-50%)!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item.monkey-side-right > .monkey-timeline-connector{ left:50%!important; right:auto!important; transform:translate(0,-50%)!important; } } /* v1.0.111: Style 1 hard layout fix without CSS grid. Elementor/site CSS was leaving .monkey-timeline-item as display:block, so grid-column had no effect. This version does not depend on grid-column at all: the side class positions each card with margins. Pattern source stays PHP classes: monkey-side-left / monkey-side-right. */ @media(min-width:768px){ .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item{ display:block!important; position:relative!important; width:100%!important; min-height:150px!important; overflow:visible!important; clear:both!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-card{ grid-column:auto!important; justify-self:auto!important; position:relative!important; width:100%!important; box-sizing:border-box!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item.monkey-side-left > .monkey-timeline-card{ margin-left:auto!important; margin-right:calc(50% + 45px)!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item.monkey-side-right > .monkey-timeline-card{ margin-left:calc(50% + 45px)!important; margin-right:auto!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item.monkey-side-left > .monkey-timeline-connector{ left:50%!important; right:auto!important; transform:translate(-100%,-50%)!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item.monkey-side-right > .monkey-timeline-connector{ left:50%!important; right:auto!important; transform:translate(0,-50%)!important; } } /* v1.0.112: Style 1 mobile fix. Desktop Style 1 forces the line/dots to 50%, so this final mobile block moves the bar and icons back to the left. */ @media(max-width:767px){ .monkey-timeline-style1 .monkey-timeline-list{ position:relative!important; padding-left:34px!important; padding-right:0!important; } .monkey-timeline-style1 .monkey-timeline-line{ left:12px!important; right:auto!important; transform:none!important; margin-left:0!important; } .monkey-timeline-style1 .monkey-timeline-dot{ left:12px!important; right:auto!important; transform:translate(-50%,-50%)!important; margin-left:0!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item{ display:block!important; width:100%!important; min-height:0!important; margin-bottom:35px!important; padding:0!important; clear:none!important; overflow:visible!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-card{ width:auto!important; max-width:none!important; margin-left:34px!important; margin-right:0!important; grid-column:auto!important; justify-self:auto!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector{ left:12px!important; right:auto!important; width:22px!important; transform:translate(0,-50%)!important; } } /* v1.0.113: Mobile Style 1 icon/bar alignment final. On mobile the bar is the source of truth. Dot center and connector start are locked to the same X value. This overrides Elementor saved responsive controls and older desktop centering rules. */ @media(max-width:767px){ .monkey-timeline-style1{ --monkey-mobile-line-x: 14px; --monkey-mobile-card-gap: 38px; } .monkey-timeline-style1 .monkey-timeline-list{ position:relative!important; padding-left:var(--monkey-mobile-card-gap)!important; padding-right:0!important; } .monkey-timeline-style1 .monkey-timeline-line{ left:var(--monkey-mobile-line-x)!important; right:auto!important; margin-left:0!important; transform:none!important; } .monkey-timeline-style1 .monkey-timeline-dot{ left:var(--monkey-mobile-line-x)!important; right:auto!important; top:50%!important; margin-left:0!important; margin-right:0!important; transform:translate(-50%,-50%)!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector{ left:var(--monkey-mobile-line-x)!important; right:auto!important; width:24px!important; margin-left:0!important; margin-right:0!important; transform:translate(0,-50%)!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-card{ margin-left:var(--monkey-mobile-card-gap)!important; margin-right:0!important; } } /* v1.0.114: Hard mobile Style 1 icon/bar lock. The mobile line, icon circle center and connector start all use the same X coordinate. This block is intentionally last so old Elementor responsive spacing cannot move the icon away from the bar. */ @media(max-width:767px){ .monkey-timeline-style1{ --monkey-mobile-line-x: 18px; --monkey-mobile-card-gap: 42px; } .monkey-timeline-style1 .monkey-timeline-list{ position:relative!important; padding-left:0!important; padding-right:0!important; overflow:visible!important; } .monkey-timeline-style1 .monkey-timeline-line{ left:var(--monkey-mobile-line-x)!important; right:auto!important; margin-left:0!important; margin-right:0!important; transform:none!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item, .monkey-timeline-style1 .monkey-timeline-item{ position:relative!important; display:block!important; padding-left:0!important; padding-right:0!important; width:100%!important; } .monkey-timeline-style1 .monkey-timeline-dot, .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-dot{ left:var(--monkey-mobile-line-x)!important; right:auto!important; top:50%!important; margin-left:0!important; margin-right:0!important; transform:translate(-50%,-50%)!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:center!important; } .monkey-timeline-style1 .monkey-timeline-dot i, .monkey-timeline-style1 .monkey-timeline-dot svg{ position:static!important; display:block!important; line-height:1!important; margin:0!important; transform:none!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector, .monkey-timeline-style1 .monkey-timeline-connector{ left:var(--monkey-mobile-line-x)!important; right:auto!important; width:24px!important; margin-left:0!important; margin-right:0!important; transform:translate(0,-50%)!important; } .monkey-timeline-style1 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-card, .monkey-timeline-style1 .monkey-side-left .monkey-timeline-card, .monkey-timeline-style1 .monkey-side-right .monkey-timeline-card, .monkey-timeline-style1 .monkey-timeline-card{ margin-left:var(--monkey-mobile-card-gap)!important; margin-right:0!important; width:calc(100% - var(--monkey-mobile-card-gap))!important; max-width:calc(100% - var(--monkey-mobile-card-gap))!important; } } /* v1.0.115: Hard mobile Style 2 icon/bar/card lock. Style 2 mobile now uses the same source-of-truth as Style 1 mobile: one fixed X value for the vertical bar, icon center and connector start. This overrides older Style 2 auto-pattern/mobile rules that could push the icon off the bar. */ @media(max-width:767px){ .monkey-timeline-style2{ --monkey-style2-mobile-line-x:18px; --monkey-style2-mobile-card-gap:42px; } .monkey-timeline-style2 .monkey-timeline-list{ position:relative!important; padding-left:0!important; padding-right:0!important; min-height:0!important; height:auto!important; overflow:visible!important; } .monkey-timeline-style2 .monkey-timeline-line{ left:var(--monkey-style2-mobile-line-x)!important; right:auto!important; top:0!important; bottom:0!important; width:2px!important; height:auto!important; margin-left:0!important; margin-right:0!important; transform:none!important; background:currentColor!important; opacity:1!important; } .monkey-timeline-style2 .monkey-timeline-swirly{ display:none!important; } .monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item, .monkey-timeline-style2 .monkey-timeline-item, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list > .monkey-timeline-item, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item{ position:relative!important; display:block!important; width:100%!important; max-width:100%!important; min-width:0!important; left:auto!important; right:auto!important; top:auto!important; translate:0 0!important; transform:none!important; margin:0 0 35px!important; padding-left:0!important; padding-right:0!important; clear:none!important; overflow:visible!important; } .monkey-timeline-style2 .monkey-timeline-dot, .monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-dot, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-dot, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-dot{ left:var(--monkey-style2-mobile-line-x)!important; right:auto!important; top:50%!important; margin-left:0!important; margin-right:0!important; transform:translate(-50%,-50%)!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:center!important; z-index:6!important; } .monkey-timeline-style2 .monkey-timeline-dot i, .monkey-timeline-style2 .monkey-timeline-dot svg{ position:static!important; display:block!important; line-height:1!important; margin:0!important; transform:none!important; } .monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector, .monkey-timeline-style2 .monkey-timeline-connector, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-connector{ display:block!important; position:absolute!important; left:var(--monkey-style2-mobile-line-x)!important; right:auto!important; top:50%!important; width:calc(var(--monkey-style2-mobile-card-gap,42px) - var(--monkey-style2-mobile-line-x,18px))!important; min-width:12px!important; height:2px!important; margin-left:0!important; margin-right:0!important; transform:translate(0,-50%)!important; background:currentColor!important; opacity:.8!important; z-index:2!important; } .monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-card, .monkey-timeline-style2 .monkey-side-left .monkey-timeline-card, .monkey-timeline-style2 .monkey-side-right .monkey-timeline-card, .monkey-timeline-style2 .monkey-timeline-card, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-card{ margin-left:var(--monkey-style2-mobile-card-gap)!important; margin-right:0!important; width:calc(100% - var(--monkey-style2-mobile-card-gap))!important; max-width:calc(100% - var(--monkey-style2-mobile-card-gap))!important; min-width:0!important; box-sizing:border-box!important; transform:none!important; } } /* v1.0.116: Style 2 unlimited mode cleanup Old Pattern 4 / Pattern 5 saved classes must never cut off cards. */ .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-item, .monkey-timeline-style2-pattern_5.monkey-style2-auto-pattern-yes .monkey-timeline-item, .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-item, .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-item, .monkey-timeline-style2-automatic.monkey-style2-auto-pattern-yes .monkey-timeline-item{ display:block!important; top:var(--monkey-style2-auto-top, 60px)!important; } .monkey-timeline-style2-automatic.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-pattern_5.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-list{ min-height:var(--monkey-style2-list-height, 1180px)!important; height:auto!important; overflow:visible!important; } .monkey-timeline-style2-automatic.monkey-style2-auto-pattern-yes .monkey-timeline-line, .monkey-timeline-style2-automatic.monkey-style2-auto-pattern-yes .monkey-timeline-swirly{ height:var(--monkey-style2-list-height, 1180px)!important; } @media(max-width:900px){ .monkey-timeline-style2-automatic.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-pattern_5.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-list{ min-height:0!important; height:auto!important; overflow:visible!important; } .monkey-timeline-style2-automatic.monkey-style2-auto-pattern-yes .monkey-timeline-item, .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-item, .monkey-timeline-style2-pattern_5.monkey-style2-auto-pattern-yes .monkey-timeline-item, .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-item, .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-item{ top:auto!important; display:block!important; } } /* v1.0.117: Style 2 true unlimited line continuation The old 4/5-card pattern CSS is fully neutralized. The Style 2 line now uses the dynamic --monkey-style2-list-height generated from the real repeater item count, and on mobile/tablet the vertical line stretches from top to bottom of the natural stacked content. */ .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-automatic.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-pattern_5.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-list{ min-height:var(--monkey-style2-list-height, 1180px)!important; overflow:visible!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-line, .monkey-timeline-style2-automatic.monkey-style2-auto-pattern-yes .monkey-timeline-line, .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-line, .monkey-timeline-style2-pattern_5.monkey-style2-auto-pattern-yes .monkey-timeline-line, .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-line, .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-line, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-swirly, .monkey-timeline-style2-automatic.monkey-style2-auto-pattern-yes .monkey-timeline-swirly, .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-swirly, .monkey-timeline-style2-pattern_5.monkey-style2-auto-pattern-yes .monkey-timeline-swirly, .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-swirly, .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-swirly{ height:var(--monkey-style2-list-height, 1180px)!important; min-height:var(--monkey-style2-list-height, 1180px)!important; bottom:auto!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item{ display:block!important; top:var(--monkey-style2-auto-top, 60px)!important; } @media(max-width:900px){ .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-automatic.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-pattern_5.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-list, .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-list{ position:relative!important; min-height:0!important; height:auto!important; overflow:visible!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-line, .monkey-timeline-style2-automatic.monkey-style2-auto-pattern-yes .monkey-timeline-line, .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-line, .monkey-timeline-style2-pattern_5.monkey-style2-auto-pattern-yes .monkey-timeline-line, .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-line, .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-line{ position:absolute!important; top:0!important; bottom:0!important; left:18px!important; width:2px!important; height:auto!important; min-height:100%!important; background:currentColor!important; display:block!important; opacity:1!important; transform:none!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-swirly{ display:none!important; } .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-item, .monkey-timeline-style2-automatic.monkey-style2-auto-pattern-yes .monkey-timeline-item, .monkey-timeline-style2-pattern_4.monkey-style2-auto-pattern-yes .monkey-timeline-item, .monkey-timeline-style2-pattern_5.monkey-style2-auto-pattern-yes .monkey-timeline-item, .monkey-timeline-style2-left_right_4.monkey-style2-auto-pattern-yes .monkey-timeline-item, .monkey-timeline-style2-left_right_5.monkey-style2-auto-pattern-yes .monkey-timeline-item{ position:relative!important; top:auto!important; left:auto!important; right:auto!important; display:block!important; width:100%!important; margin:0 0 35px!important; } } /* v1.0.118: Style 2 spacing + mobile icon/connector option */ @media(max-width:767px){ .monkey-style2-mobile-links- .monkey-timeline-style2 .monkey-timeline-dot, .monkey-style2-mobile-links- .monkey-timeline-style2 .monkey-timeline-connector{ display:none!important; } .monkey-style2-mobile-links-yes .monkey-timeline-style2 .monkey-timeline-dot{ display:flex!important; } .monkey-style2-mobile-links-yes .monkey-timeline-style2 .monkey-timeline-connector{ display:block!important; } } /* v1.0.119: Style 2 final icon + connector alignment and separate PC/mobile icon visibility. The timeline line, icon center and connector start use the exact same X coordinate on mobile. */ @media(min-width:768px){ .monkey-timeline-desktop-icons- .monkey-timeline-dot{ display:none!important; } .monkey-timeline-desktop-icons-yes .monkey-timeline-dot{ display:flex!important; } } @media(max-width:767px){ .monkey-timeline-mobile-icons- .monkey-timeline-dot{ display:none!important; } .monkey-timeline-mobile-icons-yes .monkey-timeline-dot{ display:flex!important; } .monkey-timeline-style2, .monkey-timeline-style2.monkey-style2-auto-pattern-yes{ --monkey-style2-mobile-line-x:18px; } .monkey-timeline-style2 .monkey-timeline-list{ position:relative!important; overflow:visible!important; } .monkey-timeline-style2 .monkey-timeline-line, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-line{ position:absolute!important; left:var(--monkey-style2-mobile-line-x)!important; right:auto!important; top:0!important; bottom:0!important; width:2px!important; height:auto!important; min-height:100%!important; margin:0!important; transform:none!important; background:currentColor!important; display:block!important; } .monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list > .monkey-timeline-item{ position:relative!important; left:auto!important; right:auto!important; top:auto!important; width:100%!important; max-width:100%!important; translate:0 0!important; transform:none!important; padding:0!important; overflow:visible!important; } .monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-dot, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-dot{ position:absolute!important; left:var(--monkey-style2-mobile-line-x)!important; right:auto!important; top:50%!important; margin:0!important; transform:translate(-50%,-50%)!important; z-index:10!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; } .monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector{ position:absolute!important; left:var(--monkey-style2-mobile-line-x)!important; right:auto!important; top:50%!important; width:calc(var(--monkey-style2-mobile-card-gap,42px) - var(--monkey-style2-mobile-line-x,18px))!important; min-width:8px!important; max-width:220px!important; height:2px!important; margin:0!important; transform:translateY(-50%)!important; z-index:3!important; opacity:.85!important; } .monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-card, .monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-card{ margin-left:var(--monkey-style2-mobile-card-gap,42px)!important; margin-right:0!important; width:calc(100% - var(--monkey-style2-mobile-card-gap,42px))!important; max-width:calc(100% - var(--monkey-style2-mobile-card-gap,42px))!important; box-sizing:border-box!important; } } /* v1.0.120: Hard fix for Style 2 icon visibility and mobile line/icon alignment. Server-side classes are now added directly on .monkey-timeline-wrap, so PC off cannot be ignored by Elementor prefix classes. */ @media (min-width:768px){ .monkey-timeline-wrap.monkey-desktop-icons-off > .monkey-timeline-inner .monkey-timeline-dot, .monkey-timeline-wrap.monkey-desktop-icons-off .monkey-timeline-dot{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; } .monkey-timeline-wrap.monkey-desktop-icons-on > .monkey-timeline-inner .monkey-timeline-dot, .monkey-timeline-wrap.monkey-desktop-icons-on .monkey-timeline-dot{ display:flex!important; visibility:visible!important; opacity:1!important; } } @media (max-width:767px){ .monkey-timeline-wrap.monkey-mobile-icons-off .monkey-timeline-dot{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; } .monkey-timeline-wrap.monkey-mobile-icons-on .monkey-timeline-dot{ display:flex!important; visibility:visible!important; opacity:1!important; } .monkey-timeline-wrap.monkey-timeline-style2, .monkey-timeline-wrap.monkey-timeline-style2.monkey-style2-auto-pattern-yes{ --monkey-style2-mobile-line-x:18px; } .monkey-timeline-wrap.monkey-timeline-style2 .monkey-timeline-line, .monkey-timeline-wrap.monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-line{ left:var(--monkey-style2-mobile-line-x)!important; right:auto!important; transform:none!important; margin:0!important; } .monkey-timeline-wrap.monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-dot, .monkey-timeline-wrap.monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-dot{ left:var(--monkey-style2-mobile-line-x)!important; right:auto!important; top:50%!important; transform:translate(-50%,-50%)!important; margin:0!important; } .monkey-timeline-wrap.monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector, .monkey-timeline-wrap.monkey-timeline-style2.monkey-style2-auto-pattern-yes .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector{ left:var(--monkey-style2-mobile-line-x)!important; right:auto!important; top:50%!important; transform:translateY(-50%)!important; margin:0!important; height:2px!important; } } /* v1.0.121: absolute final hard lock for Style 2 icons/connectors. - PC icon OFF also removes the small connector on PC. - Mobile icon ON stays visible even when PC icon is OFF. - Mobile icon center is locked to the same X coordinate as the timeline line. */ @media (min-width:768px){ .monkey-timeline-wrap.monkey-timeline-style2.monkey-desktop-icons-off .monkey-timeline-dot, .monkey-timeline-wrap.monkey-timeline-style2.monkey-desktop-icons-off .monkey-timeline-connector{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; } .monkey-timeline-wrap.monkey-timeline-style2.monkey-desktop-icons-on .monkey-timeline-dot{ display:flex!important; visibility:visible!important; opacity:1!important; } } @media (max-width:767px){ .monkey-timeline-wrap.monkey-timeline-style2{ --monkey-style2-mobile-line-x:18px!important; } .monkey-timeline-wrap.monkey-timeline-style2 .monkey-timeline-list{ position:relative!important; padding-left:0!important; overflow:visible!important; } .monkey-timeline-wrap.monkey-timeline-style2 .monkey-timeline-line{ position:absolute!important; left:var(--monkey-style2-mobile-line-x)!important; width:2px!important; margin-left:0!important; transform:none!important; } .monkey-timeline-wrap.monkey-timeline-style2 .monkey-timeline-swirly{ display:none!important; } .monkey-timeline-wrap.monkey-timeline-style2.monkey-mobile-icons-on .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-dot{ display:flex!important; visibility:visible!important; opacity:1!important; position:absolute!important; left:var(--monkey-style2-mobile-line-x)!important; top:50%!important; right:auto!important; margin:0!important; margin-left:0!important; transform:translate(-50%,-50%)!important; z-index:50!important; box-sizing:border-box!important; align-items:center!important; justify-content:center!important; } .monkey-timeline-wrap.monkey-timeline-style2.monkey-mobile-icons-off .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-dot{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; } .monkey-timeline-wrap.monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector{ position:absolute!important; left:var(--monkey-style2-mobile-line-x)!important; top:50%!important; right:auto!important; height:2px!important; width:calc(var(--monkey-style2-mobile-card-gap,42px) - var(--monkey-style2-mobile-line-x,18px))!important; margin:0!important; margin-left:0!important; transform:translateY(-50%)!important; z-index:10!important; } .monkey-timeline-wrap.monkey-timeline-style2.monkey-style2-mobile-links-yes .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector{ display:block!important; visibility:visible!important; opacity:1!important; } .monkey-timeline-wrap.monkey-timeline-style2.monkey-style2-mobile-links- .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector{ display:none!important; visibility:hidden!important; opacity:0!important; } } /* v1.0.122: REAL Style 2 icon/connector lock + cache bump This block is last on purpose. Desktop OFF hides BOTH the dot/icon and the small connector. Mobile ON can still show icons even when desktop is OFF. Style 2 mobile line, icon center and connector start are locked to the same X coordinate. */ @media (min-width:768px){ .monkey-timeline-wrap.monkey-timeline-style2.monkey-desktop-icons-off .monkey-timeline-dot, .monkey-timeline-wrap.monkey-timeline-style2.monkey-desktop-icons-off .monkey-timeline-connector, .monkey-timeline-style2.monkey-desktop-icons-off .monkey-timeline-dot, .monkey-timeline-style2.monkey-desktop-icons-off .monkey-timeline-connector{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; } .monkey-timeline-wrap.monkey-timeline-style2.monkey-desktop-icons-on .monkey-timeline-dot, .monkey-timeline-style2.monkey-desktop-icons-on .monkey-timeline-dot{ display:flex!important; visibility:visible!important; opacity:1!important; } } @media (max-width:767px){ .monkey-timeline-wrap.monkey-timeline-style2, .monkey-timeline-style2{ --monkey-style2-mobile-line-x:18px!important; --monkey-style2-mobile-card-gap:46px!important; } .monkey-timeline-wrap.monkey-timeline-style2 .monkey-timeline-list, .monkey-timeline-style2 .monkey-timeline-list{ position:relative!important; padding-left:0!important; padding-right:0!important; overflow:visible!important; } .monkey-timeline-wrap.monkey-timeline-style2 .monkey-timeline-line, .monkey-timeline-style2 .monkey-timeline-line{ position:absolute!important; left:var(--monkey-style2-mobile-line-x)!important; right:auto!important; top:0!important; bottom:0!important; width:2px!important; height:auto!important; min-height:100%!important; margin:0!important; margin-left:0!important; transform:none!important; display:block!important; background:currentColor!important; } .monkey-timeline-wrap.monkey-timeline-style2 .monkey-timeline-swirly, .monkey-timeline-style2 .monkey-timeline-swirly{ display:none!important; } .monkey-timeline-wrap.monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item, .monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item{ position:relative!important; left:auto!important; right:auto!important; top:auto!important; width:100%!important; max-width:100%!important; min-width:0!important; translate:0 0!important; transform:none!important; padding:0!important; margin:0 0 35px!important; overflow:visible!important; } .monkey-timeline-wrap.monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-card, .monkey-timeline-style2 .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-card{ margin-left:var(--monkey-style2-mobile-card-gap)!important; margin-right:0!important; width:calc(100% - var(--monkey-style2-mobile-card-gap))!important; max-width:calc(100% - var(--monkey-style2-mobile-card-gap))!important; box-sizing:border-box!important; } .monkey-timeline-wrap.monkey-timeline-style2.monkey-mobile-icons-on .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-dot, .monkey-timeline-style2.monkey-mobile-icons-on .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-dot{ display:flex!important; visibility:visible!important; opacity:1!important; position:absolute!important; left:var(--monkey-style2-mobile-line-x)!important; right:auto!important; top:50%!important; margin:0!important; margin-left:0!important; margin-right:0!important; transform:translate(-50%,-50%)!important; z-index:999!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; } .monkey-timeline-wrap.monkey-timeline-style2.monkey-mobile-icons-off .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-dot, .monkey-timeline-style2.monkey-mobile-icons-off .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-dot{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; } .monkey-timeline-wrap.monkey-timeline-style2.monkey-style2-mobile-links-yes .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector, .monkey-timeline-style2.monkey-style2-mobile-links-yes .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector{ display:block!important; visibility:visible!important; opacity:1!important; position:absolute!important; left:var(--monkey-style2-mobile-line-x)!important; right:auto!important; top:50%!important; width:calc(var(--monkey-style2-mobile-card-gap) - var(--monkey-style2-mobile-line-x))!important; height:2px!important; min-width:10px!important; margin:0!important; margin-left:0!important; transform:translateY(-50%)!important; z-index:20!important; } .monkey-timeline-wrap.monkey-timeline-style2.monkey-style2-mobile-links-off .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector, .monkey-timeline-style2.monkey-style2-mobile-links-off .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector, .monkey-timeline-wrap.monkey-timeline-style2.monkey-style2-mobile-links- .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector, .monkey-timeline-style2.monkey-style2-mobile-links- .monkey-timeline-list > .monkey-timeline-item > .monkey-timeline-connector{ display:none!important; visibility:hidden!important; opacity:0!important; pointer-events:none!important; } }