.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%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.infographic .ground-floor,
.infographic .library,
.infographic .theater,
.infographic .forth-floor,
.infographic .galleries,
.infographic .terrace {
  opacity: 0;
}



/* Ruas */
.infographic[data-step="0"] {
  /*background-color: transparent;*/
  background-color: #f8f8f8;
}
.infographic[data-step="0"] figure {
	/*transform: scale( 1.66 );
	transform-origin: 81.5% 69%;*/
  -webkit-transform: scale( 1.25 );
      -ms-transform: scale( 1.25 );
          transform: scale( 1.25 );
  -webkit-transform-origin: 62% 76%;
      -ms-transform-origin: 62% 76%;
          transform-origin: 62% 76%;
}
.infographic[data-step="0"] .neighbours-front,
.infographic[data-step="9"] .neighbours-front, {
	opacity: .75;
}


/* Edifício com fachada */
.infographic[data-step="1"] {
  background-color: #fafafa;
}
.infographic[data-step="1"] figure {
	-webkit-transform: scale( 2.15 );
	    -ms-transform: scale( 2.15 );
	        transform: scale( 2.15 );
	-webkit-transform-origin: 81.5% 69%;
	    -ms-transform-origin: 81.5% 69%;
	        transform-origin: 81.5% 69%;
}
.infographic[data-step="1"] .neighbours-front {
	opacity: 0;
}
.infographic[data-step="1"] .map {
	opacity: .25;
}


/* Edifício sem fachada */
.infographic[data-step="2"] {
  background-color: #fafafa;
}
.infographic[data-step="2"] figure {
	-webkit-transform: scale( 2.15 );
	    -ms-transform: scale( 2.15 );
	        transform: scale( 2.15 );
}
.infographic[data-step="2"] .neighbours-front {
	opacity: 0;
}
/*.infographic[data-step="2"] .building {
	opacity: 1;
}*/
.infographic[data-step="2"] .cover {
	/*transform: translate( 0, -45%);*/
	opacity: 0;
}
.infographic[data-step="2"] .map {
	opacity: .25;
}


/* Térreo */
.infographic[data-step="3"] {
  background-color: #fafafa;
}
.infographic[data-step="3"] figure {
	/*transform: scale( 3 );*/
	/*transform-origin: 70% 80%;*/
  -webkit-transform: scale( 5 );
      -ms-transform: scale( 5 );
          transform: scale( 5 );
	-webkit-transform-origin: 70.8% 80%;
	    -ms-transform-origin: 70.8% 80%;
	        transform-origin: 70.8% 80%;
}
.infographic[data-step="3"] .neighbours-front {
	opacity: 0;
}
.infographic[data-step="3"] .cover {
	/*transform: translate( 0, -45%);*/
	opacity: 0;
}
.infographic[data-step="3"] .map {
	opacity: .25;
}
.infographic[data-step="3"] .ground-floor {
  opacity: 1;
}
.infographic[data-step="3"] .building {
	opacity: 0;
}


/* 4º andar */
.infographic[data-step="4"] {
  background-color: #fafafa;
}
.infographic[data-step="4"] figure {
	-webkit-transform: scale( 5 );
	    -ms-transform: scale( 5 );
	        transform: scale( 5 );
	-webkit-transform-origin: 70.8% 66%;
	    -ms-transform-origin: 70.8% 66%;
	        transform-origin: 70.8% 66%;
}
.infographic[data-step="4"] .neighbours-front {
	opacity: 0;
}
.infographic[data-step="4"] .cover {
	/*transform: translate( 0, -45%);*/
	opacity: 0;
}
.infographic[data-step="4"] .map {
	opacity: .25;
}
.infographic[data-step="4"] .forth-floor {
  opacity: 1;
}
.infographic[data-step="4"] .building {
	opacity: 0;
}


/* 1º andar */
.infographic[data-step="5"] {
  background-color: #fafafa;
}
.infographic[data-step="5"] figure {
	-webkit-transform: scale( 5 );
	    -ms-transform: scale( 5 );
	        transform: scale( 5 );
	-webkit-transform-origin: 70.8% 77%;
	    -ms-transform-origin: 70.8% 77%;
	        transform-origin: 70.8% 77%;
}
.infographic[data-step="5"] .neighbours-front {
	opacity: 0;
}
.infographic[data-step="5"] .cover {
	/*transform: translate( 0, -45%);*/
	opacity: 0;
}
.infographic[data-step="5"] .map {
	opacity: .25;
}
.infographic[data-step="5"] .library {
  opacity: 1;
}
.infographic[data-step="5"] .building {
	opacity: 0;
}



/* 2-3º andar */
.infographic[data-step="6"] {
  background-color: #fafafa;
}
.infographic[data-step="6"] figure {
	-webkit-transform: scale( 5 );
	    -ms-transform: scale( 5 );
	        transform: scale( 5 );
	-webkit-transform-origin: 70.8% 72%;
	    -ms-transform-origin: 70.8% 72%;
	        transform-origin: 70.8% 72%;
}
.infographic[data-step="6"] .neighbours-front {
	opacity: 0;
}
.infographic[data-step="6"] .cover {
	/*transform: translate( 0, -45%);*/
	opacity: 0;
}
.infographic[data-step="6"] .map {
	opacity: .25;
}
.infographic[data-step="6"] .theater {
  opacity: 1;
}
.infographic[data-step="6"] .building {
	opacity: 0;
}



/* 5-7º andar */
.infographic[data-step="7"] {
  background-color: #fafafa;
}
.infographic[data-step="7"] figure {
	-webkit-transform: scale( 5 );
	    -ms-transform: scale( 5 );
	        transform: scale( 5 );
  -webkit-transform-origin: 70.8% 57%;
      -ms-transform-origin: 70.8% 57%;
          transform-origin: 70.8% 57%;
}
.infographic[data-step="7"] .neighbours-front {
	opacity: 0;
}
.infographic[data-step="7"] .cover {
	/*transform: translate( 0, -45%);*/
	opacity: 0;
}
.infographic[data-step="7"] .map {
	opacity: .25;
}
.infographic[data-step="7"] .galleries {
  opacity: 1;
}
.infographic[data-step="7"] .building {
	opacity: 0;
}



/* Cobertura */
.infographic[data-step="8"] {
  background-color: #fafafa;
}
.infographic[data-step="8"] figure {
	-webkit-transform: scale( 5 );
	    -ms-transform: scale( 5 );
	        transform: scale( 5 );
	-webkit-transform-origin: 70.8% 46%;
	    -ms-transform-origin: 70.8% 46%;
	        transform-origin: 70.8% 46%;
}
.infographic[data-step="8"] .neighbours-front {
	opacity: 0;
}
.infographic[data-step="8"] .cover {
	/*transform: translate( 0, -45%);*/
	opacity: 0;
}
.infographic[data-step="8"] .map {
	opacity: .25;
}
.infographic[data-step="8"] .terrace {
  opacity: 1;
}
.infographic[data-step="8"] .building {
	opacity: 0;
}



/* Serviço */
.infographic[data-step="9"] {
  background-color: #fafafa;
}
.infographic[data-step="9"] figure {
	/*transform: scale( 1.66 );
	transform-origin: 81.5% 69%;*/
  -webkit-transform: scale( 1.25 );
      -ms-transform: scale( 1.25 );
          transform: scale( 1.25 );
  -webkit-transform-origin: 62% 76%;
      -ms-transform-origin: 62% 76%;
          transform-origin: 62% 76%;
}