@charset "UTF-8";
/* CSS chrolandscape #FFF8DC*/

body { 
	margin:0; 
	padding:0; 
	font-family:Arial, Helvetica, sans-serif;
}
.fondo{
	position:absolute; 
	top:-14vw;
	left:-5vw; 
	width:110vw; 
}
.sombra { box-shadow: 0 0 3px #000000;}
#chro-canvas {
	position:absolute; 
	top:9.4vw; 
	left:28.7vw;
	width:7.6vw;
}
.dreieck {
	position:absolute; 
	top:18vw;	
	left:30.5vw; 
	width:4vw;
	z-index:2; 
}
#pendulo {
	position:absolute;
	left:32.6vw;
	top:21vw;
	-webkit-animation:movi ease-in-out 1s infinite;
	-webkit-transform-origin:50% 0%;
	-webkit-animation-direction:alternate;
}
#largero {
	position:absolute; 
	top:1vw; 
	left:-0.3vw; 
	width:0.4vw; 
	height:9.3vw; 
	background-color:#FF0;
	z-index:1;
}
#kreis {
	position:absolute; 
	top:9.3vw; 
	left:-1.1vw; 
	width:2vw; 
	height:2vw;	
	border-radius:3vw;
	background-color:#666666;
	z-index:2;
}
@-webkit-keyframes movi { 
	0% { -webkit-transform:rotate(-8deg);} 
	100% { -webkit-transform:rotate(8deg);}
}
@keyframes movi { 
	0% { -webkit-transform:rotate(-8deg);} 
	100% { -webkit-transform:rotate(8deg);}
}
.chr-mo {
	position:fixed; 
	top:0vw;
	width:100vw;
	height:40vw;
}
#chro-mo-1 {
	position:absolute; 
	top:3vw;
	left:16.5vw; 
	width:8.3vw; 
	height:16.4vw; 
	cursor:pointer; 
}
#chro-mo-2 {
	position:absolute; 
	top:4vw; 
	left:46.5vw; 
	width:6vw; 
	height:10vw; 
	cursor:pointer;
}
#chro-mo-3 {
	position:absolute; 
	top:2vw; 
	left:55.5vw; 
	width:5.3vw; 
	height:9vw; 
	cursor:pointer;
}
#chro-mo-4 {
	position:absolute; 
	top:0; 
	left:63vw; 
	width:5vw; 
	height:8vw; 
	cursor:pointer;
}
#chro-mo-5 {
	position:absolute; 
	top:0; 
	left:76vw; 
	width:6vw; 
	height:6vw; 
	cursor:pointer;
}
#chrozu-comentarios {
	position:absolute; 
	top:15vw; 
	left:80vw; 
	width:8vw; 
	height:8vw; 
	cursor:pointer;
}
#chro-mo-6 {
	position:absolute; 
	top:24vw; 
	left:75vw; 
	width:5vw; 
	height:8vw; 
	cursor:pointer;
}
#chro-mo-7 {
	position:absolute; 
	top:24.8vw; 
	left:81.8vw; 
	width:5vw; 
	height:7vw; 
	cursor:pointer;
}
#chrozu-heraclito { 	
	position:absolute; 
	top:30vw; 
	left:1vw; 
	width:7vw; 
	height:12vw; 
	cursor:pointer;
}
#chrozu-rinconlibre { 
	position:absolute; 
	top:12vw; 
	left:93vw; 
	width:5vw; 
	cursor:pointer;
}
.cont-1 { 
	position:absolute; 
	left:42vw; 
	width:18vw;
}
.cont-2 { 
	position:absolute; 
	left:37.5vw; 
	width:25vw;
}
.cont-3 { 
	position:absolute; 
	left:37.5vw; 
	width:25vw;
}
.cont-4 { 
	position:absolute; 
	left:34vw; 
	width:32vw;
}
.cont-5 { 
	position:absolute; 
	left:30.5vw; 
	width:39vw;
}
.cont-7 { 
	position:absolute; 
	left:37vw; 
	width:26vw;
}
.izq { 
	position:absolute; 
	top:0.5vw; 
	left:24vw; 
	width:26vw;
}
.der { 
	position:absolute; 
	top:0.5vw; 
	left:50vw; 
	width:26vw;
}
@media (width: 1024px) {
.fondo{
	position:absolute; 
	top:-13vw;
	left:-20vw; 
	width:140vw; 
}
#chro-canvas {
	position:absolute; 
	top:13.5vw; 
	left:23.9vw;
	width:7.6vw;
}
.dreieck {
	position:absolute; 
	top:23vw;	
	left:25.8vw; 
	width:4vw;
	z-index:2; 
}
#pendulo {
	position:absolute;
	left:28vw;
	top:27vw;
	-webkit-animation:movi ease-in-out 1s infinite;
	-webkit-transform-origin:50% 0%;
	-webkit-animation-direction:alternate;
}
#largero {
	position:absolute; 
	top:1vw; 
	left:-0.3vw; 
	width:0.4vw; 
	height:9.3vw; 
	background-color:#FF0;
	z-index:1;
}
#kreis {
	position:absolute; 
	top:9.3vw; 
	left:-1.1vw; 
	width:2vw; 
	height:2vw;	
	border-radius:3vw;
	background-color:#666666;
	z-index:2;
}
.chr-mo {	
	position:absolute; 
	top:4.5vw;
	width:100vw;
	height:38.2vw;
}
#chro-mo-1 {
	position:absolute; 
	top:4.5vw;
	left:7.4vw; 
	width:10.5vw; 
	height:20.4vw; 
	cursor:pointer; 
}
#chro-mo-2 {
	position:absolute; 
	top:5vw; 
	left:45.5vw; 
	width:7.5vw; 
	height:12vw; 
	cursor:pointer;
}
#chro-mo-3 {
	position:absolute; 
	top:3.5vw; 
	left:57vw; 
	width:7vw; 
	height:10vw; 
	cursor:pointer;
}
#chro-mo-4 {
	position:absolute; 
	top:1vw; 
	left:66.5vw; 
	width:5vw; 
	height:8vw; 
	cursor:pointer;
}
#chro-mo-5 {
	position:absolute; 
	top:0; 
	left:83vw; 
	width:7vw; 
	height:7vw; 
	cursor:pointer;
}
#chrozu-comentarios {
	position:absolute; 
	top:19.5vw; 
	left:89vw; 
	width:9vw; 
	height:10vw; 
	cursor:pointer;
}
#chro-mo-6 {
	position:absolute; 
	top:31vw; 
	left:82vw; 
	width:6vw; 
	height:10vw; 
	cursor:pointer;
}
.izq { 
	position:absolute; 
	top:0.5vw; 
	left:24vw; 
	width:26vw;
}
.der { 
	position:absolute; 
	top:0.5vw; 
	left:50vw; 
	width:26vw;
}
#chro-mo-7 {
	position:absolute; 
	top:32vw; 
	left:90vw; 
	width:7vw; 
	height:8vw; 
	cursor:pointer;
}
#chrozu-heraclito {
	position:absolute; 
	top:40vw; 
	left:1vw; 
	width:9vw; 
	cursor:pointer;
}
#chrozu-rinconlibre {
	position:absolute; 
	top:16vw; 
	left:80vw; 
	width:6vw; 
	cursor:pointer;
}
.cont-1 { 
	position:absolute; 
	left:33.5vw; 
	width:33vw;
}
.cont-2 { 
	position:absolute; 
	left:32.5vw; 
	width:45vw;
}
.cont-3 { 
	position:absolute; 
	left:32.5vw; 
	width:45vw;
}
.cont-4 { 
	position:absolute; 
	left:27.5vw; 
	width:58vw;
}
.cont-5 { 
	position:absolute; 
	left:15vw; 
	width:70vw;
}
.cont-7 { 
	position:absolute; 
	left:32vw; 
	width:46vw;
}
.izq { 
	position:absolute; 
	top:0.5vw; 
	left:20vw; 
	width:30vw;
}
.der { 
	position:absolute; 
	top:0.5vw; 
	left:50vw; 
	width:30vw;
}
}
@media (min-width: 1920px) {
.fondo{
	position:absolute; 
	top:-17.5vw;
	left:-23.6vw; 
	width:146vw; 
}
#chro-canvas {
	position:absolute; 
	top:15vw; 
	left:22.4vw;
	width:7.6vw;
}
.dreieck {
	position:absolute; 
	top:25.5vw;	
	left:24.4vw; 
	width:4vw;
	z-index:2; 
}
#pendulo {
	position:absolute;
	left:26.3vw;
	top:29.8vw;
	-webkit-animation:movi ease-in-out 1s infinite;
	-webkit-transform-origin:50% 0%;
	-webkit-animation-direction:alternate;
}
#largero {
	position:absolute; 
	top:1vw; 
	left:-0.3vw; 
	width:0.4vw; 
	height:9.3vw; 
	background-color:#FF0;
	z-index:1;
}
#kreis {
	position:absolute; 
	top:9.3vw; 
	left:-1.1vw; 
	width:2vw; 
	height:2vw;	
	border-radius:3vw;
	background-color:#666666;
	z-index:2;
}
@-webkit-keyframes movi { 
	0% { -webkit-transform:rotate(-8deg);} 
	100% { -webkit-transform:rotate(8deg);}
}
@keyframes movi { 
	0% { -webkit-transform:rotate(-8deg);} 
	100% { -webkit-transform:rotate(8deg);}
}
.chr-mo {
	position:absolute; 
	top:0;
	width:100vw;
	height:38.2vw;
}
#chro-mo-1 {
	position:absolute; 
	top:5.2vw;
	left:5vw; 
	width:11vw; 
	height:22vw; 
	cursor:pointer; 
}
#chro-mo-2 {
	position:absolute; 
	top:6.4vw; 
	left:44.5vw; 
	width:8.2vw; 
		height:14vw; 
