* {
	margin: 0;
	padding: 0;
	outline: none;
}

html {
	width: 100%;
	text-align: center;
	margin: 0 auto;
	overflow-x: hidden;
}

body {
	max-height: 100%;
	background: rgb(65, 72, 114);
	background: linear-gradient(rgb(0, 0, 64) 0%, rgb(65, 72, 114) 100%) 0% 0% no-repeat fixed;
	background-attachment: fixed;
	text-align: center;
	margin: 0 auto;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
}

.skrollable {
	/*
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	*/
}

#container {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	line-height: 0;
}

h1 {
	font-family: Arial;
	font-weight: bold;
	font-size: 100px;
	letter-spacing: -15px;
	color: #fff;
	margin: 50vh 0 -25px 0;
	padding: 0;
	text-shadow: 3px 3px 0 #ababab, -3px -3px 0 #ababab, -3px 3px 0 #ababab, 3px -3px 0 #ababab;
}

#cartel {
	display: block;
	width: 100%;
	max-width: 600px;
	height: 75vh;
	position: absolute;
	bottom: 25vh;
	margin: 0 calc(50% - 300px);
	text-align: center;
	z-index: -1;
}

#cartel1 {
	width: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	opacity: 0.5;
	z-index: -3;
}

#cartel2 {
	width: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: -2;
}

#cartel3 {
	width: 100%;
	position: absolute;
	bottom: 0px;
	left: 0px;
	z-index: -1;
	filter: drop-shadow(0 0 25px #fff) brightness(0.5);
	animation: glitch 0.5s ease-in 2;
	animation-delay: 1s;
}

@keyframes glitch {
	0% {
		filter: brightness(0);
	}
	50% {
		filter: brightness(0.5);
	}
	75% {
		filter: brightness(0);
	}
	100% {
		filter: brightness(2);
	}
}

#building {
	width: 85%;
	max-width: 1450px;
	background: #ccc;
	display: inline-block;
	margin-top: 75vh;
}

#roof {
	height: 25vh;
	background: #ccc;
	background-image: url(../img/piso.jpg);
	background-size: 33% auto;
	width: 100%;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	overflow-x: visible;
}

.floor {
	width: 100%;
	height: 100vh;
	min-height: calc(360px + 50px + 200px);
	/* window height + border + pad */
}

.floor,
#floor0 {
	background-color: #ccc;
	background-image: url(../img/wall.jpg);
	background-size: 59% auto;
	background-position: 50% 50%;
	border-top: 50px solid #ccc;
	-moz-border-image: url(../img/border.jpg) 45 repeat;
	-webkit-border-image: url(../img/border.jpg) 45 repeat;
	-o-border-image: url(../img/border.jpg) 45 repeat;
	border-image: url(../img/border.jpg) 45 repeat;
	border-image-outset: 0 10px;
	box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5) inset;
}

.window {
	display: block;
	overflow: hidden;
	position: relative;
	overflow: hidden;
	border-style: solid;
	border-width: 20px;
	border-color: rgba(255, 255, 255, 0.25);
	/*
	-moz-border-image: url(../img/border.jpg) 25 round;
	-webkit-border-image: url(../img/border.jpg) 25 round;
	-o-border-image: url(../img/border.jpg) 25 round;
	border-image: url(../img/border.jpg) 25 round;
*/
	box-shadow: 0px 2px 5px -3px rgba(0, 0, 0, 0.5);
	resize: none;
}

.window.single {
	width: 80%;
	max-width: 980px;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
	white-space: normal;
}

.windowHelper {
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

.window.single:before {
	content: "";
	float: left;
	padding-bottom: 58%;
}

.window.single:after {
	content: "";
	display: table;
	clear: both;
}

*,
*:before,
*:after {
	box-sizing: border-box;
}

.window.double {
	display: inline-block;
	width: calc(33% - 25px);
	height: 50vh;
	margin: 25vh 5%;
}

.wall {
	width: calc(100% + 20px);
	height: 150%;
	background-color: #fff;
	background-size: cover;
	background-position-y: 50%;
	background-position-x: 50%;
	display: block;
	position: absolute;
	overflow: visible;
	margin: -16% -10px;
	pointer-events: none;
}

.wall.white-wall {
	background-image: url(../img/white-wall.jpg);
	background-size: 200% 200%;
}

.light {
	width: 100%;
	height: auto;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 100;
	mix-blend-mode: overlay;
	pointer-events: none;
}

#light3 {
	/* mix-blend-mode: screen; */
}

.glass {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 99;
	pointer-events: none;
	opacity: 0;
}

