/* CONFIGURACIÓN */

@font-face {
	font-family: Titillium Web;
	src: url("../fonts/TitilliumWeb-Light.ttf");
}

@font-face {
	font-family: Titillium Web Bold;
	src: url("../fonts/TitilliumWeb-Bold.ttf");
}

@font-face {
	font-family: Ardnas;
	src: url("../fonts/Ardnas.otf");
}

/* ANIMACIONES */

@keyframes hide {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes show {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
		visibility: visible;
	}
}

@keyframes vanish {
    from {
		opacity: 1;
		visibility: visible;
	}
    to {
		opacity: 0;
		transform: scale(1.25);
		visibility: hidden;
	}
}

@keyframes reappear {
    from {
		opacity: 0;
		transform: scale(1.25);
		visibility: hidden;
	}
    to {
		opacity: 1;
		transform: scale(1);
		visibility: visible;
	}
}

@keyframes blink {
	0% {
		opacity: 1;
	}
	16% {
		opacity: 0;
	}
	33% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	67% {
		opacity: 1;
	}
	83% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes accordionHide {
	from {
		opacity: 1;
		transform: scaleY(1);
	}
	to {
		opacity: 0;
		visibility: hidden;
		transform: scaleY(0);
	}
}

@keyframes accordionShow {
	from {
		opacity: 0;
		transform: scaleY(0);
	}
	to {
		opacity: 1;
		visibility: visible;
		transform: scaleY(1);
	}
}

@keyframes menuBackgroundHide {
	from {
		opacity: .7;
	}
	to {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes menuBackgroundShow {
	from {
		opacity: 0;
	}
	to {
		opacity: .7;
		visibility: visible;
	}
}

@keyframes closeHover {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(.92);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes optionShow {
	from {
		opacity: 0;
		transform: translateX(-12vw);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes passingLight {
	from {
		transform: translateX(175vw);
	}
	to {
		transform: translateX(-175vw);
	}
}

@keyframes arrow {
	0% {
		top: 100%;
	}
	87.5% {
		opacity: 1;
	}
	100% {
		top: -20%;
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes ixomenSphereShow {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		transform: scale(2.5);
	}
}

@keyframes ixomenSphereHide {
	0% {
		transform: scale(2.5);
	}
	75% {
		opacity: 1;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}

@keyframes ixomenSphereInterfaceShow {
	from {
		opacity: 0;
		transform: scale(.8);
	}
	to {
		opacity: 1;
		visibility: visible;
		transform: scale(1);
	}
}

@keyframes ixomenSphereInterfaceHide {
	from {
		opacity: 1;
		visibility: visible;
		transform: scale(1);
	}
	to {
		opacity: 0;
		visibility: hidden;
		transform: scale(.8);
	}
}

@keyframes loadingLetterRotate {
	0% {
		transform: rotate(0) translate(1.6rem) rotate(0);
	}
	82% {
		transform: rotate(0) translate(1.6rem) rotate(0);
	}
	100% {
		transform: rotate(360deg) translate(1.6rem) rotate(-360deg);
	}
}

@keyframes dragonShow {
	from {
		transform: translateY(2rem);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
		visibility: visible;
	}
}

@keyframes touch {
    0% {
		opacity: 0;
		visibility: visible;
	}
	33% {
		opacity: 1;
		
	}
	66% {
		opacity: 1;
	}
    100% {
		opacity: 0;
		width: 6rem;
		height: 6rem;
		visibility: hidden;
	}
}

/* ESTILOS GENERALES */

:root {
	font-size: 19px;
}

body {
	box-sizing: border-box;
}

body * {
	box-sizing: inherit;
	user-select: none;
	-moz-user-select: none;
}

p,
span,
img {
	color: #ffffff;
}

p {
	margin: .6rem 0 .8rem;
	font-size: 2rem;
	font-family:  Titillium Web;
	text-shadow: .053rem .053rem 0 #000000;
	letter-spacing: .053rem;
}

span {
	font-size: 3.7rem;
	font-family: Ardnas;
	text-shadow: .105rem .053rem 0 #000000;
}

.hidden {
	opacity: 0;
}

/* ESTILOS ESPECÍFICOS */

/* INTRO */

.intro {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	background-color: #000000;
	overflow: hidden;
}

.intro .background {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

.intro .background .loading,
.game .background .loading {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000000;
	animation-name: show;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	z-index: 1;
}

.intro .background .loading .loading-letter,
.game .background .loading .loading-letter {
	position: relative;
	right: 1.6rem;
	margin: 0 1rem;
	transform: translate(1.6rem);
	animation-duration: 3s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

.intro .background .loading .loading-dragon,
.game .background .loading .loading-dragon {
	position: absolute;
	bottom: 20%;
	width: 4.45rem;
	animation-name: dragonShow;
	animation-duration: .5s;
	animation-fill-mode: forwards;
}

.intro .background .loading .wave-container,
.game .background .loading .wave-container {
	display: flex;
    justify-content: center;
    align-items: center;
	position: absolute;
	bottom: 18.6%;
    right: 47%;
	width: 6rem;
	height: 6rem;
}

.intro .background .loading .wave,
.game .background .loading .wave {
	width: 2rem;
	height: 2rem;
	border: .2rem solid #ffffff99;
	border-radius: 50%;
	animation-name: touch;
	animation-duration: .8s;
	animation-fill-mode: forwards;
}

.intro .background .initial-considerations {
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 2rem;
	background-color: #000000;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	visibility: hidden;
	z-index: 1;
}

.intro .background .initial-considerations .consideration {
	flex: 100%;
	margin-bottom: 2rem;
	animation-name: show;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.intro .background .initial-considerations .consideration:first-of-type {
	font-family: Ardnas;
	font-size: 3.7rem;
	text-align: center;
}

.intro .background .initial-considerations .consideration:nth-of-type(6) {
	font-size: 2.5rem;
	text-align: center;
}

.intro .background .initial-considerations .consideration.finalConsideration {
	font-size: 6rem;
}

.intro .background .initial-considerations .consideration-dragon {
	position: absolute;
	bottom: 12.5%;
	right: 48.3%;
	width: 4.45rem;
	animation-name: dragonShow;
	animation-duration: .5s;
	animation-fill-mode: forwards;
	visibility: visible;
}

.intro .background .initial-considerations .wave-container {
	display: flex;
    justify-content: center;
    align-items: center;
	position: absolute;
	bottom: 10.9%;
    right: 47.55%;
	width: 6rem;
	height: 6rem;
}

.intro .background .initial-considerations .wave {
	width: 2rem;
	height: 2rem;
	border: .2rem solid #ffffff99;
	border-radius: 50%;
	animation-name: touch;
	animation-duration: .8s;
	animation-fill-mode: forwards;
}


.intro .background .image {
	width: 100vw;
	height: auto;
}

.intro .background .background-container {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.intro .background .logo {
	display: flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	transition: transform 1.5s;
	transition-timing-function: ease;
	transform: translateX(120vw);
	animation-duration: .6s;
	animation-timing-function: step-start;
}

.intro .background .logo img {
	max-width: 52vw;
	max-height: 52vh;
}

.intro .background .help-option {
	display: none;
	position: absolute;
	top: 11.3%;
    right: 4.2%;
}

.intro .background .help-option .help-text {
	font-size: 3.8rem;
	text-shadow: none;
	filter: blur(.05rem);
}

.intro .background .help-option .help-text:hover {
	color: #3e3e3e;
}

.intro .background .main-menu {
	display: none;
	justify-content: space-between;
	position: absolute;
	bottom: 14.8%;
	width: 55%;
	perspective: 40rem;
}

.intro .background .main-menu .main-menu-option {
	text-shadow: none;
	filter: blur(.04rem);
	transform: rotateX(18deg) scaleY(1.1);
}

.intro .background .main-menu .main-menu-option:hover {
	color: #3e3e3e;
}

.intro .background .help,
.intro .background .options {
	display: none;
	align-items: center;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.intro .background .help .help-background,
.intro .background .options .options-background {
	position: absolute;
	width: 100%;
    height: 100%;
	opacity: .7;
	animation-duration: .8s;
	animation-fill-mode: forwards;
}

.intro .background .help .help-container,
.intro .background .options .options-main-container,
.intro .background .options .options-audio-container,
.intro .background .options .options-text-container,
.game .background .menu .menu-status-container .menu-status-main-container,
.game .background .menu .menu-options-container .menu-options-main-container,
.game .background .menu .menu-options-container .menu-options-audio-container,
.game .background .menu .menu-options-container .menu-options-text-container {
	display: flex;
    justify-content: center;
    align-items: center;
	position: absolute;
	width: 100%;
	height: 51%;
	animation-duration: .2s;
	animation-fill-mode: forwards;
	z-index: 1;
}

.intro .background .options .options-audio-container,
.intro .background .options .options-text-container,
.game .background .menu .menu-options-container .menu-options-audio-container,
.game .background .menu .menu-options-container .menu-options-text-container {
	display: none;
}

.intro .background .help .help-container .help-image,
.intro .background .options .options-main-container .options-main-image,
.intro .background .options .options-audio-container .options-audio-image,
.intro .background .options .options-text-container .options-text-image,
.game .background .menu .menu-status-container .menu-status-image,
.game .background .menu .menu-options-container .menu-options-main-container .menu-options-main-image,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-image,
.game .background .menu .menu-options-container .menu-options-text-container .menu-options-text-image {
	position: absolute;
	width: 100%;
    height: 100%;
    z-index: -1;
}

.intro .background .help .help-container .help-title,
.intro .background .options .options-main-container .options-main-title,
.intro .background .options .options-audio-container .options-audio-title,
.intro .background .options .options-text-container .options-text-title,
.game .background .menu .menu-status-container .menu-status-title,
.game .background .menu .menu-options-container .menu-options-main-container .menu-options-main-title,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-title,
.game .background .menu .menu-options-container .menu-options-text-container .menu-options-text-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 2% 4% 2% 4%;
}

.intro .background .help .help-container .help-title .help-text,
.intro .background .options .options-main-container .options-main-title .options-main-title-text,
.game .background .menu .menu-status-container .menu-status-title-text,
.game .background .menu .menu-options-container .menu-options-main-container .menu-options-main-title-text {
	text-shadow: none;
	filter: blur(.05rem);
	animation-name: optionShow;
	animation-duration: .8s;
}

.intro .background .options .options-audio-container .options-audio-title .options-audio-title-text,
.intro .background .options .options-text-container .options-text-title .options-text-title-text,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-title-text,
.game .background .menu .menu-options-container .menu-options-text-container .menu-options-text-title-text {
	text-shadow: none;
	filter: blur(.05rem);
}

.intro .background .help .help-container .help-title .help-close,
.intro .background .options .options-main-container .options-main-title .options-main-close,
.intro .background .options .options-audio-container .options-audio-title .options-audio-close,
.intro .background .options .options-text-container .options-text-title .options-text-close,
.game .background .menu .menu-options-container .menu-options-main-container .menu-options-main-title .menu-options-main-close,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-title .menu-options-audio-close,
.game .background .menu .menu-options-container .menu-options-text-container .menu-options-text-title .menu-options-text-close {
	text-shadow: none;
	filter: blur(.05rem);
	animation-duration: .4s;
	animation-fill-mode: forwards;
}

.intro .background .help .help-container .help-title .help-close:hover,
.intro .background .options .options-main-container .options-main-title .options-main-close:hover,
.intro .background .options .options-audio-container .options-audio-title .options-audio-close:hover,
.intro .background .options .options-text-container .options-text-title .options-text-close:hover,
.game .background .menu .menu-options-container .menu-options-main-container .menu-options-main-title .menu-options-main-close:hover,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-title .menu-options-audio-close:hover,
.game .background .menu .menu-options-container .menu-options-text-container .menu-options-text-title .menu-options-text-close:hover {
	color: #3e3e3e;
}

.intro .background .help .help-container .help-body {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 68.5%;
}

.intro .background .help .help-container .help-body .help-group {
	display: flex;
	flex-wrap: wrap;
	flex: 100%;
	padding: 1.5rem 0 0;
}

.intro .background .help .help-container .help-body .help-group .help-line {
	flex: 100%;
	color: #ffffff;
	font-family: Titillium Web;
	font-size: 1.5rem;
	text-align: center;
	text-shadow: .079rem .053rem 0 #000000;
	letter-spacing: .053rem;
}

.intro .background .help .help-container .help-body .help-group .help-line.help-author {
	font-family: Titillium Web Bold;
	font-size: 2rem;
}

.intro .background .help .help-container .help-body .help-group .help-line.help-email {
	font-family: Titillium Web Bold;
}

.intro .background .help .help-container .help-body .help-group .help-line.help-version {
	text-align: right;
}

.intro .background .options .options-main-container .options-main-choices,
.intro .background .options .options-audio-container .options-audio-choices,
.intro .background .options .options-text-container .options-text-choices,
.game .background .menu .menu-options-container .menu-options-main-container .menu-options-main-choices,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-choices,
.game .background .menu .menu-options-container .menu-options-text-container .menu-options-text-choices {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.intro .background .options .options-audio-container .options-audio-choices,
.intro .background .options .options-text-container .options-text-choices,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-choices,
.game .background .menu .menu-options-container .menu-options-text-container .menu-options-text-choices {
	width: 38.5%;
	height: 50%;
}

.intro .background .options .options-main-container .options-main-choices .options-main-choice,
.game .background .menu .menu-options-container .menu-options-main-container .menu-options-main-choices .menu-options-main-choice {
	flex: 100%;
	font-size: 3.5rem;
	text-align: center;
	text-shadow: .105rem .105rem 0 #000000;
}

.intro .background .options .options-main-container .options-main-choices .options-main-choice:hover,
.game .background .menu .menu-options-container .menu-options-main-container .menu-options-main-choices .menu-options-main-choice:hover {
	color: #3e3e3e;
}

.intro .background .options .options-audio-container .options-audio-choices .options-audio-choice,
.intro .background .options .options-text-container .options-text-choices .options-text-choice,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-choices .menu-options-audio-choice,
.game .background .menu .menu-options-container .menu-options-text-container .menu-options-text-choices .menu-options-text-choice {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex: 100%;
	margin: 0 0 2% 0;
	font-size: 2.5rem;
	text-align: center;
}

.intro .background .options .options-audio-container .options-audio-choices .options-audio-choice-radio,
.intro .background .options .options-text-container .options-text-choices .options-text-choice-radio,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-choices .menu-options-audio-choice-radio,
.game .background .menu .menu-options-container .menu-options-text-container .menu-options-text-choices .menu-options-text-choice-radio {
	width: 100%;
	height: 5.2%;
	border-radius: 1rem;
	filter: blur(.025rem);
	cursor: inherit;
	-webkit-appearance: none;
}

.intro .background .options .options-audio-container .options-audio-choices .options-audio-choice-radio:focus,
.intro .background .options .options-text-container .options-text-choices .options-text-choice-radio:focus,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-choices .menu-options-audio-choice-radio:focus,
.game .background .menu .menu-options-container .menu-options-text-container .menu-options-text-choices .menu-options-text-choice-radio:focus {
	outline: none;
}

.intro .background .options .options-audio-container .options-audio-choices .options-audio-choice-radio::-webkit-slider-thumb,
.intro .background .options .options-text-container .options-text-choices .options-text-choice-radio::-webkit-slider-thumb,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-choices .menu-options-audio-choice-radio::-webkit-slider-thumb,
.game .background .menu .menu-options-container .menu-options-text-container .menu-options-text-choices .menu-options-text-choice-radio::-webkit-slider-thumb {
	width: 2rem;
	height: 2rem;
	border: none;
	border-radius: 50%;
	background-color: #ffffff;
	-webkit-appearance: none;
}

.intro .background .options .options-audio-container .options-audio-choices .options-audio-choice-radio::-moz-range-thumb,
.intro .background .options .options-text-container .options-text-choices .options-text-choice-radio::-moz-range-thumb,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-choices .menu-options-audio-choice-radio::-moz-range-thumb,
.game .background .menu .menu-options-container .menu-options-text-container .menu-options-text-choices .menu-options-text-choice-radio::-moz-range-thumb {
	width: 2rem;
	height: 2rem;
	border: none;
	border-radius: 50%;
	background-color: #ffffff;
	-webkit-appearance: none;
}

.intro .background .options .options-audio-container .options-audio-test,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-test {
	position: absolute;
	right: 14.3%;
    bottom: 15.2%;
	text-shadow: .105rem .105rem 0 #000000;
}

.intro .background .options .options-audio-container .options-audio-test:hover,
.game .background .menu .menu-options-container .menu-options-audio-container .menu-options-audio-test:hover {
	color: #3e3e3e;
}

.intro .background .help .help-light,
.intro .background .options .options-light,
.game .background .menu .menu-light {
	position: absolute;
	right: 0;
	height: 100%;
	transition-property: opacity;
	transition-duration: .5s;
	animation-name: passingLight;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.intro .background .exit {
	display: none;
	align-items: center;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.intro .background .exit .exit-container,
.game .background .menu .menu-exit-container .menu-exit-question-container {
	display: flex;
	justify-content: center;
	align-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	width: 100%;
	height: 28%;
	animation-duration: .4s;
	animation-fill-mode: forwards;
}

.intro .background .exit .exit-container .exit-image,
.game .background .menu .menu-exit-container .menu-exit-question-container .menu-exit-question-image {
	position: absolute;
	width: 100%;
    height: 100%;
    z-index: -1;
}

.intro .background .exit .exit-container .exit-message,
.game .background .menu .menu-exit-container .menu-exit-question {
	flex: 100%;
	color: #000000;
	font-size: 2.6rem;
	text-align: center;
	text-shadow: none;
}

.intro .background .exit .exit-responses,
.game .background .menu .menu-exit-container .menu-exit-responses {
	display: flex;
	justify-content: space-around;
	width: 30%;
}

.intro .background .exit .exit-responses .exit-response,
.game .background .menu .menu-exit-container .menu-exit-responses .menu-exit-response {
	color: #000000;
	font-size: 4.2rem;
	text-shadow: none;
}

.intro .background .exit .exit-responses .exit-response:hover,
.game .background .menu .menu-exit-container .menu-exit-responses .menu-exit-response:hover {
	color: #4d4d4d;
}

.intro .background .resources-loader {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.intro .background .resources-loader .resource {
	position: absolute;
	height: 100%;
}

/* GAME */

body {
	margin: 0;
	cursor: url("../images/icons/cursor.png") 15 15, auto;
}

.game {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	background-color: #000000;
	overflow: hidden;
}

.game .background {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	animation-name: show;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

.game .background .background-image {
	width: 100vw;
	height: auto;
	animation-duration: 1.6s;
	animation-fill-mode: forwards;
}

.game .background .background-image:last-of-type {
	position: absolute;
}

.game .background .background-container {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: flex-end;
	flex-wrap: wrap;
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.game .background .character-box {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.game .background .character-box .character {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.game .background .character-box .character:nth-child(2) {
	z-index: 2;
}

.game .background .character-box .character:nth-child(3) {
	z-index: 3;
}

.game .background .character-box .character:nth-child(4) {
	z-index: 4;
}

.game .background .character-box .character .character-image {
	position: absolute;
	height: 89.7%;
	transition-property: transform;
	transition-duration: .8s;
	animation-duration: .8s;
	animation-fill-mode: forwards;
	z-index: 1;
}

.game .background .decision-box,
.game .background .text-box {
	display: flex;
	justify-content: center;
	width: 100%;
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: cover;
	z-index: 3;
}

.game .background .decision-box {
	position: relative;
	min-height: 40%;
	background-image: url("../images/backgrounds/decision-box.png");
	visibility: hidden;
	animation-duration: .8s;
	animation-fill-mode: forwards;
	z-index: 5;
}

.game .background .decision-box .decision-box-container {
	display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
	width: 60%;
	margin: 1rem 0;
}

.game .background .decision-box .decision-box-container .decision {
	display: none;
	flex: 100%;
	margin: .2rem 0 .2rem;
	text-align: center;
}

.game .background .decision-box .decision-box-container .decision:hover {
	color: #4d4d4d;
}

.game .background .text-box {
	height: auto;
	min-height: 30%;
	background-image: url("../images/backgrounds/text-box.png");
	animation-duration: .4s;
	animation-fill-mode: forwards;
}

.game .background .text-box .text-box-container {
	width: 74%;
	margin: 1rem 0;
}

.game .background .text-box .text-box-container .name {
	display: none;
	margin: 0 0 .37rem 0;
	font-size: 3.25rem;
	text-shadow: .053rem .053rem 0 #000000;
}

.game .background .text-box .text-box-container .line {
	display: none;
	height: .11rem;
	min-height: .053rem;
	background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 62%);
}

.game .background .text-box .text-box-container .input {
	border: none;
	border-bottom: .053rem solid #ffff00;
    outline: none;
	background: transparent;
    color: #ffff00;
	font-family: Titillium Web;
    font-size: 2rem;
}

.game .background .narration-box {
	display: flex;
	justify-content: center;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url("../images/backgrounds/narration-box.png");
	background-repeat: no-repeat;
    background-position: bottom left;
    background-size: cover;
	animation-duration: .8s;
	animation-fill-mode: forwards;
	z-index: 3;
}

.game .background .narration-box .narration-box-container {
	width: 79%;
	margin: 10rem 0;
}

.game .background .click-captor {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 4;
}

.game .background .menu {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 6;
}

.game .background .menu .menu-image {
	position: absolute;
	width: 100%;
    height: 100%;
	opacity: .7;
	animation-duration: .8s;
	animation-fill-mode: forwards;
}

.game .background .menu .menu-container {
    display: flex;
    justify-content: center;
    align-content: flex-start;
    flex-wrap: wrap;
	width: 100%;
    height: 100%;
	animation-duration: .8s;
	animation-fill-mode: forwards;
	z-index: 1;
}

.game .background .menu .menu-title {
	flex: 100%;
	padding: .7% 0 1.2%;
	font-size: 3.95rem;
	text-align: center;
	text-shadow: none;
	filter: blur(.05rem);
}

.game .background .menu .menu-options {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	width: 70%;
	animation-name: reappear;
	animation-duration: .8s;
	animation-fill-mode: forwards;
	z-index: 2;
}

.game .background .menu .menu-options .menu-option {
	font-size: 2.45rem;
	text-shadow: none;
	opacity: .3;
	filter: blur(.05rem);
	transition: opacity .1s;
}

.game .background .menu .menu-options .menu-option:first-child,
.game .background .menu .menu-options .menu-option:last-child {
	font-size: 3.25rem;
}

.game .background .menu .menu-options .menu-option:nth-child(2),
/*.game .background .menu .menu-options .menu-option:nth-child(3),*/
.game .background .menu .menu-options .menu-option:nth-child(6) {
	font-size: 2.85rem;
}

/*.game .background .menu .menu-options .menu-option:nth-child(3) {
	position: relative;
	bottom: -.1rem;
}*/

.game .background .menu .menu-options .menu-option:hover {
	opacity: 1;
}

.game .background .menu .menu-status-container,
.game .background .menu .menu-achievements-container,
.game .background .menu .menu-options-container,
.game .background .menu .menu-exit-container {
	display: none;
	align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
}
.game .background .menu .menu-status-container {
    top: 4.6%;
}

.game .background .menu .menu-status-container .menu-status-main-container {
	height: 81.5%;
}

.game .background .menu .menu-status-container .menu-status-title {
	padding-top: 3.7%;
}

.game .background .menu .menu-status-container .menu-status-info {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	width: 65%;
	height: 77%;
}

.game .background .menu .menu-status-container .menu-status-info .menu-status-info-character-container {
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 47%;
}

.game .background .menu .menu-status-container .menu-status-info .menu-status-info-character {
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
	width: 20%;
}

.game .background .menu .menu-status-container .menu-status-info .menu-status-info-character-image {
	height: 63%;
}

.game .background .menu .menu-status-container .menu-status-info .menu-status-info-character-status {
	flex: 100%;
	text-align: center;
}

.game .background .menu .menu-status-container .menu-status-info .menu-status-info-character-status-text {
	font-family: Titillium Web;
	font-size: 1.1rem;
	letter-spacing: .053rem;
}

.game .background .menu .menu-status-container .menu-status-info .menu-status-info-character-status-current {
	padding: 0 0 0 .2rem;
	font-family: Titillium Web Bold;
	font-size: 1.2rem;
	text-shadow: .053rem .053rem 0 #000000;
	letter-spacing: .053rem;
}

.game .background .menu .menu-status-container .menu-status-info .menu-status-info-card-container {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	height: 53%;
}

.game .background .menu .menu-status-container .menu-status-info .menu-status-info-card-image {
	height: 100%;
}

.game .background .menu .menu-status-container .menu-status-info .menu-status-info-item-container {
	display: flex;
    flex-direction: column-reverse;
    position: absolute;
    bottom: 7.9%;
    right: 3.7%;
	width: 3.65%;
}

.game .background .menu .menu-status-container .menu-status-info .menu-status-info-item {
	padding: 28.5% 0 0;
}

.game .background .menu .menu-status-container .menu-status-info .menu-status-info-item:last-of-type {
	padding: 0;
}

.game .background .menu .menu-status-container .menu-status-info .menu-status-info-item-image {
	width: 100%;
}

.game .background .menu .menu-status-container .menu-status-info .menu-status-info-item-quantity {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 1.5rem;
}

.game .background .menu .menu-exit-container {
	z-index: 2;
}

.game .background .flashlight {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url("../images/backgrounds/flashlight.png");	
	background-size: cover;
	z-index: 2;
}

.game .background .transition-background {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000000;
	animation-fill-mode: forwards;
	z-index: 5;
}

.game .background .color-selector {
	display: none;
	justify-content: space-between;
    align-items: flex-start;
	align-self: flex-start;
	flex-wrap: wrap;
	position: absolute;
	top: 0%;
	width: 100%;
	padding: 4.5rem;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	z-index: 5;
}

.game .background .color-selector .color-selector-color {
	flex: calc(20% - 2rem);
	overflow: hidden;
	margin: 2rem 1rem;
	color: #ffffff;
	font-size: 3.25rem;
	text-align: center;
	transition-property: transform;
	transition-duration: .2s;
	animation-duration: .5s;
	animation-fill-mode: forwards;
}

.game .background .color-selector .color-selector-color:hover {
	transform: scale(1.2);
}

.game .background .color-selector .color-selector-color.blue {
	color: #0000ff;
}

.game .background .color-selector .color-selector-color.red {
	color: #ff0000;
}

.game .background .color-selector .color-selector-color.yellow {
	color: #ffff00;
}

.game .background .color-selector .color-selector-color.green {
	color: #008000;
}

.game .background .color-selector .color-selector-color.gray {
	color: #d3d3d3;
}

.game .background .color-selector .color-selector-color.cyan {
	color: #00ffff;
}

.game .background .color-selector .color-selector-color.magenta {
	color: #ff00ff;
}

.game .background .color-selector .color-selector-color.lime {
	color: #00ff00;
}

.game .background .color-selector .color-selector-color.orange {
	color: #ffa500;
}

.game .background .color-selector .color-selector-color.gold {
	color: #ffd700;
}

.game .background .color-selector .color-selector-color.silver {
	color: #bfbfbf;
}

.game .background .color-selector .color-selector-color.brass {
	color: #b5a642;
}

.game .background .color-selector .color-selector-color.bronze {
	color: #cd7f32;
}

.game .background .color-selector .color-selector-color.copper {
	color: #cb6d51;
}

.game .background .color-selector .color-selector-color.olive {
	color: #808000;
}

.game .background .color-selector .color-selector-color.brown {
	color: #8b4513;
}

.game .background .color-selector .color-selector-color.teal {
	color: #008080;
}

.game .background .color-selector .color-selector-color.purple {
	color: #800080;
}

.game .background .color-selector .color-selector-color.maroon {
	color: #800000;
}

.game .background .character-selector {
	display: none /*flex*/;
	justify-content: space-between;
    align-items: center;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 5rem;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	perspective: 40rem;
	z-index: 5;
}

.game .background .character-selector .character-selector-image {
	margin: 2rem;
	transition-duration: .5s;
	transform: rotateX(45deg) scale(.7) translateY(-1rem);
	animation-duration: .5s;
	animation-fill-mode: forwards;
}

.game .background .character-selector .character-selector-image:hover {
	transform: rotateX(0) scale(1) translateY(1rem);
	z-index: 1
}

.game .background .character-selector .character-selector-image:nth-child(1):hover {
	transform: rotateX(0) scale(1) translate(2rem, 1rem);
}

.game .background .character-selector .character-selector-image:nth-child(2):hover {
	transform: rotateX(0) scale(1) translate(1rem, 1rem);
}

.game .background .character-selector .character-selector-image:nth-child(4):hover {
	transform: rotateX(0) scale(1) translate(-1rem, 1rem);
}

.game .background .character-selector .character-selector-image:nth-child(5):hover {
	transform: rotateX(0) scale(1) translate(-2rem, 1rem);
}

.game .background .character-selector .character-selector-image img {
	width: 100%;
	box-shadow: 0 1rem 4rem -1rem #ccc;
	transition-duration: .5s;
}

.game .background .character-selector .character-selector-image img:hover {
	width: 100%;
	box-shadow: 0 0 4rem -1rem #ccc;
}

.game .background .ixomen-sphere-icon {
	position: absolute;
	bottom: 0;
	right: 1rem;
	width: 4rem;
	visibility: hidden;
	animation-duration: .4s;
	animation-fill-mode: forwards;
	z-index: 4;
}

.game .background .ixomen-sphere {
	display: none;
	justify-content: center;
	align-items: flex-start;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #000000;
	transform-origin: 50% 45%;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	perspective: 40rem;
	z-index: 5;
}

.game .background .ixomen-sphere .ixomen-sphere-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50.625%;
	height: 90%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface {
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	position: relative;
    top: 2.25%;
    width: 80%;
    height: 44.5%;
	padding: 1rem;
	visibility: hidden;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section {
	display: flex;
	flex-wrap: wrap;
	flex: calc(25% - .4rem);
	height: 90%;
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section:nth-child(2) {
	flex: calc(50% - .4rem);
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section .ixomen-sphere-button {
	display: flex;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	flex: 100%;
	margin: .2rem;
    border: .1rem solid #a8cee8;
    border-radius: .5rem;
	transition-duration: .2s;
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section:nth-child(2) .ixomen-sphere-button:nth-child(1) {
	height: calc(50% - .4rem);
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section:nth-child(2) .ixomen-sphere-button:nth-child(2),
.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section:nth-child(2) .ixomen-sphere-button:nth-child(3) {
	flex: calc(50% - .4rem);
	height: calc(25% - .4rem);
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section:nth-child(2) .ixomen-sphere-button:nth-child(4) {
	height: calc(25% - .4rem);
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section:nth-child(3) .ixomen-sphere-button {
	align-items: flex-start;
	align-content: initial;
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section .ixomen-sphere-button:hover {
	background: #a8cee866;
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section .ixomen-sphere-button.active {
	box-shadow: 0px 0px 0.5rem 0px rgba(255,255,255,1);
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section:nth-child(3) .ixomen-sphere-button:hover {
	background: none;
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section .ixomen-sphere-button .ixomen-sphere-button-icon {
	width: 33.33%;
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section:nth-child(2) .ixomen-sphere-button:nth-child(1) .ixomen-sphere-button-icon,
.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section:nth-child(2) .ixomen-sphere-button:nth-child(2) .ixomen-sphere-button-icon,
.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section:nth-child(2) .ixomen-sphere-button:nth-child(3) .ixomen-sphere-button-icon {
	width: 16.66%;
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section:nth-child(2) .ixomen-sphere-button:nth-child(4) .ixomen-sphere-button-icon {
	width: 8.33%;
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section:nth-child(3) .ixomen-sphere-button .ixomen-sphere-button-icon {
	align-self: flex-end;
	width: 16.66%;
}

.game .background .ixomen-sphere .ixomen-sphere-container .ixomen-sphere-interface .ixomen-sphere-section .ixomen-sphere-button .ixomen-sphere-button-label {
	width: 100%;
	color: #a8cee8;
	font-size: 1.5rem;
	text-align: center;
	text-shadow: none;
}

.game .background .ixomen-sphere .ixomen-sphere-upper-light {
	position: absolute;
	top: .4rem;
	left: 27.2%;
	width: 45.5625%;
	height: 81%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 0, #ffffff, rgba(255, 255, 255, 0) 58%);
	filter: blur(.5rem);
}

.game .background .ixomen-sphere .ixomen-sphere-shine {
	width: 50.625%;
	height: 90%;
	position: absolute;
	background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1), rgba(255, 255, 255, .4) 40%, rgba(255, 255, 255, 0) 60%);
	transform: rotateX(105deg) translateZ(-19.5rem);
	z-index: -1;
}

.game .background .responsive-menu {
	position: absolute;
	top: 2rem;
	right: 2rem;
	width: 4.2rem;
	height: 4.2rem;
	visibility: hidden;
	z-index: 4;
}

.game .background .demo-end {
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 2rem;
	background-color: #000000;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	visibility: hidden;
	z-index: 1;
}

.game .background .demo-end .demo-end-text {
	flex: 100%;
	margin-bottom: 1rem;
	font-size: 3rem;
	text-align: center;
	animation-name: show;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.game .background .demo-end .demo-end-link {
	display: flex;
    justify-content: center;
    align-items: center;
	text-decoration: none;
	animation-name: show;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.game .background .demo-end .demo-end-link .demo-end-link-image {
	width: 3.15rem;
	margin: 0 .5rem 0 0;
}

.game .background .demo-end .demo-end-link .demo-end-link-account {
	font-size: 3rem;
}

.game .background .demo-end .demo-end-text-logo {
	width: 25rem;
	margin-bottom: 2rem;
	animation-name: show;
	animation-duration: 1s;
	animation-fill-mode: forwards;
}

.game .background .demo-end .demo-end-text-dragon {
	position: absolute;
	bottom: 12.5%;
	right: 48.3%;
	width: 4.45rem;
	animation-name: dragonShow;
	animation-duration: .5s;
	animation-fill-mode: forwards;
	visibility: visible;
}

.game .background .demo-end .wave-container {
	display: flex;
    justify-content: center;
    align-items: center;
	position: absolute;
	bottom: 10.9%;
    right: 47.55%;
	width: 6rem;
	height: 6rem;
}

.game .background .demo-end .wave {
	width: 2rem;
	height: 2rem;
	border: .2rem solid #ffffff99;
	border-radius: 50%;
	animation-name: touch;
	animation-duration: .8s;
	animation-fill-mode: forwards;
}

/* DANCE */

.dance {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	height: 100%;
	background-color: #000000;
	overflow: hidden;
}

.dance .background {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	animation-name: show;
	animation-duration: 2s;
	animation-fill-mode: forwards;
}

.dance .background .background-image {
	width: 100vw;
	height: auto;
	animation-duration: 1.6s;
	animation-fill-mode: forwards;
}

.dance .background .background-container {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: flex-end;
	flex-wrap: wrap;
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

.dance .background .progress {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 100%;
	position: relative;
	height: 25%;
}

.dance .background .progress .progress-bar {
	width: 90%;
	height: 10%;
	border-radius: 1rem;
	background-color: #ffffff;
	opacity: .8;
}

.dance .background .progress .progress-icon {
	position: absolute;
	left: 0;
	width: auto;
	height: 80%;
	transition-duration: .2s;
}

.dance .background .stage {
	flex: 50%;
	position: relative;
	height: 75%;
}

.dance .background .stage .stage-directions {
	display: flex;
	justify-content: space-between;
	padding: 2rem;
}

.dance .background .stage .stage-directions .stage-direction {
	width: 20%;
	height: 20%;
}

.dance .background .stage .stage-directions .stage-direction:nth-child(2) {
	transform: rotate(-90deg);
}

.dance .background .stage .stage-directions .stage-direction:nth-child(3) {
	transform: rotate(-270deg);
}

.dance .background .stage .stage-directions .stage-direction:nth-child(4) {
	transform: rotate(-180deg);
}

.dance .background .stage .stage-moves {
	display: flex;
	justify-content: space-between;
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 2rem 2rem 0;
}

.dance .background .stage .stage-moves .stage-moves-left,
.dance .background .stage .stage-moves .stage-moves-up,
.dance .background .stage .stage-moves .stage-moves-down,
.dance .background .stage .stage-moves .stage-moves-right {
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
	position: relative;
	width: 20%;
}

.dance .background .stage .stage-moves .stage-move {
	position: absolute;
	top: 100%;
	width: 100%;
	height: 22.9%;
	animation-name: arrow;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

.dance .background .score {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	flex: 50%;
	height: 75%;
}

.dance .background .score .score-points {
	display: flex;
	flex-wrap: wrap;
	flex: 100%;
	position: relative;
}

.dance .background .score .score-points .score-points-title {
	flex: 100%;
	font-size: 4rem;
	text-align: center;
}

.dance .background .score .score-points .score-points-number {
	flex: 100%;
	font-size: 10rem;
	text-align: center;
}

.dance .background .score .score-points .score-points-increment {
	position: absolute;
	top: 46%;
	left: 61%;
	font-size: 6rem;
	transition-duration: .5s;
	animation-name: hide;
	animation-duration: 1s;
	animation-delay: .5s;
}

.dance .background .score .score-combo {
	display: flex;
	flex-wrap: wrap;
	flex: 100%;
	position: relative;
}

.dance .background .score .score-combo .score-combo-title {
	flex: 100%;
	font-size: 4rem;
	text-align: center;
}

.dance .background .score .score-combo .score-combo-number {
	flex: 100%;
	font-size: 8rem;
	text-align: center;
}

.dance .background .score .score-combo .score-combo-failure {
	position: absolute;
	top: 33%;
	left: 43%;
	font-size: 8rem;
	transition-duration: 1s;
	animation-name: hide;
	animation-duration: 1s;
	animation-delay: .5s;
}
