/* reset */

:root {
  --palette-background: #333030;
  --palette-color: #d3cbc4;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

button {
  border: none;
  margin: 0;
  padding: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  outline: none;
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

hr {
  border: 0;
  border-top: 2px solid currentColor;
  margin: 0;
  height: 2px;
}

img {
  user-select: none;
}

a {
  color: var(--palette-color);
}

/* general */

html {
  background: var( --palette-background );
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Lato', sans-serif;
  line-height: 1.5;
  color: var( --palette-color );
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container {
  width: 100%;
  padding: 0 32px;
}

hr {
  margin: 96px auto;
  opacity: .05;
  max-width: 960px;
}

.text-container hr {
  margin: 32px auto;
}

strong {
  font-weight: 900;
}

/* logo */

.header-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 72px;
}

@media (min-width: 640px) {
  .header-container {
    margin-bottom: 48px;
  }
}

.oesp {
  display: inline-block;
  position: relative;
  top: 0.19em;
  font-family: OESP;
  font-size: inherit;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.oesp-capital {
  font-size: 1.2em;
}

.oesp-estadao:before {
  content: '\f000';
}

.oesp-estadao-symbol:before {
  content: '\f001';
}

.oesp-estadao-logotype:before {
  content: '\f002';
}

.brand {
  color: inherit;
  font-size: 32px;
}


/* simulation */

.simulation-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 96px;
}

.simulation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  max-width: calc( 640px + 64px );
}

.simulation .child {
  box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.025 )
}

/* tutorial */

.simulation-info {
  position: relative;
  margin-top: 24px;
  background: #47413e;
  width: 100%;
  max-width: 343px;
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  outline: none;
  color: rgba( 211, 203, 196, .66 )
}

.simulation-info .swiper-slide {
  padding: 0 1px;
}

.simulation-info[data-status="adopted"] {
  box-shadow: inset 0 0 0 2px hsla( 100, 100%, 70%, 1 );
  color: inherit;
  font-weight: inherit;
}

.simulation-info[data-status="expelled"] {
  box-shadow: inset 0 0 0 2px hsla( 0, 100%, 70%, 1 );
  color: inherit;
  font-weight: inherit;
}

.simulation-info strong {
  font-weight: bold;
  color: rgba( 211, 203, 196, 1 )
}

.simulation-info::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #47413e;
}

@keyframes pulse-button {
  0%   { box-shadow: 0 0 0   0   rgba( 255, 255, 255, 1 ) }
  100% { box-shadow: 0 0 0  12px rgba( 255, 255, 255, 0 ) }
}

[data-step="1"] .button {
  animation: pulse-button 2s infinite;
}

.button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 48px;
  margin-top: 24px;
}

.button-container .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;

  display: none;
}

.button-container .button.hide-next {
  display: none !important;
}

.button-container .button span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.simulation-info[data-step="1"]  .button:not(:empty):nth-child(1)  { display: inline-flex }
.simulation-info[data-step="2"]  .button:not(:empty):nth-child(2)  { display: inline-flex }
.simulation-info[data-step="3"]  .button:not(:empty):nth-child(3)  { display: inline-flex }
.simulation-info[data-step="4"]  .button:not(:empty):nth-child(4)  { display: inline-flex }
.simulation-info[data-step="5"]  .button:not(:empty):nth-child(5)  { display: inline-flex }
.simulation-info[data-step="6"]  .button:not(:empty):nth-child(6)  { display: inline-flex }
.simulation-info[data-step="7"]  .button:not(:empty):nth-child(7)  { display: inline-flex }
.simulation-info[data-step="8"]  .button:not(:empty):nth-child(8)  { display: inline-flex }
.simulation-info[data-step="9"]  .button:not(:empty):nth-child(9)  { display: inline-flex }
.simulation-info[data-step="10"] .button:not(:empty):nth-child(10) { display: inline-flex }
.simulation-info[data-step="11"] .button:not(:empty):nth-child(11) { display: inline-flex }
.simulation-info[data-step="12"] .button:not(:empty):nth-child(12) { display: inline-flex }
.simulation-info[data-step="13"] .button:not(:empty):nth-child(13) { display: inline-flex }
.simulation-info[data-step="14"] .button:not(:empty):nth-child(14) { display: inline-flex }
.simulation-info[data-step="15"] .button:not(:empty):nth-child(15) { display: inline-flex }
.simulation-info[data-step="16"] .button:not(:empty):nth-child(16) { display: inline-flex }
.simulation-info[data-step="17"] .button:not(:empty):nth-child(17) { display: inline-flex }
.simulation-info[data-step="18"] .button:not(:empty):nth-child(18) { display: inline-flex }
.simulation-info[data-step="19"] .button:not(:empty):nth-child(19) { display: inline-flex }
.simulation-info[data-step="20"] .button:not(:empty):nth-child(20) { display: inline-flex }

