.swiper-pagination--second { position: absolute; text-align: center; -webkit-transition: .3s opacity; -o-transition: .3s opacity; transition: .3s opacity; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-container, .swiper-container--second { width: 100%; height: 100%; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1; } .pagination-bottom, .pagination-bottom--second { font-size: 0; bottom: 0; } .pagination-top, .pagination-top--second { position: absolute; top: 0; right: 10px; margin: 0; } .swiper-slide { background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #363e49; height: auto  !important; } .swiper-slide.nwp-first-slide { background-image: url("https://p1-ofp.static.pub/ShareResource/thinkworkstations/img/lenovo-workstation-background-hero-blade-data-science.4b9f2e0382f89c82.jpg"); } .swiper-slide.nwp-second-slide { background-image: url("https://p1-ofp.static.pub/ShareResource/thinkworkstations/img/lenovo-think-p-series-2-bkgrd.ea32d32f04a353a1.jpg"); } .swiper-slide.nwp-third-slide { background-image: url("https://p3-ofp.static.pub/ShareResource/thinkworkstations/img/background-img-slide-2.df2d060204be842f.jpg"); } .swiper-slide.nwp-fourth-slide { background-image: url("https://p4-ofp.static.pub/ShareResource/thinkworkstations/img/slider-3-background.0d889f35bae7839d.jpg"); } .swiper-slide.nwp-fifth-slide { background-image: url("https://p3-ofp.static.pub/ShareResource/thinkworkstations/img/slide-4-background.2679ebf3ef39e268.jpg"); } .swiper-slide.nwp-sixth-slide { background-image: url("https://p1-ofp.static.pub/ShareResource/thinkworkstations/img/slide-5-background.a9a2f2af3148d3e2.jpg"); } .swiper-slide.nwp-seventh-slide { background-image: url("https://p1-ofp.static.pub/ShareResource/thinkworkstations/img/slide-6-background.9c902d1ca0e0feaa.jpg"); } .pagination-top, .pagination-top--second { width: 80%  !important; margin: 10px auto 0; display: flex; justify-content: center; max-height: 40px; } #swiper-container > .pagination-top .swiper-pagination-bullet, #swiper-container--second > .pagination-top--second .swiper-pagination-bullet--second { width: auto; border-radius: 0; opacity: 1; background: transparent; color: #fff; font-size: 1em; outline: 0; border: 0; text-transform: uppercase; position: relative; text-align: center; margin: 0 10px; height: auto; } .pagination-top .swiper-pagination-bullet:hover, .pagination-top--second .swiper-pagination-bullet--second:hover { color: grey  !important; } .swiper-container-horizontal > .pagination-top .swiper-pagination-bullet-active { color: rgba(255, 255, 255, .4); } .pagination-top .swiper-pagination-bullet-active:after, .pagination-top .swiper-pagination-bullet:hover:after, .pagination-top--second .swiper-pagination-bullet-active:after, .pagination-top--second .swiper-pagination-bullet--second:hover:after { content: ""; background: rgba(255, 255, 255, .4); top: initial  !important; display: block; line-height: 10px; padding: 0  !important; height: 6px  !important; border: 0  !important; width: 100%; margin-top: 10px; position: absolute; } .pagination-top .swiper-pagination-bullet-active:after, .pagination-top--second .swiper-pagination-bullet-active:after { background: rgba(255, 255, 255, .4); } .pagination-top .swiper-pagination-bullet:hover:after, .pagination-top--second .swiper-pagination-bullet--second:hover:after { color: grey; background: grey; } .swiper-slide { display: flex; justify-content: center; align-content: center; align-items: center; } .swiper-slide > .nwp-img--wrapper, .swiper-slide > .nwp-content--wrapper { width: 40%; } .swiper-slide > .nwp-img--wrapper .nwp-slide--img { width: 90%; height: auto; } .nwp-content--wrapper { color: #fff; } .swiper-slide > .nwp-content--wrapper .nwp-slide--title { font-size: 1.8em; margin-bottom: 5%; } .nwp-slide--copy { font-size: 16px; line-height: 20px; font-weight: normal; margin-bottom: 5%; text-transform: none; letter-spacing: 0; } .nwp-slide--cta { color: #009dd9; text-decoration: none; outline: 0; background-color: transparent; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23535F67'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto; } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23535F67'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; } .swiper-pagination-bullet-active { background: #535f67; } .swiper-pagination-bullet { width: 10px; height: 10px; } .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { z-index: 10; } @media screen and (max-width: 950px) { .pagination-top, .pagination-top--second { display: none; } .swiper-slide { flex-direction: column; padding-top: 0; } .swiper-slide > .nwp-img--wrapper, .swiper-slide > .nwp-content--wrapper { width: 80%; } .swiper-slide > .nwp-img--wrapper .nwp-slide--img { display: block; margin: 0 auto; } .nwp-slide--title { margin-bottom: 5%; } } #swiper-container--second > .swiper-pagination-bullets .swiper-pagination-bullet--second { margin: 0 4px; } .swiper-pagination-clickable .swiper-pagination-bullet--second { cursor: pointer; } .swiper-pagination-bullet--second { width: 10px; height: 10px; } .swiper-pagination-bullet--second { width: 10px; height: 10px; display: inline-block; border-radius: 100%; background: #000; opacity: .2; } #swiper-container--second .swiper-slide.nwp-first-slide { background-image: url("https://p1-ofp.static.pub/ShareResource/thinkworkstations/img/lenovo-think-p-series-red-bkgrd.11acea916f387709.jpg"); } #swiper-container--second .swiper-slide.nwp-second-slide { background-image: url("https://p1-ofp.static.pub/ShareResource/thinkworkstations/img/background-img-slide-2-video.d9875f284c550694.jpg"); } #swiper-container--second .swiper-slide.nwp-third-slide { background-image: url("https://p2-ofp.static.pub/ShareResource/thinkworkstations/img/background-img-slide-3-video.3f0c9d3ae3439726.jpg"); } #swiper-container--second .swiper-slide.nwp-fourth-slide { background-image: url("https://p1-ofp.static.pub/ShareResource/thinkworkstations/img/background-img-slide-4-video.7c181fd604d26b6a.jpg"); } .swiper-button-next--second, .swiper-button-prev--second { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-prev--second, .swiper-container-rtl .swiper-button-next--second { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23535F67'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto; } .swiper-button-next--second, .swiper-container-rtl .swiper-button-prev--second { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23535F67'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; }