.broken-glass {
	width: 35%;
	height: 35%;
	bottom: -9%;
	right: -12%;
	z-index: 99;
	pointer-events: none;
}


/* Walls */

#wall1 {
	background-color: #48565f;
	background-image: url(../img/pared1.jpg);
	background-size: 100% 100%;
}

#wall2 {
	background-color: transparent;
	background-image: url(../img/pared2.png);
	background-position-y: 60%;
	margin-top: -20%;
	pointer-events: none;
}

#wall3 {
	background-color: #888;
	background-image: url(../img/pared3.jpg);
	background-position-y: 66%;
}

#wall4 {
	background-color: #9cb881;
	background-image: url(../img/pared4.jpg);
	margin-top: -15%;
	background-position-y: 60%;
}

#wall5 {
	background-color: #b2b07a;
	background-image: url(../img/pared5.jpg);
	margin-top: -14%;
	background-position-y: 60%;
}

#wall6 {
	background-color: transparent;
	background-image: url(../img/pared6.png);
	margin-top: -17%;
	background-position-y: 60%;
}

#wall7 {
	height: 160%;
	background-color: #00bad3;
	background-image: url(../img/pared7.jpg);
	background-position-y: 35%;
	background-attachment: fixed;
}

#wall8 {
	height: 160%;
	background-color: #16140f;
	background-image: url(../img/pared8.jpg);
	background-position-y: 35%;
}

#wall9 {
	background-color: #70b5cb;
	background-image: url(../img/pared9.jpg);
	background-position-y: 50%;
}

#night {
	position: absolute;
	width: 100%;
	height: 62.25%;
	top: 0;
	left: 0;
}


/* Props */

.prop,
.innerprop {
	position: absolute;
}

.prop:not(.animation):empty,
.wallprop,
.untouchable {
	pointer-events: none;
}

.glass {
	pointer-events: none !important;
}


/* piso 1 */

#luna {
	width: 23.5%;
	top: -50%;
	left: 6%;
	filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.75));
}

#nube1 {
	width: 25%;
	left: -8%;
	top: 20%;
}

#nube2 {
	width: 27%;
	left: 100px;
	top: 80px;
}

#nube3 {
	width: 30%;
	right: 10%;
	top: 8%;
}

#nube4 {
	width: 18%;
	left: 50%;
	top: 20%;
}

#sillon1 {
	width: 100%;
	left: 0;
	bottom: -2%;
}

.ola {
	position: absolute;
	left: -2%;
	width: 104%;
	height: 33%;
	animation-name: wave;
	animation-iteration-count: infinite;
	animation-play-state: paused;
}

#ola1 {
	bottom: -8%;
	animation-duration: 10s;
	animation-direction: alternate;
}

#ola2 {
	bottom: -12%;
	animation-duration: 7s;
	animation-direction: alternate-reverse;
	animation-timing-function: ease-in-out;
}

#ola3 {
	bottom: -15%;
	animation-duration: 5s;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
	pointer-events: none;
}

#ola4 {
	bottom: -5%;
	animation: none;
}

#barco {
	width: 17%;
	bottom: 3%;
	left: 15%;
	animation: surf 15s ease-in-out infinite alternate;
	animation-play-state: paused;
	cursor: pointer;
}

#lampara {
	width: 35%;
	bottom: -10%;
	right: -5%;
	transform-origin: bottom;
	animation-name: lamp;
	animation-duration: 10s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
	animation-play-state: paused;
}

#lampara-lamp {
	position: absolute;
	width: 100%;
}

#lampara-luz {
	position: relative;
	width: 100%;
	animation: luz 15s linear infinite normal;
	animation-play-state: inherit;
	pointer-events: all !important;
}


/* piso 2 */

#sillon2-wrapper {
	width: 100%;
	height: 59.8%;
	bottom: 0;
	left: 0;
}

#sillon2 {
	bottom: -20%;
	left: 0;
	width: 100%;
}

#flores1 {
	bottom: -20%;
	left: 0;
	width: 100%;
}

.mariposa {
	width: 3.3%;
	height: 3.9%;
	transform: scaleX(1);
	transform-origin: center;
}

.mariposa.flap {
	animation-name: width;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	animation-direction: normal;
}

#mariposa1 {
	bottom: 47.5%;
	left: 32%;
	animation-duration: 0.5s;
}

#mariposa2 {
	bottom: 37.5%;
	left: 62%;
	animation-duration: 0.5s;
}

#mariposa3 {
	bottom: 30%;
	left: 50%;
	animation-duration: 0.6s;
}

