@charset "utf-8";
/* Zola Servicios Digitales
 Francisco Solar Acevedo Fecha: Julio 2016, 
 
COLORES 
Color de pelo de sicóloga norte de chile: C4803F
color naranjo: CC6E14
color verde claro: 00FF19
color celeste; 5919FF
color verde opaco: 12B222
*/

@font-face {
	font-family: "finalFuente";    
	src: url(../fuentes/final.ttf) format("truetype"); 
}

/*NEUTRALIDAD*/

header, html, body, section, nav, footer, article, h1, h5, h3, h2, p, h6, .ingreso{
	display:block;
	margin:0;
	padding:0;
}

/* ESTRUCTURA */

html {
	min-height: 100%;
  position: relative;
}
body{
	width:  100%;
	height: 100%;
	min-height: 400p
}
header #superior{
	width: 100%;
	height: 50px;
	position: fixed;
	background: #400538;
	opacity: 0.5;
	z-index: 2500;
	border-bottom: 5px solid black;
}

.video27{
	width: 58%; 
	position: absolute; 
	left:28%; 
	top:3%; 
	-webkit-transform: rotate( -0.5deg);
}
/*usuario registro*/
#contenedor_carga{
	background-color: rgba(250, 240, 245, 0.3);
	height: 100%;
	width: 100%;
	position: fixed;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	z-index: 12000;

}
#carga{
	border: 55px solid #cc;
	border-top-color: #F4266A;
	border-top-style: groove;
	height: 200px;
	width: 200px;
	border-radius: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	-webkit-animation: girar 1.5s linear infinite;
	-o-animation: girar 1.5s linear infinite;
	animation: girar 1.5s linear infinite;
}

@keyframes girar{
	from { transform: rotate(0deg); }
	to {transform: rotate(360deg); }
}

#video1movil{
		display: none;
	}

#usuario{
	
	top: 10px;
	width: 30%;
	position: fixed;
	left: 5%;
	z-index: 10000;
	color:white;
	font-family: finalFuente, Helvetica, sans-serif;
}



/*clases generales*/
.fondo{
	width: 100%;
	height: auto;
	position: fixed;

}

.niebla{
	width: 300%;
	height: 200px;
	opacity: 0.2;
	height: auto;
	position: fixed;
	animation:animarniebla 30s infinite;
	-moz-animation:animarniebla 30s infinite;
	-o-animation:animarniebla 30s infinite;
	-webkit-animation:animarniebla 30s infinite;



}
/*chat division chat*/

#chat {
	border-radius:10px;
	top: -600px;
	height: 600px;
	width: 30%;
	opacity: 0.5;
	position: absolute;
	left: 70%;
	z-index: 10000;
}
.chat{
	width: 100%;
	height: 675px;
}


/* final del juego*/

.final{

	position: fixed;
	left:10%;
	width: 80%;
	margin-top: 10%;
	z-index: 6000;
	border:10px solid #400538;
	background: #400538;
	opacity: 0.8;
	border-radius: 20px;
	color:white;

}

table{
	width: 100%;
}
table, td{
	border:2px solid white;	

	
}
td{
	color:white;
	font-size: 30px;
	font-family: finalFuente, Helvetica, sans-serif;
	padding: 1%;
}
/* menu elementos*/
.block{
	position: fixed;
	left:70%;
	width: 28%;
	margin-top: 30%;
	z-index: 60000;
	border:10px solid #400538;
	background: #400538;
	opacity: 0.8;
	border-radius: 20px;
}

.block h1, .carpeta h1, .mapacasa h1, .www h1{
	font-family: Verdana, Geneva, sans-serif;
	color:white;
}

