/*Visual Focus Indicators for Accessibility*/
.card-container:focus {
  outline: 2px solid rgb(0, 0, 255, 0.5);
  outline-offset: 2px;
}

.card-container .profile-flip-plus:focus {
  outline: 2px solid rgb(0, 0, 255, 0.5);
  outline-offset: 2px;
}

/*End Visual Focus Indicators*/
/*Media Queries for Front and Back Height and Width which will override what's commented out below, which is old*/
/*Wide Screens*/
@media (min-width: 1850px) {

  .card-container,
  .front,
  .back {
    width: 466px;
    height: 630px;
  }
}

/*End Wide Screens*/
/*Wide Screens
/*Average SCreens*/
@media (min-width: 992px) {

  .card-container,
  .front,
  .back {
    width: 375px;
    height: 541px;
  }
}

/*End Average Screens*/
/*Smaller Screens*/
@media (max-width: 991px) {

  .card-container,
  .front,
  .back {
    width: 100%;
    height: 100vh;
  }
}

/*End Smaller Screens*/
/*End New Media Queries*/

/*Desktop CSS*/
/*.card-container, .front, .back {
	width: 100%;
	height: 100vh;
  min-height: 200px;
}*/

.card-container {
  position: relative;
}

/*.front, .back {
	position: absolute;
	top: 0;
	left: 0;
	backface-visibility: hidden;
	overflow: hidden;
	transition: transform .8s ease;
}
.back {
	transform: rotateY(180deg);
}
.card-container:active .front {
	transform: rotateY(-180deg);
}
.card-container:active .back {
	transform: rotateY(0deg);
}*/

.front,
.back {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  overflow: hidden;
  transition: transform .8s ease;
}

.back {
  transform: rotateY(180deg);
}

.card-container.clicked .front {
  transform: rotateY(-180deg);
}

.card-container.clicked .back {
  transform: rotateY(0deg);
}

/* My CSS */

.card-profile-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  /*border: 10px solid var(--color-000000);*/
}

.card-container img {
  float: none !important;
  margin: 0px !important;
}

.card-container .field--type-image {
  float: none !important;
  margin: 0px !important;
}

.card-container .profile-flip-front-text {
  position: absolute;
  bottom: 0px;
}

.card-container .profile-flip-name-title div {
  display: inline;
}

.card-container .profile-flip-name-title .profile-flip-quote {
  line-height: 170%;
}

.card-container .front,
.card-container .back {
  color: var(--color-000000) !important;
}

.card-container .profile-flip-back-text {
  padding: 30px;
  position: absolute;
  top: 10%;
}

.card-container .profile-flip-quote p {
  line-height: 170%;
}

@media screen and (max-width: 991px) {
  .card-container .profile-flip-back-text {
    padding-top: 50px !important;
    position: absolute;
    top: 0px !important;
  }

  .card-container .profile-flip-quote-back-header p {
    margin-bottom: 0px !important;
  }
}

@media only screen and (max-width: 1299px) and (min-width: 992px) {
  .card-container .profile-flip-back-text {
    padding: 10px;
    top: 10px;
  }
}

.card-container .profile-flip-front-text {
  padding-top: 2%;
  width: 100%;
  padding-bottom: 30px;
  padding-left: 30px;
  padding-right: 30px;
  background-color: var(--color-white);
  height: 9em;
  min-height: 9em;
  max-height: 190px;
}

.card-container .profile-flip-front-text h3,
.card-container .profile-flip-back-text h3 {
  font-size: var(--fs-38px);
  font-family: var(--ff-dopislight-sans-serif);
  line-height: 128%;
}

.profile-flip-name-title {
  font-size: var(--fs-14px);
  padding-bottom: 20px;
  width: 85%;
  font-weight: 400;
  line-height: 128%;
}

.card-container .profile-flip-quote-front-header {
  font-family: var(--ff-dopislight-sans-serif);
  font-size: var(--fs-38px);
  line-height: 128%;
  color: var(--color-2D2A1F);
}

.card-container .profile-flip-quote-front-header a {
  text-decoration: underline !important;
  color: var(--color-white) !important;
  font-weight: bold;
}

.card-container .profile-flip-quote-front-header a:hover {
  font-weight: bold;
  text-decoration: none !important;
  color: var(--color-white) !important;
}