#mariposa4 {
	bottom: 43%;
	left: 37%;
	animation-duration: 0.4s;
}

#mariposa5 {
	bottom: 45%;
	left: 56%;
	animation-duration: 0.5s;
}

@keyframes width {
	0% {
		transform: scaleX(1);
	}
	50% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}

#loro {
	bottom: -20%;
	left: 0;
	width: 100%;
	animation: hue 18s linear infinite normal;
	animation-play-state: paused;
}

#arcoiris {
	width: 53%;
	right: 0%;
	bottom: 35%;
}

#marco1 {
	width: 260px;
	height: calc(100% + 200px);
	bottom: 0;
	left: calc(50% - 130px);
	margin: -100px auto;
}

#espejo {
	top: 120px;
	left: 0;
	margin: 0 -10px;
	width: calc(100% + 20px);
}

#flare {
	position: absolute;
	left: 2.1%;
	top: 15%;
	width: 85%;
	height: 90%;
}

#planta {
	width: 17%;
	bottom: -12%;
	left: -8%;
	transform-origin: bottom;
}

#planta2 {
	width: 20%;
	height: 51.7%;
	left: 65%;
	bottom: 15%;
}

#guitarra {
	bottom: -50px;
	left: 4px;
}

#lampara-techo {
	width: 11.5%;
	left: calc(50% - 40px);
	z-index: 101;
}


/* piso 3 */

#cama-wrapper {
	width: 71%;
	height: 35%;
	display: block;
	position: absolute;
	left: -1%;
	bottom: 0;
}

#cama-wrapper * {
	backface-visibility: hidden;
	transform: translateZ(0) scale(1.0, 1.0);
}

#cama {
	width: 100%;
	bottom: -10%;
	left: -6%;
	transform-origin: bottom;
}

.fuego .animation {
	animation-play-state: paused;
}

.fuego .animation img {
	animation-play-state: inherit !important;
	width: 39%;
	height: 100%;
}

@keyframes fire {
	from {
		transform: rotateY(360deg);
	}
	to {
		transform: rotateY(0deg);
	}
}

#fuego-cama {
	width: 35%;
	height: 60%;
	left: 55%;
	bottom: 67.5%;
	filter: drop-shadow(0px 0px 35px rgba(255, 0, 0, 0.5));
	overflow: hidden;
}

#fuego-cama img {
	animation: fire 4s steps(4) infinite;
}

#fuego-piso {
	width: 30%;
	height: 22%;
	right: 10%;
	bottom: -2%;
	filter: drop-shadow(0px 0px 35px rgba(255, 0, 0, 0.5));
}

#fuego-piso img {
	animation: fire 4s infinite;
}

#fuego-fondo {
	width: 30%;
	height: 22%;
	left: 12%;
	bottom: 15%;
	filter: drop-shadow(0px 0px 35px rgba(255, 0, 0, 0.5)) blur(1px);
}

#fuego-fondo img {
	transform: scaleY(0.9);
	animation: scaley 4s infinite ease-in-out alternate;
	transform-origin: bottom;
}

@keyframes scaley {
	0% {
		transform: scaleY(0.9);
	}
	100% {
		transform: scaleY(0.7);
	}
}

.fuego .rojo {
	left: 29%;
	display: flex;
	position: absolute;
	width: 100%;
	height: 130%;
}

.fuego .rojo img {
	margin: 0 0 0 -29%;
	left: 0;
}

#fuego-fondo .rojo {
	width: 80%;
}

#fuego-fondo .rojo img {
	margin-left: -22%;
}

.fuego .naranja {
	left: 17.5%;
	width: 72.5%;
	bottom: -3%;
	height: 66%;
	display: flex;
	position: absolute;
}

.fuego .naranja img {
	margin: 0 0 0 -10%;
	left: 0;
	width: 37%;
}

.fuego .amarillo {
	left: 20%;
	width: 70%;
	bottom: -6%;
	height: 33%;
	display: flex;
	position: absolute;
}

#fuego-piso.fuego .amarillo {
	height: 40%;
}

.fuego .amarillo img {
	margin: 0 0 0 1%;
	left: 0;
	width: 22%;
}

#tele1 {
	width: 28.75%;
	height: 122%;
	position: absolute;
	top: -50%;
	right: 5%;
	transform-origin: top;
	animation: pendulo 5s ease-in-out infinite alternate;
	animation-play-state: paused;
}

#tele1 .tele {
	width: 100%;
	height: 45%;
	position: absolute;
	bottom: -7%;
	left: 0;
	animation: pivot 5s ease-in-out infinite alternate;
	animation-play-state: inherit;
}

