/* Basic styling for the slider container */
.tms-team-member-slider {
    width: 100%;
    margin: 0 auto;
}

.artist-name-slider {
	    font-size: 1.25em;
    margin: 0;
    color: #333;
	margin-bottom: -20px !important;
    background: white;
    width: fit-content;
    padding: 10px;
}

.artist-credits-slider {
	    background: white;
    color: black;
    padding: 10px;
    width: fit-content;
}

.info-container {
	    margin-top: -100px;
    z-index: 10000;
    position: relative;
}

.main-slider-wrap {
	max-width: var(--wp--style--global--wide-size);
	background: black;
	margin-block-start: 0px;
	
}

.swiper-wrapper {
    display: flex;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
}


/* Card hover effect */


.tms-card-front {
    padding: 15px;
    text-align: center;
}

.tms-profile-photo {
    width: 300px;
    height: auto;
    margin-bottom: 15px;
}

.tms-card-front h3 {
    font-size: 1.25em;
    margin: 10px 0;
    color: #333;
}

.tms-card-front p {
    font-size: 1em;
    color: #777;
}



/* Back of the card */
.tms-card-back {
    text-align: center;
	color: white;
}

.tms-card-back p {
    font-size: 1em;
    color: white;
    margin-bottom: 10px;
}

.tms-card-back a {
    display: inline-block;
    margin: 5px;
    color: #1da1f2;
    text-decoration: none;
}

.tms-card-back a:hover {
    text-decoration: underline;
}

/* Show the back of the card when hovering */


/* Swiper Navigation Buttons */
.swiper-button-next, .swiper-button-prev {
    color: #000;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    padding: 10px;
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 0.8);
}

/* Swiper Pagination */
.swiper-pagination {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.swiper-pagination-bullet {
    background-color: #000;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.swiper-pagination-bullet:hover {
    opacity: 1;
}

/* Media Queries for responsiveness */
@media (max-width: 640px) {
    .tms-team-member-card {
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .tms-team-member-card {
        max-width: 80%;
    }
}

@media (max-width: 1024px) {
    .tms-team-member-card {
        max-width: 70%;
    }
	.hide-on-mobile, .swiper-button-next, .swiper-button-prev {
 display: none !important;
}
	
	.tms-profile-photo {
    width: 171px !important;
    height: auto;
    margin-bottom: 15px;
}
	
	.less-margin-on-mobile {
		margin-top: 200px;
	}
}

.tms-team-member-card .tms-card-inner {
	
    transform-style: preserve-3d; /* Allows child elements to transform in 3D space */
    transition: transform 0.6s ease; /* Smooth transition for the inner card */
    position: relative;
}

.tms-team-member-card.tms-3d-hover .tms-card-inner,  .tms-team-member-card:focus-within .tms-card-inner {
    transform: rotateY(180deg); /* Rotates the card 180 degrees on hover */
}

.tms-card-front, .tms-card-back {

    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Hides the back side when facing away */
}


.tms-card-back {
    transform: rotateY(180deg); /* Flips the back side so it appears correct when rotated */
	position: absolute;
	top: 0;
}

.tms-card-back:focus-within {
	opacity: 1 !important;
}

.tms-card-back img {
filter: invert(1);}