.button {
  text-decoration: none;
  color: inherit;
}

/* link */

.link-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
}

/* youngest */
[data-step="3"] .child:first-child {
  animation: pulse-followed .5s infinite;
}

[data-step="3"] .child:first-child .tooltip {
  opacity: 1;
}

/* oldest */
[data-step="4"] .child:last-child {
  animation: pulse-followed .5s infinite;
}

[data-step="4"] .child:last-child .tooltip {
  opacity: 1;
}

/* adopted */
[data-step="6"] .child:nth-child( 33 ) {
  animation: pulse-adopted .5s infinite;
}

/* expelled */
[data-step="8"] .child:last-child {
  animation: pulse-expelled .5s infinite;
}

@media (max-width: 374px) {
  .simulation-info {
    max-width: 288px;
  }
}

@media (min-width: 1024px) {

  .simulation-container {
    flex-direction: row;
  }

  .simulation-info {
    margin-top: 0;
    max-width: 288px;
  }

  .simulation-info::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -8px;
    width: 0;
    height: 0;
    margin-top: -8px;
    border-top: 8px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid #47413e;
    border-bottom: 8px solid transparent;
  }

}


/* branches */

.children {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 16px 32px;
  width: 100%;
  max-width: calc( 640px + 64px );
}

.child {
  position: relative;
  display: flex;
  align-items: flex-end;
  align-self: baseline;
  height: 0;
  width: 100%;
  max-width: 4%;
  flex-shrink: 0;
  border-radius: 5px;
  outline: none;

  /* formula: 100 * ( image-height / ( image-width * ( 100 / max-width ) ) */
  padding-bottom: calc( 20.0445454545% + 8px );
  padding-top: 4px;

}

@media (max-width: 640px) {
  .child {
    /* max-width: 5%; */

    /* formula: 100 * ( image-height / ( image-width * ( 100 / max-width ) ) */
    /* padding-bottom: calc( 21.0988636364% + 8px ); */
    /* padding-top: 8px; */
  }
}

/*.simulation*/ .child img {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  width: 100%;
  user-select: none;
  pointer-events: none;
}

.dot .child img {
  bottom: 0;
}


.child.follow {
  box-shadow: 0 0 0 2px var( --palette-color );
}

/* animationss */

@keyframes pulse-adopted {
  0%   { background: hsla( 100, 100%, 70%, 0.75 ) }
  100% { background: hsla( 100, 100%, 70%, 0 ) }
}

@keyframes pulse-expelled {
  0%   { background: hsla( 0, 100%, 70%, 0.75 ) }
  100% { background: hsla( 0, 100%, 70%, 0 ) }
}

@keyframes pulse-admitted {
  0%   { background: hsla( 20, 3%, 42%, 0.75 ) }
  100% { background: hsla( 20, 3%, 42%, 0 ) }
}

@keyframes pulse-followed {
  0%   { box-shadow: 0 0 0 2px hsla(28, 15%, 80%, 1) }
  100% { box-shadow: 0 0 0 2px hsla(28, 15%, 80%, 0) }
}

.child[data-status="adopted"] {
  animation: pulse-adopted .5s;
  overflow: visible;
}

.child[data-status="adopted"].follow {
  box-shadow: 0 0 0 2px hsla( 100, 100%, 70%, 1 );
}

.child[data-status="adopted"].follow::before {
  content: 'Adotada';
  position: absolute;
  display: flex;
  top: 0%;
  left: 50%;
  transform: translate( -50%, -125% );
  color: hsla( 100, 100%, 70%, 1 );
  font-size: 12px;
}