#tele1 .tele img {
	width: 100%;
	position: absolute;
	bottom: 5%;
	left: 0%;
	pointer-events: none;
}

#tele1 .hilo {
	width: 2.3%;
	height: 82%;
	left: -1%;
	position: relative;
}

#tele1 video {
	position: absolute;
	width: 72%;
	height: 45%;
	bottom: 11%;
	left: 5%;
}

#tele2 {
	width: 17.25%;
	height: 100%;
	position: absolute;
	top: -60%;
	left: 30%;
	transform-origin: top;
	filter: blur(1px);
	mix-blend-mode: multiply;
	animation: pendulo2 7.5s ease-in-out infinite alternate-reverse;
	animation-play-state: paused;
}

#tele2 .tele {
	width: 100%;
	height: 22%;
	position: absolute;
	bottom: -7%;
	left: 0.5%;
}

#tele2 .tele img {
	width: 101%;
	height: 102%;
	position: absolute;
	bottom: 5%;
	left: 0%;
	pointer-events: none;
}

#tele2 .hilo {
	width: 2.7%;
	position: relative;
	height: 86.5%;
}

#tele2 video {
	position: absolute;
	width: 80%;
	height: 80%;
	bottom: 14%;
	left: 2.5%;
}

#tele3 {
	width: 22.75%;
	height: 26%;
	position: absolute;
	bottom: 10%;
	left: 7%;
	transform: rotateZ(5deg);
	transform-origin: bottom;
	filter: blur(0.5px);
}

#tele3 .tele {
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: -7%;
	left: -1px;
}

#tele3 .tele img:not(.gif) {
	width: 97.5%;
	height: 102%;
	position: absolute;
	bottom: 5%;
	left: 0%;
	pointer-events: none;
}

#tele3 .tele img.gif {
	position: absolute;
	width: 65%;
	height: 76%;
	bottom: 18%;
	left: 5%;
}

#hilo3 {
	position: absolute;
	top: -70%;
	left: 18%;
	width: 0.6%;
	height: 91%;
}


/* piso 4 */

#sillon3-wrapper {
	width: 100%;
	bottom: -7%;
}

#sillon3-wrapper img:not(#sillon3) {
	position: absolute;
}

#sillon3 {
	position: relative;
	width: 82.75%;
}

#perro1 {
	width: 11.58%;
	height: 80%;
	right: 25%;
	bottom: 31%;
	transform-origin: bottom;
	transform: scaleY(1);
}

#perro2 {
	width: 16.75%;
	height: 45%;
	left: 19%;
	bottom: 89%;
	overflow: visible;
}

#perro2-body {
	width: 98.2%;
	left: 0%;
	pointer-events: none;
}

#perro2-head {
	width: 38.5%;
	right: 0%;
	bottom: 48%;
	transform: rotateZ(12deg);
	transform-origin: 0% 66%;
	animation: nod 0.7s ease-in-out infinite alternate;
}

@keyframes nod {
	0% {
		transform: rotateZ(12deg);
	}
	100% {
		transform: rotateZ(-10deg);
	}
}

#perro3 {
	width: 27.5%;
	height: 51%;
	left: -7%;
	bottom: -27%;
	cursor: pointer;
}

#perro3.animation.jumping {
	animation: jump 750ms ease-in-out infinite normal;
}

@keyframes jump {
	10% {
		transform: translateY(0%);
	}
	30% {
		transform: translateY(-60%);
	}
	50% {
		transform: translateY(5%);
	}
	60% {
		transform: translateY(0%);
	}
}

#cuadro1 {
	width: 35%;
	height: 30.4%;
	top: 20%;
	left: 5%;
	position: absolute;
}

#cuadro2 {
	width: 16%;
	height: 25.5%;
	top: 38%;
	left: 48.5%;
	position: absolute;
}

#cuadro3 {
	width: 19%;
	height: 18.6%;
	top: 28%;
	right: 10%;
	position: absolute;
}

#cuadro4 {
	width: 17.5%;
	height: 16%;
	top: 15%;
	left: 48.5%;
	position: absolute;
}

#perchero {
	right: -5%;
	bottom: -25%;
	width: 23%;
	height: 110%;
}


/* piso 5 */

#lampara2 {
	width: 12.5%;
	height: 49%;
	top: -27%;
	left: 44.25%;
}

#lampara2-luz {
	width: 100%;
	height: 89%;
	top: 19%;
	left: 0%;
	mix-blend-mode: hard-light;
}

#cuadro5 {
	width: 42%;
	height: 36%;
	top: 20%;
	left: 5%;
	position: absolute;
}

