@-webkit-keyframes marquee {
  0% {
    -webkit-transform: translateX(100vw);
    transform: translateX(100vw); }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }

@keyframes marquee {
  0% {
    -webkit-transform: translateX(100vw);
    transform: translateX(100vw); }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

.toggle__staff__image__text {
  background-color: #745b99;
  padding: 10px 20px;
  display: inline-block; }

.staff__heading {
  font-size: 1.35em;
  margin: 1em 0;
  text-transform: capitalize; }
  .staff__heading:empty {
    display: none; }

.staff__list {
  text-align: center;
  margin: 0 -1em 2em;
  list-style: none;
  padding: 0;
  width: 100%; }

.staff__item {
  width: 100%;
  margin: 0 2em 2em 0;
  text-align: left;
  padding: 0 1em;
  text-align: center;
  cursor: pointer; }
  .staff__item:hover .staff__item__image {
    margin: 5px auto 33px;
    width: 190px;
    height: 190px; }
    .staff__item:hover .staff__item__image img {
      opacity: 0.41; }
    .staff__item:hover .staff__item__image .fa-plus {
      opacity: 1; }
    .staff__item:hover .staff__item__image::before {
      border: 7px solid #fff; }
    .staff__item:hover .staff__item__image::after {
      opacity: 1; }

.staff__item__image {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background-color: #424242;
  -webkit-box-shadow: 0px 0px 50px rgba(7, 60, 94, 0.2);
  box-shadow: 0px 0px 50px rgba(7, 60, 94, 0.2);
  -webkit-transition: height 0.4s, width 0.4s, margin 0.4s;
  -o-transition: height 0.4s, width 0.4s, margin 0.4s;
  transition: height 0.4s, width 0.4s, margin 0.4s; }
  .staff__item__image::before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    border-radius: 50%;
    border: 13px solid #fff;
    -webkit-transition: border 0.4s;
    -o-transition: border 0.4s;
    transition: border 0.4s;
    z-index: 2; }
  .staff__item__image::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -130px;
    margin-left: -130px;
    height: 260px;
    width: 260px;
    background-image: url("/_site/images/design/staff-text.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-animation-name: spin;
    animation-name: spin;
    -webkit-animation-duration: 60s;
    animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s; }
    .staff__no__text__image .staff__item__image::after {
      display: none; }
  .staff__item__image img {
    height: 100%;
    width: 100%;
    border-radius: 50%;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s; }
  .staff__item__image .fa-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 2;
    color: #fff;
    font-size: 3em;
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
    transition: opacity 0.4s; }

