.breakpoint-tablet-portrait .view-shortlist-demo .highlight__box,
.breakpoint-mobile-only .view-shortlist-demo .highlight__box {
  margin-bottom: 0;
  padding: 2rem;
  display: flex;
  align-items: center;
}
  .breakpoint-mobile-only .view-shortlist-demo .highlight__box {
    flex-direction: column;
  }

.breakpoint-mobile-only .shortlist-tile .profile-tile__activities,
.breakpoint-mobile-only .shortlist-tile--removable .profile-tile__activities {
  width: 70%;
}
  .breakpoint-mobile-only .shortlist-tile .profile-tile__activities .profile-tile__activities-bubbles,
  .breakpoint-mobile-only .shortlist-tile--removable .profile-tile__activities .profile-tile__activities-bubbles {
    justify-content: space-between;
  }

.profile-tile__details .shortlist__button {
  position: absolute;
  right: 1.8rem;
  top: 31%;
  width: 4rem;
  height: 4rem;
  z-index: 5;
  display: block;
  background-color: var(--color-secondary);
  border-radius: 100%;
  transition: background-color 0.15s ease-in, transform 0.25s cubic-bezier(0.88, 1.73, 0.42, 1.23);
}

.shortlist-tile--removable .profile-tile__details .shortlist__button {
  top: 20%;
}
.path-user .profile-tile__details .shortlist__button {
  top: 25%;
}

  .profile-tile__details .shortlist__button::after {
    content: '';
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    bottom: 1.2rem;
    left: 1.2rem;
    z-index: 2;
    background-image: url(/themes/custom/stem_women/assets/images/star.svg);
    background-repeat: no-repeat;
    background-size: contain;
    transition: background-color 200ms ease-in, transform 500ms ease-out;
  }
    .profile-tile__details .shortlist__button.shortlist__button--selected::after {
      background-image: url(/themes/custom/stem_women/assets/images/checkbox-white.svg);
      transform: rotate(360deg);
      top: 1.3rem;
      right: 1.1rem;
      bottom: 1.1rem;
      left: 1.3rem;
    }

  .profile-tile__details .shortlist__button::before {
    content: '';
    visibility: visible;
    position: absolute;
    display: block;
    z-index: -1000;
    transition: all ease-out 0.5s, visibility 10ms 2s ease-in;
    top: -25%;
    right: -25%;
    bottom: -25%;
    left: -25%;
    display: none;
    background-repeat: no-repeat;
    background-image:  
      radial-gradient(circle, #FAA84E 20%, transparent 20%),
      radial-gradient(circle,  transparent 20%, #FAA84E 20%, transparent 30%),
      radial-gradient(circle, #FAA84E 20%, transparent 20%), 
      radial-gradient(circle, #FAA84E 20%, transparent 20%),
      radial-gradient(circle,  transparent 10%, #FAA84E 15%, transparent 20%),
      radial-gradient(circle, #FAA84E 20%, transparent 20%),
      radial-gradient(circle, #FAA84E 20%, transparent 20%),
      radial-gradient(circle, #FAA84E 20%, transparent 20%),
      radial-gradient(circle, #FAA84E 20%, transparent 20%),
      radial-gradient(circle, #FAA84E 20%, transparent 20%), 
      radial-gradient(circle, #FAA84E 20%, transparent 20%),
      radial-gradient(circle,  transparent 10%, #FAA84E 15%, transparent 20%),
      radial-gradient(circle, #FAA84E 20%, transparent 20%),
      radial-gradient(circle, #FAA84E 20%, transparent 20%),
      radial-gradient(circle, #FAA84E 20%, transparent 20%),
      radial-gradient(circle, #FAA84E 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%, 10% 10%, 18% 18%, 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 10% 10%, 20% 20%;
  }
.profile-tile__details .shortlist__button.shortlist__button--selected::before {
  display: block;
  animation: bubblespread ease-in-out 0.75s forwards;
}


@keyframes bubblespread {
  0%{
    background-position: 5% 45%, 10% 45%, 10% 45%, 15% 45%, 25% 45%, 25% 45%, 40% 45%, 55% 55%, 70% 55%, 10% 55%, 30% 55%, 55% 55%, 70% 55%, 85% 55%, 70% 55%, 70% 55%;
  }
  50% {
      background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%, 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;}
  100% {
    background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%, 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
    background-size: 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%, 0% 0%, 0% 0%,  0% 0%,  0% 0%,  0% 0%,  0% 0%;
  }
}


.profile-tile__details .shortlist__button:hover {
  background-color: var(--color-secondary-light);
  cursor: pointer;
}
.profile-tile__details .shortlist__button:active {
  background-color: var(--color-secondary-dark);
}

  .profile-tile--horizontal .shortlist__button {
    top: unset;
    left: unset;
    bottom: 0.5rem;
    left: 7rem;
    z-index: 3;
  }

.preload .profile-tile__details .shortlist__button::before,
.preload .profile-tile__details .shortlist__button {
  -webkit-transition: none!important;
  -moz-transition: none!important;
  -ms-transition: none!important;
  -o-transition: none!important;
  transition: none!important;
  animation: none!important;
  -webkit-animation: none!important;
  -moz-animation: none!important;
  -ms-animation: none!important;
  -o-animation: none!important;

}
.preload .profile-tile__details .shortlist__button::before {
  visibility: hidden;
}


.profile-tile__details .shortlist__button--selected {
  background-color: var(--color-tertiary);
}

.titlesection__box--shortlist {
  margin-bottom: unset;
}

.shortlist__heading {
  display: flex;
  align-items: center;
  justify-content: center;
}
  .shortlist__contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2.7rem 0 1rem 0;
  }
    .shortlist__contact img {
      width: 25px;
    }
a:hover.shortlist__contact {
  color: #fff;
}

    .shortlist__contact span {
      color: var(--color-primary);
      font-size: var(--text-small);
      font-family: var(--condensed-font); 
    }
  .shortlist__heading h1,
  .shortlist__heading a span {
    color: var(--color-white);
  }