/* Definimos un ancho fluido y una altura fija para nuestro menú */
header{
    height:90px;
    position: absolute;
    width: 100%;
	z-index:999;
}


/* El logo sera flotado a la izquierda */
#logo{
    display: block;
    float: left;
	margin-left:46px;
	margin-top:30px;
    width:159px;
    height:46px;

}

#idiomas{
  position: relative;
  float: right;
  display: inline-block;
  padding-top: 8px;
  padding-right: 18px;
}
#txt-idioma{
  position: absolute;
  color: #fff;
  margin-top:-2px;  
  margin-right: 6px;
  right: 48px;
  font-size: 14px;
  font-family: 'Titillium Web'
}
/* Nuestro nav con id #menu lo flotaremos a la derecha*/
#menu{ float: left;font-family: 'Titillium Web', sans-serif;
padding-right:50px; z-index:999; 
float: none;
padding-top: 20px;
animation:animatxt2 1s;
 -webkit-animation:animatxt2 1s;
 -ms-animation:animatxt2 1s;
 -moz-animation:animatxt2 1s;
  -0-animation:animatxt2 1s;
}
 
    /* Quitamos estilos por defecto de el tag UL */
    #menu ul{
        margin: 0;
        padding: 0;
        list-style: none;
        font-size: 14px;
		
    }
 
             
/* Estilos #nav-mobile y lo ocultamos */
#nav-mobile{
	display: block; 
    background: url(../imagenes/nav.png) no-repeat center center;
    float: left;
    width: 60px;
    height: 60px;
    position: absolute;
    right: 0;
    top:20px;
    opacity: .6;
}
 
    /* Agregaremos esta clase a #nav-mobile, cuando el menu mobile haya sido desplegado */
    #nav-mobile.nav-active{
        opacity: 1;
    }

 
       /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{

            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{

            float: right;
            text-transform: uppercase;
            text-align: center;
            }
                /* Damos estilo a nuestros enlaces */
				
			
            #menu li a{
                display: block;
                color: #ffffff;
                text-decoration: none;
                padding: 15px 15px;
            }
                #menu li a:hover{
                    color: #00d357;
                }

				
 
        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{
            max-height: 400px;
            -webkit-transition: all 1s ease-out;
            transition: all 1s ease-out;
        }


.tcc{  color: #fff;
  margin-top:-2px;  
  margin-right: 6px;
  right: 48px;
  font-size: 14px;
  font-family: 'Titillium Web'; text-decoration:none;}

@media only screen and (max-width: 800px) {
	
#logo{
    background: url(../imagenes/logo2.png) no-repeat 0 0;
    display: block;
    float: left;
    width:100px;
    height:29px;
    text-indent: -9999px
}	
	
    
    /* mostramos #nav-mobile */
    #nav-mobile{ display: block; }

    /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 100%;
        float: none;
        padding-top: 60px;
		padding-right:0;
    }
      /* Fijamos nuestro nav en 100% ancho y dejamos de flotarlo  */
    #menu{
        width: 100%;
        float: none;
        padding-top: 60px;
    }
        /* Convertimos nuestra lista de enlaces en un menú horizontal */
        #menu ul{

            max-height: 0;
            overflow: hidden;
        }
            /* estilos para los LI del menu */
            #menu li{
                background: #00d357;
                border-bottom: 1px solid #ffffff;
                float: none;
				float: none;
            }

            /* Quitamos el borde del ultimo item del menú */
            #menu li:last-child{ border-bottom: 0;}
                #menu li a{
                    padding: 20px 0;
                    height: auto;
                    line-height: normal;
                }
                #menu li a:hover{ background: #52e28e; color:#ffffff;}

        /* Agregamos una animación al despligue del menú */
        #menu ul.open-menu{
            max-height: 4000px;
            -webkit-transition: max-height 2s;
            -moz-transition: max-height 2s;
            -ms-transition: max-height 2s;
            -o-transition: max-height 2s;
            transition: max-height 2s;background: url(../menu/nav2.png) no-repeat center center;
        }

	
}
	
@-webkit-keyframes animaLogo0{	

 0%{
	 
        opacity:0;
       }

 100%{
         opacity:1;
          }
}


@-moz-keyframes animaLogo0{

 0%{
  opacity:0;
 }
 100%{
  opacity:1;
 }

}


@-ms-keyframes animaLogo0{

 0%{
 opacity:0;
 }
 100%{
  opacity:1;
 }
}


@keyframes animaLogo0{

 0%{
  opacity:0;
 }
 100%{
  opacity:1;
 }
}


@-o-keyframes animaLogo0{

 0%{
  opacity:0;
 }
 100%{
  opacity:1;
 }

}


@-webkit-keyframes animatxt{	

 0%{
	 
        opacity:0;
		-webkit-transform: translateY(20px);
       }

 100%{
         opacity:1;
          }
}


@-moz-keyframes animatxt{

 0%{
  opacity:0;
  -moz-transform: translateY(20px);
 }
 100%{
  opacity:1;
 }

}


@-ms-keyframes animatxt{

 0%{
  opacity:0;
  -ms-transform: translateY(20px);
 }
 100%{
  opacity:1;
 }
}


@keyframes animatxt{

 0%{
  opacity:0;
  transform: translateY(20px);
 }
 100%{
  opacity:1;
 }
}


@-o-keyframes animatxt{

 0%{
opacity:0;
-o-transform: translateY(20px);
 }
 100%{
opacity:1;
 }

}


@-webkit-keyframes animatxt2{	

 0%{
	 
        opacity:0;
		-webkit-transform: translateY(-10px);
       }

 100%{
         opacity:1;
          }
}


@-moz-keyframes animatxt2{

 0%{
  opacity:0;
  -moz-transform: translateY(-10px);
 }
 100%{
  opacity:1;
 }

}


@-ms-keyframes animatxt2{

 0%{
  opacity:0;
  -ms-transform: translateY(-10px);
 }
 100%{
  opacity:1;
 }
}


@keyframes animatxt2{

 0%{
  opacity:0;
  transform: translateY(-10px);
 }
 100%{
  opacity:1;
 }
}


@-o-keyframes animatxt2{

 0%{
opacity:0;
-o-transform: translateY(-10px);
 }
 100%{
opacity:1;
 }

}


.contenedor {
		  position: relative;
		  height: 272px;
		  width: 272px;
		}

		.contenedor img {
		  position: absolute;
		  left: 0;
		  transition: opacity .8s ease-in-out;
		}

		.contenedor img.top:hover {
		  opacity: 0;
		}

.ball {
    margin: 0 auto;
    -moz-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
}

.ball2 {
    margin: 0 auto;
    -moz-animation: spin 1.5s infinite linear;
    -webkit-animation: spin 1.5s infinite linear;
}

@-moz-keyframes spin {
    0% {
opacity: 0;    }

    100% {
opacity: 1;   -moz-transform: translateY(5px); };
}



@-webkit-keyframes spin {
    0% {
opacity: 0;   }

    100% {
opacity: 1;    -webkit-transform: translateY(5px);};
}