cursor:pointer;
}
#chro-mo-3 {
	position:absolute; 
	top:4vw; 
	left:56.7vw; 
	width:6.9vw; 
	height:12vw; 
	cursor:pointer;
}
#chro-mo-4 {
	position:absolute; 
	top:2vw; 
	left:66.8vw; 
	width:5vw; 
	height:9.5vw; 
	cursor:pointer;
}
#chro-mo-5 {
	position:absolute; 
	top:0; 
	left:84vw; 
	width:7.5vw; 
	height:8vw; 
	cursor:pointer;
}
#chrozu-comentarios {
	position:absolute; 
	top:21vw; 
	left:90vw; 
	width:9vw; 
	height:10vw; 
	cursor:pointer;
}
#chro-mo-6 {
	position:absolute; 
	top:33vw; 
	left:83vw; 
	width:7vw; 
	height:10vw; 
	cursor:pointer;
}
#chro-mo-7 {
	position:absolute; 
	top:34vw; 
	left:92vw; 
	width:6vw; 
	height:8vw; 
	cursor:pointer;
}
#chrozu-heraclito {
	position:absolute; 
	top:43vw; 
	left:1vw; 
	width:6vw; 
	cursor:pointer;
}
#chrozu-rinconlibre {
	position:absolute; 
	top:19vw; 
	left:81vw; 
	width:4vw; 
	cursor:pointer;
}
.cont-1 { 
	position:absolute; 
	left:37.5vw; 
	width:25vw;
}
.cont-2 { 
	position:absolute; 
	left:32.5vw; 
	width:35vw;
}
.cont-3 { 
	position:absolute; 
	left:32.5vw; 
	width:35vw;
}
.cont-4 { 
	position:absolute; 
	left:27.5vw; 
	width:45vw;
}
.cont-5 { 
	position:absolute; 
	left:25vw; 
	width:50vw;
}
.cont-7 { 
	position:absolute; 
	left:32vw; 
	width:36vw;
}
.izq { 
	position:absolute; 
	top:0.5vw; 
	left:20vw; 
	width:30vw;
}
.der { 
	position:absolute; 
	top:0.5vw; 
	left:50vw; 
	width:30vw;
}
}