@import url("https://fonts.googleapis.com/css?family=Lato:300,400,700,900"); .eCatalog { max-width: 1920px; margin: auto; opacity: 0; -webkit-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s } .eCatalog * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 1; color: #555 } .eCatalog-left { background-color: #d9d9d9; padding: 1rem } .eCatalog-right { background-color: #000; position: relative; overflow: hidden } .eCatalog-headline { text-align: center; font-weight: 400; font-size: 20px } .eCatalog-headline br { display: none } .eCatalog-details { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; max-width: 33.33333% } .eCatalog-details-container { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 20px 0 } .eCatalog-number { width: 42px; height: 42px; min-height: 42px; min-width: 42px; margin: auto } .eCatalog-number img { width: 100%; height: 100% } .eCatalog-copy { margin: 15px 0 0 } .eCatalog-copy h3 { text-align: center; font-size: 20px; font-weight: 900 } .eCatalog-copy p { display: none } .eCatalog-btn { color: #fff; text-decoration: none; text-transform: uppercase; background-color: #1976a1; width: 188px; height: 44px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; letter-spacing: .5px; border-radius: 6px; margin: 25px auto 0; border: 1px solid transparent } .eCatalog-btn:hover { background-color: #d4eff8; color: #1976a1; border: 1px solid #1976a1 } .eCatalog-slide { padding: 50px 16px; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); opacity: 0 } .eCatalog-slide:nth-of-type(1) { background-image: url(https://p3-ofp.static.pub/ShareResource/na/landing-pages/ecatalog/heros/lenovo-holiday-2021-ecatalog-page-mobile.jpg); background-size: cover; left: 0 } .eCatalog-slide.showCatalog { -webkit-animation: appear2 1.5s forwards; animation: appear2 1.5s forwards } .eCatalog-slide-description img { width: 90%; max-width: 450px; display: block; margin: auto; position: static } .eCatalog-slide-description h4 { margin:0 auto; text-align: center; max-width: 80%; color: #000; font-size: 24px; line-height: 1.3; font-weight: 600; } .eCatalog-slide-description p { margin: 20px auto 0; text-align: center; max-width: 80%; color: #000; font-size: 14px; line-height: 1.3; font-weight: 300 } .btn-container { width:100%; text-align: center; } #espots { padding: 15px; overflow-x: auto } #espots::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); border-radius: 10px; background-color: #f5f5f5 } #espots::-webkit-scrollbar { height: 8px; background-color: #f5f5f5 } #espots::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3); background-color: rgba(153, 153, 153, .5) } #espots .espot { cursor: pointer; border: 0; position: relative; width: 100%; max-width: 750px; max-height: 225px } #espots .espot a { display: block; position: relative; height: 220px } #espots .espot a::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, .7); -webkit-transition: background .5s; -o-transition: background .5s; transition: background .5s; display: block; z-index: 2 } #espots .espot:hover .espot-description p { display: block } #espots .espot:not(:last-of-type) { margin-bottom: 10px } #espots .espot img { width: 100%; height: 100%; display: block } #espots .espot-description { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 95%; text-align: center; font-weight: 900; z-index: 3 } #espots .espot-description h4 { text-transform: uppercase; color: #fff; margin: 0; font-size: 23px } #espots .espot-description p { padding-top: 8px; font-size: 14px; color: #46c8e1; width: 90%; margin: auto; font-weight: 400; display: block } .footer-bar_3-logos { display: none } @-webkit-keyframes appear { to { visibility: visible; opacity: 1 } } @keyframes appear { to { visibility: visible; opacity: 1 } } @-webkit-keyframes appear2 { 50% { opacity: 1 } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } @keyframes appear2 { 50% { opacity: 1 } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1 } } .hide-overlay { opacity: 0 } @media(min-width:375px) { .eCatalog-headline { font-size: 23px } .eCatalog-copy h3 { font-size: 23px } #espots .espot-description h4 { font-size: 25px } #espots .espot-description p { font-size: 16px; line-height: 1.2 } } @media(min-width:500px) { #espots { padding: 30px 20px } #espots .espots-container { display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; max-width: 1750px } #espots .espot { margin: 1em auto; width: 100%; -webkit-transition: opacity .3s ease-out, -webkit-transform .3s ease-out, -webkit-box-shadow .3s ease-out, -webkit-filter .3s ease-out; transition: opacity .3s ease-out, -webkit-transform .3s ease-out, -webkit-box-shadow .3s ease-out, -webkit-filter .3s ease-out; -o-transition: transform .3s ease-out, box-shadow .3s ease-out, opacity .3s ease-out, filter .3s ease-out; transition: transform .3s ease-out, box-shadow .3s ease-out, opacity .3s ease-out, filter .3s ease-out; transition: transform .3s ease-out, box-shadow .3s ease-out, opacity .3s ease-out, filter .3s ease-out, -webkit-transform .3s ease-out, -webkit-box-shadow .3s ease-out, -webkit-filter .3s ease-out } #espots .espot:not(:last-of-type) { margin-bottom: 0 } } @media screen and (min-width:1000px) { #espots .espot { cursor: pointer; border: 0; position: relative; width: 49%; max-width: 750px; max-height: 225px; padding-right: 0; align-items: unset } #espots .espot a { display: block; position: relative; height: 220px } } @media(min-width:750px) { .eCatalog-container { display: -webkit-box; display: -ms-flexbox; display: flex } .eCatalog-left { -ms-flex-preferred-size: 33.33333%; flex-basis: 33.33333%; width: 33.33333%; max-width: 420px; padding: 50px 15px } .eCatalog-right { -ms-flex-preferred-size: 66.66666%; flex-basis: 66.66666%; width: 66.66666%; max-width: 1500px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; height: auto } .eCatalog-headline br { display: block } .eCatalog-headline { font-size: 26px; line-height: 1.2 } .eCatalog-details { -ms-flex-preferred-size: 100%; flex-basis: 100%; max-width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .eCatalog-details:not(:last-of-type) { margin-bottom: 15px } .eCatalog-details-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 40px } .eCatalog-number { margin: 0 } .eCatalog-copy { padding-left: 10px } .eCatalog-copy h3 { text-align: left; font-size: 21px; margin-bottom: 5px } .eCatalog-copy p { display: block } .eCatalog-btn { width: 201px; height: 55px; font-size: 18px } .eCatalog-slide { padding: 30px 16px; height: 100% } .eCatalog-slide:nth-of-type(1) { background-image: url(//p4-ofp.static.pub/ShareResource/na/landing-pages/ecatalog/heros/lenovo-holiday-2021-ecatalog-page-tablet.jpg); background-repeat: no-repeat; background-size: cover } .eCatalog-slide-description p { margin-top: 10px; max-width: 90%; font-size: 16px } #espots .espots-container:hover .espot { -webkit-transform: scale(0.9) rotate(0.0001deg); -ms-transform: scale(0.9) rotate(0.0001deg); transform: scale(0.9) rotate(0.0001deg); -webkit-filter: blur(3px) grayscale(100%); filter: blur(3px) grayscale(100%); opacity: .7 } #espots .espots-container .espot:hover { -webkit-transform: scale(1.1) rotate(0.0001deg); -ms-transform: scale(1.1) rotate(0.0001deg); transform: scale(1.1) rotate(0.0001deg); -webkit-filter: blur(0); filter: blur(0); opacity: 1 } #espots .espots-container .espot:hover a::after { background: rgba(0, 0, 0, .7) } #espots .espot a::after { background: rgba(0, 0, 0, .5) } #espots .espot-description p { display: none } .hide-overlay { -webkit-transform: translateX(25%); -ms-transform: translateX(25%); transform: translateX(25%); opacity: 1 } } @media all and (min-width:750px) and (-ms-high-contrast:none), (min-width:750px) and (-ms-high-contrast:active) { .eCatalog-details { min-height: 80px } } @media(min-width:900px) { .eCatalog-slide:nth-of-type(1) { } #espots .espot { margin: 1em 0 } #espots .espot:not(:last-of-type) { margin-bottom: 1em } } @media(min-width:1180px) { .eCatalog-left { padding: 50px 34px 50px 22px } .eCatalog-headline { font-size: 36px } .eCatalog-details:not(:last-of-type) { margin-bottom: 40px } .eCatalog-details-container { margin-top: 30px } .eCatalog-number { width: 51px; height: 51px; min-height: 51px; min-width: 51px } .eCatalog-slide:nth-of-type(1) { background-position-x: 30% } } @media(min-width:1190px) { .eCatalog-copy { padding-left: 25px } } @media(min-width:1280px) { .eCatalog-slide:nth-of-type(1) { background-image: url(//p4-ofp.static.pub/ShareResource/na/landing-pages/ecatalog/heros/lenovo-holiday-2021-ecatalog-page.jpg); background-size: cover; background-position-y: bottom } .eCatalog-slide-description { width: 40%; position: absolute; top: 50%; -webkit-transform: translateY(-40%); -ms-transform: translateY(-40%); transform: translateY(-40%); left: 80px } .eCatalog-slide-description p { font-size: 22px; max-width: 70% } } @media(min-width:1500px) { #espots { overflow-x: hidden } #espots::-webkit-scrollbar { width: 8px } #espots .espots-container { width: 100%; padding-right: 0 } #espots .espot-description h4 { font-size: 23px } } @media(min-width:1800px) { #espots { padding: 30px 55px } #espots .espots-container { max-width: 100% } #espots .espot-description h4 { font-size: 25px } }