.interactive-link-slider-wrapper{
position:relative;
overflow:hidden;
}
.interactive-link-slider-wrapper .swiper-container {
width: 100%;
height: 100%;
}
.interactive-link-slider-wrapper .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
background-position: center;
background-size: cover; display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
.interactive-top {
position: relative;
}
.interactive-top .swiper-slide {
position: relative;
overflow: hidden;
width: 100%;
min-height: 100%;
padding-bottom: 50px;
}
.interactive-top .swiper-slide .bg-cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll!important;
}
.interactive-thumbs {
height: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.interactive-thumbs .swiper-slide {
height: auto;
background: transparent;
color: #fff;
border-left: 1px solid rgba(255, 255, 255, .5);
align-items: flex-end;
}
.interactive-thumbs .swiper-slide-thumb-active {
background: #040404;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(4, 4, 4, 0)), color-stop(50%, rgba(4, 4, 4, 0)), to(rgba(4, 4, 4, .35)));
background: -o-linear-gradient(rgba(4, 4, 4, 0) 0, rgba(4, 4, 4, 0) 50%, rgba(4, 4, 4, .35) 100%);
background: linear-gradient(rgba(4, 4, 4, 0) 0, rgba(4, 4, 4, 0) 50%, rgba(4, 4, 4, .35) 100%);
}
.interactive-thumbs .swiper-slide:first-child {
border-left: none;
}
.interactive-thumbs .swiper-slide:first-child .slide-item-number.stroke-text:before {
content: none;
}
.slide-content-info {
position: relative;
padding: 15px;
padding-bottom: 30px;
text-align: left;
width:100%;
}
.slide-item-footer .slide-item-btn {
padding: 10px 35px;
border: 1px solid #fff;
width: max-content;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
z-index: 2;
-webkit-transition: all .8s;
transition: all .8s;
}
.slide-item-footer .slide-item-btn:hover {
border-color: #1e1e1e;
color:#fff;
}
.slide-item-btn:after {
content: '';
position: absolute;
top: 0%;
left: 0px;
height: 100%;
width: 0%;
z-index: -1;
background: #1e1e1e;
-webkit-transition: all 0.3s cubic-bezier(1, 0, 0.55, 1);
transition: all 0.3s cubic-bezier(1, 0, 0.55, 1);
}
.slide-item-footer .slide-item-btn:hover:after {
top: 0;
width: 100%;
-webkit-transition: all 0.6s cubic-bezier(1, 0, 0.55, 1);
transition: all 0.6s cubic-bezier(1, 0, 0.55, 1);
}
.slide-item-footer p,
.slide-item-footer .slide-item-btn {
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity:0;
}
.swiper-slide-thumb-active .slide-item-footer p,
.swiper-slide-thumb-active .slide-item-footer .slide-item-btn {
-webkit-transform: translateY(0%);
transform: translateY(0%);
-webkit-transition: all 0.6s cubic-bezier(1, 0, 0.55, 1);
transition: all 0.6s cubic-bezier(1, 0, 0.55, 1);
opacity:1;
}
.swiper-slide-thumb-active .slide-item-footer .slide-item-btn {
transition-delay: .1s;
}
.slide-item-number.stroke-text {
position: relative;
font-size: 48px;
font-weight: 600;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
color: transparent;
display: flex;
align-items: center;
}
.swiper-slide-thumb-active .slide-item-number.stroke-text {
color: #fff;
}
.slide-item-number.stroke-text:before {
content: '';
position: absolute;
left: -17px;
width: 3px;
height: 30px;
background-color: #b93434;
border-radius: 3px;
}
.interactive-thumbs .swiper-nav-ctrl.next-ctrl,
.interactive-thumbs .swiper-nav-ctrl.prev-ctrl{
display: none;
}
.interactive-thumbs .swiper-nav-ctrl.swiper-button-disabled {
display: none;
}
@media( max-width: 1024px ){
.interactive-thumbs .swiper-nav-ctrl.next-ctrl,
.interactive-thumbs .swiper-nav-ctrl.prev-ctrl{
position: absolute;
right: 90px;
height: 60px;
width: 60px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0;
padding: 0;
outline: none;
cursor: pointer;
bottom: -12px;
transform: translateY(-50%);
box-sizing: content-box;
z-index: 3;
}
.swiper-button-disabled {
opacity: 0.2;
}
.interactive-thumbs .swiper-nav-ctrl.next-ctrl{
left:auto;
right: 20px;
}
} @-webkit-keyframes slideInUp3 {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes slideInUp3 {
from {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
} @-webkit-keyframes slideOutDown3 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}
@keyframes slideOutDown3 {
from {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
to {
visibility: hidden;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
}