p.b1-desktop-copy { display: none; } .b1-slider .b1-slider_container li { animation: fade-hide .3s; } .b1-slider .b1-slider_container li.b1-show { opacity: 1; z-index: 4; animation: fade-b1-show 1s; } .b1-slider .b1-slider_container li.b1-show h3 { opacity: 0; animation: fade-b1-show-top .6s forwards; animation-delay: .2s; top: 0; } .b1-slider .b1-slider_container li h3 { position: relative; top: 0px; opacity: 0; } .b1-slider .b1-slider_container li.b1-show p { opacity: 0; animation: fade-b1-show-top .6s forwards; animation-delay: .3s; top: 0; color: white; } .b1-slider .b1-slider_container li p { position: relative; top: 0px; opacity: 0; } .b1-slider .b1-slider_container li a { text-decoration: none; } .b1-slider .b1-slider_container li.b1-show img { opacity: 0; animation: fade-b1-show-top .6s forwards; animation-delay: .2s; top: 0; } .b1-slider .b1-slider_container li img { position: relative; top: 0px; opacity: 0; width: auto; max-width: 300px } @keyframes fade-b1-show { 0% { opacity: 0; } 100% { opacity: 1; z-index: 4; } } @keyframes fade-b1-show-top { 0% { opacity: 0; top: 10px; } 100% { opacity: 1; z-index: 4; top: 0; } } @keyframes fade-hide { 0% { opacity: 1; } 100% { opacity: 0; z-index: 0; } } .b1-slider { height: 295px; width: 100%; background: #c7c7c7; position: relative; overflow: hidden; max-width: 1920px; margin: auto } .b1-slider .b1-slider_container { list-style: none; height: 100%; margin: 0; padding: 0; position: relative; width: 100%; } .b1-slider .b1-slider_container li { width: 100%; height: 100%; background-size: cover  !important; background-position: center center  !important; background-repeat: no-repeat  !important; position: absolute; left: 0; top: 0; z-index: 0; opacity: 0; transition: opacity .3s ease-in-out; } .b1-slider .b1-slider_container li:nth-child(1) { z-index: 1  !important; } .b1-left-desc { width: 100%; background: rgba(0, 0, 0, .192); height: 100%; color: #fff; padding: 20px; box-sizing: border-box; position: relative } .b1-left-desc figure { position: absolute; top: 100%; left: 50%; transform: translate(-50%, -100%); width: 100%; padding: 15px 28px; background: rgba(0, 0, 0, .726); text-align: center; box-sizing: border-box } .b1-left-desc figure h3 { font-size: 30px; font-weight: 700; line-height: 32px; margin-bottom: 20px; color: white } .b1-left-desc img { margin-bottom: 20px; width: 100% } .b1-left-desc p { margin-bottom: 20px; font-size: 18px; line-height: 1.3 } .desktop, { display: none; } .b1-mobile-link { width: 100%; height: 100%; position: absolute; z-index: 1; } .buy_now:hover { box-shadow: 0 0px 15px rgba(0, 0, 0, .192); transition: all .25s ease-out; } .buy_now:hover { background: #e8f3f9; color: #3e8ddd; } .controls { position: absolute; bottom: 20px; left: 50%; width: 90%; height: 7px; transform: translateX(-50%); z-index: 2; } .controls ul { display: flex; padding: 0; flex-wrap: nowrap; width: 100%; height: 100%; list-style: none; justify-content: center } .controls ul li { height: 100%; width: 85px; background-color: transparent; margin-right: 15px; color: white; line-height: 1.2; } .controls ul li.active { background-color: red; color: white; } .controls li:hover { cursor: pointer } .controls ul li div { margin-top: 12px; width: 140px; text-align: center; } #b1-slider-container { transition: transform 1s ease-in-out; transform: translateX(0) } .b2n-b1-head { font-size: 1.5em; line-height: 1.3; padding: 20px 10px 10px; text-align: center; font-weight: 600; } .b2n-b1-copy { padding: 0px 10px; text-align: center; line-height: 1.3; } .b2n-b1-imgs { padding: 10px; text-align: center; } .b2n-b1-imgs img { width: 160px; } .b2n-box1-arw-img img { width: 25px; margin: 10px auto; display: block; } .b2n-box2-head { font-size: 1.5em; line-height: 1.3; padding: 20px 10px 10px; text-align: center; font-weight: 600; } .b2n-b2-step { padding: 10px 10px 20px; text-align: center; } .b2-step-head { font-size: 1.1em; font-weight: 600; } .b2-step-copy { max-width: 250px; margin: auto; line-height: 1.2; } .b2n-b2-step-cont { box-shadow: 0px 2px 6px #00000029; margin: 20px 40px; } .b2n-banner { background-color: #3c5093; text-align: center; max-width: 1920px; margin: 15px auto; font-size: 1.6em; padding: 40px 10px; color: white; } .b2n-banner a { color: white; display: inline-block; background: black; padding: 5px 10px; border-radius: 6px; border: 1px white solid; } .b2n-banner a:hover { background: white; color: black; border: 1px black solid; } .b2n-cta-only-desktop{ display: none; } @media (max-width:750px) { .carrousel-container { position: relative; left: -2% } .controls ul { width: 75%; margin: auto; justify-content: center; } .controls ul li { height: 100%; width: 35px; background-color: #bcbcbc; margin-right: 35px; } .controls ul li:last-child { margin-right: 0; } .b1-slider { height: 226px } .b1-left-desc figure { text-align: left; background: 0 0 } .buy_now { display: inline-block; padding: 0px 10px; } .b1-btn-container { margin: auto; width: fit-content; } .b1-left-desc { background: rgba(0, 0, 0, .678); z-index: 1 } .b1-copy-container { text-align: center } .controls { position: absolute; bottom: 8px; left: 20px; width: 90%; height: 5px; transform: translate(0) } .b1-left-desc { background: none; } .b1-left-desc figure { padding: 10px 28px 24px; background: rgba(0, 0, 0, .678); height: 110px; display: flex; justify-content: center; align-items: center; flex-direction: column; } .b1-left-desc .mobile { font-size: 14px; height: 39px; overflow: hidden; } .b1-left-desc figure h3 { font-size: 18px; line-height: 1.3; margin-bottom: 4px; } #espots a .copy p { color: white } .b1-logo img { display: none; } } @media (min-width:751px) and (max-width:1179px) { .container-smb { margin-top: 22px } #espots .slick-list .item { width: 44vw } .b1-logo img { margin: 10px auto } .b1-left-desc figcaption { display: flex; align-items: center; margin-bottom: 20px; flex-direction: column; } .b1-left-desc p { margin-bottom: 0px; } .controls ul li { margin-right: 20px; width: 120px; } .controls ul li div { width: 120px; } .slick-track .s-item-1, .slick-track .box-1 { background-position: center  !important; } #carrusel .slick-slide a .copy h3 { font-size: 20px; } .controls { bottom: 40px; } .controls ul li:last-child { margin-right: 0 } .b1-btn-container .buy_now:nth-child(2) { margin-top: 24px; } .b1-copy-container { width: 60% } .b1-btn-container { padding: 0px 10px; } .b1-left-desc img { display: block } .buy_now { display: inline-block; margin: auto } .b1-slider { height: 538px } .b1-left-desc img { width: 300px } } @media only screen and (min-width:1180px) { .b1-slider { height: 538px } .b4-espot-wrapper .b2n-cta-only-mobile{ display: none; } .b2n-cta-only-desktop{ display: block; } .controls { left: 0; width: 50%; padding: 0 48px; bottom: 55px; max-width: 600px; transform: translateX(0); } .controls ul { justify-content: left } .b1-left-desc img { display: block } .b1-btn-container { flex-flow: row; justify-content: left; align-content: flex-start; display: flex } .buy_now { margin: 0 24px 0 0; display: inline-block; padding: 0 24px; background: #3e8ddd; color: #fff; height: 55px; line-height: 55px; text-align: center; font-weight: 700; text-decoration: none; border-radius: 5px; margin-right: 20px; left: 13%; right: unset; bottom: 30%; bottom: 22%; transition: all .25s ease-out; } .b1-left-desc { width: 50%; max-width: 600px; background: rgba(0, 0, 0, .671); height: 100%; color: #fff; padding: 20px; box-sizing: border-box; position: relative } .b1-left-desc figure { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 40px); background: 0 0 } .b1-left-desc figcaption { flex-flow: column; text-align: left } .b1-left-desc figure h3 { font-size: 30px; font-weight: 700; line-height: 32px; margin-bottom: 20px } .b1-left-desc img { width: 346px; margin-bottom: 20px } .b1-left-desc p { margin-bottom: 20px; font-size: 18px; line-height: 1.3 } .categories-element { margin-right: 1.25%; width: 19%; max-width: 256px } .categories-element:nth-child(3n) { margin-right: 1.25%; } .categories-element:nth-child(4n) { margin-right: 1.25%; } .categories-element:nth-child(5n) { margin-right: 0; } .inv-b2n-wrapper { display: flex; max-width: 1920px; margin: auto; } .b2n-box1 { display: flex; align-items: center; flex: 1; justify-content: center; } .b2n-box1-arw-img img { transform: rotate(-90deg); } .b2n-box2 { flex: 2; } .b2n-b1-copy { max-width: 460px; margin: auto; } } @media (min-width:751px) { .b1-mobile-link, .b1-mobile-copy { display: none; } p.b1-desktop-copy { display: block; } .b2n-b2-step-cont { display: flex; justify-content: center; } .b2n-banner a { margin: 0px 0px 0px 20px; } } .b1-copy-container .b1-mobile-copy { max-height: 50px; overflow: hidden; font-size: 14px; line-height: 1.2; margin-bottom: 0; } .controls ul li:nth-child(4), .controls ul li:nth-child(5), .controls ul li:nth-child(6), .controls ul li:nth-child(7) { display: none; } @media screen and (max-width: 750px) { .controls ul li div { display: none; } } @media screen and (min-width: 1180px) { .controls ul { border-bottom: 1px solid white; } li.bullet.bullet3 { right: 32.5px; position: absolute; } li.bullet.bullet3 div { text-align: right; transform: translateX(-55px); } li.bullet.bullet2 div { transform: translateX(-27px); } li.bullet.bullet2 { position: absolute; transform: translateX(-50%); left: 50%; } li.bullet.bullet1 div { text-align: left; } } li.swiper-slide.cat_card { width: 150px  !important; padding: 2px; } @media screen and (min-width: 800px) { .swiper-wrapper { display: flex; justify-content: space-between } } @media screen and (max-width: 800px) { ul#ul_b1-slider { overflow-x: scroll; overflow-y: hidden; } } .cat_card p { line-height: 1; } @media screen and (max-width: 768px) { .seriesListings-footer { width: 65%  !important; text-align: center; } } @media screen and (max-width: 750px) { .b1-left-desc figure { height: unset; } .b1-copy-container .b1-mobile-copy { max-height: unset; } .controls ul .bullet3 { margin-right: 0px; } } .block_card:hover { cursor: unset  !important; } .seriesListings-body { padding: 0 0px 30px 15px  !important; } .rlp-topbanner { background-color: #e6f4fa; padding: 10px; text-align: center; } .above-logo-on-banner{ display: none; } @media screen and (min-width: 751px) { .above-logo-on-banner{ text-align: left; font-size: xx-large; margin: auto; font-weight: 600; display: block; width: fit-content; } } .b1-wrapper { background: rgba(0, 0, 0, .85); max-width: 1920px; margin: auto; } .b1-wrapper-red{ background: #9e2976; } .b1-wrapper-red .b1c-head{ color: #9dc3e6; } .b1-wrapper-red .b1-card a { color: white; font-weight: normal; text-decoration: underline; } .b1-card { padding: 20px; vertical-align: top; color: white; font-size: 20px; } .b1-card:nth-child(2) { border-top: 1px solid #fff; } .b1c-cta-desktop-only{ display: none; } .b1-card a { color: #3e8ddd; font-weight: 800; } .b1-card a:hover { text-decoration: underline; } .b2-head { font-size: 2em; padding: 50px; text-align: center; font-weight: 800; } .b2-copy{ max-width: 1120px; margin: auto; text-align: center; padding: 0px 20px 20px; font-size: 1.3em; line-height: 1.4; } .b2-wrapper img { width: 100%; max-width: 1920px; margin: auto; display: block; padding: 0px 30px; } .b2-link-container { max-width: 1920px; margin: auto; display: flex; flex-wrap: wrap; font-size: 18px; padding: 0px 20px; justify-content: space-evenly; } .b2-link { width: 50%; padding: 5px; } .b4-espot-wrapper { max-width: 1920px; margin: auto; padding-bottom: 50px; display: flex; justify-content: center; flex-wrap: wrap; } .b4-espot { height: 400px; max-width: 330px; width: 80%; margin: 20px; background-size: cover; border-radius: 10px; position: relative; } .b4-espot a { width: 100%; height: 100%; display: block; } .b4-espot .b4-espot-text { position: absolute; color: white; font-size: 20px; text-align: center; line-height: 1.4; padding: 20px 10px; bottom: 0px; background: rgba(0,0,0,0.8); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; height: 50%; width: 100%; } @media screen and (min-width: 700px) { .b2-link { width: 31%; } .b4-espot { width: 50%; } } @media screen and (min-width: 1180px) { .above-logo-on-banner{ margin: unset; } .b1-card { display: inline-block; width: 49.5%; padding-left: 50px; } .b1-card:nth-child(2) { border-left: 1px solid #fff; border-top: 0px; } .b1c-cta-desktop-only{ display: block; } .b1c-cta-mobile-only{ display: none; } .b2-link { width: 24%; } .b2-wrapper img { width: 50%; } .b4-espot { width: 21%; } } .b3-contactBlade { background:url(https://www.lenovo.com/content/dam/lenovo/ecommerce/global/smb/campaigns/2021-whylenovopro-midfunnel/landing-page/images/bottomBladeBG.jpg); background-size:cover; max-width: 1920px; margin: 40px auto; } .b3-contactCaption { width:33%; display:block; margin:0px auto; float:none; padding: 30px 0px; } .b3-contactCaption div { display:flex; justify-content:center; } .b3-contactBlade h2 { font-size:32px; line-height:39px; margin-bottom:10px; } .b3-contactBlade p, .b3-contactBlade h2 { color:#fff; text-align:center; font-size: 18px; } .b3-contactBlade a { margin:0 10px; } .b3-contactBlade a, .b3-contactBlade a:hover { color:#fff; text-decoration:none; } .b3-contactBlade a.b3-button { float:none; display:block; margin:40px auto ; width:fit-content; } .b3-contactBlade a.b3-button:hover { color:#000; } .b3-contactBlade a.b3-button.white:hover { color:#fff; } .b3-contactBlade a.b3-button.white { width:auto; } a.b3-button { width: auto; height:auto; padding:15px 12px; margin: 0; display: inline-block; cursor: pointer; background: #000; line-height: 1em; font-weight: 700; border:0; border-radius:4px; text-align: center; color:#fff; font-size:18px; text-decoration:none; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; font-family: 'Lato', sans-serif; letter-spacing:.25px; float:none; border:1px solid #000; } a.b3-button:hover { background:#fff; color:#000; border:1px solid #000; } @media screen and (max-width: 1601px) { .b3-contactBlade { background-position:-200px; } } @media screen and (max-width: 1500px) { .b3-contactBlade { background-position:-400px; } } @media screen and (max-width: 1344px) { .b3-contactBlade { background-position: -280px; } .b3-contactCaption { width:50%; } a.b3-button { margin-left:40px; } } @media screen and (max-width: 1080px) { .b3-contactBlade { background-position: -650px; } } @media screen and (max-width: 960px) { .b3-contactBlade { background-position: -1049px; } } @media screen and (max-width: 768px) { .b3-contactBlade { background-position: -1200px; } .b3-contactBlade .b3-inner { background:rgba(0,0,0,.4); } .b3-contactCaption div { display:none; } } @media screen and (max-width: 600px) { .b3-contactBlade { background-position: -1125px; } .b3-contactCaption { width: 75%; } } @media screen and (max-width: 450px) { .b3-contactBlade { background-position: -1375px; } .b3-contactCaption { width:85%; } } @media screen and (max-width: 300px) { .b3-contactBlade { background-position:-2000px; } }