.child[data-status="expelled"] {
  animation: pulse-adopted .5s;
  overflow: visible;
}

.child[data-status="expelled"].follow {
  box-shadow: 0 0 0 2px hsla( 0, 100%, 70%, 1 );
}

.child[data-status="expelled"].follow::before {
  content: 'Expulsa';
  position: absolute;
  display: flex;
  bottom: 0%;
  left: 50%;
  transform: translate( -50%, 125% );
  color: hsla( 0, 100%, 70%, 1 );
  font-size: 12px;
}

[data-status="adopted"] {
  color: hsla( 100, 100%, 70%, .8 );
  font-weight: bold;
}

[data-status="expelled"] {
  color: hsla( 0, 100%, 70%, .8 );
  font-weight: bold;
}


/* button */

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  /* border: 2px solid currentColor; */
  background-color: var( --palette-color );
  color: var( --palette-background );
  border-radius: 999px;
  text-transform: uppercase;
  cursor: pointer;
  margin: 0 auto;
  user-select: none;
  font-weight: bold;
}

/*
.button:hover,
.button:active {
  color: #988675;
}
*/

.button[data-playing="true"] .play,
.button[data-playing="false"] .pause {
  display: none;
}

.button[data-playing="false"] .play,
.button[data-playing="true"] .pause {
  display: inline;
}


/* titles */

.title-container {
/*  width: calc( 100% - 64px );*/
  max-width: 1156px;
  margin: 0 auto;
}

.kicker,
.nest-container .counter-label {
  display: flex;
  justify-content: center;
  color: #988675;
  text-transform: uppercase;
  text-align: center;
  width: 100%;
  margin-bottom: 24px;
  font-weight: 900;
  letter-spacing: .05em;
  font-size: 80%;
}

h1,
h2 {
  font-family: 'Estado Headline', serif;
  font-size: 32px;
  padding-bottom: 96px;
  text-align: center;
  line-height: 1.2;
  margin: 0 auto;
}

h2 {
  font-size: 24px;
  padding-bottom: 0;
  max-width: 720px;
  margin-bottom: 24px;
}

h3 {
  padding: 0 16px 48px;
  text-align: center;
  margin: 0 auto;
}

@media (min-width: 720px) {
  h1 {
    font-size: 64px;
  }

  h2 {
    font-size: 42px;
  }
}

/* explainer */

.explainer-container {
  margin: 48px auto;
  padding: 0 16px;
}

.explainer {
  display: flex;
  justify-content: center;
  align-items: baseline;
  width: 100%;
  margin-bottom: 32px;
}

.explainer img {
  width: 64px;
}

.intro img {
  width: 256px;
}

.explainer-container p {
  text-align: center;
  max-width: 343px;
  margin: 0 auto 32px;
  font-size: 125%;
}

p.disclaimer {
  max-width: 240px;
  opacity: .5;
  font-size: 80%;
  line-height: 1.5;
}

.explainer.explainer-ratio {
  flex-direction: column;
  align-items: center;
}

.explainer.explainer-ratio > div:first-child {
  margin-bottom: 24px;
}

.explainer.explainer-ratio > div:last-child {
  display: flex;
  flex-wrap: wrap;
  width: 192px;
}

.explainer .applicant {
  margin: 4%;
  width: 17%;
}

.applicant img {
  width: 25%;
}


/* explainer split */

.explainer-split {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-top: 48px;
}

/* text */

.text-container {
  /* margin-bottom: 96px; */
  padding: 0 16px;
}

.text-container p {
  text-align: left;
  width: 100%;
  max-width: 640px;
  margin: 0 auto 24px;
  color: hsla(28, 15%, 80%, .66);
}

.text-container p strong {
  color: var(--palette-color);
}

.law-before-after {
  display: flex;
  flex-direction: row;
  max-width: 960px;
  margin-top: 48px;
}

.credit {
  margin-top: 48px;
}

.credit p {
  font-size: 12px;
  line-height: 1.6;
}

/* nests */

.nests h3 {
  margin: 96px auto 24px;
}

