/*APARTADO NEGOCIO*/
/*Cielo y suelo*/
.negocio .cielo {
	background: rgb(177, 177, 157);
	background: linear-gradient(
		0deg,
		rgb(209 209 185) 0%,
		rgb(222 222 200) 50%,
		rgba(136, 153, 134, 1) 100%
	);
	position: fixed;
	left: 0;
	top: 0;
	/* width: 100%; */
	width: 150rem;
	/* height: 100vh; */
	height: 100%;
	z-index: 1;
}
.negocio .cielo .nubes {
	background: url('../img/situacion2/nubes.svg') repeat-x;
	position: absolute;
	width: 100%;
	height: 450px;
	top: 150px;
	left: 100px;
	animation: wiggle-nubes 6s infinite;
	animation-timing-function: ease-in-out;
}
@keyframes wiggle-nubes {
	0% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}
	50% {
		-webkit-transform: translateX(10px);
		transform: translateX(10px);
	}
	100% {
		-webkit-transform: translateX(-10px);
		transform: translateX(-10px);
	}
}
.negocio .cielo .estrellas {
	background: url('../img/situacion2/estrellas.svg') repeat-x;
	position: absolute;
	top: 0;
	left: 140px;
	width: 100%;
	height: 470px;
	animation: tileo-estrellas 6s infinite;
}
@keyframes tileo-estrellas {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.2;
	}
	100% {
		opacity: 1;
	}
}

.negocio .suelo {
	background: #3a3a3a;
	bottom: 0;
	display: block;
	height: 100px;
	left: 0;
	position: fixed;
	/* width: 100%; */
	width: 150rem;
	will-change: auto;
	z-index: 48;
}

.negocio .suelo .bordeSuelo {
	width: 100%;
	height: 25px;
	background: #444444;
	position: absolute;
	top: 0;
}
.negocio .suelo .piedrasSuelo {
	position: absolute;
	top: 25px;
	left: 280px;
	width: 100%;
	height: 140px;
	background: url('../img/situacion2/piedras_suelo.svg') repeat-x;
}
.negocio .suelo .plantasSuelo {
	position: absolute;
	top: -28px;
	left: 530px;
	width: 100%;
	height: 140px;
	background: url('../img/situacion2/plantasSuelo.svg') repeat-x;
}

.negocio .arbolFront {
	position: absolute;
	bottom: 0px;
	left: 1080px;
	width: 100%;
	height: 413px;
	z-index: 48;
	background: url('../img/situacion2/arbol_front.svg') no-repeat;
}

/* ESCENA 1 */
.negocio .escena1 {
	width: 50.2rem;
	height: 100%;
	overflow-x: hidden;
	/* border-right:2px solid hotpink; */
	position: relative;
	z-index: 1;
	padding-top: 80px; /*Lleva este padding porque se redujo la altura del suelo y asi no tenemos que recolocar todos los elementos*/
}

.negocio .escena1 .montains {
	position: absolute;
	bottom: 158px;
	left: 20px;
	width: 100%;
	height: 265px;
	background: url('../img/situacion2/montains1.svg') repeat-x;
}
.negocio .escena1 .arbolesBack_1,
.negocio .escena1 .arbolesBack_2 {
	position: absolute;
	bottom: 140px;
	left: 500px;
	width: 100%;
	height: 221px;
	background: url('../img/situacion2/arbolesBack_1.svg') no-repeat;
}
/*.negocio .escena1 .arbolesBack_2{
   left: 2300px;
   background: url("../img/situacion1/arbolesBack_2.svg") no-repeat;
}*/

.negocio .escena1 .casasFondo {
	position: absolute;
	bottom: 160px;
	left: 500px;
	width: 100%;
	height: 215px;
	background: url('../img/situacion2/casasFondoBack.svg') no-repeat;
}

.negocio .escena1 .naveIncial,
.negocio .escena1 .naveLimpia {
	position: absolute;
	bottom: 145px;
	left: 25rem;
	width: 970px;
	height: 564px;
	z-index: 2;
	background: url('../img/situacion2/naveInicial.png') no-repeat;
}
.naveIncial .imgDesastresNave {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 970px;
	z-index: 2;
	height: 564px;
	/* background: url("../img/desastre.svg") no-repeat; */
	background: url('../img/situacion2/naveFuego.png') no-repeat;

	animation: desastres 1.5s steps(7) infinite;
}
@keyframes desastres {
	0% {
		background-position: 0;
	}
	100% {
		background-position: -6790px;
	}
}

.negocio .escena1 .naveLimpia {
	background: url('../img/situacion2/naveLimpia.png') no-repeat;
	display: none;

	animation: desastres 2s steps(7) infinite;
}

