­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ :root { --upk-border-width: 30px; --upk-image-width: 420px; --upk-image-spacing: 30px; } .upk-timeline .upk-wrapper { padding: 40px 0 20px 0; } .upk-timeline .upk-item { position: relative; } .upk-timeline .upk-item-box { display: flex; } .upk-timeline .upk-start-end-wrap { position: absolute; width: 60px; height: 60px; text-transform: uppercase; color: #2B2D42; background: #ffffff; font-weight: 700; font-size: 12px; border-radius: 15px; border: calc(var(--upk-border-width) / 6) solid var(--upk-line-color, #8D99AE); } .upk-timeline .upk-start-end-wrap .upk-start, .upk-timeline .upk-start-end-wrap .upk-end { display: none; position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%); } .upk-timeline .upk-date-wrapper { background: #ffffff; width: 90px; height: 90px; text-align: center; border: calc(var(--upk-border-width) / 3) solid var(--upk-line-color, #8D99AE); position: absolute; top: calc(-45px + var(--upk-border-width) / 2); color: #2B2D42; border-radius: 15px; z-index: 111; display: none; } .upk-timeline .upk-date-wrapper .upk-date-inner { position: absolute; top: 50%; right: 50%; padding: 5px; transform: translate(50%, -50%); } .upk-timeline .upk-date-wrapper .upk-date-inner .upk-month { font-weight: 500; font-size: 14px; } .upk-timeline .upk-date-wrapper .upk-date-inner .upk-year { font-size: 12px; font-weight: 600; } .upk-timeline .upk-image-and-content-wrapper { display: block; align-items: center; } .upk-timeline .upk-image-wrapper { height: auto; } .upk-timeline .upk-image-wrapper .upk-img { width: 100%; height: 100%; border-radius: 20px; object-fit: cover; margin-bottom: var(--upk-image-spacing); } .upk-timeline .upk-content-wrap { width: 100%; z-index: 1; } .upk-timeline .upk-category { margin-bottom: 15px; } .upk-timeline .upk-category a { color: #EF233C; font-size: 10px; font-weight: 600; padding: 6px 12px; border-radius: 3px; display: inline-block; text-transform: uppercase; transition: all 0.3s ease-in-out; } .upk-timeline .upk-category a:hover { background: #EF233C; color: #fff; } .upk-timeline .upk-category a + a { margin-right: 5px; } .upk-timeline .upk-title { margin: 0; padding-bottom: 10px; text-transform: capitalize; font-size: 18px; font-weight: 700; line-height: 1.4; } .upk-timeline .upk-title a { color: #2B2D42; text-decoration: none; transition: all 0.3s ease; } .upk-timeline .upk-title a:hover { color: #D90429; } .upk-timeline .upk-text { margin-bottom: 15px; color: #6f6f6f; line-height: 1.6; font-size: 12px; } .upk-timeline .upk-text p { margin: 0; } .upk-timeline .upk-meta { display: flex; align-items: center; position: relative; font-size: 12px; text-transform: capitalize; color: rgba(125, 125, 125, 0.7294117647); font-weight: 500; } .upk-timeline .upk-meta .upk-author-name-wrap { display: flex; } .upk-timeline .upk-meta .upk-author-name-wrap .upk-by { font-weight: 700; padding-left: 6px; } .upk-timeline .upk-meta .upk-author-name-wrap .upk-author-name { text-decoration: none; color: rgba(125, 125, 125, 0.7294117647); font-weight: 500; } .upk-timeline .upk-meta .upk-separator { margin: 0 6px; } .upk-timeline .upk-responsive-date { display: block; margin-bottom: 10px; font-size: 12px; text-transform: capitalize; color: rgba(125, 125, 125, 0.7294117647); } .upk-timeline .upk-responsive-date .upk-publish { font-weight: 700; } .upk-timeline .upk-responsive-date .upk-date { padding-right: 10px; } .upk-timeline .upk-responsive-date .upk-post-time { margin-right: 5px; } .upk-timeline .upk-responsive-date .upk-post-time i { margin-left: 2px; } .upk-timeline .upk-line-right, .upk-timeline .upk-line-left { border: calc(var(--upk-border-width) / 2) solid var(--upk-line-color, #8D99AE); position: absolute; height: 100%; width: 50%; } .upk-timeline .upk-line-right { border-radius: 40px 0 0 40px; position: absolute; left: 0; border-right: 0; } .upk-timeline .upk-line-left { border-radius: 0 40px 40px 0; right: 0; border-left: 0; } .upk-timeline .upk-item:nth-child(1) .upk-start-end-wrap .upk-start { display: inherit; } .upk-timeline .upk-item:nth-last-child(1) .upk-start-end-wrap .upk-end { display: inherit; } .upk-timeline .upk-item:nth-child(2n+1) { margin-top: calc(-1 * var(--upk-border-width) / 2); } .upk-timeline .upk-item:nth-child(2n+1) .upk-image-and-content-wrapper { padding: 70px 0 50px 40px; } .upk-timeline .upk-item:nth-child(2n+1) .upk-meta { display: inline-flex; } .upk-timeline .upk-item:nth-child(2n+1) .upk-date-wrapper { right: calc((var(--upk-image-spacing)) + (var(--upk-image-width))); } .upk-timeline .upk-item:nth-child(2n+1) .upk-line-left { display: none !important; } .upk-timeline .upk-item:nth-child(2n+1) .upk-start-end-wrap { display: none; } .upk-timeline .upk-item:nth-child(2n+2) { margin-top: calc(-1 * var(--upk-border-width) / 2); } .upk-timeline .upk-item:nth-child(2n+2) .upk-item-box { flex-direction: row-reverse; } .upk-timeline .upk-item:nth-child(2n+2) .upk-date-wrapper { left: calc((var(--upk-image-spacing)) + (var(--upk-image-width))); } .upk-timeline .upk-item:nth-child(2n+2) .upk-image-wrapper { text-align: left; } .upk-timeline .upk-item:nth-child(2n+2) .upk-image-and-content-wrapper { padding: 70px 42px 50px 0; flex-direction: row-reverse; } .upk-timeline .upk-item:nth-child(2n+2) .upk-content-wrap { text-align: left; } .upk-timeline .upk-item:nth-child(2n+2) .upk-meta { display: inline-flex !important; } .upk-timeline .upk-item:nth-child(2n+2) .upk-comments:before { right: 90px; } .upk-timeline .upk-item:nth-child(2n+2) .upk-line-right { display: none; } .upk-timeline .upk-item:nth-child(2n+2) .upk-start-end-wrap { display: none; } .upk-timeline .upk-item:first-child .upk-item-box:before { position: absolute; top: 0; right: 0; content: ""; background: var(--upk-line-color, #8D99AE); width: 50%; height: calc(var(--upk-border-width) / 2); } .upk-timeline .upk-item:first-child .upk-start-end-wrap { display: inherit !important; right: 0; top: calc(-30px + var(--upk-border-width) / 4); } .upk-timeline .upk-item:nth-last-child(1) .upk-item-box:after { position: absolute; bottom: 0; content: ""; background: var(--upk-line-color, #8D99AE); width: 50%; height: calc(var(--upk-border-width) / 2); } .upk-timeline .upk-last-even-item:nth-child(2n+1) .upk-start-end-wrap { display: inherit !important; right: 0; bottom: calc(-40px + var(--upk-border-width) / 2); z-index: 111; } .upk-timeline .upk-last-odd-item:nth-child(2n+2) .upk-start-end-wrap { display: inherit !important; left: 0; bottom: calc(-40px + var(--upk-border-width) / 2); z-index: 111; } @media (min-width: 768px) { .upk-timeline .upk-image-and-content-wrapper { display: flex; } .upk-timeline .upk-image-wrapper { height: 100%; flex: none; } .upk-timeline .upk-image-wrapper .upk-img { width: var(--upk-image-width); margin-bottom: 0px !important; } .upk-timeline .upk-item:nth-child(2n+2) .upk-image-wrapper .upk-img { margin-right: var(--upk-image-spacing); } .upk-timeline .upk-item:nth-child(2n+1) .upk-image-wrapper .upk-img { margin-left: var(--upk-image-spacing); } .upk-timeline .upk-last-odd-item:nth-child(2n+2) .upk-start-end-wrap { bottom: calc(-35px + var(--upk-border-width) / 2); } } @media (min-width: 1024px) { .upk-timeline .upk-wrapper { padding: 65px 0 30px 0; } .upk-timeline .upk-start-end-wrap { width: 100px; height: 100px; font-size: 18px; border: calc(var(--upk-border-width) / 3) solid var(--upk-line-color, #8D99AE); } .upk-timeline .upk-image-and-content-wrapper { display: flex; } .upk-timeline .upk-image-wrapper { height: 100%; } .upk-timeline .upk-image-wrapper .upk-img { width: var(--upk-image-width); } .upk-timeline .upk-category { margin-bottom: 20px; } .upk-timeline .upk-category a { font-size: 12px; } .upk-timeline .upk-title { padding-bottom: 15px; font-size: 24px; } .upk-timeline .upk-text { display: inherit; margin-bottom: 15px; font-size: 14px; } .upk-timeline .upk-meta { font-size: 14px; } .upk-timeline .upk-line-right { border: var(--upk-border-width) solid var(--upk-line-color, #8D99AE); border-right: none; border-radius: 80px 0 0 80px; } .upk-timeline .upk-line-left { border: var(--upk-border-width) solid var(--upk-line-color, #8D99AE); border-left: none; border-radius: 0 80px 80px 0; } .upk-timeline .upk-item:first-child .upk-start-end-wrap { top: calc(-50px + var(--upk-border-width) / 2); } .upk-timeline .upk-item:first-child .upk-item-box:before { height: var(--upk-border-width); } .upk-timeline .upk-item:nth-child(2n+1) { margin-top: calc(-1 * var(--upk-border-width)); } .upk-timeline .upk-item:nth-child(2n+1) .upk-image-and-content-wrapper { padding: 130px 0 130px 100px; } .upk-timeline .upk-item:nth-child(2n+1) .upk-comments:before { right: 86px; } .upk-timeline .upk-item:nth-child(2n+2) { margin-top: calc(-1 * var(--upk-border-width)); } .upk-timeline .upk-item:nth-child(2n+2) .upk-image-and-content-wrapper { padding: 130px 100px 130px 0; } .upk-timeline .upk-item:nth-child(2n+2) .upk-comments:before { right: 88px; } .upk-timeline .upk-item:nth-last-child(1) .upk-item-box:after { height: var(--upk-border-width); } .upk-timeline .upk-last-even-item:nth-child(2n+1) .upk-start-end-wrap { bottom: calc(-46px + var(--upk-border-width) / 2); } .upk-timeline .upk-last-odd-item:nth-child(2n+2) .upk-start-end-wrap { bottom: calc(-46px + var(--upk-border-width) / 2); } .upk-date-hide--yes .upk-timeline .upk-date-wrapper { display: block; } .upk-date-hide--yes .upk-timeline .upk-date-wrapper .upk-date-inner .upk-month { font-size: 18px; } .upk-date-hide--yes .upk-timeline .upk-date-wrapper .upk-date-inner .upk-year { font-size: 18px; } .upk-date-hide--yes .upk-timeline .upk-responsive-date { display: none; } }