.blockte{
	width: 100%;
	height: 200px;
	font-size: 20px;
	font-family: Verdana, Geneva, sans-serif;
}
.carpeta{
	position: fixed;
	left:20%;
	margin-top: 10%;
	width: 60%;
	height: auto;
	z-index: 6000;
	border:10px solid #400538;
	background: #400538;
	opacity: 0.8;
	border-radius: 20px;

}
.mapacasa{
	position: fixed;
	left:20%;
	margin-top: 4%;
	width: 30%;
	height: auto;
	z-index: 6000;
	border:10px solid #400538;
	background: #400538;
	opacity: 0.9;
	border-radius: 20px;
}
.www{
	position: absolute;
	left:5%;
	margin-top: 4%;
	width: 90%;
	height: 700px;
	z-index: 6000;
	border:10px solid #400538;
	background: #400538;
	opacity: 0.9;
	border-radius: 20px;
	overflow: scroll;
}
.notax1, .notax2, .notax3, .notax4, .notax5, .notax6, .notax7, .notax8,
.cartax1, .cartax2, .cartax3, .cartax4, .cartax5, .cartax6, .cartax7,
.personalx1, .personalx2, .personalx3, .personalx4,
.personalx5, .personalx6, .personalx7, .librox1, .librox2,.librox3,
.librox4,.librox5,.librox6,.librox7,.librox8
{
	width: 15%;
}

.notax1:hover, .notax2:hover, .notax3:hover, .notax4:hover, .notax5:hover, .notax6:hover, .notax7:hover,
.cartax1:hover, .cartax2:hover, .cartax3:hover, .cartax4:hover, .cartax5:hover, .cartax6:hover, .cartax7:hover,
.personalx1:hover, .personalx2:hover, .personalx3:hover, .personalx4:hover, .diarioC:hover, .diario3:hover,
.diarioE:hover, .diario4:hover, .diario5:hover, .libro6:hover, .libro7:hover, .libro8:hover, .diario6:hover, .carta5:hover, .carta6:hover,
.carta7:hover

{
	transform : scale(1.3);
		-moz-transform : scale(1.3); 
		-webkit-transform : scale(1.3);
		-o-transform : scale(1.3); 
		-ms-transform : scale(1.3);
		z-index: 1;

}


/*espacios secundarios*/

.es1{
		position: fixed;
		width: 18%;
		margin-top:40%;
		left:67%;
}
.es2{
	position: fixed;
	opacity: 0;
	width: 10%;
	height: 50px;
	margin-top: 30%;
	background: black;
	left:75%;
	z-index: 12000;
}
.es3{
	position: fixed;
	opacity: 0;
	width: 10%;
	height: 50px;
	margin-top: 42%;
	background: black;
	left:53%;
	z-index: 12000;
}
.es4{
	position: fixed;
	opacity: 0;
	width: 10%;
	height: 300px;
	margin-top: 12%;
	background: black;
	left:83%;
	z-index: 12000;
}

#codigo, #codigo2, #codigo3, #codigo5,
#codigo6, #codigo7, #codigo8, #codigo9,
.respuesta1, .respuesta2, .respuesta3, .respuesta4, .respuesta5{
		position: fixed;
		width: 50%;
		height: auto;
		margin-top: 10%;
		left:25%;
		z-index: 7000;
		border: 10px solid black;
		border-radius: 20px;
		background: black;
}



.secima1{
		position: relative;
		width: 100%;
		height: 30%;
		margin-top: 0;
		

}


.formular{
		position: fixed;
		width: 27%;
		height: 20px;
		margin-top: -15%;
		left:34%;
		z-index: 12000;

}

.enviar3, .enviar4, .enviar5, .enviar51
, .enviar61, .enviar71, .enviar81, .enviar91{
		position: fixed;
		margin-top: -5%;
		left:34%;
		z-index: 8000;
		
}

.salir2{
		position: fixed;
		margin-top: -5%;
		left:50%;
		z-index: 8000;
		
}
input{
		font-size: 20px;
		font-family: Verdana, Geneva, sans-serif;
		opacity: 0.8;
		border-radius: 20px;
}

.volver {
		position: fixed;
		width: 10%;
		margin-top:50%;
		left:85%;
		z-index: 8000;

}
.volver3, .volver4, .volver5 {
		position: fixed;
		width: 7%;
		margin-top:50%;
		left:70%;
		z-index: 12000;

}



/* Videos*/

#seleccionVideoJuan{
		position: fixed;
		width: 10%;
		height: 50px;
		margin-top:20%;
		left:69%;
		z-index: 8000;
}