.texto_negocio {
	position: absolute;
	top: 25px;
	left: 8rem;
	z-index: 2;
	width: 712px;
}
.texto_negocio h1,
.texto_negocio h3 {
	position: relative;
	transition: 0.8s ease-out all;
	opacity: 0;
	line-height: 1.2;
	color: #292c5f;
	font-size: 20px;
	background: #f5f0e5;
	padding: 30px 30px;
	border-radius: 12px;
}

.texto_negocio h3 {
	-webkit-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	transition-delay: 0.4s;
}

.texto_Negocio_3 {
	position: absolute;
	top: 170px;
	left: 9px;
	z-index: 2;
	width: 550px;
}
.texto_Negocio_3 h1,
.texto_Negocio_3 h3 {
	position: relative;
	transition: 0.8s ease-out all;
	opacity: 0;
	line-height: 1.2;
	color: #292c5f;
	font-size: 20px;
	background: transparent;
	padding: 35px 45px;
	border-radius: 0;
}

.texto_Negocio_3 #btnTel_3 {
	right: -354px;
}
.negocio .soluciones {
	position: absolute;
	top: 30px;
	left: 8rem;
	z-index: 2;
	width: 742px;
	color: #4d4d4d;
	background: #f5f0e5;
	padding: 40px 60px;
	border-radius: 12px;
	transform: translateX(23rem);
	display: none;
}

.negocio #solucion2_3 {
	background: transparent;
	width: 557px;
	left: 0;
	top: 185px;
}

/* FIN ESCENA 1 */

/* ESCENA 2 */
.negocio .escena2 {
	width: 100%;
	height: 100%;
	/* overflow-x: hidden; */
	/* border-right:2px solid rgb(72, 253, 35); */
	position: relative;
	z-index: 1;
	padding-top: 80px;
}

.negocio .escena2 .fondoCiudad {
	position: absolute;
	bottom: 157px;
	left: 105px;
	width: 100%;
	/* border-right: 2px solid red; */
	height: 380px;
	background: url('../img/situacion2/fondoCiudad.svg') repeat-x;
}
.negocio .escena2 .arbolesBack_2 {
	position: absolute;
	bottom: 142px;
	left: 290px;
	width: 100%;
	height: 260px;
	z-index: 1;
	background: url('../img/situacion2/arbolesBack_2.svg') no-repeat;
}

.negocio .escena2 .tienda,
.negocio .escena2 .tiendaLimpia {
	position: absolute;
	bottom: 149px;
	left: 12rem;
	width: 970px;
	z-index: 2;
	height: 769px;
	/* background: url('../img/situacion2/tienda.png') no-repeat; */
}
.tienda .tiendaRobo {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 970px;
	z-index: 2;
	height: 769px;
	background: url('../img/situacion2/tiendaRobo.png') no-repeat;

	animation: robo 2s steps(7) infinite;
}
@keyframes robo {
	0% {
		background-position: 0;
	}
	100% {
		background-position: -6790px;
	}
}

.negocio .escena2 .tiendaLimpia {
	background: url('../img/situacion2/tiendaLimpia.png') no-repeat;
	display: none;
	animation: robo 2s steps(7) infinite;
}

.tazaCafe {
	position: absolute;
	bottom: 68px;
	left: 69rem;
	width: 340px;
	z-index: 2;
	height: 490px;
	background: url('../img/situacion2/TazaCafe.png') no-repeat;

	animation: anim-taza 4s steps(7) infinite;
}
@keyframes anim-taza {
	0% {
		background-position: 0;
	}
	100% {
		background-position: -2380px;
	}
}

.negocio .escena2 .mac {
	position: absolute;
	bottom: 163px;
	left: 40rem;
	width: 970px;
	z-index: 2;
	height: 769px;
	background: url('../img/situacion2/mac.png') no-repeat;
}

.negocio .escena2 .macDesastres,
.negocio .escena2 .macLimpio {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 970px;
	z-index: 2;
	height: 769px;
	background: url('../img/situacion2/macDesastre.png') no-repeat;
	animation: animapc 3s steps(13) infinite;
}
@keyframes animapc {
	0% {
		background-position: 0;
	}
	100% {
		background-position: -12610px;
	}
}

.negocio .escena2 .macLimpio {
	background: url('../img/situacion2/macBrillo.png') no-repeat;
	display: none;
	animation: maclean 2s steps(7) infinite;
}
@keyframes maclean {
	0% {
		background-position: 0;
	}
	100% {
		background-position: -6790px;
	}
}

.negocio .libros {
	position: absolute;
	bottom: 100px;
	left: 85.5rem;
	z-index: 2;
}
/* FIN ESCENA 2 */

.negocio .textoFin {
	position: absolute;
	top: 150px;
	left: 65rem;
	color: #282b5f;
	font-style: italic;
	width: 540px;
}
.negocio .textoFin span {
	color: #bb9839;
	font-size: 85px;
	line-height: 1.2;
}
.negocio .btnFinal {
	font-size: 18px;
	line-height: 1;
	background: #282b5f;
	color: #fff;
	border-radius: 25px;
	width: 145px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-style: normal;
	cursor: pointer;
}
/* FIN ESCENA 3 Y 4*/

