.canvas-container {
  position: relative;
}
.placeholder {
	visibility: hidden;
}
.infographic {
	position: relative;
	max-width: 100%;
	overflow: hidden;
  border-bottom: 1px solid #e8e8e8;
  -webkit-transition: background-color 1s;
  -o-transition: background-color 1s;
  transition: background-color 1s;
}
.infographic::after {
	content: '';
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-box-shadow: inset 0 8vw 16vw #fff, inset 0 -2vw 4vw #fff, inset 2vw 0 4vw #fff, inset -2vw 0 4vw #fff;
          box-shadow: inset 0 8vw 16vw #fff, inset 0 -2vw 4vw #fff, inset 2vw 0 4vw #fff, inset -2vw 0 4vw #fff;
}
.infographic figure {
	position: relative;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
	-webkit-transform-origin: 81.5% 69%;
	    -ms-transform-origin: 81.5% 69%;
	        transform-origin: 81.5% 69%;
}
.infographic figure > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
.infographic figure img {
	/* padding-top: 12.5%; */
  padding-top: 0%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  image-rendering: -webkit-optimize-contrast;
}

[class^="floor-"],
.building,
.map-labels {
  opacity: 0;
}

/* .map-labels,
.floor-ground-labels {
  transition-delay: .5s !important;
} */


/* Mapa */

.infographic[data-step="0"] figure {
  transform: scale( 1 );
  transform-origin: 50.8% 50%;
}

.infographic[data-step="0"] .map-labels {
  opacity: 1;
}


/* Prédio */

.infographic[data-step="1"] figure {
  transform: scale( 1.33 );
  transform-origin: 50.8% 42%;
}

.infographic[data-step="1"] .building {
  opacity: 1;
}


/* Térreo */

.infographic[data-step="2"] figure {
  transform: scale( 3.2 );
  transform-origin: 49.8% 83%;
}

.infographic[data-step="2"] .map {
  opacity: 0;
}

.infographic[data-step="2"] .floor-ground {
	opacity: 1;
}

.infographic[data-step="2"] .floor-ground-labels {
  opacity: 1;
}

/* 2º andar */

.infographic[data-step="3"] figure {
  transform: scale( 3.2 );
  transform-origin: 49.8% 78.812%; /* FIXME:  */
}

.infographic[data-step="3"] .map {
  opacity: 0;
}

.infographic[data-step="3"] .floor-02 {
	opacity: 1;
}


/* 3º andar */

.infographic[data-step="4"] figure {
  transform: scale( 4 );
  transform-origin: 50.8% 70%; /* FIXME:  */
}

.infographic[data-step="4"] .map {
  opacity: 0;
}

.infographic[data-step="4"] .floor-03 {
	opacity: 1;
}


/* 4º andar */
.infographic[data-step="5"] figure {
  transform: scale( 4 );
  transform-origin: 50.8% 66%; /* FIXME:  */
}

.infographic[data-step="5"] .map {
  opacity: 0;
}

.infographic[data-step="5"] .floor-04 {
	opacity: 1;
}


/* 5º andar */

.infographic[data-step="6"] figure {
  transform: scale( 4 );
  transform-origin: 50.8% 61%; /* FIXME:  */
}

.infographic[data-step="6"] .map {
  opacity: 0;
}

.infographic[data-step="6"] .floor-05 {
	opacity: 1;
}


/* 6º andar */

.infographic[data-step="7"] figure {
  transform: scale( 4 );
  transform-origin: 50.8% 57%; /* FIXME:  */
}

.infographic[data-step="7"] .map {
  opacity: 0;
}

.infographic[data-step="7"] .floor-06 {
	opacity: 1;
}


/* 8º andar */

.infographic[data-step="8"] figure {
  transform: scale( 4 );
  transform-origin: 50.8% 48.5%;
}

.infographic[data-step="8"] .map {
  opacity: 0;
}

.infographic[data-step="8"] .floor-08 {
	opacity: 1;
}


/* 10º andar */

.infographic[data-step="9"] figure {
  transform: scale( 4 );
  transform-origin: 50.8% 39.5%;
}

.infographic[data-step="9"] .map {
  opacity: 0;
}

.infographic[data-step="9"] .floor-10 {
	opacity: 1;
}


/* 11º andar */

.infographic[data-step="10"] figure {
  transform: scale( 4 );
  transform-origin: 50.8% 35.5%;
}

.infographic[data-step="10"] .map {
  opacity: 0;
}

.infographic[data-step="10"] .floor-11 {
	opacity: 1;
}


/* 12º andar */

.infographic[data-step="11"] figure {
  transform: scale( 4 );
  transform-origin: 50.8% 31%;
}

.infographic[data-step="11"] .map {
  opacity: 0;
}

.infographic[data-step="11"] .floor-12 {
	opacity: 1;
}


/* 13º andar */

.infographic[data-step="12"] figure {
  transform: scale( 4 );
  transform-origin: 50.8% 27%;
}

.infographic[data-step="12"] .map {
  opacity: 0;
}

.infographic[data-step="12"] .floor-13 {
	opacity: 1;
}


/* 14º andar */

.infographic[data-step="13"] figure {
  transform: scale( 4 );
  transform-origin: 50.8% 23%;
}

.infographic[data-step="13"] .map {
  opacity: 0;
}

.infographic[data-step="13"] .floor-14 {
	opacity: 1;
}


/* 15º andar */

.infographic[data-step="14"] figure {
  transform: scale( 4 );
  transform-origin: 50.8% 18.5%;
}

.infographic[data-step="14"] .map {
  opacity: 0;
}

.infographic[data-step="14"] .floor-15 {
	opacity: 1;
}


/* 16º andar */

.infographic[data-step="15"] figure {
  transform: scale( 4 );
  transform-origin: 50.8% 14%;
}

.infographic[data-step="15"] .map {
  opacity: 0;
}

.infographic[data-step="15"] .floor-16 {
	opacity: 1;
}


/* 17º andar */

.infographic[data-step="16"] figure {
  transform: scale( 3.66 );
  transform-origin: 50.8% 5.6%;
}

.infographic[data-step="16"] .map {
  opacity: 0;
}

.infographic[data-step="16"] .floor-17 {
	opacity: 1;
}



/* Visitação */

.infographic[data-step="17"] .map-labels {
  opacity: 1;
}