.videoJuan{
	position: fixed;
		background: black;
		width: 50%;

		margin-top:5%;
		left:25%;
		border: 10px solid black;
		border-radius: 20px;
		z-index: 8000;
}

.videoJuan video{
	width: 100%;
}

/*Interupctor*/
.interuptor1, .interuptor2{
		position: fixed;
		opacity: 0.7;
		width: 3%;
		margin-top: 20%;
		left:92%;
		z-index: 5000;
}


.oscuridad, .oscuridad2{
	width: 100%;
	height: auto;
	position: fixed;
	z-index: 10;

}
/*Footer*/

.logotipo{
	width:180px;
	margin-top:-50px;
	margin-left:15%;

	
}
footer {
	
  background: #400538;
	opacity: 0.3;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  color: white;
  z-index: 1000;}

/*comentarios*/

#comentarios{
		position: fixed;
		width: 100%;
		text-align: center;
		margin-top: 52%;
		font-size:18px;
		color:white;
		transition: 1.0s ease;
 		-moz-transition: 1.0s ease; 
 		-webkit-transition: 1.0s ease;
 		-o-transition: 1.0s ease; 
 		z-index: 100;
}

#comentarios h1{
		font-size: 20px;
		margin:0 10%;
		font-family: Verdana, Geneva, sans-serif;
}

/*VIDEO*/

video{
	width: 100%;
}

#escenarioInicial{
	display: none;
}


/* notas debanoHelena*/

.nota1{
		
		position: fixed;
		width: 8%;
		margin-top: 46%;
		left:46%;



	}

.nota2{
		
		position: fixed;
		width: 8%;
		margin-top: 46%;
		left:46%;
	}
.nota3{
		
		position: fixed;
		width: 8%;
		margin-top: 46%;
		left:46%;

	}

.nota4{
		
		position: fixed;
		width: 8%;
		margin-top: 46%;
		left:46%;

	}
.nota5{
		
		position: fixed;
		width: 8%;
		margin-top: 46%;
		left:46%;

	}
.nota6{
		
		position: fixed;
		width: 8%;
		margin-top: 46%;
		left:46%;

	}
.nota7{
		
		position: fixed;
		width: 9%;
		margin-top: 23%;
		left: 18%;

	}
.nota8{
		
		position: fixed;
		width: 9%;
		margin-top: 55%;
		left: 30%;

	}

.diario1{

		position: fixed;
		width: 20%;
		margin-top: 40%;
		left:34%;
}
.diario2{

		position: fixed;
		width: 7%;
		margin-top: 50.5%;
		left:42%;
}
.diario3{

		position: fixed;
		width: 7%;
		margin-top: 35%;
		left:40%;
}
.diario4{

		position: fixed;
		width: 12%;
		margin-top: 44%;
		left:80%;
}
.diario5{

		position: fixed;
		width: 12%;
		margin-top: 44%;
		left:80%;
}

.diario6{

		position: fixed;
		width: 7%;
		margin-top: 27%;
		left:37%;
}
.diarioE{

		position: fixed;
		width: 7%;
		margin-top: 46%;
		left:29%;
}






/* cartas debanoHelena*/

.carta1{
		
		position: fixed;
		width: 7%;
		margin-top: 47%;
		left:54%;
	
	}
.carta2{
		
		position: fixed;
		width: 5%;
		margin-top: 50%;
		left:20%;
	
	}
.carta3{
		
		position: fixed;
		width: 7%;
		margin-top: 51%;
		left:39%;
	
	}

.carta4{
		
		position: fixed;
		width: 7%;
		margin-top: 51%;
		left:55%;
	
	}

.carta5{
		
		position: fixed;
		width: 7%;
		margin-top: 51%;
		left:55%;
	
	}

.carta6{
		
		position: fixed;
		width: 7%;
		margin-top: 49%;
		left:13%;
	
	}
.carta7{
		
		position: fixed;
		width: 7%;
		margin-top: 53%;
		left:50%;
	
	}
