.shqSite-hero {
	z-index: 0;
	display: flex;
	position: relative;
	width: 100%;
	min-height: 37.5rem;
}
.shqSite-hero {
	position: absolute;
	bottom: -270px;
	top: 0;
	right: 0;
}
.hero-activity-feed {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    perspective: 1400px;
    perspective-origin: 10% -90%;
    pointer-events: none;
    transform-style: preserve-3d;
    /*overflow: hidden;*/
}

@media (max-width: 25.875em) {
.hero-activity-feed {
	perspective-origin: 50% 45%
}
}
.hero-activity-feed-grid {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 20px;
	right: 0;
	width: 75%; /*100%*/
	height: 100%;
	transform: rotateX(90deg);
	transform-style: inherit;
}

@media (max-width: 25.875em) {
.hero-activity-feed-grid {
	top: 225px
}
}
.hero-activity-feed-grid .line {
	position: absolute;
	top: -500px;
	bottom: 0;
	left: 20px;
	width: 1px;
	background-color: transparent;
	background-image: -webkit-linear-gradient(rgba(0,0,0,0.1) 85%,transparent);
	background-image: linear-gradient(rgba(0,0,0,0.1) 85%,transparent);
	-webkit-backface-visibility: hidden;
}
.hero-activity-feed-grid .line:nth-child(1) {
	left: 0;
}
.hero-activity-feed-grid .line:nth-child(2) {
	left: 33.3%;
}
.hero-activity-feed-grid .line:nth-child(3) {
	left: 66.6%;
}
.hero-activity-feed-grid .line:nth-child(4) {
	left: 100%;
}
.hero-activity-feed-columns {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	transform-style: inherit;
}
.hero-activity-feed-columns .column {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	transform-style: inherit;
}
.hero-activity-feed-columns .column:nth-child(1) {
	left: 0;
	-webkit-animation: UserEventMotion 17s linear infinite;
	-moz-animation: UserEventMotion 17s linear infinite;
	animation: UserEventMotion 17s linear infinite;
}
.hero-activity-feed-columns .column:nth-child(2) {
	left: 33.3%;
	-webkit-animation: UserEventMotion2 20s linear infinite;
	-moz-animation: UserEventMotion2 20s linear infinite;
	animation: UserEventMotion2 20s linear infinite;
}
.hero-activity-feed-columns .column:nth-child(3) {
	left: 66.6%;
	-webkit-animation: UserEventMotion3 35s linear infinite;
	-moz-animation: UserEventMotion3 35s linear infinite;
	animation: UserEventMotion3 35s linear infinite;
}
.hero-activity-feed-columns .column:nth-child(4) {
	left: 100%;
	-webkit-animation: UserEventMotion4 25s linear infinite;
	-moz-animation: UserEventMotion4 25s linear infinite;
	animation: UserEventMotion4 25s linear infinite;
}
/*.hero-activity-feed-columns .column:nth-child(5) {
	left: 100%;
	-webkit-animation: UserEventMotion1 25s linear infinite;
	-moz-animation: UserEventMotion1 25s linear infinite;
	animation: UserEventMotion1 25s linear infinite;
}
.hero-activity-feed-columns .column:nth-child(6) {
	left: 33.3%;
	-webkit-animation: UserEventMotion3 20s linear infinite;
	-moz-animation: UserEventMotion3 20s linear infinite;
	animation: UserEventMotion3 20s linear infinite;
	animation-play-state: paused;
}*/
.hero-activity-feed .user-event {
	position: absolute;
	bottom: 0;
	left: calc(50% - 2rem);
	z-index: 5;
	display:block;
}
.hero-activity-feed .user-event:nth-child(1) {
	z-index: 4;
}
.hero-activity-feed .user-event:nth-child(2) {
	z-index: 3;
}
.hero-activity-feed .user-event:nth-child(3) {
	z-index: 2;
}
.hero-activity-feed .user-event:nth-child(4) {
	z-index: 1;
}
.hero-activity-feed .user-event::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 10px;
	background-color: transparent;
	background-image: -webkit-radial-gradient(25% 50%, rgba(0,0,0,0.05), transparent);
	background-image: radial-gradient( at 25% 50%, rgba(0,0,0,0.05), transparent);
	overflow: visible;
	opacity: 0;
	/*-webkit-animation: UserBodyMotion 15s ease infinite;
	-moz-animation: UserBodyMotion 15s ease infinite;
	animation: UserBodyMotion 15s ease infinite;*/
}

