* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.team-members-section article {float: left; margin: 40px 0; }

.page-template-about body {
	height: 100vh;
	display: flex;
	perspective: 1000px;
	transform-style: preserve-3d;
	position: relative;
}
.page-template-about .team-members-section { width: 900px; margin: auto; display: block; position: relative; }

.page-template-about .team-members-section .member-content {width: 70%; float: right; line-height: 1.2; font-size: 15px;}
.page-template-about .team-members-section .member-content strong {font-size: 22px; line-height: 1;}
.page-template-about .team-members-section .member-content .your-passion-title {font-size: 18px; line-height: 1; margin: 20px 0; display: block; font-weight: 600;}

.member-photo-front, .member-photo-back { width: 140px; height: 140px; overflow: hidden; border-radius: 15px; }
.member-photo-front {border: 5px solid var(--primary-color);}
.member-photo-back {border: 5px solid var(--secondary-color);}
.member-photo-front img, .member-photo-back img {display: block; margin: 0px auto 20px auto; width: 140px;	 height: auto;}

.member-info {width: 160px; float: left; margin: 0 20px 40px 0; line-height: 1.1; }
.member-info p {margin: 0 0 20px 10px;}
.member-info a {color: var(--dark-grey);}
.member-info a:hover {color: var(--secondary-color);}
.member-content h2 {padding: 20px 0 20px 0}

.card-photo {
  width: 140px;
  height: 140px;
  perspective: 500px;
  display: inline-block;
  margin: 0 0 20px 0;
}

.card-photo .content-photo {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1s;
  transform-style: preserve-3d;
  animation: autoFlip 4s infinite alternate;
}

.card-photo:hover .content-photo {
  transform: rotateY( 180deg ) ;
  transition: transform 0.5s;
}
.front-photo, .back-photo {
  position: absolute;
  height: 100%;
  width: 100%;
  background: white;
  line-height: 1;
  backface-visibility: hidden;
}
.front-photo {}
.back-photo {
  color: white;
  transform: rotateY( 180deg );
}
/* Animation */
@keyframes autoFlip {
  0% { transform: rotateY(0deg); }
  50% { transform: rotateY(0deg); } /* Stay on front */
  100% { transform: rotateY(180deg); } /* Flip to back */
}

/* 
.team-members-section .container:hover {
	transform: rotateY(180deg);
} */

.my-passion {border-bottom: 5px solid var(--secondary-color); border-radius: 15px; background-color: white; color: var(--secondary-color); text-align: center; width: 100%; display: block; padding: 12px 10px; font-weight: 600;}

 @media (max-width: 800px) {
 .page-template-about .team-members-section {width: 100%;}
 .member-info {margin: 0;}
 /* .member-photo img {width: 100px; height: 100px;} */
 .team-members-section .container {width: 450px; height: 450px;}
}
 @media (max-width: 700px) {
	 .page-template-about .team-members-section .member-content {width: 65%;}
 	/* .member-info {display: none;} */
	/* .member-info-mobile {display: inline-block; margin: 40px 0 40px 0; width: 130px;} */
	.team-members-section .container { width: 480px; height: 600px; float: left; }	 
	.team-members-section .content {width: 65%; }
 }
 @media (max-width: 600px) {
	.page-template-about .full-width {width: 100%; }
 }