/*Acciones de Hover para todos los objetos */
.nota1:hover, .nota2:hover, .nota3:hover, 
.diario1:hover, .carta1:hover, 
.carta2:hover, .cuadroP2:hover, .cuadroP1:hover, 
.cuadroP3:hover, .cuadroP4:hover, .cuadroP5:hover, 
.cuadroP6:hover, .cuadroP7:hover, .cuadroP8:hover,
.cuadroP10:hover, .nota4:hover, .carta3:hover, .diario2:hover,
.nota5:hover, .carta4:hover, .casette:hover,
.libro1:hover, .libro2:hover, .libro3:hover,
.libro4:hover, .libro5:hover, .libro:hover,
.cuadroP12:hover, .cuadroP14:hover, .cuadroP15:hover,.cuadroP16:hover,
.nota6:hover, .nota7:hover, .nota8:hover, .cuadroP11:hover
 {

		transform : scale(1.3);
		-moz-transform : scale(1.3); 
		-webkit-transform : scale(1.3);
		-o-transform : scale(1.3); 
		-ms-transform : scale(1.3);
		z-index: 1;
	}


/*Division para las notasHarlot en el centro*/

#contenedor {
		
		
		position: fixed;
		width: 40%;
		margin-top: 5%;
		left:25%;
 		z-index: 8000;
 	
	}



#contenedorDos{
	width: 100%;
}

#contenedorTres{
	width: 80%;
}
#contenedorA{
		
		
		position: fixed;
		width:50%;
		margin-top: 1.5%;
		left:22%;
 		z-index: 8000;
 	
	}

/*Division para las cartaHarlot en el centro*/


/* obejtosEstatico de audio*/

.cuadroP1{
		position: fixed;
		width: 10%;
		margin-top:50%;
		left:50%;
 		z-index: 1;
	}

.cuadroP2{
		
		position: fixed;
		width: 13%;
		margin-top: 13%;
		left:27%;



	
	}


/* ObjetosCartas*/



.cuadroP3{

		position: fixed;
		width: 10%;
		margin-top:49%;
		left:55%;

 		
	}
.cuadroP4{

		position: fixed;
		width: 10%;
		margin-top:49%;
		left:55%;

	}

.cuadroP5{

		position: fixed;
		width:17%;
		margin-top:27%;
		left:66%;
	
	}
.cuadroP6{

		position: fixed;
		width:5%;
		margin-top:43%;
		left:54%;
	
	}
.cuadroP7{

		position: fixed;
		width:15%;
		margin-top:28%;
		left:26%;
	
	}
.cuadroP8{

		position: fixed;
		width:14%;
		margin-top:10%;
		left:24%;
	
	}
.cuadroP9{
		
		position: fixed;
		width:13%;
		margin-top:20%;
		left:21%;
	
	}

.cuadroP10{

		position: fixed;
		width:7%;
		margin-top:56%;
		left:42%;
	
	}
.cuadroP11{

		position: fixed;
		width:3%;
		margin-top:41%;
		left:59%;
	
	}

.cuadroP12{

		position: fixed;
		width:10%;
		margin-top:53%;
		left:59%;
	
	}
.cuadroP13{

		position: fixed;
		width:7%;
		margin-top:48%;
		left:54%;
	
	}

.cuadroP14{

		position: fixed;
		width:9%;
		margin-top:37%;
		left:54%;
	
	}
.cuadroP15{

		position: fixed;
		width:12%;
		margin-top:50%;
		left:45%;
	
	}

.cuadroP16{


	
	}

.cuadroP17{

		position: fixed;
		width:17%;
		margin-top:38%;
		left:52%;
		
	
	}
.objetoCartaSuper1{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:10%;

 		z-index: 100;
	}


.objetoCartaSuper2{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:13%;

 		z-index: 100;
	}

.objetoCartaSuper3{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:16%;

 		z-index: 100;
	}

.objetoCartaSuper4{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:19%;

 		z-index: 100;
	}

.objetoCartaSuper5{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:22%;

 		z-index: 100;
	}

.objetoCartaSuper6{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:25%;

 		z-index: 100;
	}

.objetoCartaSuper7{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:28%;

 		z-index: 100;
	}
.objetoCartaSuper8{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:31%;

 		z-index: 100;
	}
