body { font-size: 16px; font-family: "Lato", sans-serif; color: #333f48; } p { font-size: 1.125rem; } h1, h2, h3 { font-size: 2.25rem; font-weight: 700; line-height: 1.25em; } h4 { font-size: 1.25rem; line-height: 1.25em; } h5 { font-size: 1.125rem; line-height: 1.25em; } img { max-width: 100%; } strong, .font-bold { font-weight: 900; } section { position: relative; } .text-right { text-align: right; } .text-left { text-align: left; } .text-center { text-align: center; } .ml-200 { margin-left: 100px; } .justify-content-end .ml-200 { margin-left: 0; margin-right: 100px; } .btn-primary { color: #fff; background-color: #0d5c91; border-color: #0d5c91; margin: 10px 15px; padding: 8px 18px; height: auto; float: none; } .btn-primary:hover { color: #0e5780; background-color: #e8f3f9; border-color: #0e5780; } .fullsize-background { background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden; } .vertical-center { position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; } .vertical-top { position: absolute; top: 15%; transform: translate(-50%, -15%); left: 50%; } #masthead.topbar { position: fixed; top: -120px; left: 0; width: 100%; background-color: #fff; z-index: 999; display: flex; align-items: center; justify-content: space-between; transition: all 1s ease; box-shadow: 0 10px 10px 10px rgba(0, 0, 0, .08); padding: 0 60px; } #masthead .logo img { height: 22px; } #masthead.topbar .btn { margin-right: 20px; } body.scrolled #masthead.topbar { top: 0; } #masthead.topbar .topbar-actions { display: flex; align-items: center; } #masthead.topbar .btn.btn-scroll-up { margin-left: 50px; } #pageMenu ul { margin: 0; padding: 0; list-style: none; } #pageMenu ul li { display: inline-block; } #pageMenu ul li a { text-decoration: none; color: #000; font-size: 1rem; line-height: 1.5rem; font-weight: bold; padding: 0 25px; } #pageMenu ul li.to-top { display: none; } .section-wrapper { padding-top: 100px; padding-bottom: 100px; overflow: hidden; } .parallax-mirror { z-index: 1  !important; } img.parallax-slider { margin-top: 72px; max-height: unset; } .vh-100 { min-height: 100vh  !important; height: auto  !important; } .vh-80 { min-height: 80vh  !important; height: auto  !important; } .vh-50 { min-height: 50vh  !important; height: auto  !important; } .vertical-center-content { display: flex; align-items: center; } .vertical-top-content { display: flex; align-items: flex-start; } .vertical-top-content-spaced .row { position: relative; top: 15vh; } .vertical-bottom-content { display: flex; align-items: flex-end; } .bg-holder, .bg-shadow-holder { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; } .section-active .bg-holder, .section-active .bg-shadow-holder, .elem-leaving-top:not(.elem-above-bottom) .bg-holder { position: fixed; } .container { z-index: 1; } .font-large.lenovo-yoga-paragraph, .font-large .lenovo-yoga-paragraph { font-size: 2.375rem; line-height: 3.625rem; } .video-background { overflow: hidden; height: 100%; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; } .video-background img, .video-background video { position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; min-height: 50%; min-width: 50%; object-fit: cover; object-position: top; } .video-background img, .video-background iframe { height: 56.25vw; } .modal-video-movie-wrap { max-width: 90vw; margin: 0 auto; } .iframe-container { width: 350px; max-width: 100%; max-height: 90vh; overflow: scroll; position: relative; background-color: #fff; margin: auto; top: 50%; border: 0; padding: 0; transform: translateY(-50%); border-radius: 6px; } .iframe-container iframe { display: block; } .notifyMeForm { position: fixed; height: 100%; width: 100%; left: 0px; top: 0px; z-index: 99999999; display: none; } #iFrame_responsive::-webkit-scrollbar { width: 0  !important; } .mobile-only { display: none; } .tablet-only { display: none; } #masthead #header__mobile-trigger { width: 30px; height: 30px; position: relative; margin-left: 30px; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer; z-index: 11; } #masthead #header__mobile-trigger span { display: block; position: absolute; height: 5px; width: 30px; background: #000; border-radius: 10px; opacity: 1; left: 0; transform: rotate(0deg); transition: .2s ease-in-out; } #masthead #header__mobile-trigger span:first-child { top: 0px; } #masthead #header__mobile-trigger span:nth-child(2), #masthead #header__mobile-trigger span:nth-child(3) { top: 10px; } #masthead #header__mobile-trigger span:nth-child(4) { top: 20px; } #masthead #header__mobile-trigger.open span:first-child { top: 10px; visibility: visible; transform: rotate(45deg); } #masthead #header__mobile-trigger.open span:nth-child(2) { transform: rotate(45deg); } #masthead #header__mobile-trigger.open span:nth-child(3) { transform: rotate(-45deg); } #masthead #header__mobile-trigger.open span:nth-child(4) { top: 10px; visibility: visible; transform: rotate(-45deg); } #masthead #header__mobile-trigger { display: none; text-align: left; float: right; margin-top: 5px; } #masthead #header__mobile-trigger span { display: inline-block; padding: 0; margin: 0; min-width: 30px; cursor: pointer; } #masthead #header__mobile-trigger span i { padding: .8rem 0 0; float: right; display: none; font-size: 1.8rem; line-height: .2rem; min-width: 1.6rem; } #masthead #header__mobile-trigger span.menu_state { display: inline-block; } header.event-header #event-header__nav-mobile-list { position: absolute; z-index: 11; left: 0; right: 0; top: 150px; display: none; } header.event-header #event-header__nav-mobile-list ul { display: none; list-style-type: none; width: 100%; height: auto; padding: 1.5rem 0; margin: 0 auto; background: #efefef; } @media (min-width: 1240px) { nav#pageMenu ul { display: block  !important; } } @media (max-width: 1240px) { #masthead #header__mobile-trigger { display: block; } #masthead.topbar .btn.btn-scroll-up { display: none; } nav#pageMenu { position: absolute; top: 92px; background: #fff; left: 0; width: 100%; } nav#pageMenu ul { display: none; background: #fff; } nav#pageMenu ul li { width: 100%; margin: 0; border-bottom: 1px solid #ccc; } nav#pageMenu ul li a { display: block; padding: 25px 25px; } #pageMenu ul li.to-top { display: block; } #pageMenu ul li.to-top a { line-height: 20px; } .mobile-to-top-arrow { float: left; display: inline-flex; align-items: center; border-radius: 50%; width: 20px; height: 20px; text-align: center; font-size: 10px; margin-right: 5px; } .mobile-to-top-arrow svg { margin: auto; } .vertical-top-content-spaced .row { top: 5vh; } } @media (max-width: 1024px) { .tablet-only { display: block; } h3 { font-size: 2.25rem; } .font-large.lenovo-yoga-paragraph, .font-large .lenovo-yoga-paragraph { font-size: 2rem; line-height: 2.875rem; } .mobile-top-align-content { align-items: flex-start; } .mobile-bottom-align-content { align-items: flex-end; } .vertical-top-content-spaced .row { top: 0; } .box-shadow { background: linear-gradient( 180deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .6) 50%, rgba(255, 255, 255, 0) 75% ); } } @media (max-width: 768px) { .desktop-only { display: none; } .mobile-only { display: block; } h1 { font-size: 1.5rem; line-height: 1.5rem; } h3 { font-size: 1.5rem; line-height: 2.25rem; } .lenovo-yoga-paragraph-1-5em { font-size: 1.25rem; line-height: 1.75rem; } .font-large.lenovo-yoga-paragraph, .font-large .lenovo-yoga-paragraph { font-size: 1.5rem; line-height: 2.375rem; } } @media (max-width: 640px) { #masthead.topbar .btn { display: none; } } .btn-hero { font-size: 1rem; line-height: 1.25; color: #fff; border: 2px solid #fff; border-radius: 3px; background-color: rgba(0, 0, 0, .6); margin: 0 15px; padding: 22px 45px; } .btn-hero img { margin-left: 5px; } .btn-hero:hover, .btn-hero:focus, .btn-hero:active { color: #fff; } #blade-0 { position: relative; } #blade-0 .text-center { z-index: 1; } #blade-0 .lenovo-yoga-logo { margin: 0 0 50px; } #blade-1 { margin-top: 0px; padding-top: 20px; background: transparent linear-gradient( 180deg, #fa3f3d 0%, #fc73a3 53%, #fc73a3d3 79%, #fc73a3a8 87%, #fc73a38d 89%, #fc73a343 93%, #fc73a317 97%, #fc73a300 99%, #fc73a300 100% ) 0% 0% no-repeat padding-box; color: #000; overflow: visible; } #blade-1:before { content: ""; height: 101px; position: absolute; top: -100px; left: 0; right: 0; background: transparent linear-gradient( 180deg, #fa3f3d00 0%, #fa3f3d1a 20%, #fa3f3d48 40%, #fa3f3dac 70%, #fa3f3d 100% ) 0% 0% no-repeat padding-box; } .blade-1-image-wrapper { margin-bottom: -150px; } @media (max-width: 1024px) { .blade-1-image-wrapper { margin-bottom: 0px; } } #intel-logo{ position: absolute; top: 100px; right: 50px; } #intel-logo img{ min-height: 60px; max-height: 100px; height: auto; } @media (max-width: 640px) { #intel-logo{ top: 30px; right: 20px; } #intel-logo img{ height: 60px; } } .hero-btn-groups { display: flex; justify-content: center; align-items: center; margin-top: 50px; flex-direction: row; z-index: 1; } .hero-btn-groups a { min-width: 240px; margin-bottom: 25px; } .title { font-size: 6.25rem; font-weight: bolder; color: red; background: transparent linear-gradient(90deg, #fa3f3d 0%, #fa3f3d 29%, #fc5c93 78%, #fc5c93 100%) 0% 0% no-repeat padding-box; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: left; transition: all 1.5s ease; opacity: 1; } .title-animated-wrapper { text-align: center; } .title-animated-wrapper .title-animated { display: inline-flex; flex-flow: column; } .title.left { transform: translateX(-75%); } .title.right { transform: translateX(75%); } .elem-above-bottom .title.left { transform: translateX(-10%); } .elem-above-bottom .title.right { transform: translateX(10%); } .elem-leaving-top .title.left { opacity: 1; } .elem-leaving-top .title.right { opacity: 1; } .content-holder, .content-holder h2 { color: #fff; } .fade-animate { opacity: 0; transition: all 1.5s ease; } .in.fade-animate { opacity: 1; } .fade-up { transform: translateY(100px); } .in.fade-up { transform: translateY(0px); } .fade-left { transform: translateX(100px); } .in.fade-left { transform: translateX(0px); } .fade-right { transform: translateX(-100px); } .in.fade-right { transform: translateX(0px); } .fade-image.in.fade-animate { opacity: .6; } .fade-image.elem-ready.in.fade-animate { opacity: 1; } #blade-1 h2 { margin-bottom: 20px; font-size: 48px; color: #000; } #blade-1 .font-large.lenovo-yoga-paragraph { font-size: 32px; } #blade-1 .img-responsive { object-fit: contain; object-position: bottom; height: 100%; } #blade-2 .img-responsive { min-height: 75vh; } #blade-2 h3 { font-weight: bold; margin-bottom: 60px; line-height: 1.5em; } #blade-2 .video-preview { position: relative; } #blade-2 .video-preview video { width: 100%; display: block; } #blade-2 .video-preview a:before { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; content: ""; z-index: 2; background: url(https://static.lenovo.com/ww/campaigns/2019/yoga-brand-v3/icons/play-button.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size: 100px; transition: .2s; } #blade-2 .video-preview video.mobile-video { display: none; } @media (max-width: 768px) { #blade-2 .video-preview video.desktop-video { display: none; } #blade-2 .video-preview video.mobile-video { display: block; } } #blade-3 .title-animated-wrapper { margin: 300px 0; } .tns-outer button { position: absolute; right: 10px; cursor: pointer; border: 0; background: transparent; } .tns-outer button:nth-child(1) { bottom: 40px; } .tns-outer button:nth-child(2) { bottom: 10px; } #blade-slider .slider-diag { justify-content: space-between; } #blade-slider-2 .slider-diag { justify-content: space-between; } #blade-slider-3 .slider-diag { justify-content: space-between; } .vertical-center-position { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .p-25 { padding: 25px; } #blade-8 .description { min-height: 100px; } #blade-8 h3 { font-size: 36px; margin-bottom: 50px; } .color-full-text-box { background-image: url(https://static.lenovo.com/ww/campaigns/2022/yoga-brand/lenovo-campaign-yoga-brand-premium-care-plus-copy-bkgd.jpg); padding: 0; background-size: cover; background-repeat: no-repeat; background-position: center; padding: 50px; } #footnotes { background-color: #e2e2e2; padding-top: 100px; padding-bottom: 100px; } #footnotes ol { padding-left: 15px; list-style: auto; } #blade-11 ul li { list-style: none; } #blade-5-1, #blade-5-2, #blade-5-3 { margin-bottom: 150px; } #blade-5 .custom-video { width: 100%; } #blade-7, #blade-9, #blade-10, #blade-11 { padding: 0; } #blade-7 .logo-window { margin-bottom: 60px; width: 55%; } #blade-7 h3 { margin-bottom: 20px; color: #fff; } #blade-7 h4, #blade-7 p { margin-bottom: 10px; color: #fff; } #blade-9 h2 { margin-bottom: 20px; } #blade-9 p { margin-bottom: 50px; } #blade-9 .btn-primary { margin: 0; } #blade-10 .btn-primary, #blade-11 .btn-primary { margin: 0 0 30px 0; } #blade-10 li, #blade-11 li { margin: 0 0 30px 0; } #blade-10 .premium-care-logo, #blade-11 .premium-care-logo { margin-bottom: 10px; } #blade-10 p { margin-bottom: 20px; } #blade-11 li { margin-bottom: 20px; } #blade-7 .static-bg-holder, #blade-10 .static-bg-holder, #blade-11 .static-bg-holder { position: absolute; z-index: 0; width: 100%; height: 100%; } #blade-7 .content-holder, #blade-10 .color-full-text-box, #blade-11 .color-full-text-box { margin-top: 60px; margin-bottom: 60px; z-index: 1; } #blade-7 .content-holder h4 { font-weight: bold; } #blade-10 .color-full-text-box ul, #blade-11 .color-full-text-box ul { padding-left: 1rem; } #blade-7 .static-bg-holder img, #blade-11 .static-bg-holder img, #blade-10 .static-bg-holder img { min-height: 850px; height: 100%; } #blade-10 h4, #blade-11 h4 { color: #fff; font-size: 1.5rem; font-weight: bold; } #blade-11 h4 { margin-bottom: 5px; } #blade-11 ul { margin: 0; padding: 0; } #blade-11 .icon img { width: 75%; margin: 0 auto; max-height: 80px; } #blade-11 .icon { display: flex; padding: 0; } .static-bg-holder::after { background: linear-gradient( 90deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0) 100% ); content: ""; width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; } .static-bg-holder img { min-width: 100%; height: auto; object-fit: cover; } .mobile { display: none; } @media (max-width: 1024px) { .text-box { order: 1; } } @media (max-width: 640px) { #masthead.topbar { padding: 10px; } } @media (min-width: 992px) and (max-width: 1920px) { .ml-200 { margin-left: 100px; } .justify-content-end .ml-200 { margin-left: 0; margin-right: 100px; } } @media (max-width: 992px) { .justify-content-end .ml-200 { margin-left: 0; margin-right: 0; } .ml-200 { margin-left: 0px; } .hero-btn-groups { flex-direction: column; } .static-bg-holder::after { background: unset; } .non-mobile { display: none; } .mobile { display: block; } #blade-7 .static-bg-holder img, #blade-11 .static-bg-holder img, #blade-10 .static-bg-holder img { min-height: 340px; } #blade-7 .content-holder { margin: 50px 0; text-align: left; } #blade-9 .content-holder { margin: 50px 0; text-align: center; } #blade-7 .content-holder, #blade-7 .content-holder h2, #blade-7 .content-holder h3, #blade-7 .content-holder h4, #blade-7 .content-holder p, #blade-9 .content-holder, #blade-9 .content-holder h2 { color: #000; } #blade-8 h3 { margin-bottom: 20px; } #blade-8 img { min-height: 340px; } .color-full-text-box { padding: 25px; } #blade-10 p, #blade-11 p { margin-bottom: 15px; } #blade-10 li, #blade-11 li { margin: 0 0 15px 0; } #footnotes { padding-top: 40px; padding-bottom: 40px; } #blade-7 .vertical-center-position, #blade-9 .vertical-center-position, #blade-7 .static-bg-holder, #blade-10 .static-bg-holder, #blade-11 .static-bg-holder { position: relative; transform: unset; } #blade-10 .color-full-text-box, #blade-11 .color-full-text-box { margin: 0; } #blade-10 .container, #blade-11 .container { max-width: 100%; padding: 0; margin: 0; } #blade-10 .container .row, #blade-11 .container .row { margin: 0; } } .relative { position: relative; } .slider-diag .slick-slide.slick-active .slide-holder { transition: all .5s ease; } .slider-diag .slick-track { display: flex; } .slick-activer { align-self: flex-start; } .slick-active + .slick-active + .slick-active { align-self: flex-end; } .slick-active .slide-holder, .slick-active + .slick-active + .slick-active .slide-holder { width: 10vw; } .slick-active + .slick-active { align-self: center; } .slick-active + .slick-active .slide-holder { width: 70vw; } .tns-item:not(.tns-slide-active) { visibility: hidden; } cc { transition: width .5s ease; flex: 1; padding: 20px; } .slider-diag .slide-holder img { width: 100%; } .slider-diag .slide-holder:first-child { padding-left: 0; } .slider-diag .slide-holder:last-child { padding-right: 0; } .slider-diag { display: flex; gap: 50px; } @media (max-width: 767px) { .slider-diag .slide-holder:nth-child(2) { display: none; } .slider-diag { gap: 10px; } } .tns-slide-active { align-self: flex-start; } .tns-slide-active + .tns-slide-active + .tns-slide-active { align-self: flex-end; } .tns-slide-active .slide-holder, .tns-slide-active + .tns-slide-active + .tns-slide-active .slide-holder { width: 60%; margin: 0 auto; } .tns-slide-active + .tns-slide-active { align-self: center; } .tns-slide-active + .tns-slide-active .slide-holder { width: 180%; margin: 0 -40%; } .bi-slider .thumbnail, .bi-slider .text { display: none; } .bi-slider .video video { width: 100%; height: auto; } #bi-text-holder { margin-top: -5%; width: 70%; } #bi-slider-wrapper { position: relative; display: flex; align-items: center; } .bi-slider-forecast { position: absolute; width: 20%; } #bi-prev-slide { top: 0; left: 0; } #bi-next-slide { bottom: 0; right: 0; } .bi-slider { width: calc(60% - -120px); margin-left: calc(20% - 80px); padding-top: calc(13.34% - 80px); padding-bottom: calc(13.34% - 80px); } #bi-slider-nav { position: absolute; display: flex; flex-flow: column; align-items: center; width: 54px; margin-top: 80px; margin-left: calc(10% - 40px - 27px); z-index: 99; } #bi-dots .slick-dots { display: block  !important; list-style: none; margin: 40px 0; padding: 0; } #bi-dots .slick-dots li { display: block; line-height: 0; margin: 10px 0; } #bi-dots .slick-dots button { width: 28px; height: 28px; position: relative; float: none; padding: 0; font-size: 0; text-indent: -9999px; border: 5px solid #fff; border-radius: 50%; background: #fc5c93; background: transparent linear-gradient(270deg, #fa3f3d 0%, #fa3f3d 29%, #fc5c93 78%, #fc5c93 100%) 0% 0% no-repeat padding-box; } #bi-dots .slick-dots button:after { content: ""; border: 1px solid #fff; border-radius: 50%; position: absolute; top: -4px; right: -4px; bottom: -4px; left: -4px; } #bi-dots .slick-dots .slick-active button:after { border-color: #fa3f3d; } .bi-arrow { margin: 0; } .bi-arrow:after { content: ""; width: 54px; height: 54px; background: url(http://static.lenovo.com/ww/campaigns/2022/yoga-brand/lenovo-campaign-yoga-brand-feature-9-arrow-icon.svg) 50% 50% no-repeat; background-size: contain; display: block; } .bi-prev-arrow:after { transform: rotate(90deg); } .bi-next-arrow:after { transform: rotate(-90deg); } @media (max-width: 1200px) { #bi-text-holder { margin-top: 40px; width: 100%; } } @media (max-width: 992px) { #blade-12 .container { max-width: 100%; padding: 0; } .bi-slider { width: calc(100% - 80px); margin-left: 40px; padding-top: calc(13.34% - 40px); padding-bottom: calc(13.34% - 40px); } #bi-slider-nav { flex-flow: row; bottom: 0; margin-left: 40px; width: calc(80% - 80px); justify-content: space-between; } #bi-dots .slick-dots { display: flex  !important; margin: 0 10px; } .bi-arrow:after { height: 15px; width: 36px; } .bi-prev-arrow:after { transform: rotate(0deg); } .bi-next-arrow:after { transform: rotate(180deg); } #bi-text-holder { margin: 40px 40px; width: calc(100% - 80px); } } @media (max-width: 991px) { #bi-dots .slick-dots li { margin: 0 5px; } } @media (max-width: 640px) { .bi-slider { width: calc(100% - 50px); margin-left: 25px; padding-top: calc(13.34% - 20px); padding-bottom: calc(13.34% - 20px); } #bi-slider-nav { margin-left: 25px; width: calc(80% - 50px); } #bi-dots .slick-dots li { margin: 0 5px; } #bi-dots .slick-dots button { width: 22px; height: 22px; } #bi-text-holder { margin: 40px 25px; width: calc(100% - 50px); } } .b-4-content { position: relative; height: 100vh; } .b-4-content .row { margin: 0 -50px; } .b-4-content .col { padding: 0 50px; } .fade-section-content { width: 100%; overflow: hidden; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-45%); transform: translateY(-45%); } .fade-section-content video { max-width: 100%; display: block; } .fade-section-content .video-mobile { display: none; } .fade-section-content.b-4-2 { -webkit-transform: translateY(175%); transform: translateY(175%); } .fade-section-content.b-4-3 { -webkit-transform: translateY(200%); transform: translateY(250%); } .fade-section-content.b-4-4 { -webkit-transform: translateY(300%); transform: translateY(300%); } .fade-section-content .text-box { opacity: 0; } .fade-section-content.b-4-1 .text-box { opacity: 1; } #pe-slider-nav { display: none; } @media (min-width: 992px) { .fade-section-content { visibility: visible  !important; opacity: 1  !important; } } @media (min-width: 768px) and (max-width: 991px) { .fade-section-content .video-mobile { display: block; width: 100%; } } @media (max-width: 991px) { .fade-section-content .video-mobile { display: block; } .fade-section-content .video-desktop { display: none; } .fade-section-content h3 { font-size: 1.75rem; } .fade-section-content { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .fade-section-content.b-4-2, .fade-section-content.b-4-3, .fade-section-content.b-4-4 { opacity: 0; -webkit-transform: translateY(100%); transform: translateY(100%); } .fade-section-content .text-box { opacity: 1  !important; visibility: visible  !important; padding: 0; } .fade-section-content .text-box, .fade-section-content .text-box h3, .fade-section-content .text-box p { line-height: 1.1; } .yoga-pe-media-container { margin: 0 auto 30px; } .yoga-pe-media-container video { visibility: visible; } #pe-slider-nav { display: flex; justify-content: space-around; } #pe-slider-nav .slick-arrow { text-indent: -9999px; border: 0; background: 0; } #pe-slider-nav .slick-arrow:after { content: ""; width: 54px; height: 15px; background: url(http://static.lenovo.com/ww/campaigns/2022/yoga-brand/lenovo-campaign-yoga-brand-feature-9-arrow-icon.svg) 50% 50% no-repeat; background-size: contain; display: block; } #pe-slider-nav .slick-arrow.slick-prev:after { transform: rotate(0deg); } #pe-slider-nav .slick-arrow.slick-next:after { transform: rotate(180deg); } } @media (max-height: 600px) { .b-4-content { height: auto; } .fade-section-content { position: relative; top: 0; -webkit-transform: translateY(0px)  !important; transform: translateY(0px)  !important; opacity: 1  !important; } .fade-section-content .text-box { margin-bottom: 50px; } } #sb-holder { display: grid; overflow: hidden; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; grid-column-gap: 20px; grid-row-gap: 20px; } .sb-card { border-radius: 3px; font-size: 1.125rem; line-height: 1.2; color: #fff; display: flex; align-items: center; padding: 16px 25px; gap: 20px; opacity: 0; transition: all 1.5s ease; } .sb-center { grid-column-start: 2; grid-column-end: 4; position: relative; display: flex; align-items: center; color: #fff; margin: -50px 0; padding: 0; transition: all 1.5s ease; background-size: cover; } .in.sb-card { opacity: 1; } .sb-card.color-1 { background-color: #32a360; } .sb-card.color-2 { background: #32a360; background: linear-gradient( 180deg, rgba(50, 163, 96, 1) 0%, rgba(46, 151, 249, 1) 100% ); } .sb-card.color-3 { background-color: #2e97f9; } .sb-card.size-2 { margin: 0 0 50px; } .sb-card.size-2.color-3 { margin: 50px 0 0; } .sb-icon { min-width: 60px; } .sb-overlay-image-holder { position: absolute; display: flex; align-items: center; width: 100%; height: 100%; transition: all 1s ease; top: 0px; left: 0px; } .sb-overlay-image { width: 100%; height: 100%; transition: all .5s ease; display: flex; align-items: center; margin: auto; background-size: cover; } .sb-card.sb-center .co2-logo { position: absolute; top: 25px; right: 25px; } .sb-card.sb-center:after { content: ""; position: absolute; width: 100%; height: 100%; background-color: #000; opacity: .1; } .sb-card.sb-center .sb-content { position: absolute; left: 25px; right: 25px; z-index: 1; } .sb-card.sb-center .sb-content p { margin: 20px 0 30px; } .sb-card.sb-center .sb-content .btn { margin: 0; } .section-wrapper.elem-100p .sb-overlay-image-holder { visibility: hidden; } .section-wrapper.elem-100p .sb-overlay-image { width: 0; height: 0; opacity: 0; visibility: hidden; } .section-wrapper.elem-100p .sb-card.sb-center { opacity: 1; } .sb-title { font-size: 3rem; font-weight: 400; line-height: 1; color: #fff; } .sb-sub-title { font-weight: 700; display: block; } @media (max-width: 1200px) { .sb-card { font-size: 1em; } } @media (min-width: 1024px) and (max-width: 1199px) { .sb-icon { align-items: center; display: inherit; height: 70px; } .sb-icon img { height: auto; max-height: 70px; } .sb-card:not([class*="sb-center"]) { flex-direction: column; text-align: center; } } @media (max-width: 1024px) { #sb-holder { grid-template-columns: 1fr 1fr; grid-auto-rows: 0fr; grid-template-areas: "sb-a sb-b" "sb-c sb-c" "sb-d sb-e" "sb-f sb-f" "sb-g sb-h" "sb-i sb-i" "sb-j sb-k"; } .sb-a { grid-area: sb-a; } .sb-b { grid-area: sb-b; } .sb-c { grid-area: sb-c; } .sb-d { grid-area: sb-d; } .sb-e { grid-area: sb-e; } .sb-f { grid-area: sb-f; } .sb-g { grid-area: sb-g; } .sb-h { grid-area: sb-h; } .sb-i { grid-area: sb-i; } .sb-j { grid-area: sb-j; } .sb-k { grid-area: sb-k; } .sb-card { opacity: 1; } .sb-overlay-image-holder { display: none; } .sb-a, .sb-b, .sb-d, .sb-e, .sb-g, .sb-h, .sb-j, .sb-k { flex-direction: column; text-align: center; height: 100%; } .sb-card.sb-a, .sb-card.sb-b, .sb-card.sb-g, .sb-card.sb-h { background: #32a360; } .sb-card.sb-c, .sb-card.sb-i { background: linear-gradient( 180deg, rgba(50, 163, 96, 1) 0%, rgba(46, 151, 249, 1) 100% ); } .sb-card.sb-d, .sb-card.sb-e, .sb-card.sb-j, .sb-card.sb-k { background: #2e97f9; } .sb-card.fade-up { transform: translateY(0px); } .sb-center, .sb-card.size-2, .sb-card.size-2.color-3 { margin: 0; } .sb-center { min-height: 220px; } .sb-title { font-size: 2rem; } .sb-icon { align-items: center; display: inherit; height: 70px; } .sb-icon img { height: auto; max-height: 70px; } } @media screen and (max-width: 1280px) { #blade-1 h2 { font-size: 36px; } #blade-1 .font-large.lenovo-yoga-paragraph { font-size: 24px; } .title { font-size: 5.25rem; } h1, h2, h3 { font-size: 2.25rem; } #blade-10 .sub-heading, #blade-11 .sub-heading { font-size: 20px; } p { font-size: 16px; } } @media screen and (min-width: 992px) { #blade-5-1 h3, #blade-5-4 h3 { margin-top: 30px; margin-bottom: 30px; } #blade-5-2 h3, #blade-5-3 h3 { margin-bottom: 30px; } #blade-5-2, #blade-5-3 { padding-left: 40px; padding-right: 40px; } #blade-5-2 p, #blade-5-3 p { padding-left: 60px; } #blade-5-2 .text-box { padding-left: 60px; } #blade-5-3 .text-box { padding-right: 60px; } } @media screen and (max-width: 992px) { .section-wrapper { padding-top: 50px; padding-bottom: 50px; overflow: hidden; } #blade-1 { text-align: center; } #blade-1 h2 { font-size: 36px; } #blade-1 .font-large.lenovo-yoga-paragraph { font-size: 24px; } #blade-2 h3 { margin-bottom: 40px; } #blade-5-2 { margin-left: 50px; } #blade-5-3 { margin-right: 50px; } .title { font-size: 5.25rem; } h1, h2, h3 { font-size: 36px; } #blade-10 .sub-heading, #blade-11 .sub-heading { font-size: 20px; } p { font-size: 16px; } #blade-3 .title-animated-wrapper { margin: 0; } } @media screen and (min-width: 768px) and (max-width: 992px) { .title { font-size: 4rem; } #blade-7 .ml-200 { padding: 40px; } } @media screen and (max-width: 768px) { h1, h2, h3 { font-size: 24px; } .title { font-size: 3rem; } #blade-7 .ml-200 { padding: 25px; } #blade-5-1, #blade-5-2, #blade-5-3 { margin-bottom: 100px; } } @media (min-width: 1920px) { } @media screen and (max-width: 410px) { .sb-center { min-height: 330px; } }