#reloj {
	width: 14%;
	height: 20.4%;
	right: 15%;
	top: 22%;
	position: absolute;
}

#sparks {
	width: 6.3%;
	height: 7.5%;
	position: absolute;
	top: 19%;
	right: 11.75%;
	transform: rotate(0deg);
	transform-origin: 30% 75%;
	animation: rotate 3s steps(1) infinite normal;
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	33% {
		transform: rotate(15deg);
	}
	66% {
		transform: rotate(-15deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

#desierto {
	background: #d2a669;
	width: 37%;
	height: 28.5%;
	position: absolute;
	top: 23.5%;
	left: 8%;
}

#mesa2-wrapper {
	width: 100%;
	bottom: -20%;
	height: 60%;
}

#mesa2 {
	width: 90%;
	position: absolute;
	top: 5.5%;
	left: 5%;
}

#mesa2-top {
	width: 90%;
	position: absolute;
	top: 0;
	left: 5%;
	transform-origin: bottom;
}

#still-life {
	position: absolute;
	top: -14.5%;
	left: 45%;
	width: 6%;
}

#reloj-arena {
	width: 5.5%;
	height: 34.6%;
	position: absolute;
	top: -30%;
	left: 61%;
	transform-origin: 90% 100%;
	transform: rotateZ(15deg);
	opacity: 0.85;
	mix-blend-mode: lighten;
}

#arena1 {
	width: 100%;
	height: 30%;
	bottom: -11%;
	left: 0%;
}

#arena2 {
	bottom: -15%;
	left: 25%;
	width: 36%;
	height: 22%;
}

#table {
	position: absolute;
	bottom: -10%;
	left: 10%;
}

#florero2 {
	width: 100px;
	bottom: 125px;
	left: 50px;
	transform-origin: bottom;
}

#table-top {
	bottom: 113px;
	transform-origin: bottom;
}

#table-bottom {
	bottom: 0px;
}


/* piso 6 */

#sillon4-wrapper {
	width: 71.75%;
	height: 44.6%;
	left: 14%;
	bottom: 5%;
	position: absolute;
	transform: translateY(3px);
	animation: float 4s ease-in-out infinite alternate;
}

@keyframes float {
	0% {
		transform: translateY(3px);
	}
	100% {
		transform: translateY(-3px);
	}
}

#sillon4 {
	width: 100%;
	height: 100%;
	left: 0%;
	bottom: 0%;
}

#sillon4-wrapper .prop {
	transform: rotateZ(0.5deg);
	transform-origin: bottom;
	animation: globo 5s ease-in-out infinite alternate;
	animation-play-state: paused;
}

#sillon4-wrapper #globo1 {
	width: 21.7%;
	height: 146.75%;
	left: -9%;
	bottom: 50%;
	animation-duration: 8s;
}

#sillon4-wrapper #globo2 {
	width: 24%;
	height: 185%;
	left: -2%;
	bottom: 16%;
	animation-duration: 4s;
}

#sillon4-wrapper #globo3 {
	width: 25.7%;
	height: 146.3%;
	left: 85%;
	bottom: 50%;
	animation-duration: 6s;
}

#sillon4-wrapper #globo4 {
	width: 20.2%;
	height: 178.9%;
	left: 78%;
	bottom: 25%;
	animation-duration: 4s;
}

@keyframes globo {
	0% {
		transform: rotateZ(0.5deg);
	}
	100% {
		transform: rotateZ(-0.5deg);
	}
}

#espacio {
	width: 73.5%;
	height: 114.5%;
	background: #000;
	position: absolute;
	top: 0;
	right: 0;
}

.space.prop {
	width: 100%;
	height: 80%;
	max-height: 80%;
	position: absolute;
	left: 0;
	top: 0;
}

#espacio-lapse {
	position: absolute;
	top: 0;
	right: 0;
	width: 95%;
	height: 72.5%;
	transform: scaleY(-1);
}

#earth {
	width: 34.73%;
	height: 38.53%;
	bottom: 33%;
	left: 5%;
	filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.66))
}

#moon {
	width: 10.4%;
	height: 11.53%;
	top: 6%;
	left: 85%;
	filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.66))
}

.cable {
	position: relative;
	right: -85%;
	top: -75vh;
	z-index: -1;
	animation-name: cable;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-play-state: paused;
	transform-origin: top;
}

#cable2 {
	top: calc(-75vh - 110px);
	animation-delay: 1s;
}


/* piso 7 */