.nests {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.nest-group {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-end;
  width: 100%;
  margin: 48px auto 0;
  padding: 0 16px;
  max-width: 920px;
}

.nest-container {
  position: relative;
  width: 50%;
  max-width: 420px;
  margin: 48px 2vw;
}

.nest-wrapper {
  position: relative;
  width: 100%;
  /* max-width: 420px; */
  /* margin: 0 72px 144px; */
}

[data-property="all"] .nest-wrapper {
  margin: 0 32px;
}

[data-property="all"] .nest-container {
  margin: 0 2vw;
}

[data-property="all"] .nest-wrapper::before {
  display: none;
}

.nest-wrapper::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}

.nest {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.nest-container .counter {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
  margin-top: 24px;

  /* padding-top: 22.5%; */

}

.nest-container .counter-label {
  margin-bottom: 0;
}

.nest-container .counter-number {
  font-size: 32px;
}

@media (min-width: 480px) {

  .nest-container .counter {
    /* transform: translate( -50%, -75% ); */
  }

  .nest-container .counter-number {
    font-size: 56px;
  }
}

.counter-relative {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-top: 32px;
  text-align: center;
  transform: translateY( 100% );
  display: none;
  color: hsla(28, 15%, 80%, .66);
}

.counter-relative .over {
  color: hsla( 100, 100%, 70%, 1 );
}

.counter-relative .under {
  color: hsla( 0, 100%, 70%, 1 );
}

[data-property="race"] [data-value="indigenous"] .counter,
[data-property="race"] [data-value="yellow"] .counter {
  top: 0;
  transform: translate( -50%, -90% );
}


.app[data-status="nest"] .nest::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 50%;
  transform: translate( -50%, -50% );
  border-radius: 50%;
}

.dot {
  position: absolute;
  top: 0%;
  left: 0%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate( -50%, -50% );
  z-index: 2;

  display: none;

  /* width: 3px;
  height: 3px;
  background: pink;
  border-radius: 50%; */
}


.nest.on-screen .dot {
  display: flex;
}

.dot .child {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 3.33vw;
  max-width: initial;
  /* padding: 0; */
  opacity: .5;
  overflow: visible;
  /* display: none; */
}

@media (min-width: 640px) {
  .dot .child {
    width: 24px;
  }

  /* .nest .counter-number {
    font-size: 120px;
  } */
}

.dot .child[data-siblings="true"] {
  z-index: 2;
}

.dot .child[data-disability="true"] {
  z-index: 3;
}

.nest .child {
  position: absolute;
}

[data-property="disability"] [data-value="true"] .child,
[data-property="siblings"] [data-value="true"] .child {
  opacity: 1;
}

[data-property="disability"] [data-value="false"] .child,
[data-property="siblings"] [data-value="false"] .child {
  opacity: .2;
}


/* flower */

.child img.flower {
  bottom: 10%;
  /* padding-bottom: 66.666%; */
}

.child[data-age="1"] img.flower { transform: translateY( -22% )  }
.child[data-age="2"] img.flower { transform: translateY( -44% ) }
.child[data-age="3"] img.flower { transform: translateY( -66% ) }
.child[data-age="4"] img.flower { transform: translateY( -88% ) }
.child[data-age="5"] img.flower { transform: translateY( -110% ) }
.child[data-age="6"] img.flower { transform: translateY( -132% ) }
.child[data-age="7"] img.flower { transform: translateY( -154% ) }
.child[data-age="8"] img.flower { transform: translateY( -176% ) }
.child[data-age="9"] img.flower { transform: translateY( -198% ) }
.child[data-age="10"] img.flower { transform: translateY( -220% ) }
.child[data-age="11"] img.flower { transform: translateY( -242% ) }
.child[data-age="12"] img.flower { transform: translateY( -264% ) }
.child[data-age="13"] img.flower { transform: translateY( -286% ) }
.child[data-age="14"] img.flower { transform: translateY( -308% ) }
.child[data-age="15"] img.flower { transform: translateY( -330% ) }
.child[data-age="16"] img.flower { transform: translateY( -352% ) }
.child[data-age="17"] img.flower { transform: translateY( -375% ) }
.child[data-age="18"] img.flower { transform: translateY( -396% ) }


