.desktop{ display: none; } .mobile{ display: block; } @media (max-width:749px) and (min-width:100px) { #my-lenovo { position: relative; height: auto; } #my-lenovo img { width: 160px; } #my-lenovo article { height: 225px; box-sizing: border-box; width: 92%; margin: auto; position: relative; } #my-lenovo article .content { display: flex; justify-content: space-around; align-items: center; flex-direction: column; padding-top: 30px; } #my-lenovo article a { height: 44px; line-height: 44px; padding: 0 24px; border-radius: 4px; color: white; display: inline-block; background-color: #f03f88; } #my-lenovo p { width: 285px; font-size: 16px; font-weight: 300; margin-bottom: 18px; margin-top: 18px; color:white; } #my-lenovo article:first-child { background: url("https://p1-ofp.static.pub/ShareResource/accessories-and-software/home-office-setup/mylenovo-rewards-banner-1920.0026732f1f120674.png") center center no-repeat; background-size: cover; z-index: 1; margin-bottom: 10px; } #my-lenovo article:last-child { background: url("https://p2-ofp.static.pub/ShareResource/accessories-and-software/home-office-setup/lenovo-pro-banner-1920.adb2d5fb81807e58.pngg") center center no-repeat, #3e8ddd; background-size: cover; } #my-lenovo article:first-child p { color:black; } #my-lenovo article:last-child p { color:white; } #cta-banner { max-width: 90vw; background: #46c8e1; color: white; height: 115px; display: flex; justify-content: center; align-items: center; flex-direction: column; } #cta-banner p { font-size: 18px; font-weight: bold; margin-top: 5px; margin: auto; } #cta-banner a { background: black; color: white; padding: 0 24px; height: 44px; line-height: 44px; border-radius: 4px; font-size: 16px; font-weight: bold; margin-bottom: auto; } #bottom-cta-banner { position: relative; width: 92%; max-width: 1880px; background: #46c8e1; color: white; height: 225px; margin: 30px auto; display: block; } #bottom-cta-banner:after { content: ''; display: block; background: white; height: 150%; width: 1px; left: 50%; position: absolute; transform: rotate(90deg); top: -50px; } #bottom-cta-banner div { display: flex; align-items: center; flex-wrap: wrap; flex-direction: column; justify-content: space-around; } #bottom-cta-banner p { font-size: 20px; font-weight: bold; text-align: center; } #bottom-cta-banner a { background: black; color: white; padding: 0 24px; height: 44px; line-height: 44px; border-radius: 4px; font-size: 16px; font-weight: bold; } } @media (min-width: 750px) { #cta-banner { width: 95%; max-width: 1880px; background: #46c8e1; color: white; height: 65px; display: flex; justify-content: center; align-items: center; flex-direction: row; } #cta-banner p { font-size: 22px; font-weight: bold; margin-right: 40px; margin-top: 22px; } #cta-banner a { background: black; color: white; padding: 0 24px; height: 44px; line-height: 44px; border-radius: 4px; font-size: 16px; font-weight: bold; } #bottom-cta-banner { position: relative; width: 95%; max-width: 1880px; background: #46c8e1; color: white; height: 150px; margin: 30px auto; display: flex; justify-content: space-around; align-items: center; } #bottom-cta-banner:after { content: ''; display: block; background: white; height: calc(100% - 30px); width: 1px; left: 50%; position: absolute; transform: rotate(-180deg); top: 15px; } #bottom-cta-banner div { display: flex; align-items: center; flex-wrap: wrap; flex-direction: column; justify-content: space-between; height: calc(100% - 46px); } #bottom-cta-banner p { font-size: 24px; width: 50%; text-align: center; font-size: 22px; font-weight: bold; margin-right: 0px; width: 200px; text-align: center; margin: 0; } #bottom-cta-banner a { background: black; color: white; padding: 0 24px; height: 44px; line-height: 44px; border-radius: 4px; font-size: 16px; font-weight: bold; } #my-lenovo { position: relative; height: auto; } #my-lenovo p { width: 285px; font-size: 16px; font-weight: 300; margin-bottom: 18px; margin-top: 18px; } #my-lenovo img { width: 160px; } #my-lenovo article { height: 225px; box-sizing: border-box; width: 92%; margin: auto; position: relative; } #my-lenovo article:first-child { background: url("https://p1-ofp.static.pub/ShareResource/accessories-and-software/home-office-setup/mylenovo-rewards-banner-1920.0026732f1f120674.png") center center no-repeat; background-size: cover; z-index: 1; margin-bottom: 10px; } #my-lenovo article:last-child { background: url("https://p2-ofp.static.pub/ShareResource/accessories-and-software/home-office-setup/lenovo-pro-banner-1920.adb2d5fb81807e58.png") center center no-repeat, #3e8ddd; background-size: cover; } #my-lenovo article .content { position: absolute; top: 50%; left: 50px; transform: translateY(-50%); } #my-lenovo article a { height: 44px; line-height: 44px; padding: 0 24px; border-radius: 4px; color: white; display: inline-block; } #my-lenovo article:first-child p { color: #1b1b1b; } #my-lenovo article:last-child p { color: white; } #my-lenovo article:first-child a { background: #f04187; } #my-lenovo article:last-child a { background: #ff6a00; } } @media (min-width: 1180px) { .desktop{ display: block; } .mobile{ display: none; } #cta-banner { max-width: 1880px; background: #46c8e1; color: white; height: 100px; display: flex; justify-content: center; align-items: center; } #cta-banner p { font-size: 30px; font-weight: bold; margin-right: 40px; } #cta-banner a { background: black; color: white; padding: 0 24px; height: 44px; line-height: 44px; border-radius: 4px; font-size: 16px; font-weight: bold; } #bottom-cta-banner { position: relative; width: 95%; max-width: 1880px; background: #46c8e1; color: white; height: 100px; margin: 30px auto; display: flex; justify-content: space-around; align-items: center; } #bottom-cta-banner:after { content: ''; display: block; background: white; height: calc(100% - 30px); width: 1px; left: 50%; position: absolute; } #bottom-cta-banner div { display: flex; align-items: center; flex-wrap: wrap; flex-direction: row; justify-content: space-around; } #bottom-cta-banner p { font-size: 30px; font-weight: bold; margin-right: 40px; width: 45%; text-align: center; } #bottom-cta-banner a { background: black; color: white; padding: 0 24px; height: 44px; line-height: 44px; border-radius: 4px; font-size: 16px; font-weight: bold; } #my-lenovo { position: relative; height: 332px; } #my-lenovo p { max-width: 237px; } #my-lenovo img { width: 180px; } #my-lenovo article { position: absolute; height: 100%; box-sizing: border-box; } #my-lenovo:after { content: ''; display: block; height: 100%; width: 10%; background: url('https://canada.lenovo.com/fr/_p1-ofp_static_pub/ShareResource/accessories-and-software/home-office-setup/triangle.4767d52cc5db15c1.svg') center center no-repeat; background-size: cover; left: 50.1%; z-index: 11; position: absolute; transform: translateX(-50%); } #my-lenovo article:first-child { background: url("https://p1-ofp.static.pub/ShareResource/accessories-and-software/home-office-setup/mylenovo-rewards-banner-1920.0026732f1f120674.png") center center no-repeat; background-size: cover; padding-right: 10%; width: 55%; z-index: 1; } #my-lenovo article:last-child { background: url("https://p2-ofp.static.pub/ShareResource/accessories-and-software/home-office-setup/lenovo-pro-banner-1920.adb2d5fb81807e58.png") center center no-repeat, #3e8ddd; background-size: cover; right: 0; padding-left: 5%; width: 50%; } #my-lenovo article .content { position: absolute; top: 50%; transform: translate(-50%, -50%); max-width: 368px; z-index: 111; } #my-lenovo article:first-child .content { left: 28%; } #my-lenovo article:last-child .content { left: 33%; } #my-lenovo article a { height: 44px; line-height: 44px; padding: 0 24px; border-radius: 4px; color: white; display: inline-block; } #my-lenovo article:first-child p { color: #1b1b1b; font-size: 18px; font-weight: 300; margin-bottom: 24px; margin-top: 18px; } #my-lenovo article:last-child p { color: white; font-size: 18px; font-weight: 300; margin-bottom: 24px; margin-top: 18px; } #my-lenovo article:first-child a { background: #f04187; } #my-lenovo article:last-child a { background: #ff6a00; } #bottom-cta-banner div { width: 49%; flex-wrap: wrap; justify-content: space-evenly } #bottom-cta-banner p { margin-right: 0; font-size: 24px; width: 50%; text-align: center; } } @media (min-width: 1920px) { .mobile{ display: none; } #my-lenovo { height: 440px; } #my-lenovo p { max-width: 324px; } #my-lenovo img { width: 320px; } #my-lenovo article .content { left: 35%; } #my-lenovo article:first-child { background-repeat: no-repeat; background-position: center right; background-size: cover; padding-right: 10%; width: 55%; z-index: 1; } #my-lenovo article:last-child { background-size: cover; background-position: center right; right: 0; padding-left: 5%; width: 50%; } }