.hero-activity-feed .user-event.blue .user-event__marker {
	background: #4597cf
}
.hero-activity-feed .user-event.blue .user-event__marker:after {
	border-color: #4597cf
}
.hero-activity-feed .user-event.blue .user-event__flag {
	background: #FFF
}
.hero-activity-feed .user-event.blue .user-event__name {
	color: #4597cf
}
.hero-activity-feed .user-event.blue .user-event__action {
	color: #4597cf;
}
.hero-activity-feed .user-event.blue .user-event__response {
	color: #FFF;
	background: #4597cf
}
.hero-activity-feed .user-event.darkgreen .user-event__marker {
	background: #349a02
}
.hero-activity-feed .user-event.darkgreen .user-event__marker:after {
	border-color: #349a02
}
.hero-activity-feed .user-event.darkgreen .user-event__flag {
	background: #FFF
}
.hero-activity-feed .user-event.darkgreen .user-event__name {
	color: #349a02
}
.hero-activity-feed .user-event.darkgreen .user-event__action {
	color: #349a02;
}
.hero-activity-feed .user-event.darkgreen .user-event__response {
	color: #FFF;
	background: #349a02
}
.hero-activity-feed .user-event.pink .user-event__marker {
	background: #e03962
}
.hero-activity-feed .user-event.pink .user-event__marker:after {
	border-color: #e03962
}
.hero-activity-feed .user-event.pink .user-event__flag {
	background: #FFF
}
.hero-activity-feed .user-event.pink .user-event__name {
	color: #e03962
}
.hero-activity-feed .user-event.pink .user-event__action {
	color: #e03962;
}
.hero-activity-feed .user-event.pink .user-event__response {
	color: #FFF;
	background: #e03962
}
.hero-activity-feed .user-event.seagreen .user-event__marker {
	background: #00adbd
}
.hero-activity-feed .user-event.seagreen .user-event__marker:after {
	border-color: #00adbd
}
.hero-activity-feed .user-event.seagreen .user-event__flag {
	background: #FFF
}
.hero-activity-feed .user-event.seagreen .user-event__name {
	color: #00adbd
}
.hero-activity-feed .user-event.seagreen .user-event__action {
	color: #00adbd;
}
.hero-activity-feed .user-event.seagreen .user-event__response {
	color: #FFF;
	background: #00adbd
}
.hero-activity-feed .user-event__marker {
	display: block;
	height: 1.5rem;
	width: 1.5rem;
	margin-top: 3rem;
	margin-left: 1.5rem;
	border-radius: 50%;
	box-shadow: rgba(0,0,0,0.3) 0 10px 15px -2px;
	-webkit-transform: rotateX(60deg);
	-moz-transform: rotateX(60deg);
	-ms-transform: rotateX(60deg);
	-o-transform: rotateX(60deg);
	transform: rotateX(60deg)
}
.hero-activity-feed .user-event__marker:after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: 2px solid transparent;
	border-radius: 100%;
	-webkit-animation: ping 1.5s 0.5s ease infinite;
	-moz-animation: ping 1.5s 0.5s ease infinite;
	animation: ping 1.5s 0.5s ease infinite
}
.hero-activity-feed .user-event__flag {
	z-index: 2;
	display: flex;
	align-items: center;
	position: relative;
	width: 15rem;
	padding: 0.5rem;
	border-radius: 0.25rem;
	box-shadow: rgba(0,0,0,0.05) 0 0 15px;
	/*-webkit-animation: UserFlagMotion 15s ease infinite;
	-moz-animation: UserFlagMotion 15s ease infinite;
	animation: UserFlagMotion 15s ease infinite*/
}
.hero-activity-feed .user-event__avatar {
	flex-shrink: 0;
	margin-right: 1rem;
	height: 4rem;
	width: 4rem;
	border-radius: 50%;
	box-shadow: rgba(255,255,255,0.75) 0 0 30px;
	background-size: cover
}
.hero-activity-feed .user-event__body {
	flex: 1;
	text-shadow: #fff 0 0 15px;
	/*-webkit-animation: UserBodyMotion 15s ease infinite;
	-moz-animation: UserBodyMotion 15s ease infinite;
	animation: UserBodyMotion 15s ease infinite*/
}
.hero-activity-feed .user-event__name {
	font-size: 1rem;
	font-weight: bold
}
.hero-activity-feed .user-event__status {
	font-size: 0.75rem
}
.hero-activity-feed .user-event__action {
	z-index: 1;
	position: relative;
	width: 15rem;
	margin-top: 0.25rem;
	padding: 0.5rem;
	font-size: 0.75rem;
	font-weight: bold;
	border-radius: 0.25rem;
	/*-webkit-animation: UserActionMotion 15s ease infinite;
	-moz-animation: UserActionMotion 15s ease infinite;
	animation: UserActionMotion 15s ease infinite*/
}
.hero-activity-feed .user-event__response {
	z-index: 1;
	position: relative;
	width: 15rem;
	margin-top: 0.25rem;
	padding: 0.5rem;
	font-size: 0.75rem;
	font-weight: bold;
	border-radius: 0.25rem;
	/*-webkit-animation: UserResponseMotion 15s ease infinite;
	-moz-animation: UserResponseMotion 15s ease infinite;
	animation: UserResponseMotion 15s ease infinite;
	-webkit-animation-delay: 0.75s;
	-moz-animation-delay: 0.75s;
	animation-delay: 0.75s;
	opacity: 0*/
}



