.thinkreality-slider-main .slick-slide, .thinkreality-slider-main .slick-slide::before { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .thinkreality-slider-section__slider-1, .thinkreality-slider-section__slider-2, .thinkreality-slider-section__slider-3 { position: relative; width: 100%; height: 100%; min-height: 8vw; margin-bottom: 0; opacity: 0; visibility: hidden; transition: all 1.2s ease; } .thinkreality-slider-section__slider-1.slick-initialized, .thinkreality-slider-section__slider-2.slick-initialized, .thinkreality-slider-section__slider-3.slick-initialized { opacity: 1; visibility: visible; } .thinkreality-slider-main .slick-slide { position: relative; height: 40vw; overflow: hidden; } .thinkreality-slider-main .slick-slide::before { z-index: 1; } .thinkreality-slider-main .slick-slide video { display: block; object-fit: cover; object-position: center; min-width: 100%; min-height: 100%; visibility: visible; } .thinkreality-slider-main .slick-slide iframe { position: relative; pointer-events: none; } .thinkreality-slider-main .slick-slide figure { position: relative; height: 100%; } .thinkreality-slider-main .slick-slide .slide-image { opacity: 0; height: 100%; background-size: cover; background-position: center; transition: all .8s ease; } .thinkreality-slider-main .slick-slide .slide-image.show { opacity: 1; } .thinkreality-slider-main .slick-slide .image-entity { width: 100%; opacity: 0; visibility: hidden; } .thinkreality-slider-main .slick-slide .loading { position: absolute; top: 44%; left: 0; width: 100%; } .thinkreality-slider-main .slick-slide.slick-active { z-index: 1; } .thinkreality-slider-main .slick-slide.slick-active .caption { opacity: 1; } .slick-dots { text-align: right; padding-top: 30px; padding-left: 0; margin-bottom: .5em; } .slick-dots li { display: inline-block; vertical-align: top; width: 85px; text-align: center; margin: 0 10px; float: left; } .slick-dots .slider-nav-icon { border: none; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 0 transparent; vertical-align: middle; color: #fff; background-color: #fff; transition: all .3s ease; } .slick-dots .slider-nav-icon:focus { outline: none; } .slick-dots .slider-nav-icon:hover { opacity: 1; } .slick-dots.slick-active .slider-nav-icon { box-shadow: 0 0 0 2px #fff; opacity: 1; } @keyframes slideIn { from { filter: blur(15px); } to { filter: blur(0); } } @keyframes slideOut { from { filter: blur(0); } to { filter: blur(15px); } } .slick-dots li .slider-nav-icon { background-size: 75px 75px; width: 75px; height: 75px; background-position: 50%; display: block; float: none; margin: 0 auto; padding: 0; border: unset; background: unset; font-family: unset; font-size: unset; line-height: unset; text-decoration: none; font-weight: unset; color: unset; cursor: pointer; text-align: center; } .slick-dots li.slick-active .slider-nav-icon { background-position: center; } .thinkreality-slider-section__slider-1, .thinkreality-slider-section__slider-2, .thinkreality-slider-section__slider-3 { } .thinkreality-slider-section__slider-content { display: inline-block; } .thinkreality-slider-section__slider-desc { position: relative; text-align: left; } .thinkreality-slider-section__slider-desc .thinkreality-slider-section__slider-p { font: 16px/26px Lato; } #soundbar-svg .st0, #dual-display-svg .st0 { fill: none; stroke: #000; stroke-width: 20; stroke-miterlimit: 10; } .thinkreality-slider-section__vid-nav .slider-nav-icon-wrap svg { fill: #3e3e3e; transition: fill .2s ease; } .thinkreality-slider-section__vid-nav .active .slider-nav-icon-wrap svg:hover { fill: #e1140a; } .thinkreality-slider-section__vid-nav { position: relative; } .thinkreality-slider-section__vid-nav .slider-nav-icon-wrap:hover p { color: #e1140a; } .thinkreality-slider-section__vid-nav .slider-nav-icon-wrap:hover svg { fill: #e1140a; } .thinkreality-slider-section__vid-nav .slider-nav-icon-wrap:hover #soundbar-svg .st0, .thinkreality-slider-section__vid-nav .slider-nav-icon-wrap:hover #dual-display-svg .st0 { stroke: #e1140a; } .thinkreality-slider-section__vid-nav .slick-active .slider-nav-icon-wrap p { color: #e1140a; } .thinkreality-slider-section__vid-nav .slick-active .slider-nav-icon-wrap #soundbar-svg .st0, .thinkreality-slider-section__vid-nav .slick-active .slider-nav-icon-wrap #dual-display-svg .st0 { stroke: #e1140a; } .thinkreality-slider-section__vid-nav .slick-active .slider-nav-icon-wrap svg { fill: #e1140a; } .thinkreality-slider-section__vid-nav p { transition: color .5s cubic-bezier(0.215, .61, .355, 1); font-size: 1em; line-height: 1.5em; margin: 0; padding: 10px 0; color: #3e3e3e; cursor: pointer; } .video-border, .video-border-2, .video-border-3 { display: none; transition: all .2s ease-out 0s; height: 2px; width: 17%; margin: 0 4%; background-color: #e1140a; bottom: 0; left: 24.9995%; position: absolute; } .thinkreality-slider-section__slider-item { visibility: hidden; opacity: 0; transition: visibility 0s, opacity .5s linear; position: absolute; width: 100%; display: none; } .thinkreality-slider-section__slider-item--active { visibility: visible; opacity: 1; position: relative; display: block; } .thinkreality-slider-section { text-align: center; font: 16px/30px Lato; color: #FFF; clear: both; margin-top: 100px; } .thinkreality-slider-section .thinkreality-slider-section__heading { font: Bold 54px/65px Lato; color: #FFF; text-align: center; } @media only screen and (max-width: 768px) { .thinkreality-slider-section .thinkreality-slider-section__heading { margin: 0 auto .5em; } .thinkreality-slider-main .thinkreality-slider-section__vid-nav { display: none; } .thinkreality-slider-main .thinkreality-slider-section__slider-1, .thinkreality-slider-main .thinkreality-slider-section__slider-2, .thinkreality-slider-main .thinkreality-slider-section__slider-3 { padding: 0; } .thinkreality-slider-main .slick-slide { position: relative; height: 100%; overflow: hidden; height: 35vh; margin: 0 .4em; } .thinkreality-slider-main .slick-slide video { display: block; position: unset; top: unset; left: unset; min-width: 100%; min-height: 100%; width: 100%; object-fit: cover; height: 35vh; transform: unset; visibility: visible; } .thinkreality-slider-main .slick-slide.slick-active { height: 35vh; } .thinkreality-slider-section__slider-content { padding: 1em 2em; text-align: center; min-height: 150px; } .thinkreality-slider-section__slider-desc-1, .thinkreality-slider-section__slider-desc-2, .thinkreality-slider-section__slider-desc-3 { width: 90%; float: none; margin: 0 auto; } .thinkreality-slider-section__slider-desc-1 .thinkreality-slider-section__slider-heading, .thinkreality-slider-section__slider-desc-2 .thinkreality-slider-section__slider-heading, .thinkreality-slider-section__slider-desc-3 .thinkreality-slider-section__slider-heading { } .thinkreality-slider-section__slider-desc-1 .thinkreality-slider-section__slider-p, .thinkreality-slider-section__slider-desc-2 .thinkreality-slider-section__slider-p, .thinkreality-slider-section__slider-desc-3 .thinkreality-slider-section__slider-p { } } .thinkreality-slider-section__icon-set { display: none; } .thinkreality-hero__vid-slide-play { display: none; } .thinkreality-hero__vid-slide-play.vid-paused { display: none; } @media only screen and (max-width: 768px) { .thinkreality-slider-section { margin-top: 50px; } .thinkreality-slider-main { margin: 40px -5vw 0; padding: 0; width: 100vw; } .thinkreality-hero__vid-slide-play { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; z-index: 2; background: transparent; background-repeat: no-repeat; background-position: 50%; background-size: 13%; -webkit-transition: .2s; transition: .2s; cursor: pointer; } .thinkreality-hero__vid-slide-play.vid-paused { position: absolute; top: 0; left: 0; display: inline-block; width: 100%; height: 100%; z-index: 2; background: url(https://static.lenovo.com/ww/campaigns/2019/thinkreality-brand-v3/icons/play-button.svg); background-repeat: no-repeat; background-position: 50%; background-size: 13%; -webkit-transition: .2s; transition: .2s; cursor: pointer; } .thinkreality-slider-section__slider-content { padding: 1em 2em; text-align: center; min-height: 150px; } .thinkreality-slider-section__vid-nav { display: none; } .thinkreality-slider-section__slider-desc .thinkreality-slider-section__slider-heading { } .thinkreality-slider-section__slider-desc{ text-align: center; } .thinkreality-slider-section__slider-desc .thinkreality-slider-section__slider-p { } }