.ff-content, .ff-content * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .ff-content a, .ff-content h2, .ff-content h3, .ff-content h4, .ff-content h5, .ff-content p, .ff-content span { line-height: 1.2; color: #000; } .ff-content h2 { font-size: 20px; text-align: center; font-weight: 700; } #ff-content .line { border-bottom: 1px solid #fff; position: relative; } #ff-content .tracker { width: 85px; height: 6px; background: #3e8ddd; position: absolute; left: 0; top: -6px; -webkit-transition: all .8s ease-out; -o-transition: all .8s ease-out; transition: all .8s ease-out; } #brands { background: #ebebeb; text-align: center; padding: 20px 0px 0; } #shop-type { background: #f8f8f8; text-align: center; padding: 20px 0px 0; } .brands-container, .shop-type-container { padding: 40px 0; display: -webkit-box; display: -ms-flexbox; display: flex; } .brands-logo-container { width: auto; 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; background-color: white; border: 1px solid #bcbcbc; border-radius: 8px; min-height: 60px; } .shop-type-logo-container { width: auto; display: inline-block; background-color: white; border: 1px solid #bcbcbc; border-radius: 8px; min-height: 100px; } .shop-type-logo-container p { font-size: 12px; } .shop-type-logo-container:hover, .brands-logo-container:hover { -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .16); box-shadow: 0 3px 6px rgba(0, 0, 0, .16); } .brands-logo-container img { max-width: 80%; } .shop-type-logo-container img { max-width: 90%; padding-top: 10px; } .shop-type-logo-container:nth-of-type(3) img, .shop-type-logo-container:nth-of-type(5) img { max-width: 30%; } .brand-btn { display: none; } .docking-img img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; min-height: 200px; -o-object-fit: cover; object-fit: cover; } .docking-text { background-color: #f2f2f2; text-align: center; padding: 20px; } .docking-text .text-btn { color: #fff; text-align: center; -webkit-transition: background .3s linear, color .3s linear; -o-transition: background .3s linear, color .3s linear; transition: background .3s linear, color .3s linear; background: #1976a1; display: inline-block; font-size: 16px; border-radius: 4px; padding: 0 24px; line-height: 45px; font-weight: bold; font-family: inherit; float: none; height: 45px; outline: none; white-space: nowrap; cursor: pointer; text-transform: capitalize; margin: 24px 0; } .docking-text .text-btn:hover { color: #0e5780; background: #e8f3f9; border: 1px solid #0e5780; } .tech-inner-box { display: -webkit-box; display: -ms-flexbox; display: flex; height: 315px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: unset; max-width: 360px; background-color: #000; text-align: center; margin: 30px auto; } .tech-inner-box-vid { display: inline  !important; background-color: initial  !important; height: unset  !important; padding: unset  !important; cursor: pointer  !important; position: initial  !important; -webkit-transform: initial  !important; -ms-transform: initial  !important; transform: initial  !important; width: 100%  !important; border: 0  !important; } .tech-inner-box-vid iframe { width: 100%; height: 315px; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; } .tech-inner-box-vid img { width: 100%; height: 315px; -o-object-fit: center; object-fit: center; -o-object-position: center; object-position: center; } .video-thumbnail { position: relative; display: block; cursor: pointer; } .video-thumbnail:before { position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); content: "\f01d"; font-family: FontAwesome; font-size: 100px; color: #fff; opacity: .8; text-shadow: 0px 0px 30px rgba(0, 0, 0, .5); } .video-thumbnail:hover:before { color: #eee; } .tech-inner-box-vid-cont { background-position: center; background-size: cover; background-repeat: no-repeat; min-height: 200px; width: 100%; } .tech-inner-box h3 { color: #fff; margin-top: 15px; font-weight: bold; font-size: 18px; } .tech-inner-box p { color: #fff; padding: 15px; } #docking-stn-tech { padding: 30px 0px; background-color: #f2f2f2; } .acc-inner-box-text { margin: auto; margin-top: 25px; margin-bottom: 25px; background-repeat: no-repeat; background-color: #1d2a36; display: -webkit-box  !important; display: -ms-flexbox  !important; display: flex  !important; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; min-height: 470px; color: #fff; text-align: center; } .acc-inner-box:nth-of-type(1) .acc-inner-box-text { background-image: url(//p1-ofp.static.pub/ShareResource/accessories-and-monitors/docking/img/page-dock-mounts-dock-station-accessories-section04.jpg); background-position-y: -205px; background-size: cover; } .acc-inner-box:nth-of-type(2) .acc-inner-box-text { background-image: url(//p3-ofp.static.pub/ShareResource/accessories-and-monitors/docking/img/page-dock-mounts-dock-station-accessories-section05.jpg); background-position-y: -205px; background-size: cover; } .acc-inner-box:nth-of-type(3) .acc-inner-box-text { background-image: url(//p3-ofp.static.pub/ShareResource/na/landing-pages/alp/espots/lenovo-docking-visiontek-4000.jpg); background-position-x: center; } .acc-inner-box-descr { background-color: #000; height: 205px; padding: 10px; font-weight: 300; font-size: 16px; } .acc-inner-box-descr p { padding: 0px; margin: 0px; line-height: 1.2; color: #fff; } .acc-inner-box-descr h3 { color: #fff; margin: 0px 0px 15px; font-weight: bold; font-size: 18px; } .acc-inner-box-descr { background-color: #000; height: 205px; padding: 10px; font-weight: 300; font-size: 16px; } .acc-inner-box-descr p { padding: 0px; margin: 0px; line-height: 1.2; color: #fff; } @media (min-width: 375px) { #ff-content .slide-1 { background-position-x: 50%; } #ff-content .slide-2 { background-position-x: 50%; } #ff-content .slide-headline { font-size: 20px; } } @media (min-width: 385px) { #ff-content .slide-1 .slide-description { margin-top: 0; } } @media (min-width: 440px) { #ff-content .slide-2, #ff-content .slide-3 { background-size: cover; } } @media (min-width: 500px) { #ff-content .slide { height: 260px; } #ff-content .slide-text-container { padding: 25px 20px 35px; } #ff-content .slide-headline { font-size: 24px; } #ff-content .slide-description { font-size: 16px; } #ff-content .slide-btn { font-size: 18px; } #ff-content .slide-btn:not(:last-of-type) { margin-right: 20px; } } @media (min-width: 750px) { .tech-inner-box-vid img { width: 100%; height: 315px; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } #ff-content { opacity: 1; } .ff-content h2 { font-size: 28px; } #ff-content .slide-container { width: 300%; } #ff-content .slide { height: 538px; width: 33.33333%; } #ff-content .slide img { display: block; } #ff-content .slide-1 { background-position-x: 70%; } #ff-content .slide-text-container { min-height: 390px; text-align: left; padding: 25px 30px; } #ff-content .slide-3 .slide-text-container { padding-top: 40px; min-height: 420px; } #ff-content .slide-text-copy { position: static; height: auto; display: block; margin-bottom: 25px; } #ff-content .slide-headline { font-size: 30px; text-transform: none; margin-bottom: 22px; text-align: left; } #ff-content .slide-description span { color: #fff; } #ff-content .slide-description { color: #fff; max-width: 500px; } #ff-content .slide-3 img, #ff-content .slide-3 .slide-description { margin-bottom: 25px; } #ff-content .slide-link-mb { display: none; } #ff-content .slide-3 .slide-btn { margin-top: 0; } #ff-content .slide-btn { color: #fff; height: 55px; padding: 17px 24px 15px; background: #1976a1; border-radius: 4px; position: absolute; top: 40%; right: 6%; } #ff-content .slide-btn:hover { color: #0e5780; background: #e8f3f9; border: 1px solid #0e5780; } #ff-content .btn-container-mb { display: none; } #ff-content .btn-container-desktop { display: block; } #ff-content .swiper-pagination-bullets { display: none  !important; } #brands { padding: 40px 0 20px; background: #ebebeb; } #shop-type { padding: 40px 0 20px; background: #f8f8f8; } .shop-type-logo-container { max-width: 19%; width: 19%; min-height: 130px; text-align: center; } .shop-type-container { margin: auto; -ms-flex-pack: distribute; justify-content: space-around; max-width: 760px; } .type-img-box { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 90px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #docking-station-section { margin-top: 20px; } .docking-text h2 { padding-bottom: 15px; } .tech-inner-box { width: 90%; max-width: none; } } @media (min-width: 1000px) { #brands .brands-container, #shop-type .shop-type-container { justify-content: center; } .brands-logo-container, .shop-type-logo-container { margin: 0px 10px; } .brands-logo-container { max-width: 15%; width: 15%; } #docking-station-section { overflow: hidden; } .docking-station-inner { display: -webkit-box; display: -ms-flexbox; display: flex; } .docking-station-inner.hubs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-flow: row-reverse; flex-flow: row-reverse; } .docking-img { min-width: 50%; } .docking-img img { max-width: none; } .docking-text { padding: 6% 3% 1%; text-align: left; } .docking-text h2 { text-align: left; } } @media (min-width: 1300px) { #ff-content .slide img { margin-bottom: 50px; } #ff-content .slide-btn { right: 65%; } #ff-content .slide-3 .slide-btn { right: 63%; top: 50%; } #ff-content .slide-3 img { margin-bottom: 25px; } #ff-content .slide-3 .slide-text-container { padding-top: 120px; } #ff-content .slide-text-container { height: 100%; width: 630px; padding: 75px 70px; } #ff-content .slide-text-copy { margin-bottom: 55px; } #ff-content .btn-container-desktop { width: 490px; padding: 0; left: 70px; } .brands-container, .shop-type-container { max-width: 1280px; margin: auto; } .docking-img { min-width: 60%; } .docking-text { padding: 3% 3% 1%; text-align: left; background-color: #fff; } } @media (min-width: 1280px) { .brands-container, .shop-type-container { padding: 40px 10px; max-width: 1120px; margin: auto; } #brands h2, #shop-type h2 { text-align: center; } } @media (min-width: 1765px) { .ff-content .section-container { margin: auto; } .brands-logo-container img { max-width: none; } .brands-container, .shop-type-container { max-width: 1400px; } .docking-img { min-width: 65%; } .docking-text { padding: 4% 3% 1%; } } @media (max-width: 750px) { #ff-content .slide img { display: none  !important; } .acc-inner-box-descr h3 { color: #fff; margin: 0px 0px 5px; font-weight: bold; font-size: 18px; } } #ff-content .slide-1 .slide-description-mobile { color: #fff; } #ff-content .slide-1 img { height: auto; } @media (min-width: 500px) { #ff-content .slide-1 .slide-description { position: static; } } @media (min-width: 750px) { #ff-content .slide-1 .slide-text-copy { max-width: 600px; margin-bottom: 20px; } #ff-content .slide-1 .slide-description { display: block; } #ff-content .slide-1 .slide-description-mobile { display: none; } #ff-content .slide-1 .slide-text-container { min-height: 390px; } #ff-content .slide-container .slide .slide-text-container { min-height: 240px; } } .acc-inner-box { width: 90%; margin: auto; } @media (min-width: 1180px) { .ff-content p { font-size: 18px; } .ff-content .docking-text p { font-size: 20px; } #ff-content .slide-1 .slide-text-copy { margin-bottom: 35px; } .acc-inner-box-descr { height: 220px; } #brands .brand-btn { display: inline-block; font-size: 16px; border-radius: 4px; padding: 0 24px; line-height: 45px; font-weight: bold; font-family: inherit; background: #e8f3f9; color: #0e5780; float: none; height: 45px; outline: none; white-space: nowrap; cursor: pointer; text-transform: capitalize; border: 1px solid #0e5780; } #brands .brand-btn:hover { text-decoration: none; background: #fff; color: #0e5780; border: 1px solid #0e5780; -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, .16); box-shadow: 0 3px 6px rgba(0, 0, 0, .16); } #brands .brand-btn:active { background-color: #2da7d4; color: #e8f3f9; } .docking-stn-acc-inner, .docking-stn-tech-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; margin: auto; } .acc-inner-box-text { width: auto; max-width: 380px; } .acc-inner-box { width: 28%; } .tech-inner-box { width: 40%; } } @media (min-width: 1880px) { .acc-inner-box-text { max-width: none; } } #docking-stn-acc { padding: 1rem 0px 0px; }