.tituloEn{
	color:#7FCDEE;
    font-size: 2.5em;
    font-weight: bold;
    margin-bottom: 50px;
}

.enMenu{
	margin-top: 150px;
	width: 600px;
	display: inline-block;
}

#ConteMenuPrin{
	text-align: center;
}

#movimientos{
	margin-left: 40px;
}

#estaciones{
	margin-right: 40px; 
}

.itemMenPrin{
    cursor: pointer;
}

.itemMenPrin:hover{
    transform: scale(1.2);
}

#conMovimientos{
    text-align: center;
}

.imgmenmov{
    position: absolute;
    left: 190px;
    top: 600px;
}

.imgicomenmov{
     position: absolute;
    left: 310px;
    top: 390px;
}

.botonMov{
    width: 150px;
    height: 40px;
    background: #736c6c;
    color: white;
    font-size: 1.5em;
    border-radius: 10px;
    padding-top: 7px;
    position: absolute;
    cursor: pointer;
    z-index: 100;
    top:600px;
}

.botonMov:hover{
   color: #D9E021;
}

.rota{
    left:320px;
}

.planerota{
    position: absolute;
    top: 220px;
    left: 530px;
    width: 300px;
    height: 300px;
    display: inline-block;
    background: url(../img/tierra_rotacion.png);
    transform: rotate(25deg);
    transform-origin: 50% 100%;
}

.trasla{
    left: 610px;
}

.pre{
    left: 890px;
}


.animatrasla{
    display: none;
}

#planeta{
   
}

.planeRotaTras{
    position: absolute;
    z-index: 100;
    top: 400px;
    left: 620px;
    width: 105px;
    height: 125px;
    display: inline-block;
    background: url(../img/tierra_rotacion_tras.png);
    transform: rotate(25deg);
    transform-origin: 50% 100%;   
}
.sol{
    position: absolute;
    z-index: 10;
    top: 300px;
    left: 480px;
    width: 180px;
    height: 180px;
    display: inline-block;
    background: url(../img/sol_mov.png);   
}

.elipse{
    position: absolute;
    z-index: 5;
    top: 270px;
    left: 370px;
}

.animapre{
  animation: girar 10s infinite;
  -webkit-animation: girar 10s infinite;
  -moz-animation: girar 10s infinite;
    
}


@keyframes girar{
     0%   {transform: rotate(-35deg); transform-origin: 50% 100%; }
     25%   {transform: rotate(0deg); transform-origin: 50% 100%; }
    50%  {transform: rotate(35deg); transform-origin: 50% 100%; }
    75%  {transform: rotate(0deg); transform-origin: 50% 100%; }
    100% {transform: rotate(-35deg); transform-origin: 50% 100%; }
}

@-webkit-keyframes girar{
     0%   {transform: rotate(-35deg); transform-origin: 50% 100%; }
     25%   {transform: rotate(0deg); transform-origin: 50% 100%; }
    50%  {transform: rotate(35deg); transform-origin: 50% 100%; }
    75%  {transform: rotate(0deg); transform-origin: 50% 100%; }
    100% {transform: rotate(-35deg); transform-origin: 50% 100%; }
}

@-moz-keyframes girar{
     0%   {transform: rotate(-35deg); transform-origin: 50% 100%; }
     25%   {transform: rotate(0deg); transform-origin: 50% 100%; }
    50%  {transform: rotate(35deg); transform-origin: 50% 100%; }
    75%  {transform: rotate(0deg); transform-origin: 50% 100%; }
    100% {transform: rotate(-35deg); transform-origin: 50% 100%;}
}


.animatrasla1{
  animation: girartras 22.5s infinite;
  -webkit-animation: girartras 22.5s infinite;
  -moz-animation: girartras 22.5s infinite;
    
}


@keyframes girartras{
     0%   {transform: scale(0);}
     25%   {transform:scale(0.7);}
    50%  {transform: scale(1);}
    75%  {transform: scale(1.2);}
    100% {transform: scale(1);}
}

@-webkit-keyframes girartras{
     0%   {transform: scale(0);}
     25%   {transform:scale(0.7);}
    50%  {transform: scale(1);}
    75%  {transform: scale(1.2);}
    100% {transform: scale(1);}
}

@-moz-keyframes girar{
     0%   {transform: scale(0);}
     25%   {transform:scale(0.7);}
    50%  {transform: scale(1);}
    75%  {transform: scale(1.2);}
    100% {transform: scale(1);}
}

/* css para la parte de las estaciones */

.botoEst{
  display: inline-block;
  width: 180px;
  height: 60px;
  color: #fff;
  font-size: 1.5em; 
  text-align: center;
  padding: 5px;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(91,91,91,1) 67%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(67%,rgba(91,91,91,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(91,91,91,1) 67%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(91,91,91,1) 67%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(91,91,91,1) 67%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(91,91,91,1) 67%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#5b5b5b',GradientType=0 ); /* IE6-9 */

}

.botoEst:hover{
  color: #D9E021;
}

.botoneraEst{
  position: absolute;
  top:630px;
  left: 100px;
}

.eliEst{
  position: absolute;
  top:190px;
  left: 250px;
}

.plane{
  position: absolute;
}

.p1{
  top:339px;
  left: 188px;
}

.p2{
  top: 340px;
  left: 984px;
}

.p3{
  top: 433px;
  left: 273px;
}

.p4{
  top: 200px;
  left: 770px;
}

.p5{
  top: 494px;
  left: 690px;
}

.p6{
  top: 194px;
  left: 290px;
}

#botonera{left: 23px; width:70px}

.tapar1{
  position: absolute;
  z-index: 200;
  top:228px;
  left:303px;
  width: 70px;
  height: 15px;
  display: block;
  background: black;
}

.tapar2{
  position: absolute;
  z-index: 200;
  top:601px;
  left:772px;
  width: 70px;
  height: 15px;
  display: block;
  background: black;
}

