/*
Theme Name: Marti Child Theme
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Marti Child Theme
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.0.3.03
Updated: 2024-06-04 18:36:02

*/
:root {
--item-width: 150px;
--item-height: 150px;
--item-gap: 40px;
--item-width-current: 150px;
}

.team-custom-slider-holder {
            width: 100%;
            min-height: calc(var(--item-width)*2 + 100px);
        }

       
        .slick-track{
            transition: all ease-in .6s;
        }

        .team-custom-slider-mobile .ts-item{
            transition: all ease-in .3s;
            transition: none;
        }
        .team-custom-slider-mobile .ts-item .ts-contentside{
            transition: all ease-in .3s;
        }
        .team-custom-slider-mobile .ts-item.slick-current .ts-contentside{
            transition: all ease-in .6s;
        }
        .team-custom-slider-mobile .ts-item .ts-thumb{
            transition: all ease-in .6s;
            transition: none;
        }
        .team-custom-slider-mobile .ts-item.slick-current .ts-thumb{
            transition: all ease-in .6s;
            /* transition: none; */
        }

        .team-custom-slider-mobile.slick-slider {
            position: relative;
        }
        

        .team-custom-slider-mobile .ts-item {
            display: flex !important;
            flex-direction: row;
            align-items: stretch;
            gap: var(--item-gap);
            position: relative;
            box-sizing: border-box;
            width:var(--item-width) ;
            min-width:var(--item-width) ;
        }
        .team-custom-slider-mobile .ts-item .ts-thumb{
            padding-right: calc(var(--item-gap) / 2);
            padding-left: calc(var(--item-gap) / 2);
            width:var(--item-width);
            max-width: 100%;
            height: calc(var(--item-height) - var(--item-gap));
        }
        .team-custom-slider-mobile .ts-item.slick-current {
            /* display: block !important; */
            height: auto;
            width:var(--item-width-current);
        }
        .team-custom-slider-mobile .ts-item .ts-thumb img {
            height: 100%;
            width:100%;
            object-fit: cover;
            object-position: top center;
        }
        .team-custom-slider-mobile .ts-item.slick-current .ts-thumb{
            width:100%;
            height: calc(var(--item-width)*2 + var(--item-gap));
        }
        /* .team-custom-slider-mobile .ts-item.slick-current .ts-thumb img {
            width:100%;
            height: 100%;
         } */
        
        .team-custom-slider-mobile .ts-item .ts-contentside {
			font-family: "Urbanist", Sans-serif;
            color: #fff;
            display: flex;
            flex-direction: column;
            gap: 10px;
            width:calc(50vw -  var(--item-width-current)*.5 - var(--item-gap)*2);
            position: absolute;
            top: calc(var(--item-height) );
            left: calc(var(--item-width-current) + var(--item-gap)*.5);
            transform: scale(0);
            height: calc(100% - var(--item-height) );
			direction: ltr!important;
        }
        .team-custom-slider-mobile .ts-item.slick-current .ts-contentside{
            transform: scale(1);
        }

        
        .ts-contentside .ts-position {
            font-size: 16px;
			font-weight: 500;
        }

        .ts-contentside .ts-title {
            font-size: 32px;
			font-weight: 600;
            line-height: 1.25;
        }

        .ts-contentside .ts-bio {
            padding-top: 20px;
			font-size: 16px;
            font-family: inherit;
			font-weight: 500;
			line-height: 48px;
			max-width: 340px;
        }
        .team-custom-slider-mobile.slick-slider .slick-arrow.slick-disabled {
                opacity: .3;
            }
        .team-custom-slider-mobile.slick-slider .slick-arrow {
            position: absolute;
            top: -85px;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #fff;
            border-radius: 40px;
			cursor: pointer;
        }

        .team-custom-slider-mobile.slick-slider .slick-arrow svg {
            fill: #fff;
            width: 12px;
        }

        .team-custom-slider-mobile.slick-slider .slick-prev {
            left: calc(var(--item-width)*2 + var(--item-gap)*.5);
        }

        .team-custom-slider-mobile.slick-slider .slick-next {
            left: calc(var(--item-width)*4 - var(--item-gap)*1.5);
        }
		
.slick-slide.slick-cloned {
	display:none!important;
}
        @media screen and (max-width:1200px) {
            .team-custom-slider-mobile.slick-slider .slick-prev {
                left: 15px;
            }
            .team-custom-slider-mobile.slick-slider .slick-next {
                left: calc(var(--item-width)* 2 - var(--item-gap)* 2);
            }
            .team-custom-slider-mobile .ts-item.slick-current {
                /* width:var(--item-width-current) !important; */
            }
            .team-custom-slider-mobile .ts-item .ts-contentside {
                width:calc(100vw -  var(--item-width-current)*1 - var(--item-gap)*2);
                
            }
        }

        @media screen and (max-width:768px) {
            .team-custom-slider-mobile.slick-slider .slick-arrow.slick-disabled {
                opacity: .3;
            }
            .team-custom-slider-holder {
				min-height: 0;
			}
            .team-custom-slider-mobile.slick-slider .slick-arrow {
                top: 140px;
                z-index: 100;
            }
            .team-custom-slider-mobile.slick-slider .slick-prev {
                left: 15px;
            }
            .team-custom-slider-mobile.slick-slider .slick-next {
                left: auto;
                right: 15px;
            }
            .team-custom-slider-mobile .ts-item {
                flex-direction: column;
                align-items: center;
                padding: 0 15px;
            }
            .team-custom-slider-mobile .ts-item.slick-current {
                /* width:var(--item-width-current) !important; */
            }
            .team-custom-slider-mobile .ts-item .ts-thumb,
            .team-custom-slider-mobile .ts-item.slick-current .ts-thumb{
                width: 300px;
                height: 300px;
                padding: 0;
            }
             
            .team-custom-slider-mobile .ts-item .ts-contentside {
                width:100%;
                position: static;
                top: var(--item-gap);
                left: 0;
                height: auto;
                align-items: center;
                text-align: center;
            }
            .team-custom-slider-mobile .ts-item .ts-contentside{
                transition: none;
                transform: scale(1);
            }
            .team-custom-slider-mobile .ts-item.slick-current .ts-contentside{
                transition: none;
            }
            .team-custom-slider-mobile .ts-item .ts-thumb{
                transition: none;
                /* transition: none; */
            }
			.slick-track{
                transition: all ease-in .25s;
            }
        }
        @media screen and (max-width:421px) {
            .team-custom-slider-mobile.slick-slider .slick-arrow {
                top: 90px;
            }
            .team-custom-slider-mobile .ts-item .ts-thumb,
            .team-custom-slider-mobile .ts-item.slick-current .ts-thumb{
                width: 200px;
                height: 200px;
            }
        }