#mapScreen {
	opacity: 1;
	transition: opacity 0.5s, transform 0.5s;
}
#mapScreen:not([show]) {
	display: none !important;
}

depthLayer {
	position: absolute;
	top: 50%;
	right: 50%;
	width: 0px;
	height: 0px;
	margin: -15rem 0;
	pointer-events: none;
	transform: scale(1.5);
	/* border: 4px solid #f005; */
}
depthLayer * {
	position: absolute;
	top: 0;
	left: 0;
}

cornerIntro {
	background-image: url(../images/cornerIntro.png);
	background-size: 100% 100%;
	width: 40rem;
	height: 20rem;
	margin: 2.8rem -20rem;
}
boxLogo {
	background-image: url(../images/logo.png);
	background-size: 100% 100%;
	width: 22.5rem;
	height: 8rem;
	margin: 5rem -10.2rem;
}
depthLayer personagem {
	background-image: url(../images/personagem.png);
	background-size: 100% 100%;
	width: 12rem;
	height: 12.5rem;
	margin: 1.5rem 6rem;
}

listButtons {
	position: absolute;
	top: 50%;
	right: 50%;
	transform: translate(26rem, -0.5rem);
	width: 12rem;
	height: 0rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
listButtons layerButton {
	position: absolute;
	/* margin: 0.25rem 0rem; */
	left: 0;
	width: 7rem;
	padding: 0rem 1rem 0.2rem 2.8rem;
	height: 3.7rem;
}
listButtons layerButton {
	bottom: -4.75rem;
}
listButtons layerButton + layerButton {
	bottom: -9.5rem;
}
listButtons layerButton + layerButton + layerButton {
	/* bottom: -14.25rem; */
	padding: 0rem 1.9rem 0.2rem 1.9rem;
}

listButtons layerButton ico {
	width: 1.6rem;
	height: 1.6rem;
	left: 20%;
	top: 50%;
	margin: -0.8rem;
}

listButtons layerButton#btSaibaMais{
	display: none;
}

#btRanking ico {
	background-image: url(../images/ico_ranking.png);
}
#btSaibaMais ico {
	background-image: url(../images/ico_mais.png);
}

gamemap {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-11rem, 2rem) scale(1);
	width: 0rem;
	height: 0rem;
	pointer-events: none;
	transition: transform 0.7s cubic-bezier(0.3, 0.1, 0.45, 1);
}

msgClickMap {
	color: #fff;
	position: absolute;
	pointer-events: none;
	top: 50%;
	margin: -14rem -29rem;
	width: 40rem;
	left: 50%;
	text-align: center;
	font-size: 1.3rem;
	letter-spacing: 0.1rem;
	opacity: 0;
	transition: opacity 0.3s;
	text-shadow: 0rem 0.1rem 0.15rem #a158ca;
}
/* gamemap.selected msgClickMap {
	opacity: 0 !important;
} */

stage {
	position: absolute;
	transform-origin: 50% 50%;
	width: 0;
	height: 0;
	top: 0;
	left: 0;
}
stage * {
	position: absolute;
}
stageImg {
	background-size: 100% 100%;
	/* transform: translate(0rem, 0rem); */
	transition: 0.5s transform, 0.5s opacity;
}
stageImg::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	opacity: 0;
	transition: 0.8s opacity;
}
stageImg areaClick {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	/* background: #f003; */
	transform-origin: 50% 50%;
	transform: rotate(20deg) skewX(-17deg) scale(0.78);
	pointer-events: all;
}

stage.selected stageImg {
	transform: translateY(-1rem);
	opacity: 1 !important;
}
stage.selected stageImg::before {
	opacity: 0 !important;
}
gamemap.selected {
	/* transform: translate(-11rem, 3rem) scale(1); */
}
gamemap.selected stage stageImg {
	opacity: 0.5;
}
gamemap.selected stage stageImg::before {
	opacity: 1;
}
stage.selected stageinfo {
	transform: skewY(20deg) translate(-4.8rem, -2.5rem) scale(0.6, 0.6);
	height: 9rem;
	width: 14rem;
}

clickMapBg {
	position: absolute;
	width: 100rem;
	height: 100rem;
	left: -50rem;
	top: -50rem;
	display: none;
	/* background: #ff0; */
	pointer-events: all;
}
gamemap.selected clickMapBg {
	display: block;
}

