.container .staffGroup {
	text-align: center;
}
.staffGroup > div {
	margin-bottom: 3px;
}
#pageData  > .container{
    padding: 0px 1em 0px 1em;
    margin: 1em auto;
}
.staffProfile {
	max-width: 1100px;
}
.joinDate {
	margin-bottom: 0.25em;
}
.joinDate > span {
	font-weight: bold;
}
.staffStats:not(:last-of-type) {
    margin-bottom: 0.15em;
}
.staffStats {
    margin-left: 0.5em;
}
.staff .newTwitchSVG, #staffName .newTwitchSVG {
	    height: 1em;
    width: 1em;
}
.staff .daNewHrLogo, #staffName .daNewHrLogo {
	    height: 1em;
    width: 1em;
}
#staffContainer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6em;
    margin: 1em;
    max-width: 1250;
    max-width: 1250px;
    margin: 0 auto;
    justify-content: ;
    margin: 0 auto;
    justify-content: center;
}
.container h1, 
.container h2,
 .container h3, 
 .container h4, 
 .container h5, 
 .container h6 {
	 color: white;
 }
.staff p {
	margin: 0 0 0 0;
}
.staff {
	display: flex;
	flex-direction:column;
	    padding: 2em;
    /* margin: 0 1em 1em 1em; */
	padding: 1em;
	/* background-color: #374c5e;; */
	/* align-self: flex-start; */
	flex-grow:2;
	    margin: 2px;
	flex-basis: 350px;
gap: 0.1em;
max-width: 400px;
}


 .socials,  .socials a {
	    display: flex;
    align-items: center;
}
#staffName {
	font-size: 2em;
	font-weight: bold;
	display: inline-flex;
	align-items: center;
}
#staffName .socials {
	gap: 0.25em;
	display: inline-flex;
}
#staffName > span {
	margin-right: 0.25em;
}
.staff .socials {

    gap: 0.25em;
    font-size: 1.5em;
}

.staff .rankAndLinks {
	    display: flex;
    justify-content: space-between;
    align-items: center;
}
.staff > .footer {
	display: flex;
	justify-content:space-between;
	align-items:center;
		margin-top: auto;

}


.staff .heading {
margin-bottom: 0.2em;
	font-weight: bold;
}
.staff .heading .rank{
	font-size: 1.5em;
}
.shortBio {
}

.staff .heading .name{
			font-size: 2em;

	display: inline-block;
}
.staff .avatar {
	max-height: 75px;
	float: left;
    margin: 0 0.25em 0.25em 0;
    margin: 0 1em 1em 0;
}

#recruitment {
	text-align: center;
}

#staffHeader {
	display: flex;
	justify-content: space-between;
}
.topRow {
		display: flex;
	justify-content: space-between;
	align-content: flex-start;
    align-items: flex-start;

}

.topRow > div {
margin: 0 2em 1em;
	display: inline-block;
}
#staffBio {
    max-width: 800px;
}

#staffBio p {
	margin: 0.5em 0.5em;
	    line-height: 1.4rem
}
#staffBio h1 {
	font-size: 1.5em;
}
#holder > div:not(.staffAction) {
	text-align:center;
}
.staffAction  h2 {
	text-align:center;
}
#holder {
    float: right;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 0.5em 1em;
}
#holder h2 {
	margin: 0px;
	
}
.container .header {
		color: white;

	text-align: center;
}

.staffStats {
}
#staffAvatar {
    float: left;
    display: inline;
    background-size: cover;
    width: 150px;
    height: 150px;
    background-blend-mode: screen;
    backface-visibility: hidden;
    margin-right: 1em;
    margin-bottom: 0.25em;
}

@media (max-width: 500px) {
	#holder {
		width: 100% !important;
	}
	#staffContainer {
		justify-content:space-around;
	}
	#staffName {
		text-align:center;
		width:100%;
		flex-direction: column;
	}
	#staffAvatar {
		float: unset;
		display: block  !important;
		margin: 0 auto !important;
	}
}

.online {
	
}

.online svg {
    animation-name:onlineGlow;
  animation-duration:9s;
      animation-iteration-count: infinite;
animation-delay: 3s;
}
.online svg .st1 {
	animation-name:redFill;
	animation-duration:9s;
	  animation-iteration-count: infinite;
	animation-delay: 3s;
}
@keyframes onlineGlow {

  0%{
	  transform: scale(1.3);
	fill: red;
  }
  3% {
	  	  transform: scale(1.3);

	  transform: rotate(-10deg);

  }

  6% {
	  transform: scale(1.3);

	  transform: rotate(+10deg);

  }

  8% {
	  transform: rotate(-10deg);
		  transform: scale(1);


  }
  13% {
	  transform: scale(1);
  }
  15%, 100% {
	  transform: scale(1);

  }

}
@keyframes redFill {

  0%{
	fill: red;
  }
  3% {

  }

  6% {


  }

  8% {



  }
  13% {
  }
  15%, 100% {
	  fill:#9146FF;

  }

}


#Sqwidlet .name {
	color: #05f3fb;
}