:root { --font: Lato, Helvetica Neue, Helvetica, Arial, sans-serif; --mobile-img-bp: 991px; --desktop-img-bp: 992px; --mobile-copy-width: 540px; --primary: #0d5c91; --main: #000; --n0: #fff; --bg: #f7f7f7; --highlight: #e1140a; --highlight-hs: #8246af; --highlight-hs-light: #a761dd; --link-dk: #52c4e3; --lred: #b30e13; --lgreen: #060; --lviolet: #783f9b; } html { font-size: 16px; } html, body { min-height: 100%; height: 100%; } body { font-family: var(--font); color: var(--main); } @media only screen and (min-width: 1200px) { body { font-size: 1.4rem; } } .mainContent { overflow-x: hidden; } .html_upload_content p { line-height: 1.4em; font-size: 1rem; font-weight: 700; color: #000; } @media only screen and (min-width: 1200px) { .html_upload_content p { font-size: 1.25rem; } } h1, h2, h3, h4, h5, h6 { font-family: var(--font); font-weight: 900; line-height: 1em; color: #000; } h2 { font-size: 1.8rem; font-weight: 700; margin: 1.4rem 0; } @media only screen and (min-width: 992px) { h2 { font-size: 3.7rem; margin-bottom: 2rem; } } h3 { font-size: 1.7rem; margin: 1.2rem 0; } @media only screen and (min-width: 992px) { h3 { font-size: 2rem; margin-bottom: 2rem; } } .nowrap { white-space: nowrap; } .btn { border-radius: 4px; padding: 14px 24px; padding-bottom: 15px; font-weight: 500; line-height: 1em; border: 1px solid transparent; cursor: pointer; } .btn:hover { background-color: #e3f2f9; color: var(--primary); border-color: var(--primary); } .btn-primary { background-color: var(--primary); } .btn-btt { position: fixed; bottom: 16px; right: 16px; z-index: 20; background-color: rgba(0, 0, 0, .85); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; transition: .25s ease-out; opacity: 0; transform: scale(0.8); } .btn-btt.btn-visible { transform: scale(1); opacity: 1; } .btn-btt:hover { background-color: var(--main); transform: scale(1.1); } a { color: var(--primary); font-size: 1rem; font-weight: 700; } .html_upload_content a, .btn { transition: .2s; } .html_upload_content a:hover, .btn:hover { text-decoration: none  !important; } .html_upload_content a:focus, .btn:focus { outline: none; text-decoration: none  !important; } .ttip { position: relative; z-index: 3; min-width: 16px; } .ttip img { opacity: .65; } .ttip:hover .ttip__text { opacity: 1; visibility: visible; transform: translateY(-5px); } .ttip__text { visibility: hidden; opacity: 0; width: 250px; background-color: var(--n0); color: var(--main); text-align: left; position: absolute; padding: 10px 24px; box-shadow: 0 2px 12px rgba(0, 0, 0, .12); z-index: 1; top: 200%; left: -20px; transition: transform .4s cubic-bezier(0.23, 1, .32, 1), .3s opacity, .3s visibility; font-size: .9rem; } .ttip__text::after { content: ""; position: absolute; bottom: 100%; left: 28px; margin-left: -8px; border-width: 8px; border-style: solid; border-color: transparent transparent #fff transparent; } .ttip__text>div { padding-top: 4px; } .ttip .link { font-size: .9rem  !important; color: var(--primary)  !important; border-bottom-color: var(--primary)  !important; } .ttip .link:hover { border-bottom-color: transparent  !important; } .ttip--right .ttip__text { left: auto; right: -20px; } .ttip--right .ttip__text::after { left: auto; right: 28px; margin-left: 0; margin-right: -8px; } @media only screen and (min-width: 992px) { .container { width: auto; max-width: 1240px; } } @media only screen and (min-width: 768px) { .container { width: auto; } } @media only screen and (min-width: 992px) { .content { } } .highlight { color: var(--highlight); } .highlight-hs { color: var(--highlight-hs); } a.link { border-bottom: 1px solid var(--primary); transition: .2s; color: var(--primary); font-size: inherit; } a.link:hover { border-bottom-color: transparent; color: var(--primary); } .cta { margin-top: 20px; margin-left: 0; padding: 0; width: 100%; } .cta--even { text-align: center; } .cta--even .btn { width: 100%; max-width: 284px; margin: 7px auto; } .side-image { position: relative; width: calc(-1*calc(-100% - 32px)); max-width: calc(-1*calc(-100% - 32px)); left: 0; right: -32px; } .nav-tabs { display: flex; align-items: flex-end; border-bottom-color: var(--main); padding: 0; list-style: none; } @media only screen and (min-width: 992px) { .nav-tabs { flex-direction: column; align-items: flex-start; border-bottom: none; border-left: 1px solid var(--main); } } .nav-tabs>li { flex: 1; text-align: center; margin-left: 2px; } @media only screen and (min-width: 992px) { .nav-tabs>li+li { margin-top: 20px; } } .nav-tabs>li>a { color: var(--main); border-radius: 0; padding-top: 0; border-top: none  !important; border-left: none  !important; border-right: none  !important; line-height: 1.3em; opacity: .5; } @media only screen and (min-width: 992px) { .nav-tabs>li>a { border-bottom: none  !important; padding: 8px 32px; flex: 1 1 auto; font-size: 1.3rem; } } .nav-tabs>li>a:hover { background-color: transparent; opacity: 1; border-bottom-color: var(--main); } .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { color: var(--main); border-bottom-color: var(--main); box-shadow: inset 0 -2px 0 var(--main); opacity: 1; } @media only screen and (min-width: 992px) { .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus { border-bottom: none; box-shadow: none; } } .nav-tabs>li span { font-weight: 400; display: block; margin-top: 0; display: none; } @media only screen and (min-width: 992px) { .nav-tabs>li span { display: block; font-size: 1rem; } } .tab-pane { padding-top: 24px; } .tab-pane p { font-weight: 400; } @media only screen and (min-width: 992px) { .tabs-options { margin-top: 40px; } } @media only screen and (min-width: 1200px) { .tabs-options { margin-top: 100px; } } .tabs-options .tab-pane img { margin-bottom: 12px; } @media only screen and (min-width: 992px) { .tabs-options .tab-pane .mobile-only { display: none; } } .tabs-options .tab-tabs { width: calc(-1*calc(-100% - 35px)); border-bottom: 1px solid var(--main); position: relative; } @media only screen and (min-width: 768px) { .tabs-options .tab-tabs { width: auto; } } @media only screen and (min-width: 992px) { .tabs-options .tab-tabs { border-bottom: none; } } .tabs-options .tab-tabs::-webkit-scrollbar { display: none; } .tabs-options .nav-tabs { margin-bottom: -1px; padding: 0; list-style: none; } .tabs-options .nav-tabs>li { text-align: left; flex: 1 1 auto; margin-right: 24px; } @media only screen and (min-width: 768px) { .tabs-options .nav-tabs>li { flex: 1; } } .tabs-options .nav-tabs>li>a { padding-left: 0; padding-right: 0; white-space: nowrap; display: block; } @media only screen and (min-width: 992px) { .tabs-options .nav-tabs>li>a { padding-left: 32px; white-space: initial; } } .tabs-options .tab-indicator { display: inline-block; background-color: #000; position: absolute; left: 0; height: auto; width: 2px; transition: all .3s cubic-bezier(0.23, 1, .32, 1); } .tabs-options--desktop { display: none; } @media only screen and (min-width: 992px) { .tabs-options--desktop { display: block; } } @media only screen and (min-width: 768px) { .tabs-options--mobile { max-width: var(--mobile-copy-width); margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 992px) { .tabs-options--mobile { max-width: inherit; } } .tabs-options--mobile .tab-tabs { width: 100%; overflow-y: hidden; } .tabs-options--mobile .nav-tabs { overflow-x: scroll; overflow-y: hidden; justify-content: space-between; gap: 20px; } @media only screen and (min-width: 992px) { .tabs-options--mobile .nav-tabs { display: none; } } .tabs-options--mobile .nav-tabs::-webkit-scrollbar { width: 0; height: 0; background: transparent; } .tabs-options--mobile .nav-tabs ::-webkit-scrollbar-thumb { background: transparent; } .tabs-options--mobile .nav-tabs:before, .tabs-options--mobile .nav-tabs:after { display: none; } .tabs-options--mobile .nav-tabs>li { flex: 0; margin-left: 0; margin-right: 0; } @media only screen and (min-width: 992px) { .tabs-options--mobile .tab-pane .mobile-only { display: none; } } @media only screen and (min-width: 992px) { .tabs-options--mobile .tabs-options__img { width: calc(100vw / 2); margin-right: calc(-100vh / 2); max-width: inherit; } } .topbar { position: fixed; top: -120px; left: 0; width: 100%; padding: 12px; background-color: var(--n0); z-index: 999; display: flex; align-items: center; transition: all 1s ease; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); column-gap: 16px; } @media only screen and (min-width: 992px) { .topbar { padding: 16px 50px; } } .topbar__cta { margin-left: auto; } .topbar .mobile-menu { display: inline-flex; flex-direction: column; row-gap: 8px; align-items: center; justify-content: center; padding: 12px 8px; } @media only screen and (min-width: 1200px) { .topbar .mobile-menu { display: none; } } .topbar .mobile-menu svg { vertical-align: top; } .topbar .logo-link { color: var(--main); } .topbar h3 { font-size: 1rem; font-weight: 600; margin: 0; } @media only screen and (min-width: 992px) { .topbar h3 { font-size: 1.4rem; } } .topbar .btn { margin: 0; } .topbar .link { border-bottom: none; font-weight: 400; font-size: .9rem; color: var(--main); opacity: .7; padding: 14px 20px; width: 100%; } @media only screen and (min-width: 992px) { .topbar .link { padding: 18px 50px; } } @media only screen and (min-width: 1200px) { .topbar .link { padding: 0; width: auto; } } .topbar .link:hover { opacity: 1; } .topbar__actions { flex-direction: column; align-items: flex-start; column-gap: 12px 24px; position: absolute; left: 0; top: 100%; width: 100vw; background-color: var(--n0); padding-bottom: 12px; display: none; box-shadow: 0 1px 0 rgba(0, 0, 0, .3); } @media only screen and (min-width: 992px) { .topbar__actions { column-gap: 32px; } } @media only screen and (min-width: 1200px) { .topbar__actions { display: flex; flex-direction: row; flex: 1 1 auto; justify-content: flex-end; position: static; background-color: transparent; box-shadow: none; padding-bottom: 0; width: auto; } } .topbar--open .topbar__actions { display: flex; } .topbar--open .mm-bar2 { transform: scaleX(0); transform-origin: center center; opacity: 1; } .topbar--open .mm-bar1 { transform: rotate(45deg) translate(7px, 7px); transform-origin: center center; opacity: 1; } .topbar--open .mm-bar3 { transform: rotate(-45deg) translate(7px, -7px); transform-origin: center center; opacity: 1; } body.scrolled .topbar { top: 0; } .mm-bar1, .mm-bar2, .mm-bar3 { transition: .35s cubic-bezier(0.165, .84, .44, 1); width: 32px; height: 2px; background-color: var(--main); display: block; } .hero { height: 80vh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; overflow: hidden; float: none; color: #fff; } @media only screen and (min-width: 992px) { .hero { height: 60vh; } } .hero__arrow { animation: scrollDown 2.5s infinite ease-in-out; position: absolute; bottom: 0; left: 50%; margin-left: -12px; } .hero__vid { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; background-image: url(https://static.lenovo.com/ww/campaigns/2022/back-to-school/lenovo-education-hero-child-classroom-video-backup-mobile.jpg); background-size: cover; background-position: 50% 50%; } @media only screen and (min-width: 992px) { .hero__vid { background-image: url(https://static.lenovo.com/ww/campaigns/2022/back-to-school/lenovo-education-hero-child-classroom-video-backup.jpg); } } .hero__img { position: absolute; left: 0; top: 0; width: 50%; height: 100%; object-fit: cover; object-position: right center; z-index: 1; } @media only screen and (min-width: 992px) { .hero__img { width: auto; } } .hero__copy { color: var(--n0); text-align: center; width: 100%; max-width: 300px; position: relative; z-index: 2; } @media only screen and (min-width: 992px) { .hero__copy { max-width: 740px; } } .hero__copy h1 { font-size: 5rem; color: #fff; } @media only screen and (min-width: 992px) { .hero__copy h1 { font-size: 6rem; } } .hero__copy p { font-size: 2rem; font-weight: 700; line-height: 1.2em; color: #fff; } @media only screen and (min-width: 992px) { .hero__copy p { font-size: 2.4rem; } } .hero__cta { margin-top: 60px; } .hero__cta .btn { min-width: 134px; } .under { background-image: url(https://static.lenovo.com/ww/campaigns/2022/back-to-school/yellow-highlighter-stroke.png); background-position: bottom left; background-repeat: no-repeat; background-size: 100% auto; padding-bottom: 8px; } @keyframes scrollDown { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } .pageintro { background: var(--main); color: var(--n0); padding: 40px 32px; text-align: center; } @media only screen and (min-width: 992px) { .pageintro { background-image: url(https://static.lenovo.com/ww/campaigns/2022/back-to-school/edu-grey-bg.png); background-position: bottom left; background-repeat: repeat-x; background-size: 2px 280px; padding-top: 60px; padding-bottom: 80px; } } @media only screen and (min-width: 768px) { .pageintro__copy { max-width: var(--mobile-copy-width); margin: 0 auto; } } @media only screen and (min-width: 992px) { .pageintro__copy { max-width: 740px; margin: 0 auto; } .pageintro__copy p { font-size: 1.3rem; } } .pageintro__copy p { color: #fff; } .pageintro__explore { margin-top: 40px; } .grades { display: flex; justify-content: center; column-gap: 10px; margin-top: 50px; } @media only screen and (min-width: 992px) { .grades { column-gap: 90px; max-width: 680px; margin: 0 auto; margin-top: 60px; } } .grades a { color: var(--n0); } @media only screen and (min-width: 992px) { .grades a { color: var(--main); } } .grades a:hover .grades__bgimg { opacity: .65; } .grades a:hover .angle-dn, .grades a:hover .angle-dn-wh { transform: translateY(6px); } .grades img { max-width: 100%; height: auto; margin-bottom: 16px; } .grades p { max-width: 90%; margin: 0 auto; color: #fff; } @media only screen and (min-width: 992px) { .grades p { color: var(--main); } } .grades__bgimg { transition: .2s; } .grades__overimg { margin-top: -60px; position: relative; z-index: 1; } @media only screen and (min-width: 992px) { .grades__overimg { margin-top: -100px; } } .grades .angle-dn, .grades .angle-dn-wh { margin: 0 auto; margin-top: 16px; transition: .25s ease-in-out; } .grades .angle-dn { display: none; } @media only screen and (min-width: 992px) { .grades .angle-dn { display: block; } } @media only screen and (min-width: 992px) { .grades .angle-dn-wh { display: none; } } .angle-dn, .angle-dn-wh { width: 24px; height: auto; } .cblock { padding: 60px 32px; } @media only screen and (min-width: 992px) { .cblock { padding-top: 100px; padding-bottom: 100px; } } .cblock__head { text-align: center; margin-bottom: 40px; } @media only screen and (min-width: 768px) { .cblock__head { max-width: var(--mobile-copy-width); margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 992px) { .cblock__head { max-width: 640px; margin-left: auto; margin-right: auto; } .cblock__head p, .cblock__head a { font-size: 1.2rem; } } .cblock--highlight { background-color: var(--bg); } .cblock--dk { background-color: var(--main); background-repeat: repeat-x; background-position: bottom left; background-size: 2px 300px; color: var(--n0); } .cblock--dk .link { color: var(--link-dk); border-bottom-color: var(--link-dk); } .cblock--dk .link:hover { border-bottom-color: transparent; } .cblock--dk .highlight-hs { color: var(--highlight-hs-light); } .cblock--dk h1, .cblock--dk h2, .cblock--dk h3, .cblock--dk p { color: #fff; } .cblock--asphalt { background-image: url(https://static.lenovo.com/ww/campaigns/2022/back-to-school/lenovo-k-8-tougher-than-asphalt-mobile.jpg); background-repeat: no-repeat; background-position: top left; background-size: cover; } @media only screen and (min-width: 992px) { .cblock--asphalt { background-image: url(https://static.lenovo.com/ww/campaigns/2022/back-to-school/lenovo-k-8-tougher-than-asphalt.jpg); } } @media only screen and (min-width: 1200px) { .cblock--asphalt { padding-top: 155px; padding-bottom: 155px; } } .cblock--unlock { background-image: url(https://static.lenovo.com/ww/campaigns/2022/back-to-school/lenovo-hs-college-unlock-potential-mobile.jpg); background-repeat: no-repeat; background-position: top left; background-size: cover; } @media only screen and (min-width: 992px) { .cblock--unlock { background-image: url(https://static.lenovo.com/ww/campaigns/2022/back-to-school/lenovo-hs-college-unlock-potential.jpg); } } @media only screen and (min-width: 1200px) { .cblock--unlock { padding-top: 155px; padding-bottom: 155px; } } @media only screen and (min-width: 1200px) { .cblock--asphalt .container, .cblock--unlock .container { max-width: 90%; } } @media only screen and (min-width: 992px) { .cblock--elementary, .cblock--hs { padding-bottom: 0; } } @media only screen and (min-width: 992px) { .cblock--savemoney, .cblock--gogreen { overflow: hidden; } } @media only screen and (min-width: 1200px) { .cblock--savemoney, .cblock--gogreen { padding-top: 0; } } .cblock--savemoney { padding-top: 90px; } @media only screen and (min-width: 768px) { .cblock--savemoney { padding-top: 100px; } } @media only screen and (min-width: 768px) { .cblock--savemoney { padding-top: 35px; } } .lenovo-edu { max-width: 180px; height: auto; margin-bottom: 24px; } @media only screen and (min-width: 992px) { .lenovo-edu { max-width: 280px; } } .box { background-color: var(--n0); padding: 40px; margin: 50px 0; } @media only screen and (min-width: 768px) { .box { max-width: 64%; } } @media only screen and (min-width: 992px) { .box { max-width: 700px; padding: 100px; margin: 0; } } .box h2 { margin-top: 0; } .box .cta .link { font-size: 1rem; } @media only screen and (min-width: 1200px) { .box .cta .link { font-size: 1.2rem; } } @media only screen and (min-width: 1200px) { .box .desc { font-size: 1.2rem; } } .alterblades { display: flex; flex-direction: column; row-gap: 60px; } @media only screen and (min-width: 992px) { .blade { display: flex; column-gap: 80px; } } .blade--inv { margin-top: 60px; } @media only screen and (min-width: 992px) { .blade--inv { flex-direction: row-reverse; } } .blade__copy { padding-bottom: 40px; } @media only screen and (min-width: 768px) { .blade__copy { max-width: var(--mobile-copy-width); margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 992px) { .blade__copy { flex: 1; } } .blade__copy h2 { max-width: 70%; } @media only screen and (min-width: 992px) { .blade__copy h2 { max-width: inherit; } } @media only screen and (min-width: 992px) { .blade__img { flex: 1; position: relative; } } .blade--neg { margin-top: -120px; position: relative; z-index: 1; } @media only screen and (min-width: 992px) { .blade--neg { margin-top: 0; } } .blade--negless { margin-top: -80px; position: relative; z-index: 1; } @media only screen and (min-width: 992px) { .blade--negless { margin-top: 140px; } } @media only screen and (min-width: 1200px) { .blade--negless { margin-top: 260px; } } @media only screen and (min-width: 992px) { .blade p, .blade .link { font-size: 1.2rem; } } .blade__imgdesktop { display: none; } @media only screen and (min-width: 992px) { .blade__imgdesktop { display: block; } .blade__imgdesktop img { display: block  !important; } } .blade-protecting h2, .blade-pieceofmind h2 { max-width: 80%; } @media only screen and (min-width: 992px) { .blade-protecting h2, .blade-pieceofmind h2 { max-width: inherit; } } .blade-promote { margin-top: 100px; } .blade-promote h2 { margin-top: 0; } @media only screen and (min-width: 992px) { .blade-smarter .blade__copy { margin-top: 30px; } } @media only screen and (min-width: 768px) { .blade-world .blade__img, .blade-protecting .blade__img, .blade-carry .blade__img, .blade-pieceofmind .blade__img, .blade-promote .blade__img, .blade-smarter .blade__img { max-width: var(--mobile-copy-width); margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 768px) { .blade-packed-wrapper .alterblades .blade .blade__copy, .blade-focused-wrapper .alterblades .blade .blade__copy, .blade-schedule-wrapper .alterblades .blade .blade__copy, .blade-personal-wrapper .alterblades .blade .blade__copy { padding-left: 32px; } } @media only screen and (min-width: 768px) { .blade-packed-wrapper .alterblades .blade--inv .blade__copy, .blade-focused-wrapper .alterblades .blade--inv .blade__copy, .blade-schedule-wrapper .alterblades .blade--inv .blade__copy, .blade-personal-wrapper .alterblades .blade--inv .blade__copy { padding-left: 0; padding-right: 32px; } } @media only screen and (min-width: 992px) { .blade-world .blade__img { padding-top: 180px; max-width: inherit; } .blade-world .blade__imgdesktop { position: absolute; right: 70%; width: 23vw; margin-top: -140px; z-index: 2; } .img-yoga { display: flex; align-items: flex-end; } .img-yoga .ttip { margin-bottom: 30px; } .blade-packed .blade__copy { padding-top: 100px; padding-bottom: 0; position: relative; z-index: 2; } .blade-packed .blade__img .img-stylus { display: none; } .blade-packed .blade__imginner { position: relative; display: inline-block; } .blade-packed .blade__imginner .ttip { position: absolute; bottom: -12px; right: -24px; } .blade-packed .img-pen { margin-top: 60px; margin-left: -60px; width: calc(-1*calc(-100% - 60px)); } .blade-packed .img-mice { max-width: 80%; margin-top: 60px; } .blade-packed .ttip { position: absolute; margin-left: -30px; margin-top: -30px; } .blade-wrapper { width: calc(-1*calc(-100% - 64px)); margin-left: -32px; } .blade-packed-wrapper { margin-top: 120px; } .blade-focused .blade__img { padding-top: 500px; } .blade-focused .blade__img img { display: none; } .blade-focused-wrapper { background-image: url(https://static.lenovo.com/ww/campaigns/2022/back-to-school/lenovo-k-8-black-background.jpg); background-repeat: no-repeat; background-position: top right; background-size: 87% auto; margin-top: -100px; padding-top: 300px; } .blade-protecting .blade__copy { padding-top: 240px; } .blade-protecting .blade__img { max-width: inherit; padding-left: 32px; } .blade-protecting .blade__imgdesktop { position: absolute; bottom: 70%; left: 90%; width: 34vw; } .blade-protecting .ttip { position: absolute; bottom: 5%; right: 15%; } .blade-carry .blade__img { padding-top: 180px; max-width: inherit; } .blade-carry .blade__imgdesktop { position: absolute; right: 65%; width: 24vw; margin-top: -180px; z-index: 2; } .blade-carry .blade__imgdesktop .ttip { position: absolute; left: -32px; bottom: 8px; } .blade-schedule { margin-top: 140px; } .blade-schedule .blade__copy { padding-top: 60px; padding-bottom: 0; position: relative; z-index: 2; } .blade-schedule .blade__imgdesktop { margin-top: 60px; position: relative; } .blade-schedule .blade__imgdesktop .ttip { position: absolute; left: -16px; bottom: 16px; } .blade-schedule .blade__imginner { position: relative; display: inline-block; } .blade-schedule .blade__imginner .ttip { position: absolute; bottom: -8px; right: -14px; } .blade-schedule-wrapper { margin-top: 80px; } .blade-personal .blade__img img { display: none; } .blade-personal .blade__copy { padding-top: 300px; } .blade-personal-wrapper { background-image: url(https://static.lenovo.com/ww/campaigns/2022/back-to-school/lenovo-hs-college-black-background.jpg); background-repeat: no-repeat; background-position: top right; background-size: 100% auto; margin-top: -100px; } .blade-pieceofmind .blade__copy { padding-top: 180px; } .blade-pieceofmind .blade__img { max-width: inherit; padding-left: 32px; } .blade-pieceofmind .blade__imgdesktop { position: absolute; width: 26vw; bottom: 86%; left: 115%; } } @media only screen and (min-width: 1600px) { .blade-focused-wrapper { padding-top: 500px; } } @media only screen and (min-width: 1200px) { .blade-focused .blade__img { padding-top: 600px; } } @media only screen and (min-width: 1200px) { .blade-schedule-wrapper { margin-top: 160px; } } @media only screen and (min-width: 1200px) { .blade-schedule { align-items: flex-end; margin-top: 60px; } } @media only screen and (min-width: 1200px) { .blade-schedule .blade__imgdesktop { margin-top: 10vw; } } @media only screen and (min-width: 1200px) { .blade-personal .blade__copy { padding-top: 510px; } } @media only screen and (min-width: 1200px) { .blade-pieceofmind .blade__copy { padding-top: 250px; } } @media only screen and (min-width: 1200px) { .blade-pieceofmind .blade__img { padding-left: 0; } } @media only screen and (min-width: 1200px) { .blade-protecting .blade__imgdesktop { width: 24vw; bottom: 68%; left: 90%; } } @media only screen and (min-width: 1200px) { .blade-protecting .blade__img { padding-left: 0; } } @media only screen and (min-width: 1200px) { .blade-world .blade__imgdesktop { width: 23vw; } } @media only screen and (min-width: 1200px) { .blade-packed, .blade-schedule { align-items: flex-end; } } @media only screen and (min-width: 1200px) { .blade-packed .blade__img, .blade-schedule .blade__img { width: 50vw; position: relative; left: 50%; margin-left: -50vw; margin-bottom: 100px; } .blade-packed .blade__img .elementary-laptop, .blade-packed .blade__img .hs-laptop, .blade-schedule .blade__img .elementary-laptop, .blade-schedule .blade__img .hs-laptop { height: 60vw; max-height: 1060px; } } @media only screen and (min-width: 1200px) { .blade-packed .blade__copy { padding-top: 0; } } @media only screen and (min-width: 1200px) { .blade-packed .blade__imgdesktop { margin-top: 10vw; } } @media only screen and (min-width: 1200px) { .blade-packed .img-pen { max-width: inherit; width: calc(-1*calc(-160% - 60px)); } } .outro { margin-top: 80px; } @media only screen and (min-width: 768px) { .outro { max-width: var(--mobile-copy-width); margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 992px) { .outro { margin-top: 60px; position: relative; max-width: inherit; } } @media only screen and (min-width: 1200px) { .outro { margin-top: 140px; position: relative; max-width: inherit; } } .outro__copy { background-color: var(--lred); color: var(--n0); padding: 40px; } @media only screen and (min-width: 992px) { .outro__copy { max-width: 82%; margin: 0 auto; text-align: center; position: relative; padding-left: 140px; padding-right: 140px; } } @media only screen and (min-width: 1200px) { .outro__copy { max-width: 70%; padding: 120px 140px; } } .outro__copy h3 { margin-top: 0; max-width: 70%; } @media only screen and (min-width: 992px) { .outro__copy h3 { max-width: inherit; } } .outro__copy .link { color: var(--n0); border-bottom-color: var(--n0); } .outro__copy .link:hover { color: var(--n0); border-bottom-color: transparent; } @media only screen and (min-width: 992px) { .outro__inner { max-width: 685px; margin: 0 auto; } } .outro__img { position: relative; } @media only screen and (min-width: 992px) { .outro__img { max-width: 880px; margin: 0 auto; } } .outro__img .ttip { position: absolute; right: -24px; bottom: 80px; } .outro__outimg { margin-top: 60px; margin-bottom: -150px; position: relative; } .outro__outimg--less { margin-bottom: -100px; margin-top: 60px; } .outro__imgdesktop { display: none; } @media only screen and (min-width: 992px) { .outro__imgdesktop { display: block; } } @media only screen and (min-width: 992px) { .outro__copy { font-size: 1.2rem; } } .outro-hs .outro__copy { background-color: var(--lviolet); } .outro-environment .outro__outimg { position: relative; } @media only screen and (min-width: 992px) { .outro-environment .outro__outimg { display: none; } } .outro-environment .outro__outimg .ttip { position: absolute; top: 0; right: 0; } @media only screen and (min-width: 992px) { .outro-environment .outro__imgdesktop { position: absolute; right: -32px; width: 220px; z-index: 2; } } @media only screen and (min-width: 1200px) { .outro-environment .outro__imgdesktop { width: 280px; margin-top: 60px; } } @media only screen and (min-width: 1400px) { .outro-environment .outro__imgdesktop { width: 350px; margin-top: 20px; } } .outro-environment .outro__imgdesktop .ttip { position: absolute; right: 50%; top: -16px; } @media only screen and (min-width: 1400px) { .outro-environment .outro__imgdesktop .ttip { right: 70%; } } @media only screen and (min-width: 992px) { .outro-hs .outro__outimg { position: absolute; width: 160px; right: -90px; bottom: -40px; margin-bottom: 0; margin-top: 0; } .outro-hs .outro__outimg .ttip { position: relative; top: -16px; } } @media only screen and (min-width: 1200px) { .outro-hs .outro__outimg { width: 200px; right: -120px; } } .sustainability { display: flex; column-gap: 16px; margin-top: 60px; } @media only screen and (min-width: 768px) { .sustainability { margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 992px) { .sustainability { align-items: center; } } .sustainability__img { width: 40px; height: auto; flex: 0 0 auto; align-self: flex-start; } @media only screen and (min-width: 992px) { .sustainability__img { width: 70px; } } .sustainability p { font-weight: 400; font-size: .96rem; flex: 1 1 auto; line-height: 1.3em; margin-bottom: 0; } .stories { display: flex; flex-direction: column; row-gap: 24px; } @media only screen and (min-width: 768px) { .stories { flex-direction: row; column-gap: 12px; } } @media only screen and (min-width: 992px) { .stories { flex-direction: row; column-gap: 50px; } } .stitem { background-color: var(--lgreen); color: var(--n0); text-align: center; } @media only screen and (min-width: 768px) { .stitem { flex: 1; } } @media only screen and (min-width: 992px) { .stitem { position: relative; background-image: url(https://static.lenovo.com/ww/campaigns/2022/back-to-school/lenovo-alpha-pattern-green-edu.jpg); background-repeat: no-repeat; background-size: 76% 76%; padding-left: 8px; padding-top: 8px; background-color: transparent; display: flex; flex-direction: column; } } .stitem__img img { max-height: 128px; width: 100%; object-fit: cover; object-position: top center; } @media only screen and (min-width: 768px) { .stitem__img img { max-height: 200px; } } @media only screen and (min-width: 992px) { .stitem__img img { max-height: inherit; } } .stitem:hover { color: var(--n0); } .stitem__body { padding: 30px; } @media only screen and (min-width: 992px) { .stitem__body { padding: 40px; background-color: var(--lgreen); flex: 1 1 auto; } } .stitem--dk { background-color: var(--main); color: var(--n0); } @media only screen and (min-width: 992px) { .stitem--dk { background-color: transparent; } .stitem--dk .stitem__body { background-color: var(--main); } } .stitem h4 { margin: 0; margin-bottom: 20px; font-weight: 700; color: #fff; } .stitem p { font-weight: 400; font-size: 1rem; line-height: 1.5em; color: #fff; } .stitem .link { margin-bottom: 0; display: inline-block; color: var(--n0); border-bottom-color: var(--n0); } .stitem .link:hover { border-bottom-color: transparent; } .banner { margin-bottom: 24px; background-color: var(--lred); color: var(--n0); } @media only screen and (min-width: 992px) { .banner { display: flex; align-items: center; margin-bottom: 0; } } .banner--hs { background-color: var(--lviolet); } @media only screen and (min-width: 992px) { .banner--hs { margin-top: 40px; } } .banner__name { display: none; } .banner__name h3 { font-weight: 700; } @media only screen and (min-width: 992px) { .banner__name { width: 32%; display: block; flex: 0 0 auto; padding: 30px 40px; } .banner__name .highlight { color: rgba(255, 255, 255, .6); } .banner__name h3 { font-size: 2.2rem; } } @media only screen and (min-width: 1200px) { .banner__name { padding: 40px 64px; } .banner__name h3 { font-size: 3rem; } } @media only screen and (min-width: 992px) { .banner__img { flex: 1 1 auto; } } .banner__img img { min-height: 128px; object-fit: cover; height: 100%; } .banner h3, .banner p { color: #fff; } @media only screen and (min-width: 992px) { .nav-tabs-products { display: none; } } @media only screen and (min-width: 768px) { .block-products { max-width: var(--mobile-copy-width); margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 992px) { .block-products { max-width: inherit; } } @media only screen and (min-width: 992px) { .block-products .cta--even { background-color: var(--bg); display: flex; justify-content: center; column-gap: 20px; margin-top: 0; padding-top: 20px; padding-bottom: 40px; } } @media only screen and (min-width: 992px) { .block-products .cta--even .btn { min-width: 200px; } } @media only screen and (min-width: 992px) { .block-products .tab-pane { padding-top: 0; display: block  !important; } } @media only screen and (min-width: 992px) { .products { background-color: var(--bg); padding: 30px; } } .products__inner { display: flex; flex-direction: column; row-gap: 24px; } @media only screen and (min-width: 768px) { .products__inner { flex-direction: row; flex-wrap: wrap; column-gap: 24px; } } @media only screen and (min-width: 992px) { .products__inner { column-gap: 32px; flex-wrap: nowrap; justify-content: center; } } @media only screen and (min-width: 1200px) { .products__inner { max-width: 88%; margin: 0 auto; } } .product { background-color: var(--bg); color: var(--main); } @media only screen and (min-width: 768px) { .product { max-width: calc(50% - 12px); } } @media only screen and (min-width: 992px) { .product { max-width: 400px; padding-bottom: 0; } } .product:hover { color: var(--main); } .product h4 { font-weight: 700; margin-top: 0; margin-bottom: 16px; } .product p { font-weight: 400; font-size: 1rem; margin: 0; } .product__img { margin-bottom: 32px; margin-top: 12px; text-align: center; } @media only screen and (min-width: 992px) { .product__img { text-align: left; } } .product__img img { max-width: 80%; margin: 0 auto; } @media only screen and (min-width: 992px) { .product__img img { height: 140px; object-fit: contain; margin-left: 0; } } .product__body { padding: 40px 32px; padding-top: 0; } @media only screen and (min-width: 992px) { .product__body { padding: 0; } } [data-aos="fade-up"] { transform: translate3d(0px, 50px, 0px); } .merchandizingBanner, .bottomStickyDock, #inside_holder { display: none  !important } .html_upload_pc { min-height: 0  !important; } #evidon_banner_wrap { bottom: 0  !important; } .lenovo_body { overflow-x: hidden; } p { margin-bottom: 0  !important; } ul { margin-bottom: 0  !important; }