@charset "UTF-8";
/* CSS consportrait */

body { 
	margin:0; 
	padding:0; 
	font-family:Arial, Helvetica, sans-serif;
}
.fondo {
	position:fixed;
	width:100vw;
	height:100vh;
	z-index:-1;
}
.sombra { box-shadow: 0 0 3px #000000;}
.tur {
	position:fixed; 
	top:10vw;
	left:2vw;
	width:46vw;
}
.enigma {	
	position:fixed; 
	top:10vw;
	left:52vw; 
	width:46vw; 
	font-size:3.5vw; 
	text-align:center; 
	color:#00F;
}
.clave {	
	position:absolute; 
	top:0vw; 
	left:0; 
	width:20vw; 
	font-size:5vw; 
	text-align:left; 
}
#contrasena { 
	position:fixed; 
	top:17vw; 
	left:2vw; 
	width:30vw; 
	height:8vw; 
	border:0.4vw solid #F00; 
	border-radius:0.5vw; 
	text-align:left; 
	font-size:3.8vw; 
	padding-left:0.5vw;
}
.ojo {
	position:absolute;
	top:8vw;
	left:33vw;
	cursor:pointer;
	width:11vw;
}
#ojo {
	position:absolute;
	top:6vw;
	left:33vw;
	cursor:pointer;
	width:12vw;
	height:8.5vw;
	border-color:#7fa6d6;
}
.button {
	position:absolute; 
	top:22vw; 
	left:21vw; 
	width:20.5vw;
	height:32vw; 
	border-radius:1vw; 
	cursor:pointer; 
	z-index:11;
	background-color:transparent;
	border:0;
}
.candado {	
	position:absolute; 
	top:22vw; 
	left:21vw; 
	width:20vw; 
	border:0.4vw solid #F00; 
	border-radius:1vw; 
	text-align:center; 
	background-color:#FFF;
}
[type="checkbox"] { -webkit-appearance:none; }
#ayuda2 { 
	position:absolute; 
	cursor:pointer; 
	top:40vw; 
	left:0; 
	width:16vw; 
	display:block;
}
#ayuda3 {
	position:absolute; 
	cursor:pointer; 
	top:40vw; 
	left:0; 
	width:16vw; 
	display:none;
}
.conzu-heraclito { 
	position:fixed; 
	top:76vw; 
	left:2vw; 
	width:12vw; 
	height:15vw;
	}