#sol-wrapper {
	top: -30%;
	left: 20%;
	width: 25.65%;
	height: 120%;
}

#sol {
	width: 100%;
	height: 35.5%;
	bottom: 0;
	left: 0;
	-webkit-filter: drop-shadow(0 0 20px rgba(255, 255, 64, 1));
	filter: drop-shadow(0 0 20px rgba(255, 255, 64, 1));
}

#sol-cable {
	width: 2.5%;
	height: 80%;
	top: 0;
	left: calc(49%);
}

#mesa3-wrapper {
	bottom: -27%;
	left: 9%;
	width: 82%;
	height: 45%;
}

#mesa3-bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 87.5%;
}

#mesa3-top {
	top: 0;
	left: 0;
	width: 100%;
	height: 13.7%;
	transform: scaleY(0.25);
	transform-origin: bottom;
}

#arbol1 {
	width: 31.6%;
	height: 65%;
	bottom: 90%;
	left: -2.5%;
}

#arbol2 {
	width: 29%;
	height: 46.5%;
	bottom: 90%;
	right: -2.5%;
}

#bosque1 {
	width: 82.2%;
	height: 80%;
	bottom: 91%;
	left: 9%;
}

#bosque2 {
	width: 66.1%;
	height: 51%;
	bottom: 93%;
	left: 20%;
	transform: scaleY(1);
	transform-origin: bottom;
}

#bosque3 {
	width: 100%;
	height: 46%;
	bottom: 0%;
	left: 0%;
}

#bosque4 {
	width: 72.65%;
	height: 39.2%;
	bottom: -7%;
	right: 0%;
}

.pajaro {
	position: absolute;
	bottom: 0;
	left: 0;
	backface-visibility: visible;
	animation: spin 30s linear infinite alternate;
	transform: rotateY(0deg) translateZ(0) scale(1.0, 1.0);
	transition: transform 500ms ease-in;
}

.bird.on {
	animation: pendulo3 5s ease-in-out 1 alternate;
	transform-origin: top;
}

@keyframes spin {
	from {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(180deg);
	}
}

@keyframes pendulo3 {
	0% {
		transform: rotateZ(0deg);
	}
	7.5% {
		transform: rotateZ(5deg);
	}
	20% {
		transform: rotateZ(-4deg);
	}
	30% {
		transform: rotateZ(3deg);
	}
	40% {
		transform: rotateZ(-2deg);
	}
	50% {
		transform: rotateZ(1deg);
	}
	60% {
		transform: rotateZ(-0.5deg);
	}
	80% {
		transform: rotateZ(0.25deg);
	}
	90% {
		transform: rotateZ(-0.125deg);
	}
	100% {
		transform: rotateZ(0deg);
	}
}

.piolin {
	position: absolute;
	bottom: 10%;
	left: 50%;
	width: 1px;
	height: 83%;
	opacity: 0.25;
}

#pajaro1 {
	top: -68%;
	right: 25%;
	width: 11%;
	height: 100%;
}

#pajaro1 .pajaro {
	width: 100%;
	height: 16%;
	animation-duration: 20s;
	animation-timing-function: ease-in-out;
	animation-delay: 0s;
}

#pajaro2 {
	top: -55%;
	right: 42%;
	width: 11%;
	height: 100%;
}

#pajaro2 .pajaro {
	width: 110%;
	height: 18%;
	animation-duration: 15s;
	animation-delay: 2.5s;
	animation-timing-function: ease-out;
}

#pajaro2 .piolin {
	left: 54.8%;
}

#pajaro3 {
	top: -35%;
	right: 17%;
	width: 11%;
	height: 100%;
	/*
	animation: pendulo2 5s ease-in-out infinite alternate;
	transform-origin: top;
	*/
}

#pajaro3 .pajaro {
	width: 180%;
	height: 26%;
	animation-duration: 12.5s;
	animation-delay: 0s;
}

#pajaro3 .piolin {
	left: 88.5%;
}


/* piso 8 */

#silla {
	width: 33%;
	height: 63.5%;
	bottom: -25%;
	left: 14%;
}

#libro {
	width: 20%;
	height: 24%;
	bottom: 0%;
	left: 11%;
	transform-origin: bottom;
}

#humo-wrapper {
	bottom: 30%;
	left: 12%;
	width: 21%;
	height: 57%;
}

#humo-wrapper img {
	width: 100%;
	height: 100%;
	left: 0%;
	bottom: 0%;
	pointer-events: none;
}

#humo-1 {
	opacity: 0.25;
}

#humo-2 {
	filter: blur(1.5px);
	opacity: 0.75;
}

