.slick-dots li button::before,
.slick-dots li.slick-active button:before{
color: #CF4A46;
}
.slz-image-carousel {
margin-left: -15px;
margin-right: -15px;
position: relative;
}
.slz-image-carousel .item {
padding: 0 15px;
position: relative;
}
.slz-carousel-wrapper .btn,
.slz-image-carousel .btn {
position: absolute;
z-index: 10;
bottom: 20px;
width: 48px;
height: 48px;
line-height: 44px;
padding: 0px;
border-radius: 50%;
-webkit-border-radius: 50%;
font-size: 0;
opacity: 0;
visibility: hidden;
border: 2px solid #ededed;
background-color: #ffffff;
color: #333333;
top: 50%;
-webkit-transform: translate(0, -50%);
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.slz-image-carousel .slick-dots li {
margin: 0;
}
.slz-carousel-wrapper .btn:hover,
.slz-carousel-wrapper .btn:focus,
.slz-carousel-wrapper .btn:hover,
.slz-image-carousel .btn:hover,
.slz-image-carousel .btn:focus,
.slz-image-carousel .btn:active {
background-color: #ededed;
border-color: transparent;
}
.slz-carousel-wrapper .btn i,
.slz-carousel-wrapper .btn .icons,
.slz-image-carousel .btn i,
.slz-image-carousel .btn .icons {
font-size: 28px;
line-height: inherit;
}
.slz-carousel-wrapper .btn-prev,
.slz-image-carousel .btn-prev {
left: -15px;
}
.slz-carousel-wrapper .btn-next ,
.slz-image-carousel .btn-next {
left: auto;
right: -15px;
}
.slz-carousel-wrapper:hover .btn-prev,
.slz-image-carousel:hover .btn-prev {
opacity: 1;
visibility: visible;
left: 15px;
}
.slz-carousel-wrapper:hover .btn-next,
.slz-image-carousel:hover .btn-next {
opacity: 1;
visibility: visible;
right: 15px;
}
.slz-carousel-wrapper .btn-prev i:before,
.slz-image-carousel .btn-prev i:before {
content: "\f104";
}
.slz-carousel-wrapper .btn-next i:before,
.slz-image-carousel .btn-next i:before {
content: "\f105";
}
.slz-carousel-wrapper .slick-dotted.slick-slider,
.slz-image-carousel .slick-dotted.slick-slider {
margin-bottom: 60px;
}
.slz-carousel-wrapper .slick-dots,
.slz-image-carousel .slick-dots {
bottom: -50px;
padding-left: 0;
}
.slz-carousel-wrapper .slick-dots li button,
.slz-image-carousel .slick-dots li button {
padding: 0;
}
.slz-carousel-wrapper .slick-dots li button:before,
.slz-image-carousel .slick-dots li button:before {
font-size: 12px;
transition: all 0.3s ease;
}
.slz-image-carousel .block-image:before {
padding-top: 100%;
} .slz-image-carousel.style-2 {
margin: 0;
}
.slz-image-carousel.style-2 .item {
padding: 0;
} .slz-image-carousel.style-3 .item:nth-child(odd) {
margin-top: 50px;
}
.dh-container {
position: relative;
overflow: hidden;
}
.dh-overlay {
position: absolute;
z-index: 9;
top: -100%;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.6);
} .slz-carousel-mockup {
position: relative;
overflow: hidden;
padding-top: 6%;
padding-bottom: 6%;
}
.slz-carousel-mockup.style-2 {
padding-top: 0;
padding-bottom: 0;
}
.slz-carousel-mockup.style-2 .item {
padding: 0 15px 50px 15px;
}
.slz-carousel-mockup .carousel-overflow {
position: relative;
}
.slz-carousel-mockup .slick-list {
overflow: visible;
}
.slz-carousel-mockup.slz-image-carousel .slick-dotted.slick-slider {
margin-bottom: 0;
}
.slz-carousel-mockup .block-image,
.slz-carousel-mockup.style-2 .slick-center .block-image {
position: relative;
-webkit-box-shadow: 8px 15px 10px 0px rgba(0,0,0,0.15);
-moz-box-shadow: 8px 15px 10px 0px rgba(0,0,0,0.15);
box-shadow: 8px 15px 10px 0px rgba(0,0,0,0.15);
}
.slz-carousel-mockup .slick-center .block-image {
box-shadow: none;
}
.slz-carousel-mockup .block-image:before,
.slz-image-carousel.slz-carousel-mockup.style-2 .block-image:before {
padding-top: 177.5%;
}
.slz-carousel-mockup .block-image > a{
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left:0;
overflow: hidden;
pointer-events: none;
}
.slz-carousel-mockup .block-image a:after {
content: none;
}
.slz-carousel-mockup .item:not(.slick-current) .block-image a:before {
position: absolute;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
content: "";
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
.slz-carousel-mockup.style-2 .item.slick-current .block-image a:before {
position: absolute;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 10;
content: "";
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
}
.slz-carousel-mockup .item .block-image:hover a:before,
.slz-carousel-mockup.style-2 .item.slick-current .block-image:hover a:before {
opacity: 1;
}
.slz-carousel-mockup .slick-slide .block-image > a .img-slider-item{
position: absolute;
height: 100%;
width:auto;
left: 50%;
max-width: initial;
top: 0;
transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%,0);
-ms-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
}
.slz-carousel-mockup .slider-mockup {
position: absolute;
top: 0px;
left: 50%;
bottom: 0px;
height:100%;
min-width: 274px;
background: none;
transform: translate(-50%, 0px);
pointer-events: none;
}
.slz-carousel-mockup .slider-mockup:before{
content:none;
}
.slz-carousel-mockup .slider-mockup img{
position: absolute;
height: 130% !important;
width:auto;
left: 50%;
top: -15%;
display: block;
transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
}
.slz-carousel-mockup.slz-image-carousel .slick-dots {
bottom: 10px;
}
.slz-carousel-mockup.slz-image-carousel.style-2 .slick-dots {
bottom: 60px;
}
.slz-carousel-mockup .btn {
top: auto;
bottom: 20px;
padding: 0px 15px;
line-height: 1;
border:none;
opacity: 1;
visibility: visible;
}
.slz-carousel-mockup.style-2 .btn {
bottom: 0px;
}
.slz-carousel-mockup .icons {
font-size: 40px;
}
.slz-carousel-mockup .btn.btn-prev{
left: 45%;
-moz-transform: translateX(-100%);
-webkit-transform: translateX(-100%);
-o-transform: translateX(-100%);
-ms-transform: translateX(-100%);
transform: translateX(-100%);
}
.slz-carousel-mockup .btn.btn-next{
right: 45%;
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
-o-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
}
.slz-carousel-mockup .image-title {
text-align: center;
position: absolute;
text-transform: capitalize;
font-size: 20px;
bottom: 5px;
z-index: 5;
left: 50%;
transform: translateX(-50%);
opacity: 0;
visibility: hidden;
}
.slz-carousel-mockup.style-2 .item.slick-center .image-title {
opacity: 1;
visibility: visible;
} .slz-carousel-syncing {
position: relative;
margin: 0 auto;
overflow: hidden;
}
.slz-carousel-syncing .slider-for .item {
padding: 0;
}
.slz-carousel-syncing .slider-for .image-gallery-wrapper {
display: block;
position: relative;
overflow: hidden;
margin-bottom: 0;
background-color: #fff;
}
.slz-carousel-syncing .slider-for .image-gallery-wrapper:before {
display: block;
content: '';
padding-top: 67%;
}
.slz-carousel-syncing .slider-for .image-gallery-wrapper .images {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
}
.slz-carousel-syncing .slider-for .image-gallery-wrapper img {
width: auto;
height: 100%;
max-width: none;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}
.slz-carousel-syncing .slider-for + .slider-nav {
margin-top: 10px;
}
.slz-carousel-syncing .slider-nav {
margin: 0 -5px;
}
.slz-carousel-syncing .slider-nav .item {
padding: 0 5px 0 5px;
cursor: pointer;
}
.slz-carousel-syncing .slider-nav + .slider-for {
margin-top: 10px;
}
.slz-carousel-syncing .slider-nav .thumbnail-image {
position: relative;
overflow: hidden;
}
.slz-carousel-syncing .slider-nav .thumbnail-image:before {
content: '';
padding-top: 67%;
display: block;
}
.slz-carousel-syncing .slider-nav .thumbnail-image:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0px;
right: 0px;
opacity: 1;
background-color: rgba(0,0,0,0.5);
transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
}
.slz-carousel-syncing .slider-nav .slick-current .thumbnail-image:after {
opacity: 0;
}
.slz-carousel-syncing .slider-nav:hover .thumbnail-image:after,
.slz-carousel-syncing .slider-nav:hover .slick-current .thumbnail-image:after {
opacity: 1;
}
.slz-carousel-syncing .slider-nav .thumbnail-image:hover:after,
.slz-carousel-syncing .slider-nav .slick-current .thumbnail-image:hover:after {
opacity: 0;
}
.slz-carousel-syncing .slider-nav .thumbnail-image img {
width: auto;
height: 100%;
max-width: none;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
} .slz-carousel-centermode.slz-image-carousel,
.slz-carousel-center  {
margin: 0;
}
.slz-carousel-centermode.slz-image-carousel .item,
.slz-carousel-center .item {
padding: 0;
}
.slz-carousel-centermode:hover .btn-prev,
.slz-carousel-center:hover .btn-prev {
left: 22%;
}
.slz-carousel-centermode:hover .btn-next,
.slz-carousel-center:hover .btn-next {
right: 22%;
}
.slz-carousel-centermode .block-image:before,
.slz-carousel-center .block-image:before {
padding-top: 75.2%;
}
.slz-carousel-centermode .block-image:after,
.slz-carousel-center .block-image:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 3;
background-color: rgba(0, 0, 0, 0.5);
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.slz-carousel-centermode .slick-current .block-image:after,
.slz-carousel-center .slick-current .block-image:after {
opacity: 0;
visibility: hidden;
} @media screen and (max-width: 1024px) {
.slz-carousel-mockup .block-image:before,
.slz-image-carousel.slz-carousel-mockup.style-2 .block-image:before {
padding-top: 160%;
}
.slz-carousel-mockup .btn {
bottom: 15px;
}
}
@media screen and (max-width: 768px) {
.slz-carousel-mockup {
padding-top: 60px;
padding-bottom: 60px;
}
.slz-carousel-mockup .btn {
bottom: 17px;
}
}
@media screen and (max-width: 767px) {
.slz-image-carousel {
margin: 0 -10px;
}
.slz-carousel-syncing {
margin: 0 auto;
}
.slz-image-carousel .item {
padding: 0 10px;
}
.slz-carousel-mockup.style-2 .item {
padding: 0 10px 50px 10px;
}
.slz-carousel-mockup {
padding-top: 70px;
padding-bottom: 70px;
margin: 0;
}
.slz-carousel-mockup .slider-mockup {
min-width: 320px;
}
}
@media screen and (max-width: 480px) {
.slz-carousel-mockup.style-2 .item {
padding: 0 10px;
}
.slz-carousel-mockup.slz-image-carousel.style-2 .slick-dots {
bottom: 10px;
}
}
@media screen and (max-width: 414px) {
.slz-image-carousel.style-3 .item:nth-child(odd) {
margin-top: 0;
}
.slz-carousel-syncing .slider-for .image-gallery-wrapper:before {
padding-top: 100%;
}
}