stageinfo {
	transition: transform 0.5s, width 0.5s, height 0.5s; /* ease-in;*/
	pointer-events: all;
	left: 0rem;
	bottom: 0rem;
	width: 4rem;
	height: 0rem;
	background-color: #d0c0ef;
	background: linear-gradient(135deg, #e4d6ff 52%, #cbc5d6 60%);
	border-radius: 1rem;
	transform: skewY(20deg) translate(-0.5rem, 0rem) scale(0, 0);
	/* box-shadow: 0rem 0.3rem 1.2rem rgba(30, 100, 150, 0.4); */
	box-shadow: 0rem 0.3rem 1.2rem rgba(0, 0, 0, 0.5);
}

stageinfo subStage {
	position: absolute;
	left: 0rem;
	right: 0rem;
	top: 0rem;
	bottom: 0rem;
	background-color: #faf0ff;
	border-top: 2px solid #ffffff;
	border-left: 2px solid #ffffff;
	border-radius: 1rem;
	overflow: hidden;
	transform: translate(-0.25rem, 0.3rem);
}
stageinfo subStage > * {
	position: absolute;
	left: 50%;
	top: 50%;
}
stageinfo name {
	text-align: center;
	width: 14rem;
	margin: -3.5rem -7rem;
	color: #fd671b;
	font-weight: bold;
	font-size: 1.25rem;
	letter-spacing: 0.03rem;
}

stageinfo stageProgress {
	display: block;
	width: 11rem;
	height: 1rem;
	margin: -1.3rem -5.5rem;
	border-radius: 10rem;
	background: linear-gradient(0deg, #20bbfc 0%, #62ddff 70%);
	box-shadow: 0rem 0rem 0.14rem 0.15rem #7cd1ff inset;
	overflow: hidden;
}
stageinfo stageProgress::before {
	content: "";
	position: absolute;
	opacity: 1;
	left: 0rem;
	top: 0rem;
	height: 100%;
	width: 100%;
	border-radius: 10rem;
	z-index: 1;
	box-shadow: 0rem 0.02rem 0.1rem 0.05rem rgba(112, 78, 142, 0.35) inset;
}
stageinfo stageProgress bar {
	opacity: 1;
	right: -4%;
	top: 0rem;
	height: 100%;
	width: 50%;
	border-radius: 0.2rem 0.3rem 0.3rem 0.25rem;
	border-left: 0.2rem solid #91c4e4;
	background: linear-gradient(180deg, #ede3f3 20%, #d8d3e0 100%);
	box-shadow: 0rem 0rem 0.2rem 0.1rem #faffff, 0rem 0rem 1.2rem 0.5rem #b8e8ff,
		0.1rem 0rem 0.15rem -0.08rem #466f98 inset,
		0.5rem 0rem 0.5rem -0.3rem #77aada inset;
}

stageinfo layerButton {
	width: 3rem;
	height: 2.4rem;
	margin: 0.9rem -4.5rem;
	background-color: #faf0ff;
	transition: box-shadow 0.1s, border 0.1s, transform 0.1s, opacity 0.4s;
	border-bottom: 0;
	border-top: 2px solid #ffffff;
	border-left: 2px solid #ffffff;
	box-shadow: 0.17rem -0.2rem 0rem 0.02rem #e0d8f7,
		0.25rem -0.18rem 0.6rem #6c618c;
}
stageinfo layerButton::before {
	left: 0.25rem;
	right: 0.4rem;
	top: 0.3rem;
	bottom: 0.25rem;
	transition: transform 0.1s, box-shadow 0.1s;
	border-bottom: 0;
	border-top: 1px solid #ffccaa;
	border-left: 1px solid #ffccaa;
	box-shadow: 0.1rem -0.1rem 0rem 0.01rem #ff7731,
		0.05rem -0.05rem 0.4rem rgba(253, 103, 27, 0.7);
}
stageinfo layerButton span {
	transform: translate(-0.25rem, 0.3rem);
	text-shadow: 0.05rem -0.1rem 0.15rem #e05010;
	transition: transform 0.1s, box-shadow 0.1s;
}

stageinfo layerButton:active {
	border-bottom: 0rem solid #b1bcd2;
	box-shadow: 0.1rem -0.1rem 0.3rem rgba(100, 100, 150, 0.35);
	transform: translate(0.23rem, -0.22rem);
}
stageinfo layerButton:active::before {
	/* 	transform: translate(0rem, -0rem); */
	border-bottom: 0;
	background: linear-gradient(180deg, #ffdd44, #ffbb43);
	box-shadow: 0.05rem -0.05rem 0rem 0rem #ffaa55,
		0.05rem -0.05rem 0.4rem rgba(253, 103, 27, 0.7);
}
stageinfo layerButton:active span {
	transform: translate(-0.15rem, 0.2rem);
	text-shadow: 0.05rem -0.1rem 0.15rem #ff7731;
}

/* trajeto */
#stage_0 {
	left: -4.66rem;
	top: 6.85rem;
	z-index: 4;
}
#stage_0 stageImg {
	width: 16.5rem;
	height: 11.18rem;
	margin: -6rem -8rem;
	background-image: url(../images/trajeto.png);
}
#stage_0 stageImg::before {
	background-image: url(../images/trajeto_off.png);
}

/* escritorio */
#stage_1 {
	left: -11rem;
	top: -4.25rem;
	z-index: 1;
}
#stage_1 stageImg {
	width: 15.66rem;
	height: 11.68rem;
	margin: -6rem -8rem;
	background-image: url(../images/escritorio.png);
}
#stage_1 stageImg::before {
	background-image: url(../images/escritorio_off.png);
}

/* cidade */
#stage_2 {
	left: 0rem;
	top: 0rem;
	z-index: 2;
}
#stage_2 stageImg {
	width: 16.46rem;
	height: 11.82rem;
	margin: -6rem -8rem;
	background-image: url(../images/cidade.png);
}
#stage_2 stageImg::before {
	background-image: url(../images/cidade_off.png);
}

/* estudio */
#stage_3 {
	left: -0.5rem;
	top: -7.75rem;
	z-index: 0;
}
#stage_3 stageImg {
	width: 16.45rem;
	height: 10.95rem;
	margin: -5.5rem -8rem;
	background-image: url(../images/estudio.png);
}
#stage_3 stageImg::before {
	background-image: url(../images/estudio_off.png);
}

/* externa */
#stage_4 {
	left: 13.45rem;
	top: 3.35rem;
	z-index: 3;
}
#stage_4 stageImg {
	width: 17.41rem;
	height: 12.15rem;
	margin: -6rem -9rem;
	background-image: url(../images/externa.png);
}
#stage_4 stageImg::before {
	background-image: url(../images/externa_off.png);
}

stage[status="IN_PROGRESS"] {
}

stage[status="DONE"] {
}
stage[status="DONE"] stageinfo stageProgress {
	background: linear-gradient(0deg, #10ea34 0%, #99ffaa 70%);
	box-shadow: 0rem 0rem 0.14rem 0.15rem #0eea2b inset;
}