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

body {
	margin:0; 
	padding:0; 
	font-family:Arial, Helvetica, sans-serif;
}
.sombra { box-shadow: 0 0 3px #000000;}
.fondo{
	position:absolute;
	top:0;
	left:-25vw; 
	width:150vw; 
}
#chro-canvas {
	position:absolute; 
	top:14vw; 
	left:21.7vw; 
	height:8vw; 
	padding:0.5vw;
}
.dreieck {
	position:absolute; 
	top:24vw;	
	left:23.9vw; 
	width:4vw; 
	z-index:1; 
}
#pendulo {	
	position:absolute;
	background-color:#F00;
	left:25.8vw;
	top:26vw;
	-webkit-animation:movi ease-in-out 1s infinite;
	-webkit-transform-origin:50% 0%;
	-webkit-animation-direction:alternate;
}
#largero {
	position:absolute; 
	top:1vw; 
	left:0vw; 
	width:0.4vw; 
	height:9.3vw; 
	background-color:#FF0;
}
#kreis {
	position:absolute; 
	top:10.2vw; 
	left:-0.7vw; 
	width:2vw; 
	height:2vw;	
	border-radius:3vw;
	background-color:#666666;
}
@-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 {	opacity:0.8;
	position:absolute; 
	top:18.8vw;
	left:0.1vw; 
	width:100vw;
}
#chro-mo-1 {
	position:absolute; 
	top:4vw;
	left:4vw; 
	width:11vw; 
	height:23vw; 
	cursor:pointer; 
}
#chro-mo-2 {
	position:absolute; 
	top:5vw; 
	left:45vw; 
	width:8vw; 
	height:14vw; 
	cursor:pointer;
}
#chro-mo-3 {
	position:absolute; 
	top:2vw; 
	left:57vw; 
	width:7vw; 
	height:12vw; 
	cursor:pointer;
}
#chro-mo-4 {
	position:absolute; 
	top:0; 
	left:67.5vw; 
	width:6vw; 
	height:10vw; 
	cursor:pointer;
}
#chro-mo-5 {
	position:absolute; 
	top:0; 
	left:85vw; 
	width:8vw; 
	height:8vw; 
	cursor:pointer;
}
#chrozu-comentarios {
	position:absolute; 
	top:21vw; 
	left:91vw; 
	width:9vw; 
	height:10vw; 
	cursor:pointer;
}
#chro-mo-6 {
	position:absolute; 
	top:33vw; 
	left:84vw; 
	width:7vw; 
	height:10vw; 
	cursor:pointer;
}
#chro-mo-7 {
	position:absolute; 
	top:35vw; 
	left:93vw; 
	width:7vw; 
	height:9vw; 
	cursor:pointer;
}
#chrozu-heraclito {
	position:absolute; 
	top:130vw; 
	left:3vw; 
	width:16vw; 
	cursor:pointer;
}
#chrozu-rinconlibre {
	position:absolute; 
	top:14vw; 
	left:81vw; 
	width:8vw; 
	cursor:pointer;
}
.cont-1 { 
	position:absolute; 
	width:100vw;
}
.cont-2 { 
	position:absolute; 
	width:100vw;
}
.cont-3 { 
	position:absolute; 
	width:100vw;
}
.cont-4 { 
	position:absolute; 
	width:100vw;
}
.cont-5 { 
	position:absolute; 
	width:100vw;
}
.izq { 
	position:absolute; 
	top:2vw; 
	left:0vw; 
	width:50vw;
}
.der { 
	position:absolute; 
	top:2vw; 
	left:50vw; 
	width:50vw;
}
.cont-7 { 
	position:absolute; 
	width:100vw;
}
@media (min-width: 768px)  {
.fondo{
	position:absolute;
	top:-5vw;
	left:-25vw; 
	width:150vw; 
}
.chr-mo {
	position:absolute; 
	top:13.8vw;
	left:0.1vw; 
	width:100vw;
}
#chro-canvas {
	position:absolute; 
	top:14vw; 
	left:21.7vw; 
	height:8vw; 
	padding:0.5vw;
}
.dreieck {
	position:absolute; 
	top:24vw;	
	left:23.9vw; 
	width:4vw; 
	z-index:1; 
}
#pendulo {	
	position:absolute;
	background-color:#F00;
	left:25.8vw;
	top:26vw;
	-webkit-animation:movi ease-in-out 1s infinite;
	-webkit-transform-origin:50% 0%;
	-webkit-animation-direction:alternate;
}
#largero {
	position:absolute; 
	top:1vw; 
	left:0vw; 
	width:0.4vw; 
	height:9.3vw; 
	background-color:#FF0;
}
#kreis {
	position:absolute; 
	top:10.2vw; 
	left:-0.7vw; 
	width:2vw; 
	height:2vw;	
	border-radius:3vw;
	background-color:#666666;
}
@-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);}
}
#chrozu-heraclito {
	position:absolute; 
	top:82vw; 
	left:3vw; 
	width:16vw; 
	cursor:pointer;
}
#chrozu-rinconlibre {
	position:absolute; 
	top:15vw; 
	left:78  vw; 
	width:8vw; 
	cursor:pointer;
}
.cont-1 { 
	position:absolute;
	left:20vw;
	width:60vw;
}
.cont-2 { 
	position:absolute;
	left:8vw;
	width:84vw;
}
.cont-3 { 
	position:absolute; 
	left:9vw;
	width:82vw;
}
.cont-4 { 
	position:absolute; 
	width:100vw;
}
.cont-5 { 
	position:absolute; 
	width:100vw;
}
.izq { 
	position:absolute; 
	top:2vw; 
	left:0vw; 
	width:50vw;
}
.der { 
	position:absolute; 
	top:2vw; 
	left:50vw; 
	width:50vw;
}
.cont-7 { 
	position:absolute; 
	width:100vw;
}
}
@media (min-width: 1080px)  {
.cont-1 { 
	position:absolute;
	left:7vw;
	width:86vw;
}
.cont-2 { 
	position:absolute;
	left:0vw;
	width:100vw;
}
.cont-3 { 
	position:absolute; 
	left:0vw;
	width:100vw;
}
.cont-4 { 
	position:absolute; 
	width:100vw;
}
.cont-5 { 
	position:absolute; 
	width:100vw;
}
}