.home-powerflow-wrapper {
  width: 800px;
  margin: auto;
  overflow: visible;
  height: auto;
  min-height: 770px;
  h3 {
    font-weight: 400;
    letter-spacing: 1px;
    text-align: center;
  }
}

.powerflow-components-wrapper {
  display: grid;
  grid-template-areas:
    'component1 transfer13 transfer13 transfer13 component3'
    'transfer12 transfer1 hub transfer3 transfer34'
    'transfer12 transfer2 hub transfer4 transfer34'
    'component2 transfer24 transfer24 transfer24 component4';
  padding: 10px;
  grid-column-gap: 10px;
  grid-row-gap: 25px;
}

@keyframes shadow-breathe-animation {
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
.powerflow-component {
  height: 150px;
  width: 150px;
  border: 2px solid #484947;
  border-radius: 100%;
  padding: 30px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  transition: all ease 0.5s;
}
/* using (not) a pseudo element to create silky smooth shadow transitions */
.powerflow-component-pseudo {
  content: '';
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 100%;
  box-shadow: 0 0 12px 6px;
  translate: -20% -58%;
  
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

.powerflow-cell-label {
  margin: 0 auto;
  text-align: center;
  color: #E2E3DE;
}
.powerflow-cell-label-top {
  margin-bottom: 13px;
}
.powerflow-cell-label-bottom {
  margin-top: 13px;
}
.powerflow-component img {
  height: 55px;
  width: 100%;
  object-fit: contain;
  user-drag: none; 
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.powerflow-cell-data-wrapper {
  position: absolute;
  bottom: 16%;
  width: 100%;
  left: 0;
  font-size: 13pt;
  font-weight: 300;
  color: #fff;
}

.powerflow-hub-data-wrapper {
  position: absolute;
  text-align: center;
  font-size: 13pt;
  font-weight: 300;
  color: #fff;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  translate: 0 -50%;
}

.powerflow-hub {
  grid-area: hub;
  position: relative;
  width: 200px;
  padding: 0 10px;
  img {
    height: 200px;
    width: 100%;
    object-fit: contain;
    margin: auto;
    user-drag: none; 
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
  }
}

.powerflow-component1 {
  grid-area: component1;
}
.powerflow-component2 {
  grid-area: component2;
}
.powerflow-component3 {
  grid-area: component3;
}
.powerflow-component4 {
  grid-area: component4;
}

/* transfer lines */
.powerflow-transfer-vertical {
  width: 2px;
  height: 200px;
  background-color: #484947;
  margin: 0 auto;
  border-radius: 3px;
  position: relative;
}
.powerflow-transfer-horizontal {
  height: 2px;
  background-color: #484947;
  border-radius: 3px;
}
.powerflow-transfer-horizontal-container {
  position: relative;
  top: 50%;
  margin: 0 auto;
  width: 90%;
}

.powerflow-transfer12 {
  grid-area: transfer12;
}
.powerflow-transfer13 {
  grid-area: transfer13;
}
.powerflow-transfer24 {
  grid-area: transfer24;
}
.powerflow-transfer34 {
  grid-area: transfer34;
}

/* skewed transfer lines */
.powerflow-transfer-tl2br {
  grid-area: transfer1;
  background-color: #484947;
  height: 2.5px;
  width: 120px;
  rotate: 33deg;
  border-radius: 3px;
}
.powerflow-transfer-bl2tr {
  grid-area: transfer2;
  background-color: #484947;
  height: 2.5px;
  width: 120px;
  rotate: -33deg;
  border-radius: 3px;
}
.powerflow-transfer-tr2bl {
  grid-area: transfer3;
  background-color: #484947;
  height: 2.5px;
  width: 120px;
  rotate: -33deg;
  border-radius: 3px;
}
.powerflow-transfer-br2tl {
  grid-area: transfer4;
  background-color: #484947;
  height: 2.5px;
  width: 120px;
  rotate: 33deg;
  border-radius: 3px;
}

/* transfer indicators and corresponding animations */
.transfer-indicator {
  width: 6px;
  height: 6px;
  border-radius: 100%;
  background-color: #00FF6C;
  box-shadow: 0 0 6px 4px #00FF6C;
  position: relative;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  z-index: 10;
}

@keyframes vertical-transfer-animation {
  0%    {top: 0%; opacity: 0%;}
  10%   {opacity: 100%;}
  90%   {opacity: 100%}
  100%  {bottom: 100%; opacity: 0%;}
}
.transfer-indicator-vertical {
  left: -2px;
  top: 100%;
  bottom: 0%;
  animation-name: vertical-transfer-animation;
}

@keyframes horizontal-transfer-animation {
  0%   {left: 0%; opacity: 0%;}
  10%   {opacity: 100%;}
  90%   {opacity: 100%}
  100% {left: 100%; opacity: 0%;}
}
.transfer-indicator-horizontal {
  top: -2px;
  left: 0%;
  animation-name: horizontal-transfer-animation;
}

@keyframes skewed-transfer-animation-l2r {
  0%   {left: 0%; opacity: 0%;}
  10%   {opacity: 100%;}
  90%   {opacity: 100%}
  100% {left: 100%; opacity: 0%;}
}
.transfer-indicator-skewed-l2r {
  top: -1px;
  left: 0%;
  animation-name: skewed-transfer-animation-l2r;
}

@keyframes skewed-transfer-animation-r2l {
  0%   {left: 100%; opacity: 0%;}
  10%   {opacity: 100%;}
  90%   {opacity: 100%}
  100% {left: 0%; opacity: 0%;}
}
.transfer-indicator-skewed-r2l {
  top: -1px;
  left: 100%;
  animation-name: skewed-transfer-animation-r2l;
}

.transfer-label-skewed {
  text-align: center;
   color: #919190;
  z-index: 0;
}
.transfer-label-horiztonal {
  text-align: center;
  color: #919190;
  z-index: 0;
}
.transfer-label-vertical {
  width: max-content;
  top: 50%;
  position: absolute;
  color: #919190;
  background-color: #1a1c19;
  margin: 0;
  text-align: center;
  z-index: 0;
  translate: -50%;
}

.powerflow-heading {
  font-size: 18px;
  text-align: center;
  padding-left: 33px;
}