.--is-optional {
	position: relative;
}

.--is-optional::after {
	content: '*';
	color: gray;
}


.imgGame {
	position: relative;
	top: 0;
	left: 0;
	margin: auto;
	display: block;
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
	max-width: 85%;
}

.imgGame img {
	display: block;
	width: 100%;
	height: 100%;
}

.imgGame2 {
	position: relative;
	top: 0;
	left: 0;
	margin: auto;
	display: none;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	max-width: 85%;
}

.imgGame2 img {
	width: 100%;
	height: 100%;
	z-index: 1;
}

.mapa1 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 2;
}

.mapa2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 2;
}

.mapa3 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

.mapa31 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}
.rect1{
	pointer-events: all;
}
.rect2{
	pointer-events: all;
}



.imgGame3 {
	position: relative;
	top: 0;
	left: 0;
	margin: auto;
	display: none;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	max-width: 85%;
}

.imgGame3 img {
	width: 100%;
	height: 100%;
}
.mapa4 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.imgGame4 {
	position: relative;
	top: 0;
	left: 0;
	margin: auto;
	display: none;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	max-width: 85%;
}

.imgGame4 img {
	width: 100%;
	height: 100%;
}
.mapa5 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
.imgGame5 {
	position: relative;
	top: 0;
	left: 0;
	margin: auto;
	display: none;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	max-width: 85%;
}

.imgGame5 img {
	width: 100%;
	height: 100%;
}
.imgGame6 {
	position: relative;
	top: 0;
	left: 0;
	margin: auto;
	display: none;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	max-width: 85%;
}

.imgGame6 img {
	width: 100%;
	height: 100%;
}

/* .--is-optional::before {
    content: 'Este campo es opcional.';
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(100%,0);
    padding: 10px 15px;

    z-index: -1;
    opacity: 0%;

    transition: all 1s ease;

    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
    border-radius: 5px;
}

.--is-optional:hover::before {
    z-index: 1;
    opacity: 100%;
}

.--is-optional[data-title]::before {
    content: attr(data-title);

} */