.objetoCartaSuper9{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:34%;

 		z-index: 100;
	}

	.objetoCartaSuper10{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:37%;

 		z-index: 100;
	}

	.objetoCartaSuper11{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:40%;

 		z-index: 100;
	}

	.objetoCartaSuper12{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:43%;

 		z-index: 100;
	}

	.objetoCartaSuper13{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:46%;

 		z-index: 100;
	}
		.objetoCartaSuper14{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:49%;

 		z-index: 100;
	}
		.objetoCartaSuper15{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:52%;

 		z-index: 100;
	}
		.objetoCartaSuper16{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:55%;

 		z-index: 100;
	}
		.objetoCartaSuper17{
		
		position: fixed;
		width: 8%;
		margin-top: 0%;
		left:58%;

 		z-index: 100;
	}



/*libro*/


.libro1{
		
		position: fixed;
		width: 7%;
		margin-top: 38%;
		left:56%;

 		
	}
.libro2{
		
		position: fixed;
		width: 7%;
		margin-top: 57%;
		left:48%;

 		
	}

.libro3{
		
		position: fixed;
		width: 7%;
		margin-top: 41.5%;
		left:70%;

 		
	}

.libro4{
		position: fixed;
		width: 7%;
		margin-top: 42%;
		left:12%;
}

.libro5{
		
		position: fixed;
		width: 9%;
		margin-top: 35%;
		left:22%;

 		
	}


.libro6{
		
		position: fixed;
		width: 9%;
		margin-top: 42%;
		left:80%;

 		
	}


.libro7{
		
		position: fixed;
		width: 9%;
		margin-top: 42%;
		left:80%;

 		
	}

.libro8{
		
		position: fixed;
		width: 9%;
		margin-top: 45%;
		left:10%;

 		
	}


/* Seguir */

/*derecha*/
.seguir{

	    position: fixed;
		width: 5%;
		opacity:0.5;
		margin-top: 52%;
		left:91%;
}
/*izquierda*/
.seguir2{

	    position: fixed;
		width: 5%;
		opacity:0.5;
		margin-top: 52%;
		left:86%;
}




/*Contenedor de gif y animaciones*/

.arana{
	  position: fixed;
		width: 2%;
		opacity:0.5;
		margin-top: 12%;
		left:86%;

}

.gato{
	  position: fixed;
		width: 10%;
		margin-top: 33.5%;
		left:25%;

}

.gota{
	  position: fixed;
		width: 6%;
		margin-top: 26%;
		left:45.2%;

}

.tv{
	 position: fixed;
		width: 6%;
		margin-top: 23.5%;
		left:43%;
}

.casette{
	 position: fixed;
		width: 6%;
		margin-top: 52.5%;
		opacity: 0.8;
		left:43%;
}



/* Contenedor objetos Cartas*/

.objetoCarta{

		position: fixed;
		width: 30%;
		margin-top: 5%;
		left:37%;
 		z-index: 9000;
}



audio{
		position: fixed;
		width: 19%;
		margin-top: 35%;
		left:39.7%;
 		z-index: 700;
}


/*menu deslizante izquierda yyyy con rebote ojo.*/

#menu {
	margin-top: 5%;
	width: 70px;
	background-color:#400538;
	opacity: 0.5;
	padding: 20px 20px 0 20px;
	position: absolute;
	left: -92px;
	z-index: 100;
}
#menu img {

	margin-bottom: 20px;
	border: 1px solid white;
}
h1{
	text-align:center;
	font-family: 
}
p{
	margin-left:150px;
}




@media screen and (max-width: 800px) {

.volver3, .volver4, .volver5{
	width: 20%;
	margin-top:100%;
	left: 80%;
}

.es1{
	width: 20%;
	margin-top:100%;
	left: 80%;

}
.es2{
	width: 20%;
	height: 20%;
	margin-top:70%;
	left: 80%;


}
.es3{
	width: 20%;
	margin-top:50%;
	left: 60%;

}
.es4{
	width: 90%;
	height: 200px;
	margin-top:30%;
	left: 10%;
	

}

.carpeta{
	width: 90%;
	margin-top:16%;
	left: 2%;
}

	.salir{
		font-size: 26px;

	}
.block{
	left:7%;
	width: 87%;
}
.www{
	top:6%;
	left:0;
	width: 98%;
}

.mapacasa{

	left:15%;
	margin-top: 10%;
	width: 60%;
}
#video1movil{
		display:block;
	}

