:root { --padding: 60px; --padding-skinny: 30px 60px; } @media (min-width: 1920px) { :root { --padding: 60px calc((100vw - 1800px) / 2); --padding-skinny: 30px calc((100vw - 1800px) / 2); } } @media (max-width: 749px) { :root { --padding: 30px 15px; --padding-skinny: 20px 15px; } } h1, h2, h3, h4, h5 { letter-spacing: -0.025em; margin: 0 0 1.25rem 0; line-height: 1.125; } h1 { font-size: 2.58rem } h3 { font-size: 2rem } h4 { font-size: 1.78rem } h5 { font-size: 1.35rem } sup { font-size: .6rem } i { font-style: italic  !important } a:hover, a:target, a:focus, a:active { text-decoration: underline } a.cta-button { text-decoration: none } a.link { display: flex; align-items: center; gap: 5px } .ssg-content ul { list-style: unset; margin: 0 0 1em 1em; padding: unset; line-height: 1.5em } span.highlight1 { color: var(--light-purple) } span.highlight2 { color: var(--light-blue) } span.highlight3 { color: var(--light-red) } span.highlight4 { color: var(--lenovo-red) } .text-center { text-align: center } .text-left { text-align: left } .dark-bg { color: #fff } .smaller { font-size: .85rem  !important; line-height: 1.125rem  !important } .ssg-content p { font-size: 1rem; margin: 0 0 1.25rem; line-height: 1.5; max-width: 38rem; } .ssg-content a:not(.cta-button) { color: var(--med-blue); } .ssg-content ol { list-style: auto } .ssg-content ol li { margin: .25em; padding-left: .5em } @media (max-width: 1024px) { .ssg-content ol { margin-left: 1rem; margin-right: 1rem } } @media (max-width: 749px) { h1 { font-size: 2.125rem } h3 { font-size: 1.54rem } h4 { font-size: 1.157rem } h5 { font-size: 1.125rem } } section { position: relative; overflow: hidden } .ssg-content { padding: var(--padding); display: flex; align-items: center; } .skinnyBanner .ssg-content { padding: var(--padding-skinny) } .ssg-content-wrapper { display: inherit; align-items: center; padding: 20px 0; width: 100%; max-width: 1450px; justify-content: center; } .ssg-content-wrapper.align-normal { align-items: normal } .ssg-content-wrapper>div { padding: 0 20px } .text-block { display: flex; flex-direction: column; align-items: flex-start; height: 100%; justify-content: center; } .text-block.text-center { align-items: center } .cta-row { display: flex; flex-flow: row } .cta-row .cta-button { margin: 0 10px; transform: translateX(-10px); width: unset; } .ssg-content p.cta-row, .ssg-content p.cta-row .cta-button { max-width: unset; width: unset } img.twoX { width: 50% } @media (max-width: 1024px) { .ssg-content-wrapper>div { padding: 15px } .cta-row { flex-flow: column; gap: 20px } } .bg-pale-blue { background: var(--pale-blue) } .bg-pale-purple { background: var(--pale-purple) } .bg-dark-red { background: var(--dark-red) } .bg-deep-ambition { background: url("https://p4-ofp.static.pub/ShareResource/services/global/lenovo-smarter-gradient-deep-ambition.jpg"); color: #fff } .bg-deep-knowledge { background: url("https://p2-ofp.static.pub/ShareResource/services/global/lenovo-smarter-gradient-deep-knowledge.jpg"); color: #fff } .bg-deep-passion-s2 { background: url("https://p2-ofp.static.pub/ShareResource/services/global/lenovo-smarter-gradient-deep-passion-s2.jpg"); color: #fff } .bg-pale-wonder-s1 { background: url("https://p2-ofp.static.pub/ShareResource/services/global/lenovo-smarter-gradient-pale-wonder-s1.jpg") } .bg-pale-creative-s1 { background: url("https://p2-ofp.static.pub/ShareResource/services/global/lenovo-smarter-gradient-pale-creative-s1.jpg") } .bg-pale-creative-s2 { background: url("https://p2-ofp.static.pub/ShareResource/services/global/lenovo-smarter-gradient-pale-creative-s2.jpg") } .bg-gradient { background-size: 100% 100% } .bg-alpha-1 { background: url("https:////p2-ofp.static.pub/ShareResource/services/global/lenovo-services-daas-hero-gradient-bkgd-2x.jpg"); background-size: cover; } .bg-image { background-size: cover } .bg-img-reflection { background: url("https:////p2-ofp.static.pub/ShareResource/services/global/lenovo-services-daas-smb-solutions-bkgd-2x.jpg") 50% 50% no-repeat; background-size: cover } .page-branding { width: 150px; margin-bottom: 26px } .cta-button { padding: 14px 24px } .button-primary.white:hover { background: #fff; color: var(--med-blue); border: 1px solid var(--med-blue); } @media (min-width: 1025px) { .ssg-feature .ssg-content-wrapper.reverse { flex-flow: row-reverse } .col-3 { width: calc(100% / 12 * 3) } .col-4 { width: calc(100% / 12 * 4) } .col-6 { width: calc(100% / 12 * 6) } .col-9 { width: calc(100% / 12 * 9) } .col-12 { width: 100% } } @media (min-width: 1025px) and (max-width: 1280px) { .col-ml-4 { width: calc(100% / 12 * 4) } } @media (min-width: 1600px) { .col-xl-2 { width: calc(100% / 12 * 2) } } @media (min-width: 750px) and (max-width: 1024px) { .col-6, .col-4, .col-3 { width: 100% } .col-m-6 { width: 50% } .col-m-4 { width: calc(100% / 3) } } @media (max-width: 749px) { .col-9, .col-6, .col-4, .col-3 { width: 100% } .col-s-6 { width: 50% } } .pad-0b { padding-bottom: 0px } .pad-0t { padding-top: 0px } .ssg-banner .ssg-banner-bg { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; } .ssg-banner-bg picture { display: inherit; width: 100%; height: 100%; } .ssg-banner-bg img { object-fit: cover; width: auto; height: auto; min-width: 100%; min-height: 100%; } .ssg-banner-text { position: inherit; height: 60vh; min-height: 550px; z-index: 99; background: linear-gradient(90deg, #000000bb 38%, transparent 66%); } .ssg-banner-text.animate-in .text-block { opacity: 0; transform: translateY(100px); } .section-wrapper .text-block { opacity: 0; transform: translateX(100px); } .section-wrapper .reverse .text-block { opacity: 0; transform: translateX(-100px); } .start .ssg-banner-text.animate-in .text-block, .section-wrapper.visible.in .text-block, .section-wrapper.visible.in .reverse .text-block { opacity: 100; transform: translate(0); transition: all 1s; transition-delay: .25s; } .ssg-banner-text p { font-size: 1.25rem } @media (min-width: 1025px) { .no-gradient .ssg-banner-text { background: none } } @media (max-width: 1024px) { .ssg-banner-text { background: #00000099; min-height: 66vh } .ssg-banner-text .text-block { text-align: center; align-items: center; padding: 15px } .ssg-banner-text p { font-size: 1rem } .ssg-banner .text-block { width: 100% } } .ssg-banner.ssg-banner-halfhalf { display: flex; flex-direction: row-reverse; } .ssg-banner.ssg-banner-halfhalf .ssg-banner-bg, .ssg-banner.ssg-banner-halfhalf .ssg-banner-text { position: inherit; width: 50%; height: auto; } .ssg-banner.ssg-banner-halfhalf .ssg-banner-text.bg-alpha-1 { background: url("https:////p2-ofp.static.pub/ShareResource/services/global/lenovo-services-daas-hero-gradient-bkgd-2x.jpg"); background-size: cover; } @media (max-width: 1024px) { .ssg-banner.ssg-banner-halfhalf { flex-direction: column } .ssg-banner.ssg-banner-halfhalf .ssg-banner-bg, .ssg-banner.ssg-banner-halfhalf .ssg-banner-text { width: 100% } .ssg-banner.ssg-banner-halfhalf .ssg-banner-bg picture { max-height: 40vh; overflow-y: hidden } .ssg-banner.ssg-banner-halfhalf .ssg-banner-text { min-height: unset } } .ssg-feature .ssg-content { flex-direction: column } @media (max-width: 1024px) { .ssg-feature .ssg-content .ssg-content-wrapper { flex-direction: column } } .ssg-offering .text-block { margin: 0 auto } .ssg-offering h3 { margin: 0 auto 1.25rem; text-align: center } .ssg-offering h5 { margin: .7rem 0 } .ssg-offering p { max-width: unset; text-align: center } .ssg-offering .ssg-content-wrapper { padding: 0 } .ssg-icons-group { flex-wrap: wrap; align-items: flex-start; width: 96%; justify-content: center; } .feature-icon-block { transform: translateY(25px); text-align: center; } .feature-icon-block p { max-width: 250px; margin: auto; } .feature-icon-block.stats img { max-width: 200px } .feature-icon-block.stats img.icon-sm { max-width: 82px; margin-bottom: 20px } .feature-icon-block.stats p { max-width: 350px; margin: 1em auto } .feature-icon-block.text-left, .feature-icon-block.text-left p { text-align: left; max-width: unset } .card-wrapper { padding: 0px 0px 30px  !important; margin: 20px 8px; display: inherit; flex-flow: column; flex: 1; border: 1px solid var(--border-color-grey); } .card-wrapper.card-pale-purple { background: #D9C1D822; border: 0px; } .card-wrapper h5, .card-wrapper p { margin: .7rem 20px 0; } .card-wrapper .cta-row { margin-top: auto; padding-top: .75rem } .card-wrapper .cta-row a { margin: .7rem 20px 0; transform: none; width: auto } .start .feature-icon-block { opacity: 0; padding: 20px 4px; } .start .feature-icon-block.in { opacity: 100; transition: all 1s; transform: translateY(0); } .start .feature-icon-block.icon-2.in, .start .feature-icon-block.icon-5.in { transition-delay: .15s; } .start .feature-icon-block.icon-3.in, .start .feature-icon-block.icon-6.in { transition-delay: .3s; } @media (max-width: 1024px) { .ssg-icons-group { width: 90% } .ssg-feature .ssg-content .ssg-content-wrapper.ssg-icons-group { flex-direction: row; flex-wrap: wrap } } @media (min-width: 1600px) { .start .feature-icon-block.icon-2.in { transition-delay: .10s } .start .feature-icon-block.icon-3.in { transition-delay: .20s } .start .feature-icon-block.icon-4.in { transition-delay: .30s } .start .feature-icon-block.icon-5.in { transition-delay: .40s } .start .feature-icon-block.icon-6.in { transition-delay: .50s } .start .feature-icon-block.icon-7.in { transition-delay: .60s } .start .feature-icon-block.icon-8.in { transition-delay: .70s } } .feature-icon-block-wrapper { display: flex; row-gap: 20px; flex-wrap: wrap; margin: 0 -8px; justify-content: center } .feature-icon-block-wrapper>* { padding: 0 8px } .feature-icon-block-wrapper .card-wrapper { display: flex; height: 100%; margin: 0 } #faq .ssg-content-wrapper { align-items: flex-start } .accordion .accordion-item { background: var(--pale-red); border-bottom: 1px solid var(--med-purple); display: block; } .accordion .accordion-item:nth-child(even) { background: var(--pale-purple) } .accordion .accordion-item .accordion-button { display: flex; font-size: 1.1rem; font-weight: 600; align-items: center; cursor: pointer; padding: 10px; width: 100%; text-align: left; transition: .4s; } .accordion .accordion-item .accordion-button::before { content: url('https://p2-ofp.static.pub/ShareResource/services/premium-care/icon-faq.svg'); margin-right: 10px; } .accordion .accordion-item .accordion-button::after { flex-shrink: 0; content: ""; background: url('https://p3-ofp.static.pub/ShareResource/svg/arrow-down-thin-black.svg'); width: 1.25rem; height: 1.25rem; background-size: 1.25rem; background-repeat: no-repeat; transition: transform .2s ease-in-out; margin-left: auto; } .accordion .accordion-item .accordion-button.active::after { transform: rotate(180deg); } .accordion .accordion-item .panel { max-height: 0; overflow: hidden; transition: max-height .2s ease-out; } .accordion .accordion-item .panel p { max-width: unset; margin: 0 1.25rem 1.25rem 70px; } .modal { position: fixed; width: 100%; height: 100%; background: #000000cc; top: 0; z-index: 99; display: flex; align-items: center; justify-content: center; } .modal-container { position: relative; background: #fff; width: clamp(33vw, 50rem, 80vw); height: clamp(50vh, 50rem, 80vh); overflow: scroll; padding: 40px; z-index: 2; } .modal-bg { position: absolute; width: 100%; height: 100%; } #contact-us, #video-modal { opacity: 100%; transition: opacity .5s; } #contact-us:not(:target), #video-modal:not(:target) { visibility: hidden; opacity: 0; transition: opacity .5s; transition: visibility .5s; } .modal-close { position: absolute; top: 10px; right: 10px; } .modal a { color: var(--med-blue) } .modal a:hover { text-decoration: underline } @media (max-width: 749px) { .modal-container { padding: 20px } } #video-modal .modal-container { padding: 0; height: auto; background: none; text-align: right; width: 80vw; max-width: calc(16 * 80vh / 9); } #video-modal .modal-close { position: unset; color: #fff } #video-modal iframe { width: 100%; aspect-ratio: 16 / 9 } .ssg-content-wrapper>div.compare-table { padding: 0 0 20px } .table-container { display: grid; font-size: 1rem; width: 100%; min-width: 45em; gap: 2px 2px; grid-auto-flow: row; } .table-container h4 { margin-bottom: 0px } .table-container.font-large { font-size: 1.35rem } .table-container.font-large div { padding: 20px } .table-container.grid-5-5 { grid-template-columns: 50% 50% } .table-container.grid-4-6 { grid-template-columns: 40% 60% } .table-container.grid-3-3-3 { grid-template-columns: 30% 30% 30%; margin-left: 5%; margin-right: auto } .table-container.grid-4-3-3 { grid-template-columns: 40% 30% 30% } .table-container.grid-1-1-1-1 { grid-template-columns: 25%; margin: auto } .table-container.grid-3-2-2-2 { grid-template-columns: 30% 20% 20% 20%; margin: auto; margin-left: 5% } .table-container.grid-4-2-2-2 { grid-template-columns: 40% 20% 20% 20%; margin: auto } .table-container div { width: 100%; padding: 10px 20px; background: var(--pale-gray-4); } .bg-gradient .table-container div { background: #fff } .table-container div.ct-featured { background: var(--pale-red) } .col-1-1 { grid-area: 1 / 1 / 1 / 2 } .col-1-2 { grid-area: 2 / 1 / 3 / 2 } .col-1-3 { grid-area: 3 / 1 / 4 / 2 } .col-1-4 { grid-area: 4 / 1 / 5 / 2 } .col-1-5 { grid-area: 5 / 1 / 6 / 2 } .col-1-6 { grid-area: 6 / 1 / 7 / 2 } .col-1-7 { grid-area: 7 / 1 / 8 / 2 } .col-1-8 { grid-area: 8 / 1 / 9 / 2 } .col-1-9 { grid-area: 9 / 1 / 10 / 2 } .col-1-10 { grid-area: 10 / 1 / 11 / 2 } .col-1-11 { grid-area: 11 / 1 / 12 / 2 } .col-1-12 { grid-area: 12 / 1 / 13 / 2 } .col-2-1 { grid-area: 1 / 2 / 2 / 3 } .col-2-2 { grid-area: 2 / 2 / 3 / 3 } .col-2-3 { grid-area: 3 / 2 / 4 / 3 } .col-2-4 { grid-area: 4 / 2 / 5 / 3 } .col-2-5 { grid-area: 5 / 2 / 6 / 3 } .col-2-6 { grid-area: 6 / 2 / 7 / 3 } .col-2-7 { grid-area: 7 / 2 / 8 / 3 } .col-2-8 { grid-area: 8 / 2 / 9 / 3 } .col-2-9 { grid-area: 9 / 2 / 10 / 3 } .col-2-10 { grid-area: 10 / 2 / 11 / 3 } .col-2-11 { grid-area: 11 / 2 / 12 / 3 } .col-2-12 { grid-area: 12 / 2 / 13 / 3 } .col-3-1 { grid-area: 1 / 3 / 2 / 4 } .col-3-2 { grid-area: 2 / 3 / 3 / 4 } .col-3-3 { grid-area: 3 / 3 / 4 / 4 } .col-3-4 { grid-area: 4 / 3 / 5 / 4 } .col-3-5 { grid-area: 5 / 3 / 6 / 4 } .col-3-6 { grid-area: 6 / 3 / 7 / 4 } .col-3-7 { grid-area: 7 / 3 / 8 / 4 } .col-3-8 { grid-area: 8 / 3 / 9 / 4 } .col-3-9 { grid-area: 9 / 3 / 10 / 4 } .col-3-10 { grid-area: 10 / 3 / 11 / 4 } .col-3-11 { grid-area: 11 / 3 / 12 / 4 } .col-3-12 { grid-area: 12 / 3 / 13 / 4 } .col-4-1 { grid-area: 1 / 4 / 2 / 5 } .col-4-2 { grid-area: 2 / 4 / 3 / 5 } .col-4-3 { grid-area: 3 / 4 / 4 / 5 } .col-4-4 { grid-area: 4 / 4 / 5 / 5 } .col-4-5 { grid-area: 5 / 4 / 6 / 5 } .col-4-6 { grid-area: 6 / 4 / 7 / 5 } .col-4-7 { grid-area: 7 / 4 / 8 / 5 } .col-4-8 { grid-area: 8 / 4 / 9 / 5 } .col-4-9 { grid-area: 9 / 4 / 10 / 5 } .col-4-10 { grid-area: 10 / 4 / 11 / 5 } .col-4-11 { grid-area: 11 / 4 / 12 / 5 } .col-4-12 { grid-area: 12 / 4 / 13 / 5 } .checkMark::before { content: ""; display: block; width: 26px; height: 26px; background-image: url('https://p1-ofp.static.pub/ShareResource/services/premium-care/lenovo-premium-care-checkmark.svg'); background-size: contain; margin: auto; vertical-align: middle } .checkMark span { display: none } @media (max-width: 1024px) { .table-container { min-width: unset } .table-container h4 { font-size: 1.25rem } .table-container.font-large { font-size: 1rem } .table-container div { padding: 10px } .table-container.grid-3-3-3 { grid-template-columns: 33.4% 33.3% 33.3%; margin: auto } .table-container.grid-3-2-2-2 { grid-template-columns: 33.4% 22.2% 22.2% 22.2%; margin: auto } } @media (max-width: 749px) { .table-container { font-size: .9rem } .table-container h4, .table-container.font-large { font-size: 1rem } } #disclaimer .ssg-content { padding: var(--padding-skinny) } .tabs>ul { display: flex; gap: 80px; justify-content: center } .tabs>ul a { font-size: 1.25rem; font-weight: bold; color: #000 } .tabs>ul li.ui-tabs-active a { color: #871c23 } .tabs>ul li { position: relative; text-align: center } .tabs>ul li.ui-tabs-active:after { content: ''; position: absolute; bottom: -30px; left: -40px; right: -40px; height: 6px; background-color: #871c23 } .tabs .ssg-content { padding-top: 30px } @media (max-width: 1024px) { .tabs>ul { flex-flow: column; gap: 40px } .tabs>ul li { margin: 0 auto } .tabs>ul li.ui-tabs-active:after { bottom: -20px } } body .carousel-wrapper { max-width: 100%; padding: 20px } .carousel { position: relative; overflow: visible } .slick-next, .slick-prev { z-index: 99; width: 40px; height: 40px; background-color: #fff  !important; border-radius: 50%; display: flex  !important; align-items: center; justify-content: center; box-shadow: 0px 0px 5px #999999cc; } .slick-prev { left: -20px } .slick-next { right: -20px } .slick-prev:before, .slick-next:before { content: ''; background: url('https://p3-ofp.static.pub/ShareResource/svg/arrow-down-thin-black.svg') 0 0 no-repeat; width: 24px; height: 24px; display: block } .slick-prev:before { transform: rotate(90deg) } .slick-next:before { transform: rotate(270deg) } button.slick-disabled { display: none  !important } .slick-track { display: flex  !important } .slick-slide { height: inherit  !important; background-color: #fff; margin: 0 10px } .slick-slide>div { height: 100% } .slick-list { margin: 0 -10px } .carousel-block { height: 100%; display: flex  !important; flex-flow: column } .carousel-block-content { padding: 20px 20px 0; text-align: left } .carousel-block-content h5 { margin-bottom: .5rem } .carousel-block-content p { line-height: 1.2 } .carousel-block .cta-row { margin: auto 20px 40px; width: auto } .card-grid { display: flex; row-gap: 20px; flex-wrap: wrap; margin: 0 -8px } .card-grid>* { padding: 0 8px } .card-grid .card-wrapper { display: flex; height: 100%; margin: 0 } #contact.ssg-fullwidth-halfhalf { display: grid; grid-template-columns: repeat(2, 1fr) } #contact.ssg-fullwidth-halfhalf>div { height: 100%; min-height: 30vw } #contact .text-block { color: #fff } #contact h2 { font-size: 2.375rem } #contact h4 { font-size: 1.25rem; line-height: 1.5em; font-weight: 400 } @media (max-width: 1024px) { #contact.ssg-fullwidth-halfhalf { display: grid; grid-template-columns: 1fr } } .accordion-tabs { display: none; overflow: visible; } .accordion-tabs :focus { outline: none; } .accordion-item:last-child { border: none; } .accordion-item__label { position: relative; margin: 0; padding: 20px; cursor: pointer; } .accordion-item__label::after { content: ""; position: absolute; top: 50%; right: 0; margin-top: -0.5rem; background: url("https://p3-ofp.static.pub/ShareResource/svg/arrow-down-thin-black.svg") 50% 50% no-repeat; width: 1rem; height: 1rem; background-size: 1rem; background-repeat: no-repeat; transform: rotate(0deg); transition: opacity .1s ease; } .accordion-item__container { height: 0; padding: 0 20px; overflow: hidden; opacity: 0; transition: padding .2s ease, opacity .5s .15s ease; } .accordion-active .accordion-item__label { cursor: inherit; } .accordion-active .accordion-item__label:hover { background: none; } .accordion-active .accordion-item__label::after { transform: rotate(180deg); } .accordion-active .accordion-item__container { height: auto; padding: 20px; opacity: 1; } .accordion-item__container .ssg-content { padding: 0 } @media (min-width: 1025px) { .accordion-tabs { display: flex; gap: 80px; justify-content: center; } .accordion-tabs .accordion-tab { position: relative; border: none; cursor: pointer; font-size: 1.25rem; font-weight: bold; color: #000; } .accordion-tabs .accordion-tab.accordion-active { color: #871c23; } .accordion-tabs .accordion-tab.accordion-active:after { content: ''; position: absolute; bottom: -30px; left: -40px; right: -40px; height: 6px; background-color: #871c23; } .accordion-item { display: none; border: none; } .accordion-item__label, .accordion-item__container { padding: 0; transition: inherit; } .accordion-item__label { display: none; } .accordion-item.accordion-active { display: block; } .accordion-item.accordion-active .accordion-item__container { padding: 0; } .accordion-item.accordion-active .accordion-item__container .ssg-content { padding-top: 50px; } .accordion-item.accordion-active .accordion-item__container .ssg-content-wrapper { padding: 0; } } @media (max-width: 1024px) { .accordion-content { border-bottom: 2px solid var(--border-color-grey) } .accordion-item { border-top: 2px solid var(--border-color-grey) } .accordion-item:last-child { border: unset; border-top: 2px solid var(--border-color-grey) } h4.accordion-item__label { font-size: 1.25rem } } .chevron-right::after { content: ""; display: block; background: url('https://p3-ofp.static.pub/ShareResource/svg/arrow-down-thin-blue.svg'); width: 1rem; height: 1rem; background-size: 1rem; background-repeat: no-repeat; transform: rotate(270deg) } .mb-0 { margin-bottom: 0  !important } .mb-1 { margin-bottom: .5rem  !important } .mb-2 { margin-bottom: 1rem  !important } .mb-3 { margin-bottom: 1.5rem  !important } .mb-4 { margin-bottom: 2rem  !important } .mt-4 { margin-top: 2rem  !important } .pt-0 { padding-top: 0  !important } .pb-0 { padding-bottom: 0  !important } .ptb-20 { padding-top: 20px  !important; padding-bottom: 20px  !important } .mw-0 { max-width: unset  !important; padding: 0  !important; margin: 0  !important } .placeholder { color: red; font-weight: bold; font-size: 30px; display: block; min-width: 100%; background: #ccc; padding: 04 03 24 }