@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,
.cartax1, .cartax2, .cartax3, .cartax4, .cartax5, .cartax6, .cartax7,
.personalx1, .personalx2, .personalx3, .personalx4, .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, .diarioD:hover,
.diarioE:hover, .diarioF:hover, .libro6:hover, .libro7:hover, .diarioG:hover, .carta5:hover, .carta6: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*/
.secundario1 {
		position: fixed;
		width: 5%;
		height: 10%;
		margin-top: 35%;
		left:41%;

}

.secundario5 {
		position: fixed;
		width: 5%;
		height: 10%;
		margin-top: 42%;
		left:33%;
		

}
.secundario6 {
		position: fixed;
		width: 20%;
		height: 20%;
		margin-top: 22%;
		left:63%;
		

}
.codigo1, .codigo3, .codigo4, .codigo5, .codigo6, .codigo7, .codigo8, .codigo9{
	position: fixed;
		width: 50%;
		margin-top: 7%;
		left:25%;
		z-index: 7000;
		border: 10px solid black;
		border-radius: 20px;
		background: black;
}
.codigo2, .evaluacion1, .evaluacion2, .evaluacion3, .evaluacion4, .evaluacion5 {
	width: 100%;

}

.respuesta1, .respuesta2, .respuesta3, .respuesta4, .respuesta5
	{
		position: fixed;
		width: 50%;
		margin-top: 7%;
		left:25%;
		z-index: 7000;
		border: 10px solid black;
		border-radius: 20px;
		background: black;
	}

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

}

.enviar, .enviar3, .enviar4, .enviar5, .enviar6, .enviar7, .enviar8, .enviar9{
		position: fixed;
		margin-top: -4%;
		left:34%;
		z-index: 8000;
		
}
.salir2{
		position: fixed;
		margin-top: -4%;
		left:50%;
		z-index: 8000;
		
}
input{
		font-size: 20px;
		font-family: Verdana, Geneva, sans-serif;
		opacity: 0.8;
		border-radius: 20px;
}

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

}


/* 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 {
		position: fixed;
		opacity: 0.7;
		width: 3%;
		margin-top: 20%;
		left:92%;
		z-index: 5000;
}

.interuptor2 {
		position: fixed;
		opacity: 0.7;
		width: 3%;
		margin-top: 20%;
		left:51%;
		z-index: 5000;
}
.interuptor3 {
		position: fixed;
		opacity: 0.7;
		width: 3%;
		margin-top: 20%;
		left:59%;
		z-index: 5000;
}
.interuptor4 {
		position: fixed;
		opacity: 0.7;
		width: 3%;
		margin-top: 22%;
		left:59%;
		z-index: 5000;
}
.interuptor5 {
		position: fixed;
		opacity: 0.7;
		width: 3%;
		margin-top: 20%;
		left:43%;
		z-index: 5000;
}

.interuptor6 {
		position: fixed;
		opacity: 0.7;
		width: 3%;
		margin-top: 20%;
		left:61%;
		z-index: 5000;
}

.interuptor7 {
		position: fixed;
		opacity: 0.7;
		width: 3%;
		margin-top: 18%;
		left:44%;
		z-index: 5000;
}
.interuptor8 {
		position: fixed;
		opacity: 0.7;
		width: 3%;
		margin-top: 18%;
		left:25%;
		z-index: 5000;
}
.oscuridad{
	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%;
}

#banoHelena{
	display: none;
}

/* notas debanoHelena*/

.nota1{
		
		position: fixed;
		width: 7%;
		margin-top: 47%;
		left:80%;

	}

.nota2{
		
		position: fixed;
		width: 6%;
		margin-top: 47.5%;
		left:80%;

	}
.nota3{
		
		position: fixed;
		width: 14%;
		margin-top: 55%;
		left:14%;

	}
.nota4{
		
		position: fixed;
		width: 5%;
		margin-top: 48%;
		left:33%;

	}
.nota5{
		
		position: fixed;
		width: 5%;
		margin-top: 38%;
		left:70%;

	}
.diario1{
		
		position: fixed;
		width: 9%;
		margin-top: 50%;
		left:22%;
	
	}

.diarioA{

		position: fixed;
		width: 6%;
		margin-top: 49%;
		left:68%;
}
.diarioB{

		position: fixed;
		width: 7%;
		margin-top: 41.5%;
		left:42%;
}

.diarioC{

		position: fixed;
		width: 7%;
		margin-top: 53%;
		left:24%;
}