.sol {
	position: absolute;
	left: 3.8rem;
	bottom: 140px;
	z-index: 1;
}

.sol span {
	border-radius: 10000px;
	-webkit-animation-duration: 8s;
	animation-duration: 8s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
	left: 50%;
	position: absolute;
	top: 50%;
	will-change: transform, opacity;
}

.sol span:nth-child(1) {
	animation-name: temple_fire_raysLight_1;
	/* background-color: rgba(233,153,14,.4); */
	background-color: #fff;
	height: 85px;
	margin: -133px 0 0 -133px;
	width: 85px;
	z-index: 4;
}
.sol span:nth-child(2) {
	animation-name: temple_fire_raysLight_2;
	background-color: rgba(226, 226, 197, 0.5);
	height: 165px;
	margin: -172px 0 0 -172px;
	width: 165px;
	z-index: 2;
}
.sol span:nth-child(3) {
	-webkit-animation-name: temple_fire_raysLight_3;
	animation-name: temple_fire_raysLight_3;
	background-color: rgba(216, 216, 186, 0.35);
	height: 240px;
	margin: -208px 0 0 -208px;
	width: 240px;
	z-index: 2;
}
@keyframes temple_fire_raysLight_1 {
	0% {
		opacity: 0.9;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	13% {
		opacity: 0.7;
		-webkit-transform: scale(0.85);
		transform: scale(0.85);
	}
	30% {
		opacity: 0.9;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	45% {
		opacity: 0.7;
		-webkit-transform: scale(0.95);
		transform: scale(0.95);
	}
	70% {
		opacity: 0.9;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	81% {
		opacity: 0.7;
		-webkit-transform: scale(0.85);
		transform: scale(0.85);
	}
	100% {
		opacity: 0.9;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes temple_fire_raysLight_2 {
	0% {
		opacity: 0.8;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	13% {
		opacity: 0.7;
		-webkit-transform: scale(0.83);
		transform: scale(0.83);
	}
	30% {
		opacity: 0.8;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	45% {
		opacity: 0.6;
		-webkit-transform: scale(0.93);
		transform: scale(0.93);
	}
	70% {
		opacity: 0.8;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	81% {
		opacity: 0.7;
		-webkit-transform: scale(0.83);
		transform: scale(0.83);
	}
	100% {
		opacity: 0.8;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes temple_fire_raysLight_3 {
	0% {
		opacity: 0.7;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	13% {
		opacity: 0.4;
		-webkit-transform: scale(0.82);
		transform: scale(0.82);
	}
	30% {
		opacity: 0.7;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	45% {
		opacity: 0.3;
		-webkit-transform: scale(0.92);
		transform: scale(0.92);
	}
	70% {
		opacity: 0.7;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	81% {
		opacity: 0.4;
		-webkit-transform: scale(0.82);
		transform: scale(0.82);
	}
	100% {
		opacity: 0.7;
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
/* FIN APARTADO HOGAR*/

/*PERSONAJES*/

#hombre {
	bottom: 92px;
	left: 100px;
	position: absolute;
	z-index: 1;
	/* Tamaño de la viñeta individual */
	/*width:112px;*/
	width: 158px;
	height: 176px;
	/* Cómo hay establecido un tamaño, centramos con margin:auto */
	margin: auto;
	/* Cargamos el sprite (el repeat-x se puede omitir, por defecto se repite) */
	/*background:url(../img/chicasard-sprite.png) repeat-x;*/
	background: url(../img/Man.png) repeat-x;

	/* Posicionamos el personaje sobre el camino de madera */
}
#hombre .bocaHombre {
	position: absolute;
	right: 0px;
	bottom: 155px;
	transition: 0.8s ease-out all;
	opacity: 0;
}

#hombre .bocaCheckHombre {
	position: absolute;
	top: -80px;
	right: 0;
	transition: 0.8s ease-out all;
	display: none;
}

#hombre.camina {
	/* Aplicamos la animación "walk": 0.8seg, 6 viñetas y repetimos infinitamente */
	animation: walk 0.8s steps(6) infinite;
}

/* Animación de personaje caminando: Simplemente mueve el sprite sheet hacia la izquierda, realizando el movimiento. */
@keyframes walk {
	/* Partimos de la primera viñeta del sprite sheet */
	0% {
		background-position: 0;
	}

	/* El tamaño total de ancho del sprite. Es negativo para que no "camine" hacia atrás */
	100% {
		background-position: -948px;
	}
}

@keyframes walk2 {
	/* Partimos de la primera viñeta del sprite sheet */
	0% {
		background-position: 0;
	}

	/* El tamaño total de ancho del sprite. Es negativo para que no "camine" hacia atrás */
	100% {
		background-position: 948px;
	}
}

/*FIN PERSONAJES*/