.constraint {
  height: 130%;
  width: 100%;
}

@media screen and (max-width: 575px) {
  .constraint {
      padding-bottom: calc(10em + 55vw);
  }
}

.red-thread {
  stroke-width: 3px;
  stroke: #c33;
  fill: none;
}

.red-thread-company {
  stroke: #c33;
  opacity: 0.5;
}

.default-circle, .default-square, .default-connection {
  fill: none;
  stroke-width: 0.5px;
  stroke: black;
}

#dotted-line {
  stroke-width: 0.75;
  stroke: #000;
  stroke-linecap: round;
  stroke-dasharray: 0 0 0 2;
}

.dpm-circle {
  fill: #243e90;
  stroke: none;
}

.manet-circle {
  fill: #c33;
}

.govt-circle {
  fill: #54a4c6;
}

.clans-circle {
  fill: #54a4c6;;
  opacity: 0.25;
}

.company-red {
  fill:#c33;
  opacity: 0.25;
}

.company-red-stroke {
  fill: none;
  stroke-width: 0.5px;
  stroke: #c33;
}

.company-grey {
  fill: #bcbec0;
  stroke: #bcbec0;
  stroke-width: 1px;
  fill-opacity: 0.25;
}

.company-grey-stroke {
  fill: none;
  stroke-width: 0.5px;
  stroke: #bcbec0;
}

.clan-name {
  font-family: NotoSans-Bold, "Hanuman";
  font-weight: 700;
  font-size: 6px;
  fill: black;
}

.company-name {
  font-family: NotoSans-Italic, "Hanuman";
  font-style: italic;
  font-size: 6px;
  fill: #bcbec0;
}

.company-name-red {
  font-family: NotoSans-Italic, "Hanuman";
  font-style: italic;
  font-size: 6px;
  fill:#c33;
  opacity: 0.5;
}
.person-name-black {
  font-family: NotoSans-Regular, "Hanuman";
  font-size: 5px;
  fill: black;
}

.person-name-white {
  font-family: NotoSans-Regular, "Hanuman";
  font-size: 5px;
  fill: white;
}

#hun-manet-name {
  font-family: NotoSans-Regular, "Hanuman";
  font-size: 13px;
  fill: white;
}

/* PORTRAIT STYLES */
.portrait {
  vertical-align: top;
  display: inline-block;
  text-align: center;
  margin: 5%;
  width: 120px;

}

.centered-portrait {
  margin-left: 26%;
}

.manet-manith-portrait {
  width: 50px;
  height: 50px;
  background-color: #c33;
  border-radius:50%;
}

.default-portrait {
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius:50%;
  box-shadow: 0 0 0 1px black;
}

.govt-portrait {
  width: 50px;
  height: 50px;
  background-color: #54a4c6;
  border-radius:50%;
}

.dpm-portrait {
  width: 50px;
  height: 50px;
  background-color: #243e90;
  border-radius:50%;
}

.name {
  font-family: 'Hanuman', sans-serif;
  font-weight: bold;
  font-size: medium;
  font-style: normal;
  line-height: 1em;
  text-align: center;
  margin-top: 8px;
  display: block;
}

.title, .key-text {
  font-family: 'Hanuman', sans-serif;
  font-weight: 400;
  font-size: small;
  font-style: normal;
  margin-top: -12px;
  display: block;
}

.title {
  font-style: italic;
  text-align: center;
  line-height: 1.25em;
}

.clan-heading {
  font-family: 'Hanuman', sans-serif;
  font-weight: bold;
  font-size: medium;
  font-style: normal;
  line-height: 1.5em;
  margin-top: 5px;
  display: block;
  padding-right: 5%;
}

.clan-hide {
  opacity: 0.3;
}