/*# sourceMappingURL=app.css.map */





@keyframes ping {
0% {
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
opacity:1
}
50% {
opacity:1
}
100% {
-webkit-transform:scale(2);
-moz-transform:scale(2);
-ms-transform:scale(2);
-o-transform:scale(2);
transform:scale(2);
opacity:0
}
}

@keyframes UserBodyMotion {
 0% {
  transform:translate3d(0, 0, 0);
  opacity:0
 }
 15% {
  transform:translate3d(0, 0, 0);
  opacity:0
 }
 17.5% {
  transform:translate3d(0, 0, 0);
  opacity:1
 }
 72.5% {
  transform:translate3d(-20px, 0, 0);
  opacity:1
 }
 75% {
  opacity:0
 }
 100% {
  opacity:0
 }
}

/*@keyframes UserShadow {
0% {
opacity:0
}
15% {
opacity:0
}
17.5% {
opacity:1
}
75% {
opacity:1
}
100% {
opacity:0
}
}*/
@keyframes UserEventMotion {
0% {
-webkit-transform:translate3d(0, 0, 1200px);
-moz-transform:translate3d(0, 0, 1200px);
-ms-transform:translate3d(0, 0, 1200px);
-o-transform:translate3d(0, 0, 1200px);
transform:translate3d(0, 0, 1200px);
opacity:0
}
15% {
opacity:1
}
50% {
opacity:1
}
70% {
opacity:.6
}
85% {
opacity:0.2
}
100% {
-webkit-transform:translate3d(0, 0, -1500px);
-moz-transform:translate3d(0, 0, -1500px);
-ms-transform:translate3d(0, 0, -1500px);
-o-transform:translate3d(0, 0, -1500px);
transform:translate3d(0, 0, -1500px);
opacity:0
}
}

/*
@-webkit-keyframes UserEventMotion {
0% {
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
opacity:0
}
15% {
opacity:1
}
50% {
opacity:1
}
75% {
opacity:0
}
100% {
-webkit-transform:translate3d(0, 0, -1500px);
-moz-transform:translate3d(0, 0, -1500px);
-ms-transform:translate3d(0, 0, -1500px);
-o-transform:translate3d(0, 0, -1500px);
transform:translate3d(0, 0, -1500px);
opacity:0
}
}
@-moz-keyframes UserEventMotion {
0% {
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
opacity:0
}
15% {
opacity:1
}
50% {
opacity:1
}
75% {
opacity:0
}
100% {
-webkit-transform:translate3d(0, 0, -1500px);
-moz-transform:translate3d(0, 0, -1500px);
-ms-transform:translate3d(0, 0, -1500px);
-o-transform:translate3d(0, 0, -1500px);
transform:translate3d(0, 0, -1500px);
opacity:0
}
}
*/



@keyframes UserEventMotion2 {
0% {
-webkit-transform:translate3d(0, 0, 300px);
-moz-transform:translate3d(0, 0, 300px);
-ms-transform:translate3d(0, 0, 300px);
-o-transform:translate3d(0, 0, 300px);
transform:translate3d(0, 0, 300px);
opacity:0
}
15% {
opacity:1
}
50% {
opacity:1
}
75% {
opacity:0
}
100% {
-webkit-transform:translate3d(0, 0, -1500px);
-moz-transform:translate3d(0, 0, -1500px);
-ms-transform:translate3d(0, 0, -1500px);
-o-transform:translate3d(0, 0, -1500px);
transform:translate3d(0, 0, -1500px);
opacity:0
}
}



@keyframes UserEventMotion3 {
0% {
-webkit-transform:translate3d(0, 0, 900px);
-moz-transform:translate3d(0, 0, 900px);
-ms-transform:translate3d(0, 0, 900px);
-o-transform:translate3d(0, 0, 900px);
transform:translate3d(0, 0, 900px);
opacity:0
}
15% {
opacity:1
}
50% {
opacity:1
}
70% {
opacity:0.6
}
85% {
opacity:0.2
}
100% {
-webkit-transform:translate3d(0, 0, -1500px);
-moz-transform:translate3d(0, 0, -1500px);
-ms-transform:translate3d(0, 0, -1500px);
-o-transform:translate3d(0, 0, -1500px);
transform:translate3d(0, 0, -1500px);
opacity:0
}
}



@keyframes UserEventMotion4 {
0% {
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
-ms-transform:translate3d(0, 0, 0);
-o-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
opacity:0
}
15% {
opacity:1
}
50% {
opacity:1
}
70% {
opacity:0.5
}
85% {
opacity:0.1
}
100% {
-webkit-transform:translate3d(0, 0, -1500px);
-moz-transform:translate3d(0, 0, -1500px);
-ms-transform:translate3d(0, 0, -1500px);
-o-transform:translate3d(0, 0, -1500px);
transform:translate3d(0, 0, -1500px);
opacity:0
}
}