#humo-3 {
	filter: blur(1.5px);
	mix-blend-mode: normal;
	opacity: 0.66;
}

#velador {
	width: 12.75%;
	height: 35%;
	left: -2%;
	bottom: -13%;
}

#biblio-wrapper {
	width: 50%;
	height: 138%;
	bottom: -20%;
	right: 0%;
}

#biblioteca {
	width: 100%;
	height: 100%;
	bottom: 0%;
	right: 0%;
}

#auto {
	width: 28%;
	height: 5.3%;
	bottom: 69%;
	right: 0%;
}

#caja {
	width: 14.25%;
	height: 5.6%;
	bottom: 60%;
	right: 30%;
}

#avion {
	width: 27%;
	height: 8%;
	bottom: 41%;
	right: 51%;
}

#barco2 {
	width: 24.7%;
	height: 10%;
	bottom: 21%;
	right: 7%;
}

.llama {
	mix-blend-mode: lighten;
	filter: blur(10px);
	transform: scale(1);
}

#llama1 {
	bottom: 65%;
	right: 40%;
}

#llama2 {
	bottom: 56%;
	right: 87.5%;
}

#llama3 {
	bottom: 56%;
	right: -7.5%;
}

#llama4 {
	bottom: 38%;
	right: 40%;
}

#llama5 {
	bottom: 28%;
	right: 87.5%;
}

#llama6 {
	bottom: 28%;
	right: -7.5%;
}

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

.humo#humo-middle {
	height: 120%;
}


/* piso 9 */

#nube5-cables {
	width: 34%;
	height: 30%;
	left: 8%;
	top: -5%;
}

#nube5-wrapper {
	width: 34%;
	height: 60%;
	left: 8%;
	top: 6%;
}

#nube5 {
	width: 100%;
	height: 50%;
	left: 0;
	top: 0;
	animation: nube 10s ease-in-out infinite;
}

@keyframes nube {
	0% {
		filter: contrast(1);
	}
	50% {
		filter: contrast(1.33);
	}
	100% {
		filter: contrast(-0.33);
	}
}

#gotas {
	left: 27%;
	top: 34%;
	width: 46%;
	height: 82%;
}

#silla2 {
	width: 20.8%;
	height: 62%;
	bottom: -32%;
	left: 15%;
}

#beam {
	left: 5.5%;
	top: 26%;
	width: 40%;
	height: 89%;
	mix-blend-mode: screen;
}

#puerta-wrapper {
	width: 50%;
	height: 116%;
	top: 20%;
	right: 0%;
}

.puerta-background {
	display: block;
	width: 52%;
	height: 75%;
	top: 4%;
	left: 4%;
	overflow: hidden;
	background: url(../img/pared9.jpg);
	background-position: 100% 50%;
	background-size: cover;
}

#puerta {
	width: 100%;
	height: 110%;
	top: 0%;
	right: 0%;
}

.puerta {
	width: 130%;
	height: 90%;
	top: 10%;
	filter: brightness(66%);
}

#puerta-background-1 {}

#puerta-background-2 {
	filter: blur(1px);
}

#puerta-background-3 {
	filter: blur(2px);
}

#puerta-background-4 {
	filter: blur(3px);
}

#puerta-background-5 {
	filter: blur(4px);
}

#puerta-background-6 {
	filter: blur(5px);
}

#puerta-background-7 {
	filter: blur(6px);
}

#puerta-background-8 {
	filter: blur(7px);
}

#puerta-wrapper-2 {
	left: 2%;
}

#puerta-wrapper-3 {
	left: 1%;
}

#puerta-wrapper-4 {
	left: 0%;
}

#puerta-wrapper-5 {
	left: -1%;
}

#puerta-wrapper-6 {
	left: -2%;
}

#puerta-wrapper-7 {
	left: -3%;
}

#puerta-wrapper-68 {
	left: -4%;
}


/* planta baja */

#floor0 {
	position: relative;
	height: 100vh;
	max-width: 95%;
	align-self: center;
	margin: 0 auto;
}

#lobby {
	vertical-align: bottom;
	width: 100%;
	height: 100%;
	;
	border: 0 none;
	overflow: visible;
	box-shadow: none;
}

#banda1 {
	width: 30%;
	height: auto;
	position: absolute;
	bottom: 0%;
	left: -2%;
	max-width: 300px;
}

#banda2 {
	width: 30%;
	height: auto;
	position: absolute;
	bottom: 0%;
	right: -2%;
	max-width: 300px;
}


/* ANIMATIONS */