.card-container .profile-flip-quote-back-header {
  font-size: var(--fs-32px);
  font-weight: bold;
  line-height: 1.2;
}

.card-container .profile-flip-quote-back-header a {
  color: var(--color-000000) !important;
  text-decoration: underline !important;
  font-weight: bold;
}

.card-container .profile-flip-quote-back-header a:hover {
  color: var(--color-000000) !important;
  text-decoration: none !important;
  font-weight: bold;
}

.card-container .profile-flip-back-text .profile-flip-quote {
  font-size: var(--fs-16px);
  padding: 0 0 10px 0;
}

.card-container .profile-flip-back-text .profile-flip-quote-link a {
  text-decoration: none !important;
  color: var(--color-000000);
  font-size: var(--fs-16px);
  padding-bottom: 3px;
  border-bottom: 4px solid var(--color-spring-violet-a100);
}

.card-container .profile-flip-back-text .profile-flip-quote-link a:hover {
  text-decoration: none !important;
  border-bottom: 4px solid var(--color-spring-violet-a50);
}
.profile-flip-plus {
  color: var(--color-black) !important;
  width: 30px;
  height: 30px; /* adjust as needed */
  background:
    linear-gradient(to right, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%),
    linear-gradient(to bottom, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
  color: #000; /* sets the plus color */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% 50%, 50% 50%;
}
.back .profile-flip-plus {
  color: var(--color-black) !important;
  width: 30px;
  height: 30px; /* adjust as needed */
  background:
    linear-gradient(to bottom, transparent 45%, currentColor 45%, currentColor 55%, transparent 55%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50% 50%;
}
.profile-flip-plus:hover {
  cursor: pointer;
}
.profile-flip-flip {
  text-transform: uppercase;
  font-size: var(--fs-0-75em);
}

.card-container .front .field--type-image {
  height: 100%;
}

.card-container .front .field--type-image img {
  height: 100% !important;
  width: 100% !important;
}

/*Setting Job field as Inline Block*/
.profile-flip-back-text .profile-flip-job-formatted>div {
  display: inline !important;
}

.profile-flip-back-text .profile-flip-job-formatted>div>p {
  display: inline !important;
}

/*End Setting Job field as Inline Block*/

/*Setting the image on the back to display none*/

/*.card-container .back .flip-content .field--name-field-image {
	display: none;
}*/
/*Resetting margins to 0px on flip content div*/
.flip-content div {
  margin: 0px !important;
}

.flip-content {
  margin: 0px !important;
}

/*End resetting margins*/
/*End Desktop CSS*/

/*Mobile CSS*/
/*@media (max-width: 991px) {
	.card-container .front {
		display: none !important;
	}
	.flip-content div {
	margin: 0px !important;
}

.flip-content {
	margin: 0px !important;
}
.flip-content img {
	padding: 5%;
}
.profile-flip-back-text {
	padding: 5%;
}
.field--name-field-first-name {
	float: left;
}
.field--name-field-first-name::after {
	content: "\00a0";
}
/*.profile-flip-divider {
	display: none;
}*/
/*}
/*End Mobile CSS*/
/*Image Zoom Effect CSS*/
/*.card-container img {
	width: 100%;
  transition: 0.5s all ease-in-out;
}*/
.card-container img {
  transform: translateZ(0);
  width: 100%;
  transition: 0.15s all ease-in-out;
  -webkit-transition: 0.15s all ease-in-out;
  /* Safari and older versions of Chrome */
  -moz-transition: 0.15s all ease-in-out;
  /* Old versions of Firefox */
}

.card-container:hover img {
  transform: scale(1.05);
}

.card-container img:not(:hover) {
  transform: scale(1);
}

/*Hopefully fixing the weird thing with flipping on Chrome*/
.card-container .back img {
  display: none;
}

/*End Chrome*/
/*Image Zoom Effect CSS*/
/*Profile Flip Text CSS*/
.profile-flip-wrapper {
  position: absolute;
  top: 20px;
  right: 20px;
  text-align: center;
  background-color: var(--color-lehigh-yellow);
  border-radius: 50%;
  padding: 2px;
  width: 35px;
  height: 35px;
  z-index: 10;
}

.profile-flip-flip {
  display: none !important;
}

/*.profile-flip-grad-year:not(:empty):before {
    content: "\2019";
}*/
.profile-flip-grad-year .field {
  margin-left: -3px !important;
}

/*Link CSS*/
.profile-flip-back-text .profile-flip-name-title a {
  font-size: var(--fs-14px);
  border-bottom: none !important;
  font-weight: 400;
}

.profile-flip-back-text .profile-flip-name-title a:hover {
  color: var(--color-3069f4);
  border-bottom: none !important;
  font-weight: 450;
}

/*End Link CSS*/
/*End Profile Flip Text CSS*/

/*Chat CSS*/
.front {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card-container,
.front,
.back {
  width: 100%;
  height: auto;
  border-radius: 40px;
}

/*End Chat CSS*/
/*Hiding the Name on the front*/
.front .profile-flip-name-title {
  display: none !important;
}

/*End Name Hiding*/
/*Sizing Media Queries*/
@media (min-width: 1300px) and (max-width: 1500px) {
  .profile-flip-back-text .profile-flip-quote-back-header {
    font-size: var(--fs-22px);
  }

  .profile-flip-back-text .profile-flip-quote {
    font-size: var(--fs-14px) !important;
  }

  .profile-flip-front-text .profile-flip-quote-front-header {
    font-size: var(--fs-32px);
  }
}

@media screen and (max-width: 991px) {
  .profile-flip-back-text .profile-flip-quote {
    font-size: var(--fs-17px) !important;
  }

  .profile-flip-back-text .profile-flip-quote-back-header {
    font-size: var(--fs-26px);
  }
}

@media (min-width: 992px) and (max-width: 1299px) {
  .profile-flip-back-text .profile-flip-quote-back-header {
    font-size: var(--fs-18px);
  }

  .profile-flip-back-text .profile-flip-quote {
    font-size: var(--fs-12px) !important;
  }

  .profile-flip-back-text .profile-flip-name-title {
    font-size: var(--fs-12px);
  }

  .profile-flip-back-text .profile-flip-name-title a {
    font-size: var(--fs-12px);
  }

  .profile-flip-back-text .profile-flip-quote-link a {
    font-size: var(--fs-12px) !important;
  }

  .profile-flip-front-text .profile-flip-quote-front-header {
    font-size: var(--fs-24px);
  }
}

@media screen and (max-width: 991px) {
  .profile-flip-front-text .profile-flip-quote-front-header {
    font-size: var(--fs-32px);
  }

  .profile-flip-back-text .profile-flip-quote {
    font-size: var(--fs-14px) !important;
  }

  .profile-flip-back-text .profile-flip-quote-back-header {
    font-size: var(--fs-24px);
  }

  .card-container .profile-flip-back-text .profile-flip-quote-link a {
    font-size: var(--fs-14px) !important;
  }

  .card-container .profile-flip-quote p {
    margin-bottom: 0px !important;
  }

  .card-container h3 {
    margin-bottom: 0px !important;
  }
}

/*End Sizing Media Queries*/
/*Accessibility CSS*/
.paragraph--type--component-card-profile-flip .card-container .profile-flip-job-formatted a {
  text-decoration: underline !important;
}

.paragraph--type--component-card-profile-flip .card-container .profile-flip-back-text {
  display: none;
}

.paragraph--type--component-card-profile-flip .card-container .profile-flip-back-button {
  display: none;
}

.paragraph--type--component-card-profile-flip .clicked .profile-flip-back-text {
  display: block !important;
  color: var(--color-2D2A1F);
}

.paragraph--type--component-card-profile-flip .clicked .profile-flip-back-button {
  display: block !important;
}

.paragraph--type--component-card-profile-flip .card-container .profile-flip-front-text {
  display: block !important;
}

.paragraph--type--component-card-profile-flip .card-container .profile-flip-front-button {
  display: block !important;
}

.paragraph--type--component-card-profile-flip .clicked .profile-flip-front-text {
  display: none !important;
}

.paragraph--type--component-card-profile-flip .clicked .profile-flip-front-button {
  display: none !important;
}

.profile-flip-wrapper {
  border: none !important;
}

/*End Accessibility CSS*/
/*Tweak to get the titles on 2 rows on the front*/
.profile-flip-wrapper .profile-flip-front-text .profile-flip-quote-front-header {
  width: 88%;
}

.leaders-with-purpose-paragraph-wrapper .profile-flip-front-text .profile-flip-quote-front-header {
  width: 88%;
}

/*End teak to get the titles on 2 rows on the front*/
/*Responsive Font Sizes*/
@media screen and (min-width: 1700px) {
  .card-container .profile-flip-quote-front-header {
    font-size: var(--fs-2-25rem) !important;
    /* Base size for largest breakpoint */
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-name-title {
    font-size: var(--fs-0-875rem) !important;
  }

  .paragraph--type--component-card-profile-flip .card-container .profile-flip-job-formatted a {
    font-size: var(--fs-0-875rem) !important;
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-quote-back-header {
    font-size: var(--fs-2-0rem) !important;
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-quote {
    font-size: var(--fs-1-0rem) !important;
  }

  .card-container .profile-flip-back-text .profile-flip-quote-link a {
    font-size: var(--fs-0-875rem) !important;
  }
}

@media (min-width: 1501px) and (max-width: 1699px) {
  .card-container .profile-flip-quote-front-header {
    font-size: var(--fs-2-0rem) !important;
    /* Scaled down from 2.25rem */
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-name-title {
    font-size: var(--fs-0-775rem) !important;
    /* Scaled proportionally */
  }

  .paragraph--type--component-card-profile-flip .card-container .profile-flip-job-formatted a {
    font-size: var(--fs-0-775rem) !important;
    /* Scaled proportionally */
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-quote-back-header {
    font-size: var(--fs-1-75rem) !important;
    /* Scaled proportionally */
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-quote {
    font-size: var(--fs-0-875rem) !important;
    /* Scaled proportionally */
  }

  .card-container .profile-flip-back-text .profile-flip-quote-link a {
    font-size: var(--fs-0-775rem) !important;
    /* Scaled proportionally */
  }
}

@media (min-width: 1251px) and (max-width: 1499px) {
  .card-container .profile-flip-quote-front-header {
    font-size: var(--fs-1-75rem) !important;
    /* Further scaled down */
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-name-title {
    font-size: var(--fs-0-7rem) !important;
    /* Scaled proportionally */
  }

  .paragraph--type--component-card-profile-flip .card-container .profile-flip-job-formatted a {
    font-size: var(--fs-0-7rem) !important;
    /* Scaled proportionally */
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-quote-back-header {
    font-size: var(--fs-1-5rem) !important;
    /* Scaled proportionally */
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-quote {
    font-size: var(--fs-0-75rem) !important;
    /* Scaled proportionally */
  }

  .card-container .profile-flip-back-text .profile-flip-quote-link a {
    font-size: var(--fs-0-7rem) !important;
    /* Scaled proportionally */
  }
}

@media (min-width: 1024px) and (max-width: 1250px) {
  .card-container .profile-flip-quote-front-header {
    font-size: var(--fs-1-50rem) !important;
    /* Original smallest size, now for this range */
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-name-title {
    font-size: var(--fs-0-65rem) !important;
  }

  .paragraph--type--component-card-profile-flip .card-container .profile-flip-job-formatted a {
    font-size: var(--fs-0-65rem) !important;
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-quote-back-header {
    font-size: var(--fs-1-25rem) !important;
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-quote {
    font-size: var(--fs-0-65rem) !important;
  }

  .card-container .profile-flip-back-text .profile-flip-quote-link a {
    font-size: var(--fs-0-65rem) !important;
  }
}

@media (min-width: 992px) and (max-width: 1023px) {
  .card-container .profile-flip-quote-front-header {
    font-size: var(--fs-1-25rem) !important;
    /* Original smallest size, now for this range */
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-name-title {
    font-size: var(--fs-0-55rem) !important;
  }

  .paragraph--type--component-card-profile-flip .card-container .profile-flip-job-formatted a {
    font-size: var(--fs-0-55rem) !important;
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-quote-back-header {
    font-size: var(--fs-1-0rem) !important;
  }

  .paragraph--type--component-card-profile-flip .profile-flip-back-text .profile-flip-quote {
    font-size: var(--fs-0-55rem) !important;
  }

  .card-container .profile-flip-back-text .profile-flip-quote-link a {
    font-size: var(--fs-0-55rem) !important;
  }
}

/*End Responsive Font Sizes*/