.staff__item__title {
  padding-top: 1.5em; }
  .staff__item__title:after {
    content: "";
    width: 50px;
    height: 3px;
    display: inline-block;
    margin-top: 1em;
    margin-bottom: 1em;
    background: #424242; }
  .staff__item__title h3 {
    margin: 0;
    text-transform: none; }
  .staff__item__title p {
    margin: 0;
    opacity: .6;
    font-size: .95em; }
  .related__container .staff__item__title:after {
    display: none; }

.staff__item__text {
  position: relative;
  overflow: hidden; }

.staff__item__name {
  font-size: 1.0625em;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.41176em;
  margin: 0 0 0.29412em;
  color: #424242; }

.staff__item__role {
  font-size: 0.9375em;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4em;
  margin: 0;
  color: #424242; }

.staff__item__intro {
  text-transform: none;
  max-height: 205px;
  overflow: auto;
  font-family: "Poppins", sans-serif;
  width: calc(100% + 8px);
  padding-right: 1.5em;
  -webkit-transition: width .2s ease, padding .2s ease;
  -o-transition: width .2s ease, padding .2s ease;
  transition: width .2s ease, padding .2s ease;
  scrollbar-width: thin;
  scrollbar-color: #424242 rgba(66, 66, 66, 0.2);
  -ms-overflow-style: -ms-autohiding-scrollbar; }
  .staff__item__intro::-webkit-scrollbar-track {
    background-color: rgba(66, 66, 66, 0.2);
    border-radius: 0px;
    -webkit-transition: background-color .2s ease;
    -o-transition: background-color .2s ease;
    transition: background-color .2s ease; }
  .staff__item__intro::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background-color: #424242;
    -webkit-transition: background-color .2s ease;
    -o-transition: background-color .2s ease;
    transition: background-color .2s ease; }
  .staff__item__intro::-webkit-scrollbar {
    width: 6px; }
  .staff__item__intro:hover {
    width: 100%;
    padding-right: 1em; }

.staff__popup__container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: rgba(66, 66, 66, 0.75);
  z-index: 99;
  -webkit-transition: opacity 0.4s, visibility 0.4s;
  -o-transition: opacity 0.4s, visibility 0.4s;
  transition: opacity 0.4s, visibility 0.4s; }
  .mason--admin .staff__popup__container {
    top: 110px; }
  .mason--preview .staff__popup__container {
    top: 110px; }
  .mason--secure .staff__popup__container {
    top: 40px; }
  .staff__popup__container:not(.active) {
    opacity: 0;
    visibility: hidden;
    top: 100%; }

.staff__popup {
  width: 90%;
  height: 85%; }

.staff__popup__close {
  position: absolute;
  z-index: 102;
  top: 0;
  right: 0;
  height: 50px;
  width: 50px;
  background-color: #424242;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 1.5em;
  -webkit-transition: background-color 0.4s, color 0.4s;
  -o-transition: background-color 0.4s, color 0.4s;
  transition: background-color 0.4s, color 0.4s; }
  .staff__popup__close:hover {
    background-color: #e68b38; }

.staff__popup__item {
  height: 100%;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #292929 #757575;
  -ms-overflow-style: -ms-autohiding-scrollbar; }
  .staff__popup__item::-webkit-scrollbar {
    width: 10px; }
  .staff__popup__item::-webkit-scrollbar-track {
    background-color: #757575;
    border-radius: 10px; }
  .staff__popup__item::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #292929; }
  .staff__popup__item .staff__popup__image {
    width: 100%;
    aspect-ratio: 1/1; }

.staff__popup__item__info {
  padding: 30px 20px; }

@media all and (min-width: 600px) {
  .staff__heading {
    font-size: 1.55em; }
  .staff__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; }
  .staff__item {
    width: 50%;
    margin: 0 0 2em; } }

@media all and (min-width: 600px) and (min-aspect-ratio: 1 / 2) {
  .staff__popup {
    max-width: 1024px;
    max-height: 600px; }
  .staff__popup__item {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    overflow: hidden; }
    .staff__popup__item .staff__popup__image {
      width: 45%;
      margin-right: 5%;
      -ms-flex-negative: 0;
      flex-shrink: 0; }
  .staff__popup__item__info {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #292929 #757575;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    padding: 50px 5% 50px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .staff__popup__item__info::-webkit-scrollbar {
      width: 10px; }
    .staff__popup__item__info::-webkit-scrollbar-track {
      background-color: #757575;
      border-radius: 10px; }
    .staff__popup__item__info::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background-color: #292929; }
  .staff__popup__item__info__inner {
    margin: auto 0; } }

@media all and (min-width: 1025px) {
  .staff__heading {
    font-size: 1.85em; } }

@media all and (min-width: 1301px) {
  .staff__heading {
    font-size: 2.25em; }
  .staff__item {
    width: 33.3333%;
    margin: 0 0 4em; } }

.staff__item__flex {
  width: 100%; }

@media all and (min-width: 600px) {
  .staff__item__flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0 3em; }
    .staff__item__flex .staff__item__image {
      max-width: 450px;
      width: 35%;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      margin-right: 5%; }
    .staff__item__flex .staff__item__title h3 {
      font-size: 2em; } }