* { -moz-box-sizing: border-box; box-sizing: border-box; } a { color: blue; text-decoration: none; } a:hover, a:focus { text-decoration: none; } body { font: 16px/26px 'Lato', Helvetica, Arial, sans-serif; position: relative; color: #000  !important; margin: 0; } h1, h2, h3, h4 { color: #000  !important; font-weight: 700  !important; } p { margin-top: 10px; margin-bottom: 15px; } h1 { font-size: clamp(2em, 3vw, 3.5em); line-height: 1.3em; } h2 { font-size: clamp(1.75em, 2.5vw, 3em); line-height: 1.25em; margin-bottom: 30px; } h3 { font-size: clamp(1.5em, 2vw, 2em); font-size: 2em; line-height: 1.25em; } h4 { font-size: clamp(1.25em, 1.75vw, 1.5em); line-height: 1.3em; } .row { display: flex; flex-direction: row; flex-flow: wrap; } .btn { padding: 15px 80px; border-radius: 3px; background: #0d5c91; color: #fff; display: inline-block; margin-top: 30px; } @media only screen and (max-width: 992px) { .btn { padding: 10px 60px; margin-top: 15px; } } .btn.arrow::after { content: ' >'; margin-left: 10px; font-size: 1.5em; } .text-white { color: #fff  !important; } .text-dark { color: #000  !important; } .text-center { text-align: center  !important; } .text-left { text-align: left  !important; } .text-right { text-align: right  !important; } .fw-bold { font-weight: bold  !important; } .fw-bolder { font-weight: bolder  !important; } .container-xl { max-width: 1400px; margin: 0 auto; padding: 0 40px; z-index: 10; } @media only screen and (max-width: 1400px) { .container-xl { max-width: 1200px; } } @media only screen and (max-width: 992px) { .container-xl { max-width: 800px; } } @media only screen and (max-width: 768px) { .container-xl { max-width: 100%; } } section { padding: 100px 0; } @media only screen and (max-width: 768px) { section { padding: 75px 0; } } .lenovo-co2-hero-blade { min-height: 100vh; position: relative; padding: 0; overflow: hidden; } .lenovo-co2-hero-blade .blade-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .lenovo-co2-hero-blade .blade-bg img { height: auto; width: auto; max-width: 100%; max-height: unset; min-height: 100vh; object-fit: cover; object-position: center; } @media only screen and (min-width: 1700px) { .lenovo-co2-hero-blade .blade-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .lenovo-co2-hero-blade .blade-bg img { height: auto; width: 100%; max-width: 100%; max-height: 100vh; object-position: bottom; } } .lenovo-co2-hero-blade .hero-content { position: absolute; top: 40%; transform: translateY(-50%); text-align: left; width: 45%; } .lenovo-co2-hero-blade .hero-content h1 { margin-top: 50px; margin-bottom: 30px; } .lenovo-co2-hero-blade .hero-content h4 { max-width: 600px; } @media only screen and (max-width: 768px) { .lenovo-co2-hero-blade .hero-content { position: absolute; top: 100px; transform: translateY(0%); text-align: left; width: 45%; } .lenovo-co2-hero-blade .hero-content h1 { margin-top: 30px; margin-bottom: 20px; } .lenovo-co2-hero-blade .hero-content h4 { margin-top: 20px; margin-bottom: 10px; } } @media only screen and (max-width: 992px) { .lenovo-co2-hero-blade .hero-content { width: 70%; } } @media only screen and (max-width: 768px) { .lenovo-co2-hero-blade .hero-content { width: 80%; } } .lenovo-co2-hero-blade .hero-content .logo { max-width: 400px; width: 100%; } @media only screen and (max-width: 768px) { .lenovo-co2-hero-blade .hero-content .logo { max-width: 200px; } } .lenovo-co2-quote .row { display: flex; flex-direction: column; align-items: center; text-align: center; } .lenovo-co2-why { background: url(https://p4-ofp.static.pub/ShareResource/services/co2-offset-services/img/lenovo-co2-bg.jpg); background-size: cover; background-position: center; position: relative; } @media only screen and (max-width: 768px) { .lenovo-co2-why { background: url(https://p4-ofp.static.pub/ShareResource/services/co2-offset-services/img/lenovo-co2-offset-services-bg-mobile.jpg); background-size: cover; background-position: center; } } .lenovo-co2-why h2 { margin-bottom: 50px; color: #000  !important; } .lenovo-co2-why h4 { margin: 20px auto; } .lenovo-co2-why .icon-group { margin-bottom: 30px; } @media only screen and (max-width: 575px) { .lenovo-co2-why .icon-group { display: flex; flex-direction: row; gap: 15px; align-items: flex-start; } .lenovo-co2-why .details { text-align: left; } .lenovo-co2-why .details h4 { margin: 0; } .lenovo-co2-why .details p { margin: 0; } } .lenovo-co2-transparency { } .lenovo-co2-transparency .card-text { display: flex; flex-direction: column; justify-content: center; } @media only screen and (max-width: 992px) { .lenovo-co2-transparency .card-text { margin-bottom: 40px; } } .lenovo-co2-transparency .card-with-bg { position: relative; height: 100%; } @media only screen and (max-width: 575px) { .lenovo-co2-transparency .card-with-bg { margin-bottom: 40px; } } .lenovo-co2-transparency .card-with-bg .card-bg { width: 90%; } .lenovo-co2-transparency .card-with-bg .content-box { position: absolute; bottom: -10px; left: 10%; background-color: #fff; box-shadow: 5px 1px 15px rgba(0, 0, 0, .3); width: 85%; padding: 20px 80px 20px 40px; } .lenovo-co2-transparency .card-with-bg .content-box h3 { line-height: 1.5em; margin: 0 0 20px; padding: 0; } @media only screen and (max-width: 992px) { .lenovo-co2-transparency .card-with-bg .content-box { padding: 10px 40px 10px 20px; } .lenovo-co2-transparency .card-with-bg .content-box h3 { font-size: 1.3em; } } .lenovo-co2-transparency .card-with-bg .content-box .cta { font-weight: bolder; font-size: 1.2em; color: #0d5c91; } .lenovo-co2-transparency .card-with-bg .content-box .cta::after { content: ' >'; margin-left: 10px; font-size: 30px; font-weight: bold; } .lenovo-co2-tangible { padding: 0; overflow: hidden; } .lenovo-co2-tangible h4 { color: #fff  !important; } .lenovo-co2-tangible .left-side { padding: 0; } .lenovo-co2-tangible .left-side img { height: auto; min-height: 100%; width: auto; max-width: 100%; object-fit: cover; object-position: center; } .lenovo-co2-tangible .right-side { background-color: #4d144a; color: #fff; padding: 100px; } @media only screen and (max-width: 768px) { .lenovo-co2-tangible .left-side img { width: 100%; max-height: 100%; } .lenovo-co2-tangible .right-side { padding: 50px; } } .lenovo-co2-tangible .btn { margin-top: 30px; display: inline-block; } .lenovo-co2-smarter-tech { background: url(https://p4-ofp.static.pub/ShareResource/services/co2-offset-services/img/lenovo-co2-smarter-technology-for-sustainable-future-bg.jpg); background-size: cover; background-position: center; color: #fff; position: relative; } @media only screen and (max-width: 768px) { .lenovo-co2-smarter-tech { background: url(https://p1-ofp.static.pub/ShareResource/services/co2-offset-services/img/lenovo-smarter-technology-for-sustainable-future-bg-mobile.jpg); background-size: cover; background-position: center; } } .lenovo-co2-smarter-tech h2 { color: #fff  !important; } .lenovo-co2-smarter-tech .container-xl { z-index: 10; position: relative; } .lenovo-co2-smarter-tech::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .65); z-index: 1; background: url(https://p2-ofp.static.pub/ShareResource/services/co2-offset-services/img/lenovo-co2-smarter-technology-for-sustainable-future-overlay.png); background-size: cover; background-position: center; } @media only screen and (max-width: 768px) { .lenovo-co2-smarter-tech::after { background: url(https://p2-ofp.static.pub/ShareResource/services/co2-offset-services/img/lenovo-smarter-technology-for-sustainable-future-overlay-mobile.png); background-size: cover; background-position: center; } } .lenovo-co2-smarter-tech .card { background-color: #fff; color: #000; text-align: center; padding: 40px; height: 100%; } .lenovo-co2-smarter-tech .card h4 { margin: 0px 0px 15px 0px; } .lenovo-co2-smarter-tech .card p { min-height: 60px; } .lenovo-co2-smarter-tech .card .btn { display: inline-block; padding: 10px clamp(10px, 5vw, 80px); font-weight: bold; margin-top: 15px; } .lenovo-co2-footnotes { padding: 50px; } @media only screen and (max-width: 768px) { .lenovo-co2-footnotes { padding: 30px 0; } } .yogaModal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, .8); backdrop-filter: blur(8px); padding: 24px; } #YogaVideoModal { z-index: 99; } .yoga-modal-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 96%; max-width: 800px; background: transparent; border-radius: 5px; box-shadow: 0 2px 32px rgba(0, 0, 0, .8); z-index: 99; border: none; outline: none; } #YogaVideoFrame { width: 100%; height: 100%; aspect-ratio: 16/9; vertical-align: top; } .closeVideoModal { position: absolute; top: 0; right: 0; color: var(--color-neutral); font-size: 36px; cursor: pointer; opacity: .6; z-index: 2; transition: .2s; width: 50px; height: 50px; line-height: 50px; text-align: center; } .closeVideoModal:hover { color: #000; font-weight: bolder; text-decoration: none; cursor: pointer; background-color: rgba(255, 255, 255, .5); } @media only screen and (min-width: 993px) { .yoga-modal-content { max-width: 1000px; } }