/* draw circles */

.nest::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #292626;
  border-radius: 50%;
  z-index: 1;
  opacity: 0;
}

.nest::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: calc( 50% + 16.666% );
  background: var( --palette-color );
  opacity: .66;
  border-radius: 0 0 999px 999px;
  z-index: -1;
  transform: translateY( 33.333% );

  display: none;

}


.dot img {
  position: relative;
  width: 100%;
  user-select: none;
}

/* bar charts */

.chart {
  width: 100%;
  padding: 16px 0 48px;
  margin: 48px auto 12px;
}

.chart .children {
  flex-wrap: nowrap;
}

.bars {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}

.bars .children {
  justify-content: center;
  padding: 16px 0;
}

.bars .annotation {
  position: absolute;
  top: 0;
  width: 96px;
  font-size: 75%;
  text-align: center;
  left: 50%;
  padding-bottom: 8px;
  transform: translate( -50%, -100% );
  line-height: 1.333;
}

.bars .child img {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  width: 100%;
  user-select: none;
  pointer-events: none;
}

.bars .child {
  margin: 0 1px;
  border-radius: 0;
  overflow: visible
}

.bars:not([data-bars="age"]) .child + .child {
  margin-left: 32px;
}

.bars .child .bar {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  min-height: 1px;
  background: hsla( 100, 100%, 70%, .75 );
  border-radius: 5px 5px 0 0  ;
}