@keyframes cable {
	0% {
		transform: rotateX(30deg);
	}
	50% {
		transform: rotateX(0deg);
	}
	100% {
		transform: rotateX(30deg);
	}
}

@keyframes lamp {
	0% {
		transform: rotateZ(-5deg);
	}
	100% {
		transform: rotateZ(5deg);
	}
}

@keyframes wave {
	0% {
		transform: translateX(1.9%);
	}
	100% {
		transform: translateX(-1.9%);
	}
}

@keyframes surf {
	0% {
		/* left: 40px; */
		transform: rotateZ(10deg);
	}
	25% {
		transform: rotateZ(-10deg);
	}
	50% {
		transform: rotateZ(10deg);
	}
	75% {
		transform: rotateZ(-10deg);
	}
	100% {
		/* left: 240px; */
		transform: rotateZ(10deg);
	}
}

@keyframes luz {
	0% {
		opacity: 0.8;
	}
	1% {
		opacity: 0.9;
	}
	2% {
		opacity: 0.7;
	}
	3% {
		opacity: 1;
	}
	4% {
		opacity: 0.8;
	}
	49% {
		opacity: 0.8;
	}
	50% {
		opacity: 0.6;
	}
	53% {
		opacity: 0.8;
	}
	100% {
		opacity: 0.8;
	}
}

@keyframes hue {
	0% {
		filter: hue-rotate(0deg);
	}
	100% {
		filter: hue-rotate(360deg);
	}
}

@keyframes pendulo {
	0% {
		transform: rotateZ(-2deg);
	}
	100% {
		transform: rotateZ(2deg);
	}
}

@keyframes pivot {
	0% {
		transform: rotateZ(2.5deg);
	}
	50% {
		transform: rotateZ(-2.5deg);
	}
	100% {
		transform: rotateZ(2.5deg);
	}
}

@keyframes pendulo2 {
	0% {
		transform: rotateZ(-1deg);
	}
	100% {
		transform: rotateZ(1deg);
	}
}

.ui360 {
	transform-origin: 100% 100%;
}

.ui360,
.sm2-360ui {
	width: 100px;
	height: 100px;
	position: absolute;
	bottom: 7px;
	right: 7px;
	z-index: 999;
}

.sm2-360ui {
	width: 100px;
	height: 100px;
	background: rgba(0, 0, 0, 0.25);
	transition: all 250ms ease-in;
}

.sm2-360ui:hover {
	background: rgba(255, 255, 255, 0.18);
}

.ui360 .sm2-timing {
	color: #fff;
	text-shadow: 0px 0px 1px #000;
}

.ui360 .sm2-canvas {
	opacity: 0.66;
	padding: 0 !important;
	transform: scale(0.7) !important;
}

.tooltip {
	display: none;
	width: 100%;
	position: absolute;
	bottom: 120px;
	left: -12px;
	text-align: center;
	vertical-align: middle;
	padding: 10px 5px;
	line-height: 15px;
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
	font-style: italic;
}

.ui360 a {
	position: absolute;
	width: 30px;
	height: 30px;
	color: #000;
	background: #fff;
	font-size: 14px;
	font-weight: bold;
	font-family: Arial, sans-serif;
	border-radius: 50%;
	left: 28px;
	top: 28px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	margin: 0;
	padding: 0;
	opacity: 0;
	transition: all 300ms ease-out;
	z-index: 998;
}

.ui360.on a,
.ui360:hover a {
	opacity: 1;
}

.ui360 a:hover {
	color: #fff;
	background: #000;
}

.ui360.on a.sm2_link,
.ui360:hover a.sm2_link {
	left: -40px;
	top: -10px;
}

a.lyrics {
	font-size: 12px;
	
	display: none;
	
}

a.mp3 {
	display: none;
}

.ui360.on a.lyrics,
.ui360:hover a.lyrics {
	left: -50px;
	top: 28px;
}


/* MEDIA QUERIES */

@media(max-width: 1360px) {
	.window.single:not(#lobby) {
		max-width: 800px;
	}
}

@media(max-width: 960px) {
	#building {
		width: 90%;
		margin-top: 75vh;
	}
	#cartel {
		max-width: 600px;
	}
	.window.single {
		width: 85%;
	}
	.ui360 {
		transform: scale(0.9);
	}
}

@media(max-width: 720px) {
	#building {
		width: 100%;
		margin-top: 75vh;
	}
	#floor0 {
		max-width: 100%;
	}
	#cartel {
		max-width: 90%;
		margin: 0 5%;
	}
	.window.single {
		width: 90%;
	}
	.ui360 {
		transform: scale(0.8);
	}
}