Current Path : /var/test/www/foundation/wp-content/themes/kallyas/pagebuilder/elements/TH_LaptopSlider/ |
Current File : /var/test/www/foundation/wp-content/themes/kallyas/pagebuilder/elements/TH_LaptopSlider/style.css |
.laptop-slider__slideshow {overflow: hidden;} .laptop-slider__slideshow.ls--fullscreen {height:100vh;} /* Static content */ .laptop-slider__wrapper { width: 100%; overflow: hidden; } /* Source Styles */ .ls--fullscreen .laptop-slider__inner { position: absolute; left: 50%; bottom: 4%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .ls__container {position: relative;} /* Main Big Title */ .ls__main-title {font-size: 40px; margin-bottom: 60px; color:#fff; text-align:center; line-height: 1.2; font-weight: 300;} /* Laptop IosSlider */ .zn_laptop_slider_wrapper {width: 100%; height: 100%; position: absolute; overflow: hidden; } .zn_laptop_slider {width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;} .zn_laptop_slider .slick-list, .zn_laptop_slider .slick-track {height: 100%; } .ls__slider-item {float: left; position: relative; top: 0; left: 0; width: 100%; height: 100%; margin: 0 0 0 0; } .ls-slider-item__img {position: absolute; top:0; left:0; right:0; bottom: 0; width:100%; height: 100%; /*background-position: center top; background-size: cover; background-repeat: no-repeat;*/} /* Caption - Just Laptop View */ .ls--laptop .ls__item-caption {position: absolute; bottom: 30px; z-index:1; color: #fff; background-color: #000; border-left: 3px solid #cd2122; padding: 3px 20px; font-size: 18px; opacity: 0; left: 100px; -webkit-transition:opacity .3s ease-out .4s, left .3s ease-out .4s; transition:opacity .3s ease-out .4s, left .3s ease-out .4s; } .ls--laptop .ls__item-caption a {color:#fff;} .ls--laptop .slick-item--activated .ls__item-caption {left: 30px; opacity: 1; } /* Laptop Mask */ .ls__laptop-mask { width: 80%; max-width: 100%; padding-bottom: 41%; padding-top: 0; height: 0; margin-left: auto; margin-right: auto; position: relative;} .ls--laptop .ls__laptop-mask { margin-bottom: 20px;} .ls__laptop-mask::after {background-repeat:no-repeat; background-position: center top; content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-size: 100%; background-position: 50% 0; pointer-events: none; } .ls__laptop-mask .ls__screen { position: absolute; bottom: 0; overflow: hidden; width: 65.7%; height: 0; top: 0; left: 0; margin-left: 17.2%; margin-top: 3.5%; padding-bottom: 41.4%; background-color: rgba(0,0,0,0.5);} /* Laptop with Slider descirption */ .ls--lapt_slider_desc .ls__laptop-mask, .ls--lapt_desc .ls__laptop-mask { width: 70%; padding-bottom: 39%; float: right; margin-right: -50px;} /* Left side description */ .ls__left-desc {float: left; width: calc(30% + 110px); margin-right: -60px; color:#fff; position: absolute; left: 0; bottom: 180px;} .ls__sl-main-title {font-size: 36px; font-weight: 700; margin-bottom: 25px; line-height: 1.3;} .ls__sl-main-desc {font-size: 16px; line-height: 1.5; margin-bottom: 40px;} .ls__secbtn {margin-left: 20px;} /* Slide item details */ .ls_slide_item-details {position: absolute; bottom: 0; left: 10px; opacity:0; visibility: hidden; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transition:-webkit-transform .2s ease-out, opacity .2s ease-out, visibility .2s ease-out; -webkit-transition: opacity .2s ease-out, visibility .2s ease-out, -webkit-transform .2s ease-out; transition: opacity .2s ease-out, visibility .2s ease-out, -webkit-transform .2s ease-out; transition: transform .2s ease-out, opacity .2s ease-out, visibility .2s ease-out; transition:transform .2s ease-out, opacity .2s ease-out, visibility .2s ease-out, -webkit-transform .2s ease-out;} .ls--lapt_desc[data-active-slide="0"] .ls_slide_item-details:nth-child(1), .ls--lapt_desc[data-active-slide="1"] .ls_slide_item-details:nth-child(2), .ls--lapt_desc[data-active-slide="2"] .ls_slide_item-details:nth-child(3), .ls--lapt_desc[data-active-slide="3"] .ls_slide_item-details:nth-child(4), .ls--lapt_desc[data-active-slide="4"] .ls_slide_item-details:nth-child(5), .ls--lapt_desc[data-active-slide="5"] .ls_slide_item-details:nth-child(6), .ls--lapt_desc[data-active-slide="6"] .ls_slide_item-details:nth-child(7), .ls--lapt_desc[data-active-slide="7"] .ls_slide_item-details:nth-child(8), .ls--lapt_desc[data-active-slide="8"] .ls_slide_item-details:nth-child(9), .ls--lapt_desc[data-active-slide="9"] .ls_slide_item-details:nth-child(10) {opacity: 1; visibility: visible; -webkit-transform: scale(1); transform: scale(1);} /* Slider bullets */ .ls__nav {position: absolute; bottom: -10px; width: 100%; text-align: center; z-index: 1; line-height: 1;} .ls--laptop .ls__nav {bottom: -30px;} .ls--lapt_slider_desc .ls__laptop-mask, .ls--lapt_desc .ls__laptop-mask {bottom:0;} .ls__nav .slickBtn {display: inline-block; width: 15px; height: 4px; padding: 0; margin: 0; background: #444; opacity: .4; margin-left: 5px; cursor: pointer; position:relative; border-radius: 2px; -webkit-transition: opacity .3s ease-in-out, width .3s ease-in-out; transition: opacity .3s ease-in-out, width .3s ease-in-out; } .ls__nav li:first-child .slickBtn {margin-left: 0;} .ls__nav .slickBtn:hover { opacity:1; } .ls__nav .slick-active .slickBtn { opacity:1; width: 27px;} /* Slider Arrows */ .ls__arrows {position: absolute; top: 0; width: 100%; text-align: center; z-index: 1; } .ls__arrow {position: absolute; display: block; cursor: pointer; width: 65px; height: 140px; overflow: hidden; opacity: 0; -webkit-transition:opacity .2s ease-out, left .2s ease-out, right .2s ease-out; transition:opacity .2s ease-out, left .2s ease-out, right .2s ease-out; -webkit-backface-visibility: hidden;} .ls__arrow::before, .ls__arrow::after {width: 90px; height: 20px; display:block; content:''; background-color: rgba(255, 255, 255, 0.17); -webkit-transform: rotate(-45deg) skew(45deg); transform: rotate(-45deg) skew(45deg); top: 50px; left:auto; right:0; position:absolute; -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-transition: background-color .2s ease-out; transition: background-color .2s ease-out; -webkit-backface-visibility: hidden; background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.17) 100%); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.17) 100%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.17) 100%);} .ls__arrow::before {top: 70px; -webkit-transform: rotate(45deg) skew(-45deg);transform: rotate(45deg) skew(-45deg); -webkit-transform-origin: 100% 0;transform-origin: 100% 0;} .ls__arrow-left {left: 10.6%; -webkit-transform: scale(-1); transform: scale(-1); top: 190px;} .ls__arrow-right {right: 10.6%; top:90px; } .ls__laptop-mask:hover .ls__arrow-left {left: 6.6%; opacity: 1;} .ls__laptop-mask:hover .ls__arrow-right {right: 6.6%; opacity: 1;} .ls--lapt_slider_desc .ls__laptop-mask:hover .ls__arrow-left , .ls--lapt_desc .ls__laptop-mask:hover .ls__arrow-left {left:5.6%;} .ls--lapt_slider_desc .ls__laptop-mask:hover .ls__arrow-right , .ls--lapt_desc .ls__laptop-mask:hover .ls__arrow-right {right:5.6%;} .ls__arrow:hover::before, .ls__arrow:hover::after { background-color: rgba(255, 255, 255, 0.3); } /* Source Mask */ .ls-source__mask {position: absolute; bottom:0; left:0; height: 20vh; background:#fff; width: 100%; -webkit-transform-origin: 100% 0; transform-origin: 100% 0; -webkit-transform: skewY(-2deg); transform: skewY(-2deg); -webkit-backface-visibility:hidden;} .ls-source__mask.ls-source__mask-front { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,245,0.6)), color-stop(60%,rgba(245,245,245,1))); background: -webkit-linear-gradient(top, rgba(245,245,245,0.6) 0%,rgba(245,245,245,1) 60%); background: linear-gradient(to bottom, rgba(245,245,245,0.6) 0%,rgba(245,245,245,1) 60%);} .ls-source__mask.ls-source__mask-back {background:rgba(255,255,255,.4); -webkit-transform: skewY(-3.1deg); transform: skewY(-3.1deg); -webkit-backface-visibility:hidden;bottom: 40px;} /* Dark color theme */ .ls--theme-dark .ls__main-title , .ls--theme-dark .ls__left-desc {color:#343434;} /* MQ's */ @media only screen and (max-height : 680px) { .laptop-slider__slideshow.ls--fullscreen, .laptop-slider__slideshow {height: auto; } .laptop-slider__source + .laptop-slider__inner {position: relative;} } @media only screen and (min-width : 1280px) and (max-width : 1440px) { } @media only screen and (max-width : 1279px) { .ls__laptop-mask {width: 90%; padding-bottom: 47%;} } @media only screen and (min-width : 992px) and (max-width : 1279px) { } @media only screen and (max-width : 991px) { .laptop-slider__slideshow {height: auto; } .laptop-slider__source + .laptop-slider__inner {position: relative} .ls-source__mask {height: 120px;} .ls__laptop-mask { width: 100%; padding-bottom: 51%;} .ls__main-title {font-size: 27px; } /* Laptop with description */ .ls--lapt_slider_desc.laptop-slider__slideshow, .ls--lapt_desc.laptop-slider__slideshow {height:auto;} .ls--lapt_slider_desc .ls__laptop-mask, .ls--lapt_desc .ls__laptop-mask { width: 100%; padding-bottom: 52%; float: none; margin-right: 0;} .ls--lapt_slider_desc .ls__left-desc, .ls--lapt_desc .ls__left-desc {float: none; width: 100%; position: static; text-align: center; margin-right: 0; margin-top: 50px; } .ls--lapt_slider_desc .ls-source__mask, .ls--lapt_desc .ls-source__mask {display: none;} .ls_slide_item-details {position: static; display: none; } .ls_slide_item-details.selected {display: block; } } @media only screen and (min-width : 768px) and (max-width : 991px) { } @media only screen and (max-width : 767px) { .ls__main-title { margin-bottom: 40px; margin-top: 30px; } .ls__laptop-mask, .ls--lapt_slider_desc .ls__laptop-mask, .ls--lapt_desc .ls__laptop-mask {width: 120%; padding-bottom: 62%; max-width: 120%; margin-left: -10%; } .ls__arrows {display: none;} .ls--laptop .ls__item-caption {bottom: 10px; padding: 5px 10px; font-size: 12px; line-height: 1.4;} .ls--laptop .slick-item--activated .ls__item-caption {left: 10px; } } @media only screen and (max-width : 480px) { .ls__laptop-mask, .ls--lapt_slider_desc .ls__laptop-mask, .ls--lapt_desc .ls__laptop-mask {width: 140%; padding-bottom: 72%; max-width: 140%; margin-left: -20%; } }