.bars[data-bars="age"] .child:nth-child(1) .bar { height: calc( 11.49% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(2) .bar { height: calc( 14.92% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(3) .bar { height: calc( 18.37% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(4) .bar { height: calc( 15.35% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(5) .bar { height: calc( 15.61% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(6) .bar { height: calc( 10.54% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(7) .bar { height: calc( 5.83% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(8) .bar { height: calc( 3.23% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(9) .bar { height: calc( 1.38% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(10) .bar { height: calc( 1.39% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(11) .bar { height: calc( 0.54% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(12) .bar { height: calc( 0.41% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(13) .bar { height: calc( 0.24% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(14) .bar { height: calc( 0.13% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(15) .bar { height: calc( 0.10% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(16) .bar { height: calc( 0.07% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(17) .bar { height: calc( 0.07% * 5.44 ) }
.bars[data-bars="age"] .child:nth-child(18) .bar { height: calc( 0.33% * 5.44 ) }

.bars .child::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: auto;
  text-align: center;
  transform: translate( -50%, 100% );
  font-size: 80%;
  padding-top: 16px;
  line-height: 1.333;
}
.bars[data-bars="age"] .child:nth-child(1)::after {
  content: '0';
}
.bars[data-bars="age"] .child:nth-child(6)::after {
  content: '5';
}
.bars[data-bars="age"] .child:nth-child(11)::after {
  content: '10';
}
.bars[data-bars="age"] .child:nth-child(16)::after {
  content: '15';
}

.bars[data-bars="race"] [data-race="white"] .bar { height: 92.4857801% }
.bars[data-bars="race"] [data-race="mixed"] .bar { height: 82.84445071%  }
.bars[data-bars="race"] [data-race="yellow"] .bar { height: 58.40972124% }
.bars[data-bars="race"] [data-race="black"] .bar { height: 56.03582005% }
.bars[data-bars="race"] [data-race="indigenous"] .bar { height: 54.60677855% }

.bars[data-bars="race"] .child[data-race="white"]::after {
  content: 'Branca';
}
.bars[data-bars="race"] .child[data-race="mixed"]::after {
  content: 'Parda';
}
.bars[data-bars="race"] .child[data-race="yellow"]::after {
  content: 'Amarela';
}
.bars[data-bars="race"] .child[data-race="black"]::after {
  content: 'Negra';
}
.bars[data-bars="race"] .child[data-race="indigenous"]::after {
  content: 'Indígena';
}

.bars[data-bars="siblings"] [data-siblings="false"] .bar { height: 63.11286607% }
.bars[data-bars="siblings"] [data-siblings="true"] .bar { height: 36.88713393% }

.bars[data-bars="siblings"] [data-siblings="false"]::after {
  content: 'Sem irmãos';
}
.bars[data-bars="siblings"] [data-siblings="true"]::after {
  content: 'Com irmãos';
}

.bars[data-bars="disability"] [data-physical="true"] .bar { height: 6.193296667% }
.bars[data-bars="disability"] [data-mental="true"] .bar { height: 3.309359282% }


.bars[data-bars="disability"] [data-physical="true"]::after {
  content: 'Deficiências físicas';
  right: 0;
  left: initial;
  width: 96px;
  text-align: right;
  transform: translateY( 100% );
}

.bars[data-bars="disability"] [data-mental="true"]::after {
  content: 'Deficiências cognitivas';
  left: 0;
  width: 96px;
  text-align: left;
  transform: translateY( 100% );
}


@media (min-width: 640px) {
  .bars .children {
    padding: 16px 32px;
  }
  .bars:not([data-bars="age"]) .child + .child {
    margin-left: 24px;
  }
}


/* chart split */

.chart-container {
  width: 100%;
}

.chart-split {
  width: 100%;
  max-width: 960px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.chart-split .chart-container {
  width: 33.333%;
  min-width: 288px;
}

.chart-split .child {
  max-width: 25.59px;
  height: 140px;
}


/* sankey */

.sankey-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 96px auto;
}

.sankey-container svg {
  width: 100%;
  max-width: calc( 494px + 32px );
  margin: 0 auto;
}

.sankey-container path {
  /* stroke: hsla( 100, 100%, 70%, .5 ); */
  /* stroke-width: 24px; */
  /* fill: none; */
}

.sankey-container path.expelled {
  /* stroke: hsla( 0, 100%, 70%, 0.5 ); */
}


/* tooltip */

.tooltip {
  position: absolute;
  display: flex;
  align-items: center;
  bottom: -48px;
  padding: 8px 8px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  height: 32px;
  background: var(--palette-color);
  color: var(--palette-background);
  border-radius: 8px;
  z-index: 1;
  font-size: 80%;
  font-weight: bold;
}

.tooltip::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -8px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--palette-color);
}

.tooltip {
  opacity: 0;
  user-select: none;
  pointer-events: none;
  transition: all .2s;
}

.simulation[data-playing="true"] .tooltip {
  transition: none;
}

.child.follow[data-status="adopted"] .tooltip {
  background: hsla( 100, 100%, 70%, 1 );
}

.child.follow[data-status="adopted"] .tooltip::before {
  border-bottom: 8px solid hsla( 100, 100%, 70%, 1 );
}

.child.follow[data-status="expelled"] .tooltip {
  background: hsla( 0, 100%, 70%, 1 );
  bottom: -64px;
}

.child.follow[data-status="expelled"] .tooltip::before {
  border-bottom: 8px solid hsla( 0, 100%, 70%, 1 );
}

.child:hover .tooltip {
  opacity: 1;
}

.child.follow .tooltip {
  opacity: 1;
}

.personagem {
  padding: 0 16px;
  max-width: calc( 960px + 32px );
}

.personagem figure {
  margin-bottom: 48px;
}

.personagem img {
  width: 100%;
  border-radius: 6px;
  opacity: 0.7;
}

.personagem figcaption {
  color: hsla(28, 15%, 80%, .66);
  font-size: 80%;
  margin-top: 4px;
}

.personagem .caption {
  margin-right: 8px;
}

.personagem .credit {
  text-transform: uppercase;
  color: hsla(28, 15%, 80%, .33);
  font-size: 80%;
}

/*
.tippy-tooltip.light-theme {
  color: var( --palette-background );
	background-color: var( --palette-color );
  border-radius: 12px;
}

.tippy-tooltip.light-theme[x-placement^=bottom] .tippy-arrow {
	border-bottom: 12px solid var( --palette-color );
	border-right: 12px solid transparent;
	border-left: 12px solid transparent
}
*/


/* footer */

.footer {
  width: 100%;
  margin-top: 96px;
  padding: 96px 0;
  background: #292626;
  background: #1f1d1d;
}

.footer h3 {
  max-width: 640px;
  padding: 0;
}

.footer hr {
  max-width: 640px;
}


/* selection */

::selection {
  background-color: #d3cbc4;
}