#video1{
		display: none;
	}
.final{

	position: fixed;
	left:10%;
	width: 40%;
	margin-top: 20%;
	z-index: 6000;
	border:10px solid #400538;
	background: #400538;
	opacity: 0.8;
	border-radius: 20px;
	color:white;

}

table{
	width: 50%;
}
table, td{
	border:2px solid white;	

	
}
td{
	color:white;
	font-size: 15px;
	font-family: finalFuente, Helvetica, sans-serif;
	padding: 1%;
}

.respuesta1, .respuesta2, .respuesta3, .respuesta4, .respuesta5{
	width: 95%;
	left:0;
	margin-top:20%;
}


.diario6, .carta6{
	width: 15%;
	left:45%;
	margin-top:42%;
}
.libro{
	display: none;
}

.objetoCarta17{
	width: 13%;
	left:60%;
	margin-top:35%;
}


.objetoCarta16{
	width: 15%;
	left:75%;
	margin-top:34%;
}


#seleccionVideoJuan{
	width: 50%;
	left:30%;
	margin-top:90%;
}




.objetoCarta14{
	width: 30%;
	left:10%;
	margin-top:40%;
}
.objetoCarta13{
	width: 36%;
	left: 38%;
	margin-top: 28%;
}

.objetoCarta11{
	width: 20%;
	left:80%;
	margin-top:85%;

}
.objetoCarta10{
	width: 25%;
	left:58%;
	margin-top:23%;

}



.objetoCarta9{
	width: 15%;
	left:43%;
	margin-top:40%;
}
.objetoCarta12{
	width: 16%;
	left: 62%;
	margin-top:40%;
}


.secundario5{
	left:90%;
}



.objetoCarta8{
	width: 15%;
	left:85%;
	margin-top:87%;
}

.objetoCarta7{
	width: 15%;
	left:70%;
	margin-top:87%;
}


.objetoCarta6{
	width: 15%;
	left:30%;
	margin-top:57%;
}

.secundario1{
		margin-top: 99%;
	}


.carta3, .nota3, .libro3{
	width: 15%;
	left:45%;
	margin-top:115%;
}
.objetoCarta5{
	width: 30%;
	left:6%;
	margin-top:80%;
	}


.objetoCarta4{
	width: 30%;
	left:10%;
	margin-top:20%;
	}

#codigo, #codigo3, #codigo2, #codigo5
, #codigo6, #codigo7, #codigo8, #codigo9{
	width: 110%;
	left:0;
	margin-top:20%;
}
.formular {
	left:20%;
	margin-top:-35%;
	width: 80%;
}
.enviar3, .enviar5, .enviar4, 
.enviar51, .enviar61, .enviar71,
.enviar81, .enviar91{
	left:20%;
	margin-top:-15%;
	width: 80%;
}

.salir2{
	left:74%;
	margin-top:-15%;
	width: 80%;
}



.objetoCarta3{
	width: 10%;
	left:60%;
	margin-top:75%;

}

.objetoCarta{
	width: 80%;
	left:10%;
	z-index: 12000;
}

.objetoCarta2{
	margin-top:70%;
	width: 25%;
	left:20%;
}


.gato{
	margin-top:85%;
	width: 20%;
	left:80%;
}
#contenedor{
	width: 100%;
	left:0;
}
#contenedorA{
	width: 120%;
	left:0px;
	margin-top:5%;
}
.gota{
	margin-top:72%;
	width: 5%;
	left:54%;
}
.oscuridad{
	width: 100%;
	height: 100%;

}


.seguir{
	margin-top:113%;
	width: 10%;
	left:88%;
}
.seguir2{
	margin-top:113%;
	width: 10%;
	left:78%;
}
.interuptor1{
	width: 5%;
	left: 85%;
}
.interuptor2{
	display: none;
}

