.sp-smart-post-carousel-two { padding-bottom: 35px; } .sp-smart-post-carousel-two .sp-smart-post-carousel-center .swiper-slide-active.sp-slide-item { transform: scale(1.1); } .sp-smart-post-carousel-two .sp-smart-post-pagination-dots { // bottom: -50px !important; // left: 50% !important; } //--------- orientation two------------------ .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientations-two .image-overlay { width: 90%; height: 86% !important; position: absolute; top: 7%; left: 5%; z-index: 1; pointer-events: none; z-index: 1; pointer-events: none; } //--------- orientation three------------------ .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientation-three .image-overlay.overlay-custom, .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientation-three:hover .image-overlay.overlay-custom, .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientation-three .image-overlay.overlay-custom::after, .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientation-three:hover .image-overlay.overlay-custom::after { background: #00000000 !important; } .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientation-three .sp-smart-post-card-content { background: #00000080; } .sp-smart-post-carousel-two .sp-smart-post-card.overlay-type-orientation-three:hover .sp-smart-post-card-content { background: #000000ad; } //--------- orientation four------------------ .sp-smart-post-carousel-two .overlay-type-orientations-four .overlay-custom, .sp-smart-post-carousel-two .overlay-type-orientations-four:hover .overlay-custom, .sp-smart-post-carousel-two .overlay-type-orientations-four .overlay-custom::after, .sp-smart-post-carousel-two .overlay-type-orientations-four:hover .overlay-custom::after { background: #00000000 !important; } .sp-smart-post-carousel-two .overlay-type-orientations-four .sp-smart-post-card-content { background: #00000080; margin: 0% 4% 4% 4%; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title { transition: all 0.4s ease, opacity 0.4s ease-out, max-height 0.6s ease-out, margin 0.4s ease; } // single content hover animation........ .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-smart-post-title, .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-smart-post-category, .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-meta-data, .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-smart-post-read-more-button, .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-smart-post-excerpt-wrapper, .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-smart-post-social-share { opacity: 1 !important; // max-height: 100px !important; max-height: 100% !important; transition: opacity 0.4s ease-out, height 0.9s ease-out; } .sp-smart-post-carousel-two .sp-smart-post-card:hover .sp-smart-post-card-content { opacity: 1 !important; transform: translateY(0) translateX(0) scale(1) !important; transition: opacity 0.4s ease, transform 0.4s ease; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title { position: relative; display: inline-block; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:after { content: ""; position: absolute; transition: width 0.6s ease; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title::before { content: ""; position: absolute; transition: width 0.6s ease; } .sp-smart-post-carousel-two .sp-smart-post-category .sp-taxonomy-type-category a { border-width: 1px; } // Swiper navigation css. .sp-smart-post-swiper-nav-arrow { position: absolute; display: flex; .sp-smart-post-swiper-nav-arrow-btn.btn-prev i { transform: rotate(180deg); } } .sp-smart-post-swiper-nav-arrow { left: 0; z-index: 2; } .sp-smart-post-swiper-nav-arrow.visible-on-hover { opacity: 0; visibility: hidden; transition: all 0.3s linear; .btn-prev { transform: translateX(-20px); transition: all 0.3s linear; } .btn-next { transform: translateX(20px); transition: all 0.3s linear; } } .sp-smart-post-wrapper:hover .sp-smart-post-swiper-nav-arrow.visible-on-hover { opacity: 1; visibility: visible; .btn-prev { transform: translateX(0px); } .btn-next { transform: translateX(0px); } } .sp-smart-post-swiper-nav-arrow .sp-smart-post-swiper-nav-arrow-btn { position: relative; } // Pagination Dots css. .sp-smart-post-pagination-dot { padding: 5px 0; } .sp-pagination-horizontal { align-items: center; flex-wrap: wrap; max-width: 100%; } .sp-smart-post-block-wrapper .sp-smart-post-pagination-strokes.swiper-pagination-horizontal, .sp-smart-post-block-wrapper .sp-smart-post-pagination-dynamic.swiper-pagination-horizontal, .sp-smart-post-block-wrapper .sp-smart-post-pagination-numbers.swiper-pagination-horizontal, .sp-smart-post-block-wrapper .sp-smart-post-pagination-fraction.swiper-pagination-horizontal, .sp-smart-post-block-wrapper .sp-smart-post-pagination-dots.swiper-pagination-horizontal { transform: translate(-50%, -50%); left: 50%; display: flex; justify-content: center; position: absolute; z-index: 1; } .sp-smart-post-block-wrapper .sp-smart-post-pagination-fraction { transform: translateY(0) !important; color: var(--smart-post-secondary); } .sp-smart-post-pagination-fraction, .sp-smart-post-pagination-numbers .swiper-pagination-bullet { display: flex; justify-content: center; align-items: center; } .sp-smart-post-pagination-fraction { font-weight: 500; border-radius: 50%; transition: background 0.3s ease-in-out; } .sp-smart-post-pagination-strokes .swiper-pagination-bullet { width: 50px; transition: width 0.3s ease; } html[dir="rtl"] body.rtl .sp-smart-post-swiper-nav-arrow, html[dir="rtl"] body.rtl .sp-smart-post-timeline-container { direction: ltr; } .sp-smart-post-carousel .sp-smart-post-card-image a { height: 100%; } .sp-smart-post-slider .sp-smart-post-card-image img, .sp-smart-post-slider-two .sp-smart-post-card-image img, .sp-smart-post-thumbnail-slider .sp-smart-post-card-image img, .sp-smart-post-thumbnail-slider-two .sp-smart-post-card-image img { border-style: none !important; } .sp-smart-post-carousel-two .sp-smart-post-swiper-nav-arrow-btn i, .sp-smart-post-slider-two .sp-smart-post-swiper-nav-arrow-btn i, .sp-smart-post-timeline-three .sp-smart-post-swiper-nav-arrow-btn i { background: #4E4F52; border-color: #4E4F52; } .sp-smart-post-wrapper .sp-smart-post-swiper-nav-arrow-btn i:hover { background: var(--smart-post-secondary); border-color: var(--smart-post-secondary); } .sp-smart-post-block-wrapper .swiper-pagination-bullet { background: #cacbcf; } .sp-smart-post-block-wrapper .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--smart-post-secondary); } /* Carousel Navigation Arrow */ .sp-smart-post-swiper-nav-arrow-btn i { display: flex; justify-content: center; align-items: center; transition: 0.3s; cursor: pointer; } .sp-smart-post-swiper-nav-arrow { pointer-events: none; /* padding: 0 3px; */ transform: translate(0, -50%); } .sp-smart-post-swiper-nav-arrow .sp-smart-post-swiper-nav-arrow-btn { pointer-events: all; } .sp-smart-post-swiper-nav-arrow .sp-smart-post-swiper-nav-arrow-btn:focus { outline: none; } .sp-smart-post-swiper .sp-swiper-slide { width: auto; } .sp-smart-post-swiper .swiper-pagination { display: flex; align-items: center; justify-content: center; } .sp-pagination-horizontal .swiper-pagination-bullet { box-sizing: content-box; } //... .sp-smart-post-carousel-center .swiper-slide.sp-slide-item { transform: scale(0.9); opacity: .5; transition: transform 0.6s ease, opacity 0.6s ease; } .sp-smart-post-carousel-center .swiper-slide-active.sp-slide-item { transform: scale(1.1); opacity: 1; transition: transform 0.6s ease, opacity 0.6s ease; } .sp-smart-post-carousel-two .swiper-fade .swiper-slide, .sp-smart-post-carousel-two .swiper-cube .swiper-slide, .sp-smart-post-carousel-two .swiper-flip .swiper-slide { display: grid; } .sp-smart-post-carousel-two .sp-swiper-slide.layout-center .swiper-wrapper { padding-top: 40px; padding-bottom: 60px; max-height: -webkit-fill-available; } .sp-smart-post-carousel-two .sp-smart-post-swiper .swiper-fade .swiper-slide-prev, .sp-smart-post-carousel-two .sp-smart-post-swiper .swiper-fade .swiper-slide-next { opacity: 0 !important; visibility: hidden; } .sp-smart-post-carousel-two .sp-smart-post-swiper .swiper-fade .swiper-slide-visible { opacity: 1 !important; visibility: visible; transition: all 0.3s linear; } .sp-smart-post-carousel-two .swiper-coverflow .swiper-wrapper { padding: 1.5% 0; } .sp-smart-post-carousel-two .swiper .swiper-scrollbar, .sp-smart-post-carousel-two .swiper-scrollbar { width: 80%; left: 50%; transform: translateX(-50%); } .sp-smart-post-wrapper .swiper .swiper-scrollbar .swiper-scrollbar-drag, .sp-smart-post-wrapper .swiper-scrollbar .swiper-scrollbar-drag { width: 23%; background: var(--smart-post-secondary); } .sp-smart-post-carousel-two .swiper-pagination-bullet { box-sizing: content-box; } .sp-smart-post-carousel-two .sp-smart-post-pagination-strokes .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 50px; // transition: width 0.3s linear; } //... //....................................................................................................................... .sp-smart-post-carousel-center .swiper-slide.sp-slide-item { transform: scale(0.9); opacity: .5; transition: transform 0.6s ease, opacity 0.6s ease; } .sp-smart-post-carousel-center .swiper-slide-active.sp-slide-item { transform: scale(1.1); opacity: 1; transition: transform 0.6s ease, opacity 0.6s ease; } .sp-smart-post-carousel .swiper-fade .swiper-slide, .sp-smart-post-carousel .swiper-cube .swiper-slide, .sp-smart-post-carousel .swiper-flip .swiper-slide { display: grid; } .sp-smart-post-carousel .sp-swiper-slide.layout-center .swiper-wrapper { padding-top: 40px; padding-bottom: 60px; max-height: -webkit-fill-available; } .sp-smart-post-carousel .sp-smart-post-swiper .swiper-fade .swiper-slide-prev, .sp-smart-post-carousel .sp-smart-post-swiper .swiper-fade .swiper-slide-next { opacity: 0 !important; visibility: hidden; } .sp-smart-post-carousel .sp-smart-post-swiper .swiper-fade .swiper-slide-visible { opacity: 1 !important; visibility: visible; transition: all 0.3s linear; } .sp-smart-post-carousel .swiper-coverflow .swiper-wrapper { padding: 1.5% 0; } .sp-smart-post-carousel .swiper .swiper-scrollbar, .sp-smart-post-carousel .swiper-scrollbar { width: 80%; left: 50%; transform: translateX(-50%); } .sp-smart-post-wrapper .swiper .swiper-scrollbar .swiper-scrollbar-drag, .sp-smart-post-wrapper .swiper-scrollbar .swiper-scrollbar-drag { width: 23%; background: var(--smart-post-secondary); } .sp-smart-post-carousel .swiper-pagination-bullet { box-sizing: content-box; } .sp-smart-post-carousel .sp-smart-post-pagination-strokes .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 50px; // transition: width 0.3s linear; } .sp-smart-post-swiper-nav-arrow { z-index: 2; width: -webkit-fill-available; left: 0; } // Navigation arrow default style .sp-smart-post-swiper-nav-arrow { top: 50%; i { border-radius: 50%; } } // Pagination Dots css. .sp-smart-post-carousel .sp-smart-post-swiper-nav-arrow-btn i, .sp-smart-post-slider-two .sp-smart-post-swiper-nav-arrow-btn i, .sp-smart-post-timeline-three .sp-smart-post-swiper-nav-arrow-btn i { background: #4E4F52; border-color: #4E4F52; } /* sp_marquee */ .sp_marquee-container { overflow: hidden; position: relative; width: 100%; } .sp_marquee-content { display: inline-flex; animation: scroll linear infinite; } .sp_marquee-container::before { left: 0; background: linear-gradient(to right, white, transparent); } .sp_marquee-container::after { right: 0; background: linear-gradient(to left, white, transparent); } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } /* Horizontal base styles */ .sp_marquee-horizontal .sp_marquee-content { flex-direction: row; white-space: nowrap; } /* Left direction (default) */ .sp_marquee-left { animation-name: scroll-left; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% + var(--sps_extrawidth))); } } /* Right direction */ .sp_marquee-right { animation-name: scroll-right; } @keyframes scroll-right { 0% { transform: translateX(calc(-100% + var(--sps_extrawidth))); } 100% { transform: translateX(0); } } /* Horizontal gradient fade */ .sp_marquee-horizontal::before { left: 0; top: 0; bottom: 0; width: 50px; } .sp_marquee-horizontal::after { right: 0; top: 0; bottom: 0; width: 50px; } /* Vertical sp_marquee styles */ .sp_marquee-vertical { display: flex; flex-direction: column; white-space: normal; height: 200px; } .sp_marquee-up { animation: scroll-up linear infinite; } .sp_marquee-down { animation: scroll-down linear infinite; } @keyframes scroll-up { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } @keyframes scroll-down { 0% { transform: translateY(-100%); } 100% { transform: translateY(0); } } .sp-smart-post-carousel-two:not(.orientation_three) .sp-smart-post-category .sp-taxonomy-type-category a { color: #E1D8CE; background: #FFFFFF00; } .sp-smart-post-carousel-two .orientation_three .sp-smart-post-category .sp-taxonomy-type-category a { color: #023047; background: #fff; } // .sp-smart-post-carousel-two .sp-smart-post-carousel-center.sp-cat-position-top-left .sp-smart-post-carousel-center .sp-smart-post-category { // top: 14px // } .sp-smart-post-carousel-two .sp-smart-post-carousel-center.sp-cat-position-top-left .sp-smart-post-card-image .sp-smart-post-category { top: 14px !important } // // title animate effect.................................................. .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title { position: relative; display: inline-block; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:after { content: ""; position: absolute; transition: width 0.6s ease; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title::before { content: ""; position: absolute; transition: width 0.6s ease; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title .line { position: relative; display: inline-block; padding-bottom: 2px; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title .line::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; transform: scaleX(0); transition: transform 0.4s ease; z-index: -1; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line::after { transform: scaleX(1); } /* Using :nth-of-type to target only .line elements */ .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(1)::after { transition-delay: 0s; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(2)::after { transition-delay: 0.2s; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(3)::after { transition-delay: 0.4s; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(4)::after { transition-delay: 0.6s; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(5)::after { transition-delay: 0.8s; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(6)::after { transition-delay: 1s; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(7)::after { transition-delay: 1.2s; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(7)::after { transition-delay: 1.2s; } .sp-smart-post-carousel-two .sp-smart-post-card .sp-smart-post-title:hover .line:nth-of-type(8)::after { transition-delay: 1.4s; } .sp-smart-post-carousel-two .sp-content-on-hover .overlay-type-orientations-two .sp-smart-post-card-image .image-overlay { opacity: 0; transition: all 0.3s ease; } .sp-smart-post-carousel-two .sp-content-on-hover .overlay-type-orientations-two:hover .sp-smart-post-card-image .image-overlay { opacity: 1; } // Image overlay solid & gradient color transition .sp-smart-post-card.overlay-type-orientation-three .sp-smart-post-card-content { transition: all 0.3s ease-in-out; } .sp-smart-post-card.overlay-type-orientation-three .sp-smart-post-card-content:after, .sp-smart-post-card.overlay-type-orientations-four .sp-smart-post-card-content:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s ease-in-out; } .sp-smart-post-card.overlay-type-orientation-three:hover .sp-smart-post-card-content:after, .sp-smart-post-card.overlay-type-orientations-four:hover .sp-smart-post-card-content:after { opacity: 1; transition: opacity 0.3s ease-in-out; } // @keyframes marqueeAnimation { // 0% { transform: translateX(0); } // 100% { transform: translateX(-100%); } // } // .rfm-marquee { // display: flex; // white-space: nowrap; // animation: marqueeAnimation var(--duration) linear infinite; // } // .rfm-initial-child-container { // display: flex; // display: flex; // white-space: nowrap; // } // .rfm-marquee-container { // overflow: hidden; // display: flex; // }