#conzu-heraclito {
	position:fixed; 
	cursor:pointer; 
	top:110vw; 
	left:2vw; 
	width:12vw; 
	height:20vw;
	z-index:2;
}
.vallas {
	position:fixed;
	top:80vw;
	left:-50vw;
	width:200vw;
	z-index:1;
}
.material-i {
	position:fixed;
	top:115vw;
	left:7vw;
	width:40vw;
	z-index:2;
}
.material-d {
	position:fixed;
	top:130vw;
	left:66vw;
	width:40vw;
	z-index:2;
}
#gracias { 
	position:fixed; 
	top:74vw; 
	left:4vw; 
	width:92vw; 
	height:104vw; 
	border:0.4vw solid #F00;
	border-radius:3vw 3vw 0 0; 
	text-align:center; 
	overflow:scroll; 
	display:none;
	z-index:2;
}
#oben {
	position:absolute; 
	top:0vw; 
	left:0; 
	width:92.4vw; 
	cursor:s-resize;
}
#lapiz { 
	position:absolute; 
	top:18vw; 
	left:36.5vw;
	z-index:2;
}
#lapicito { 
	width:1.2vw; 
	height:12vw; 
	background:#F00; 
	animation:movi ease-in-out 0.15s infinite; 
	transform-origin:50% 50%; 
	animation-direction:alternate;
}
#lapicito:before { 
	position:absolute; 
	top:12vw; 
	left:0; 
	content:""; 
	border-top:2.5vw solid #000; 
	border-left:0.75vw solid transparent; 
	border-right:0.75vw solid transparent;
	border-bottom:0vw solid transparent;
}
.unten { 
	position:absolute; 
	top:32.2vw; 
	left:0; 
	width:92.4vw; 
	background-color:#FFF;
	height:125vh; 
	cursor:s-resize;
}
p { font-size:4vw;}
@-webkit-keyframes movi { 
	0% {transform:rotate(-10deg); 
	-webkit-transform:rotate(-10deg);
} 
100% { 
	transform:rotate(8deg); 
	-webkit-transform:rotate(8deg);
}
}
.rot { color:red;}
.ente {
	position:absolute; 
	left:25vw; 
	width:30vw;
}
@media (min-width: 768px) {
.fondo {
	position:fixed;
	top:-30vw;
	width:100vw;
	height:100vh;
	z-index:-1;
}
.tur {
	position:fixed; 
	top:2vw;
	left:2vw;
	width:46vw;
}
.clave {	
	position:absolute; 
	top:0vw; 
	left:0; 
	width:20vw; 
	font-size:3vw; 
	text-align:left; 
}
#contrasena { 
	position:fixed; 
	top:6vw; 
	left:2vw; 
	width:30vw; 
	height:6vw; 
	border:0.4vw solid #F00; 
	border-radius:0.5vw; 
	text-align:left; 
	font-size:3vw; 
	padding-left:0.5vw;
}
.ojo {
	position:absolute;
	top:4vw;
	left:31vw;
	cursor:pointer;
	width:9vw;
}
#ojo {
	position:absolute;
	top:4vw;
	left:31vw;
	cursor:pointer;
	width:9vw;
	height:5vw;
	border-color:#7fa6d6;
	background-color:transparent;
}
.button {
	position:absolute; 
	top:12vw; 
	left:21vw; 
	width:20.5vw;
	height:26vw; 
	border-radius:1vw; 
	cursor:pointer; 
	z-index:11;
	background-color:transparent;
	border:0;
}
.candado {	
	position:absolute; 
	top:12vw; 
	left:21vw; 
	width:20vw; 
	border:0.4vw solid #F00; 
	border-radius:1vw; 
	text-align:center; 
	background-color:#FFF;
}
[type="checkbox"] { -webkit-appearance:none; }
#ayuda2 { 
	position:absolute; 
	cursor:pointer; 
	top:20vw; 
	left:2vw; 
	width:16vw; 
	display:block;
}
#ayuda3 {
	position:absolute; 
	cursor:pointer; 
	top:20vw; 
	left:2vw; 
	width:16vw; 
	display:none;
}
.enigma {	
	position:fixed; 
	top:2vw;
	left:52vw; 
	width:46vw; 
	font-size:3vw; 
	text-align:center; 
	color:#00F;
}
.conzu-heraclito {
	position:fixed; 
	top:95vw; 
	left:2vw; 
	width:14vw; 
	height:25vw;
	}
#conzu-heraclito {
	position:fixed; 
	cursor:pointer; 
	top:120vw; 
	left:2vw; 
	width:14vw; 
	height:20vw;
	z-index:2;
}
#conzu-heraclito {
	position:fixed; 
	cursor:pointer; 
	top:95vw; 
	left:2vw; 
	width:12vw; 
	height:20vw;
	z-index:2;
}
.vallas {
	position:fixed;
	top:50vw;
	left:-50vw;
	width:200vw;
	z-index:1;
}
.material-i {
	position:fixed;
	top:65vw;
	left:7vw;
	width:40vw;
	z-index:2;
}
.material-d {
	position:fixed;
	top:70vw;
	left:66vw;
	width:40vw;
	z-index:2;
}
#gracias { 
	position:fixed; 
	top:44vw; 
	left:20vw; 
	width:60vw; 
	height:60vw; 
	border:0.15vw solid #F00;
	border-radius:1.3vw 1.3vw 0 0; 
	text-align:center; 
	overflow:scroll; 
	display:none;
}
#oben {
	position:absolute; 
	top:0vw; 
	left:0; 
	width:60vw;
	background-color:#F00; 
	cursor:s-resize;
}
#lapiz { 
	position:absolute; 
	top:14vw; 
	left:24vw;
	z-index:2;
}
#lapicito { 
	width:0.4vw; 
	height:4vw; 
	background:#F00; 
	animation:movi ease-in-out 0.15s infinite; 
	transform-origin:50% 50%; 
	animation-direction:alternate;
}
#lapicito:before { 
	position:absolute;
	top:4vw; 
	left:0; 
	width:0; 
	height:0; 
	content:""; 
	border-top:1vw solid #000; 
	border-left:0.25vw solid transparent; 
	border-right:0.25vw solid transparent;
}
.unten { 
	position:absolute; 
	top:21vw; 
	left:0; 
	width:60vw; 
	height:150vh; 
	background-color:#FFF; 
	cursor:s-resize;
}
p { font-size:3vw;}
}