/* Original dimensional Taurus network artwork. */
.tf-network{
  width: 100%;
  max-width: 340px;
  height: 275px;
  margin: 14px auto 0;
  position: relative;
}
.tf-network-ring{
  position: absolute;
  width: 205px;
  height: 205px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed rgba(24,24,23,.27);
  border-radius: 50%;
  z-index: 1;
}
.tf-network-ring::after{
  content: "";
  position: absolute;
  width: 128px;
  height: 128px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(164,71,45,.11);
  border-radius: 50%;
}
.tf-spoke{
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 103px;
  background: rgba(24,24,23,.12);
  transform-origin: center bottom;
}
.tf-spoke-1{
  transform: translate(-50%, -100%) rotate(0deg);
}
.tf-spoke-2{
  transform: translate(-50%, -100%) rotate(60deg);
}
.tf-spoke-3{
  transform: translate(-50%, -100%) rotate(120deg);
}
.tf-spoke-4{
  transform: translate(-50%, -100%) rotate(180deg);
}
.tf-spoke-5{
  transform: translate(-50%, -100%) rotate(240deg);
}
.tf-spoke-6{
  transform: translate(-50%, -100%) rotate(300deg);
}
.tf-hub{
  position: absolute;
  z-index: 6;

  width: 108px;
  height: 108px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  border: 0;
  border-radius: 50%;

  filter:
    drop-shadow(0 10px 14px rgba(24,24,23,.08));
}
.tf-hub img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.tf-tool{
  position: absolute;
  z-index: 8;

  width: 58px;
  height: 58px;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 50%;
  background: transparent;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: inherit;
  cursor: pointer;

  filter:
    drop-shadow(0 5px 7px rgba(24,24,23,.07));

  transition:
    transform .22s ease,
    filter .22s ease;
}
.tf-tool img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}
.tf-tool:hover,
.tf-tool.is-active{
  filter:
    drop-shadow(0 9px 11px rgba(24,24,23,.13))
    drop-shadow(0 0 4px rgba(164,71,45,.13));
}
.tf-tool-google{
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.tf-tool-google:hover,
.tf-tool-google.is-active{
  transform: translateX(-50%) scale(1.10);
}
.tf-tool-canva{
  right: 20px;
  top: 49px;
}
.tf-tool-canva:hover,
.tf-tool-canva.is-active{
  transform: scale(1.10);
}
.tf-tool-quickbooks{
  right: 20px;
  bottom: 49px;
}
.tf-tool-quickbooks:hover,
.tf-tool-quickbooks.is-active{
  transform: scale(1.10);
}
.tf-tool-ghl{
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.tf-tool-ghl:hover,
.tf-tool-ghl.is-active{
  transform: translateX(-50%) scale(1.10);
}
.tf-tool-clickup{
  left: 20px;
  bottom: 49px;
}
.tf-tool-clickup:hover,
.tf-tool-clickup.is-active{
  transform: scale(1.10);
}
.tf-tool-airtable{
  left: 20px;
  top: 49px;
}
.tf-tool-airtable:hover,
.tf-tool-airtable.is-active{
  transform: scale(1.10);
}
@media (max-width: 480px){.tf-network{
    transform: scale(.90);
    transform-origin: center;
    margin-left: -5%;
    width: 110%;
  }
}
