/* General Styles */
.title-icon {
  width: 100px;
}

#hs_cos_wrapper_widget_1695330505566 {
  height: 100% !important;
}

/* Card Styles */
.cards {
  grid-gap: 1.5rem;
  grid-auto-rows: 1fr;
  padding: 3rem;
   background: whitesmoke;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.mvp-card {
	perspective: 40rem;
	display: flex;
	transition: z-index 0.8s, transform calc(var(--time) / 4) 0.8s;
	transition-delay: 0.8s, 0s;
	text-decoration: none;
	color: inherit;
	z-index: 0;
}

.mvp-body {
	display: flex;
	transform-style: preserve-3d;
	transition: 0.8s transform;
	border-radius: 0.25rem;
}

/* .mvp-card:hover .mvp-body,
.mvp-card:focus .mvp-body {
	 transform: rotateY(-180deg);
} */

.mvp-card.flipped .mvp-body {
	transform: rotateY(-180deg);
}

.card-front,
.card-back {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	border: none;
	backface-visibility: hidden;
	min-width: 100%;
}

.card-front {
	background: linear-gradient(130deg, transparent 30px, white 0px);
	font-size: 1.5rem;
}

.card-front img {
	width: 100%;
	-webkit-clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%, 0 10%);
}

.player-name {
	color: #0045a4;
	font-weight: 700;
  display: inline;
	padding-right: 10px;
}

/* Social Icons */

.social-icons a {
	background-color: #def4ff;
}

.social-icons a,
.card-back .flip-btn {
	padding: 5px 8px;
	margin-right: 5px;
}



.flip-btn  {
	cursor: pointer;
	color: #0045a4;
	border: none;
	padding: 0;
	background-color: transparent;
	color: #48c6ff;
	text-decoration: underline;
}

.follow-cta {
  color: #0045a4;
	border: none;
	padding: 0;
	background-color: transparent;
	color: #48c6ff;
}

.name-bio a {
	color: #48c6ff;
}

.card-back {
	transform: rotateY(180deg) translate(100%, 0);
	background: linear-gradient(225deg, transparent 30px, #0045a4 0px);
	color: #fff;
}

.card-back .inner-container {
	height: 100%;
	width: 100%;
	background-color: blue;
}

.card-back .back-icons a,
.card-back .back-icons .flip-btn {
	background-color: #0196ed;
}

.card-back .flip-btn {
	text-decoration: none;
}

/* Info Section */
.info p {
	margin-bottom: 4px;
}

.info span {
	font-weight: 700;
}

/* Bio Section */
.bio-container {
	position: relative;
/* 	height: 100px;
	overflow: scroll;
	display: none; */
}

.bio {
	color: #fff;
	transition: max-height 0.3s ease;
}

.read-bio-button {
	background-color: #007bff;
	color: #fff;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
}

/* New */

/* Hide the "Read More" button by default */
.read-more-btn {
	display: none;
}

/* Limit the displayed characters to 100 */
.bio-container p.bio::after {
	content: "...";
	display: inline;
	visibility: hidden;
}

/* Show the "Read More" button when the screen width is 1400px or larger */
@media (max-width: 1400px) {
	.read-more-btn {
		display: inline-block;
	}

	/* Hide the ellipsis after the first 100 characters */
	.bio-container p.bio::after {
		content: "";
		visibility: visible;
	}
}

@media only screen and (max-width: 400px) {
  .card-front {
    height: 335px;
  } 
}