.objetoCartaSuper1, .objetoCartaSuper2, .objetoCartaSuper3, 
.objetoCartaSuper2, .objetoCartaSuper3, .objetoCartaSuper4, 
.objetoCartaSuper5, .objetoCartaSuper6, .objetoCartaSuper7, 
.objetoCartaSuper8, .objetoCartaSuper9, .objetoCartaSuper10, 
.objetoCartaSuper11, .objetoCartaSuper12, .objetoCartaSuper13,
.objetoCartaSuper14, .objetoCartaSuper15{
	width: 15%;
}
.niebla{
	display: none;
}
.libro1{
		width: 15%;
		margin-top: 120%;
		left:69%;
	}


.nota1{
		width: 15%;
		margin-top: 120%;
		left:69%;
}
.nota2, .libro2, .diario1, .carta2{
	width: 15%;
	left:57%;
	margin-top:114%;

}
.nota4, .diario2, .carta4{
	width: 15%;
	left:45%;
	margin-top:120%;
}
.nota5{
	width: 15%;
	left:45%;
	margin-top:100%;
}
.libro4{
	width: 15%;
	left:30%;
	margin-top:100%;
}
.libro5, .diario3{
	width: 15%;
	left:70%;
	margin-top:80%;
}
.diario4, .carta5, .libro6, .nota6, .libro7, .diario5{
	width: 20%;
	left:30%;
	margin-top:50%;
}
.libro8, .nota7, .diario6, .carta6{
	width: 18%;
	left:27%;
	margin-top:100%;
}
.carta7{
	width: 18%;
	left:67%;
	margin-top:76%;
}
.nota8{
	width: 18%;
	left:45%;
	margin-top:120%;
}
.carta1{
		width: 15%;
		margin-top: 120%;
		left:69%;
}
.cuadroP1{
	width: 20%;
	margin-top: 30%;
	left:70%;
}
.cuadroP2{
	width: 18%;
	margin-top: 105%;
	left:39%;
}
.cuadroP3{
	margin-top:20%;
	width: 20%;
	left:15%;
}
.cuadroP4{
	margin-top:40%;
	width: 16%;
	left:60%;
}
.cuadroP5{
	margin-top:40%;
	width: 25%;
	left:67%;
}
.cuadroP6{
	margin-top:65%;
	width: 12%;
	left:71%;
}
.cuadroP7{
	margin-top:38%;
	width: 16%;
	left:75%;
}
.cuadroP8{
	margin-top:55%;
	width: 16%;
	left:79%;
}
.cuadroP9{
	width: 18%;
	margin-top: 90%;
	left:39%;
}
.cuadroP10{
	width: 18%;
	margin-top: 120%;
	left:39%;
}
.cuadroP11{
	width: 18%;
	margin-top: 97%;
	left:59%;
}
.cuadroP12{
	width: 18%;
	margin-top: 87%;
	left:59%;
}
.cuadroP13{
	width: 10%;
	margin-top: 44%;
	left:66%;
}
.cuadroP14{
	width: 20%;
	margin-top: 91%;
	left:46%;
}
.cuadroP15{
	width: 20%;
	margin-top: 85%;
	left:76%;
}
.objetoCarta1{


	width: 60%;
	margin-top:12%;
	left:20%;
}
audio{
	width: 45%;
	margin-top:85%;
	left:27%;
}
#usuario{
	display: none;
}

#chat {
	display: none;
	top: -650px;
	height: 670px;
	width: 90%;
	opacity: 0.5;
	position: absolute;
	left: 5%;
	z-index: 10000;
}
.chat{
	width: 100%;
	height: 600px;
}

.fondo{
	width: 800px;
}
.carta{
	display:none;
}

	}/*cierre media screen 800px max*/

/* animacion niebla*/
@keyframes animarniebla{
	from {left:-1000px;}
	to {left:5px;}
}
@-moz-keyframes animarniebla{
	from {left:-1000px;}
	to {left:5px;}

@-o-keyframes animarniebla{
	from {left:-1000px;}
	to {left:5px;}
}
@-webkit-keyframes animarniebla{
	from {left:-1000px;}
	to {left:5px;}
}