.diarioD{

		position: fixed;
		width: 7%;
		margin-top: 50%;
		left:35%;
}
.diarioE{

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

.diarioF{

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

.diarioG{

		position: fixed;
		width: 7%;
		margin-top: 50%;
		left:36%;
}
.libroArriba {
		position: fixed;
		width: 10%;
		margin-top: 42%;
		left:12%;
}

/* cartas debanoHelena*/

.carta1{
		
		position: fixed;
		width: 7%;
		margin-top: 47%;
		left:34%;
	
	}
.carta2{
		
		position: fixed;
		width: 5%;
		margin-top: 50%;
		left:15%;
	
	}
.carta3{
		
		position: fixed;
		width: 7%;
		margin-top: 48%;
		left:39%;
	
	}

.carta4{
		
		position: fixed;
		width: 7%;
		margin-top: 36%;
		left:60%;
	
	}

.carta5{
		
		position: fixed;
		width: 7%;
		margin-top: 49%;
		left:58%;
	
	}

.carta6{
		
		position: fixed;
		width: 7%;
		margin-top: 49%;
		left:43%;
	
	}
/*Acciones de Hover para todos los objetos */
.nota1:hover, .nota2:hover, .nota3:hover, 
.diario1:hover, .diarioA:hover, .carta1:hover, 
.carta2:hover, .mp3:hover, .violetaCuadro:hover, 
.objetoCarta2:hover, .objetoCarta3:hover, .objetoCarta4:hover, 
.objetoCarta5:hover, .objetoCarta6:hover, .objetoCarta7:hover, 
.objetoCarta8:hover, .objetoCarta9:hover, 
.objetoCarta10:hover, .objetoCarta11:hover, 
.objetoCarta12:hover, .objetoCarta13:hover, 
.objetoCarta14:hover, .objetoCarta15:hover,
.objetoCarta16:hover, .objetoCarta17:hover,
.caja:hover, .libroArriba:hover,
.nota4:hover, .carta3:hover, .diarioB:hover,
.nota5:hover, .carta4:hover, .casette:hover,
.libro1:hover, .libro2:hover, .libro3:hover,
.libro4:hover, .libro5: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:60%;
		margin-top: 1.5%;
		left:22%;
 		z-index: 8000;
 	
	}

/*Division para las cartaHarlot en el centro*/


/* obejtosEstatico de audio*/

.mp3{
		
		position: fixed;
		width: 7%;
		margin-top: 36%;
		left:72%;
		z-index: 5;
	
	}

/* ObjetosCartas*/

.violetaCuadro{
		
		position: fixed;
		width: 7%;
		margin-top: 21.5%;
		left:76%;

 		z-index: 1;
	}

.violetaCuadro2{
		
		position: fixed;
		width: 50%;
		border: 10px solid black;
		margin-top: 10%;
		left:22%;

 		z-index: 100;
	}

.violetaCuadro3, .objetoCarta{
		
		position: fixed;
		width: 25%;
		margin-top: 5%;
		left:36%;
		transition: 1.0s ease;

 		z-index: 12000;
	}

/* posiciones superiores carta*/
.violetaCuadro4{
		
		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;
	}
/*caja */

.caja{
		
		position: fixed;
		width: 5%;
		margin-top: 46%;
		left:65%;

 		
	}
/*libro*/

.libro{
		
		position: fixed;
		width: 5%;
		margin-top: 24%;
		left:45%;

 		
	}
.libro1{
		
		position: fixed;
		width: 7%;
		margin-top: 48.5%;
		left:45%;

 		
	}
.libro2{
		
		position: fixed;
		width: 7%;
		margin-top: 48.5%;
		left:55%;

 		
	}

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

 		
	}

.libro4{
		
		position: fixed;
		width: 7%;
		margin-top: 55.5%;
		left:33%;

 		
	}

.libro5{
		
		position: fixed;
		width: 7%;
		margin-top: 55.5%;
		left:23%;

 		
	}


.libro6{
		
		position: fixed;
		width: 7%;
		margin-top: 49.5%;
		left:70%;

 		
	}


.libro7{
		
		position: fixed;
		width: 7%;
		margin-top: 49.5%;
		left:66%;

 		
	}




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

.objetoCarta1{

		position: fixed;
		width: 24%;
		margin-top: 5%;
		left:37%;
 		z-index: 700;
}

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

.objetoCarta2{

		position: fixed;
		width: 13%;
		margin-top: 12%;
		left:57%;

 		
}

.objetoCarta3{

		position: fixed;
		width: 5%;
		margin-top: 39%;
		left:52%;
 		
}

.objetoCarta4{

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

.objetoCarta5{

		position: fixed;
		width: 10%;
		margin-top: 33%;
		left:3%;
 		
}

.objetoCarta6{

		position: fixed;
		width: 8%;
		margin-top: 25%;
		left:26%;
 		
}

.objetoCarta7{

		position: fixed;
		width: 8%;
		margin-top: 36%;
		left:45%;
 		
}

.objetoCarta8{

		position: fixed;
		width: 6%;
		margin-top: 36%;
		left:53.4%;
 		
}

.objetoCarta9{

		position: fixed;
		width: 7%;
		margin-top: 15%;
		left:20%;
 		
}
.objetoCarta10{

		position: fixed;
		width:18%;
		margin-top: 40%;
		left:70%;
 		
}
.objetoCarta11{

		position: fixed;
		width: 10%;
		margin-top: 26%;
		left:88%;
 		
}
.objetoCarta12{

		position: fixed;
		width: 8%;
		margin-top: 20%;
		left:75%;
 		
}

.objetoCarta13{

		position: fixed;
		width: 12%;
		margin-top: 35%;
		left:56%;
 		
}
.objetoCarta14{

		position: fixed;
		width: 12%;
		margin-top: 20%;
		left:14%;
 		
}
.objetoCarta15{

		position: fixed;
		width: 8%;
		margin-top: 40%;
		left:10%;
 		
}

.objetoCarta16{

		position: fixed;
		width: 8%;
		margin-top: 12.3%;
		left:30%;
 		
}

.objetoCarta17{

		position: fixed;
		width: 8%;
		margin-top: 20%;
		left:50%;
 	
}
/*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;}
}