@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;
}

/*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;
	opacity: 0;
	width: 10%;
	height: 50px;
	margin-top: 47%;
	left:32%;
	background: black;
	z-index: 12000;
}
.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: 52%;
	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: 6%;
		margin-top: 38%;
		left:50%;

	}

.nota2{
		
		position: fixed;
		width: 6%;
		margin-top:36%;
		left:56%;

	}
.nota3{
		
		position: fixed;
		width: 5%;
		margin-top: 48%;
		left:16%;

	}

.nota4{
		
		position: fixed;
		width: 5%;
		margin-top: 52%;
		left: 66%;

	}
.nota5{
		
		position: fixed;
		width: 5%;
		margin-top: 40%;
		left: 25%;

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

	}
.nota7{
		
		position: fixed;
		width: 6%;
		margin-top: 53%;
		left: 13%;

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

	}

.diario1{

		position: fixed;
		width: 6%;
		margin-top: 49%;
		left:29%;
}
.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: 12%;
		margin-top: 22%;
		left:10%;
	
	}

.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,
.nota6:hover, .nota7:hover, .nota8: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: 17%;
		margin-top:8%;
		left:50%;
 		z-index: 1;
	}

.cuadroP2{
		
		position: fixed;
		width: 7%;
		margin-top: 46%;
		left:68%;
		z-index: 5;
	
	}


/* ObjetosCartas*/



.cuadroP3{

		position: fixed;
		width: 11%;
		margin-top:10%;
		left:7%;

 		
	}
.cuadroP4{

		position: fixed;
		width: 11%;
		margin-top:47%;
		left:65%;

	}

.cuadroP5{

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

		position: fixed;
		width:5%;
		margin-top:37%;
		left:38%;
	
	}
.cuadroP7{

		position: fixed;
		width:15%;
		margin-top:9%;
		left:48%;
	
	}
.cuadroP8{

		position: fixed;
		width:9%;
		margin-top:24%;
		left:62%;
	
	}
.cuadroP9{
		
		position: fixed;
		width: 7%;
		margin-top: 16.7%;
		left:73.5%;
		z-index: 5;
	
	}

.cuadroP10{

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

		position: fixed;
		width:7%;
		margin-top:47%;
		left:79%;
	
	}

.cuadroP12{

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

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

.cuadroP14{

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

		position: fixed;
		width:6%;
		margin-top:6%;
		left:45%;
	
	}
.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: 1000px) {

#www, #block {
	display: none;
}

.seguir{

		margin-top: 35%;

}
/*izquierda*/
.seguir2{


		margin-top: 35%;

}
footer{

	background: none;
	opacity: none;
  position: relative;

}
.logotipo{
    width:180px;
	margin-top:390px;
	margin-left:5%;
}
  

	}/*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;}
}