* {
  margin: 0px;
  padding: 0px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@font-face {
  font-family: 'Lato-Thin';
  src: url('recursos/fonts/Lato-Thin.ttf');
}
@font-face {
  font-family: 'Lato-Light';
  src: url('recursos/fonts/Lato-Light.ttf');
}
@font-face {
  font-family: 'Lato-Black';
  src: url('recursos/fonts/Lato-Black.ttf');
}

body {
  margin: 0px;
  padding: 0px;
  height: 100%;
  font-family: Arial; font-size: 14px;
  background-image: url("recursos/imagenes/background/vectores.jpg");
  background-position: center 55px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-color: black; color: #868686;
 }

 h1 {
  line-height: 1.25;
  font-weight: 500;
  font-size: 36px;
}

header {
  width: 100%;
}

header nav {
  z-index: 1000;
  width: 100%;
  height: 55px;
  position: fixed;
  background-color: rgba(0,0,0,0.8);
  border-bottom:1px solid #000000;
}

header nav ul { 
  list-style: none;
  position: absolute;
  margin-top: 0px;
  right: 150px;
}

header nav ul li {
  display: inline-block;
  position: relative;
}

header nav ul li:hover {
  background-color: rgba(18,100,249,0.8);
}

header nav ul li a {
  display: block;
  font-family: Optima, Segoe, "Segoe UI", Candara, Calibri;
  font-size: 16px; text-decoration: none; color: white;
  padding: 17px;
}

a{
  cursor: pointer;
  text-align: justify;
  line-height: 20px;
}

/*-Logotipo--------------------------------------------------------------------------------------------------------------------*/

.isotipo{
  z-index: 2000;
  display: block; position: fixed;
  height: 55px;
  top: 5px; left: 10px; 
  margin: 0 auto;
  cursor: pointer;
}
.barra1{
  display: inline-block;  position: relative;
  width: 8px; height: 20px;
  border-radius: 2px; 
  background-color: #0AB2F8;
  margin: 0px; padding: 0px;
}
.barra1a{
  display: block; position: relative;
  top: 12px; left: 1px;
  width: 6px; height: 6px;
  margin: 0px; padding: 0px;
  background-color: black;
}

.barra2{
  display: inline-block; position: relative;
  width: 8px; height: 25px;
  border-radius: 2px; 
  background-color: #0E65F6;
  margin: 0px; padding: 0px;
}
.barra2a{
  display: block; position: relative;
  top: 14px; left: 1px;
  width: 6px; height: 10px;
  margin: 0px; padding: 0px;
  background-color: black;
}

.barra3{
  display: inline-block; position: relative;
  width: 8px; height: 30px;
  border-radius: 2px; 
  background-color: #0A36F6;
  margin: 0px; padding: 0px;  
}
.barra3a{
  display: block; position: relative;
  top: 16px; left: 1px;
  width: 6px; height: 12px;
  margin: 0px; padding: 0px;
  background-color: black;
}

.isotipo p{
   margin: 0px; padding: 0px;
  display: inline-block;  position: relative;
  font-family: "Franklin Gothic Medium", Arial;  font-size: 28px; color: white;
}


/*-Menu Celular----------------------------------------------------------------------------------------------------------------*/

.menu_celular {
  display: none;
}
.menu_celular_opciones{
  display: none;
}


/*-Que es la Meta---------------------------------------------------------------------------------------------------------------*/

.que_es_lameta{
  display: none; position: absolute;
  top: 50px; left: 100px;
  width: 600px; padding: 10px 30px; margin: 50px;
  font-family: 'Lato-Thin'; font-size: 16px; text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background-color: rgba(22,104,241,0.8); color: white;
}
.que_es_lameta h2 {
  font-family: 'Lato-Thin'; font-size: 30px;
  padding: 10px 0;
}
.que_es_lameta h2 strong, h3{
  font-family: 'Lato-Black';
}

/*-Banner de Ventas y Servicio---------------------------------------------------------------------------------------------------*/

.banner_ventas {
  display: block; position: absolute;
  top: 250px; left: 0px; margin: 0px 450px;
  width: 500px; height: 300px; padding: 10px;
  font-family: arial; text-shadow: 0 1px 1px rgba(0,0,0,.4); text-align: center; color: #fff; 
}

.banner_servicio {
  display: none; position: absolute;
  top: 250px; left: 0px; margin: 0px 450px;
  width: 500px; height: 300px; padding: 10px;
  font-family: arial; text-shadow: 0 1px 1px rgba(0,0,0,.4); text-align: center; color: #fff; 
}

/*-Login-------------------------------------------------------------------------------------------------------------------------*/

.form_login {
  display: none; position: absolute;
  top: 200px; right: 100px;
}
.form_login > .login_contenido {
  width: 350px; height: 370px;
  padding: 20px;
  border-radius: 7px;
  background-color: rgba(0,0,0,0.8); color: white;
}
.caja_titulo {
  padding: 10px;      
  font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
  font-style: bold; font-size: 20px; text-align: left; text-shadow: 0 2px 2px rgba(0,0,0,.4);
  color: #fff;
}

.box_form {
  position: relative;
  width: 300px; height: 35px;
  padding: 10px;      
  font-family: Optima, Segoe, "Segoe UI", Candara, Calibri; font-size: 14px; text-shadow: 0 0px 0px rgba(0,0,0,0);
  background-color:#FFFFFF; color: #8C8C8C;
}

.caja_pie{ 
  color: #FFFFFF;       
  font-family: "Arial Narrow", Arial, sans-serif;
  font-size:14px;
}

/*-Contacto----------------------------------------------------------------------------------------------------------------------*/

.form_contacto {
  display: none; position: absolute;
  top: 200px;
  right: 100px;
}
.form_contacto > .contacto_contenido {
  width: 350px; height: 370px;
  padding: 20px;
  border-radius: 7px;
  background-color: rgba(22,104,241,0.8); color: white;
}

.btn_probar{
  font-size: 21px;
}

.btn_verde{
  width: 140px; height: 40px;
  border:0px; padding: 10px; margin: 0 auto;
  font-family: Arial; font-size: 16px; font-style: bold; text-align: center;
  text-decoration: none; cursor: pointer;
  background-color:#1FC712; color: #fff;
}

.btn_verde:hover {
  background-color: #51EB5C;
}


/*-Acerca de Nosotros------------------------------------------------------------------------------------------------------------*/
.nosotros{
  display: none; position: absolute;
  top: 50px; left: 100px;
  width: 600px; padding: 10px 30px; margin: 50px;
  font-family: 'Lato-Thin'; font-size: 16px; text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background-color: rgba(22,104,241,0.8); color: white;
}
.nosotros h2 {
  font-family: 'Lato-Thin'; font-size: 30px;
  padding: 10px 0;
}
.nosotros h2 strong, h3{
  font-family: 'Lato-Black';
}
.mail_informes {
    color: #fff;
  text-decoration: none;
}

/*-Listo para Trabajar con Nosotros?-------------------------------------------------------------------------------------------*/
.banner_listo {
  display: none; width: 100%;
  position: absolute; top: 360px;
  margin: 0; padding: 10px;
  background: #2180EB; color: white;
}
.banner_listo .banner_contenido{
  margin: 0px auto;
  width: 800px;
}
.banner_listo h2 {
  position: relative;
  font-family: 'Lato-Thin'; font-size: 36px;  text-align: center;
  padding: 10px 0;
}
.banner_listo h2 strong {
  font-family: 'Lato-Black'; font-weight: 900;
}
.banner_listo h3 {
  font-family: 'Lato-Thin'; font-size: 20px; text-align: center;
  padding: 0 10%;
  line-height: 1.428571429;
}

/*-Mensajes de Error------------------------------------------------------------------------------------------------------------*/

.caja_error{
  display: block; position: absolute;
  top: 100px;
  width: 350px;
  border-width: 2px; 
  border-color: white;
  padding: 10px;
  font-family: arial; font-size: 14px;
  background-color: red; color: white;
}

.caja_mensaje{
  width: 350px;
  border-width: 2px; 
  border-color: white;
  padding: 10px;
  font-family: 'Lato-Thin'; font-size: 16px; text-shadow: 0 1px 1px rgba(0,0,0,.4);
  background-color: rgba(22,104,241,0.8); color: white;
}
.caja_mensaje h2 {
  font-family: 'Lato-Black';
}

/*-Contenedores-----------------------------------------------------------------------------------------------------------------*/
#wrapper {
    min-height: 100%;
    position: relative;
}
#contenedor {
  height: 100%;
  padding-bottom: 0px;  /*Valor Original para dejar espacio para el footer stick:; padding-bottom: 55px;*/
}

/*-Footer----------------------------------------------------------------------------------------------------------------------*/

#footer{
  display: block; position: absolute;
  bottom: -250px;
  width: 100%;  height: 250px;
  background-image: url("recursos/imagenes/background/bg_footer.jpg");
}
.footer_capa{
  width: 100%; height: 250px;
  background-color: rgba(0,0,0,0.8);
}
.footer_contenedor{
  width: 1024px;
  margin: 0px auto;
}
.footer_direccion{
  display: block; float: left;
  top: 0px; margin: 0px 10px;
  width: 480px; height: 250px;
  font-family: Arial; font-size: 12px;
}
.footer_direccion h3 {
  font-family: 'Lato-Black'; font-size: 20px; padding: 15px 0px;
}
.footer_direccion span {
  float:left; width: 100px;
}
.footer_direccion li {
  list-style: none;
  margin: 0px; padding: 10px 0px;
  border-top:  1px solid #757575;
}
.footer_direccion a {
  color: #868686;
}
.footer_mapa{
  display: block; float: left; 
  top: 0px; margin: 0px 10px;
  width: 480px; height: 250px;
}
.footer_mapa h3 {
  font-family: 'Lato-Black'; font-size: 20px; padding: 15px 0px;
}

/*============================================================================================================================*/

@media screen and (max-width: 420px) {

/* 
=============================================================================
  Resoluciones Modo Celular : [Recomendado = 360px de Ancho x 640px de Alto]
=============================================================================
  Iphone 4: 320px x 480px
  Iphone 5: 320px x 568px
  Iphone 6: 375px x 667px

  Samsung Galaxy S2 : 320px x 533px
  Samsung Galaxy S3 : 360px x 640px
  Samsung Galaxy Note: 400px x 640px
=============================================================================
*/
body {
  /* padding-top: 55px; Agrega un espacio que tiene la altura del menu_bar para que no tape el contenido del body*/
  /*background-image: url("recursos/imagenes/background/fitness-movil.jpg");*/
  background-position: center 0px; /*center 55px*/
  background-repeat: no-repeat;
}

/*-Menu Celular-------------------------------------------------------------------------------------------------------------*/
.menu_celular {
  display: block; position: fixed;
  width: 100%;  height: 55px;
  top: 0px;
  background-color: black;
  border-bottom:1px solid #000000;
  z-index: 2000;
}

 .menu_celular .bt_menu_celular {
  display: block;
  padding: 10px;
  color: #FFF;
  overflow: hidden;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  z-index: 3000
}

 .menu_celular span {
  float: right;
  font-size: 35px;
}

.menu_celular_opciones{
  display: block;
  clear: left;
  height: 40px;
}

.menu_icono{
  font-size: 36px;
  float: left;
  width: 30px;
  height: 30px;
}

.menu_titulo{
display: block;
font-size: 18px;
padding-left: 20px;
float: left;
}

.menu_descripcion{
font-size: 12px;
padding-left: 20px;
float: left;
}

.menu_normal_opciones{
  display: none;
}

.isotipo{
  z-index: 2000;
  display: block; position: fixed;
}
  
  
/*El menu nav se desliza a la derecha al cambiar el valor de rigth con animate de JQuery --calc(100% - 80px);*/

header nav {
  width: 85%;
  top: 55px;
  /*position: absolute;*/
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  left: -100%;
  overflow: hidden;
}
header nav ul { 
  list-style: none;
  margin-top: 0px;
  left: 0px;
  width: 100%;
}

/*La barra del menu principal se muestra a la izquierda uno sobre otro porque los elementos abarcan el 100% del nav */

header nav ul li {
  display: block; 
  border-bottom:1px solid rgba(255,255,255,.5);
}
header nav ul li a {
  display: block;
}
/*--------------------------*/

.que_es_lameta{
  display: none; position: absolute;
  margin: 0px; padding: 0px;
  top: 55px; left: 0px;
  width: 100%; height:160%;
}
.que_es_lameta > .titulo{
  display: block; position: relative;
  margin: 0px auto;
  width: 300px; height: 60px;
}
.que_es_lameta .titulo h2{
  font-size: 24px;
  padding: 10px 0;
}
.que_es_lameta > .contenido{
  display: block; position: relative;
  margin: 10px auto;
  width: 300px; height: 100%;  
  font-family: arial; text-shadow: 0 1px 1px rgba(0,0,0,.4); font-size: 12px; color: #fff;
  overflow: scroll;
}
.que_es_lameta > .contenido a{
  font-size: 12px;
}
/*--------------------------*/

.banner_ventas{
  top: 160px; left: 0px; margin: 0px 0px;
  width: 100%; height: 300px; padding: 10px;
  font-family: arial; text-shadow: 0 1px 1px rgba(0,0,0,.4); text-align: center;  color: #fff;
}
.banner_ventas h1 {
  font-size: 24px;
}
.banner_ventas p {
  font-size: 14px;
}

/*--------------------------*/

.banner_servicio{
  top: 220px; left: 0px; margin: 0px 0px;
  width: 100%; height: 300px; padding: 10px;
  font-family: arial; text-shadow: 0 1px 1px rgba(0,0,0,.4); text-align: center;  color: #fff;
}
.banner_servicio h1 {
  font-size: 24px;
}
.banner_servicio p {
  font-size: 14px;
}

/*--------------------------*/

.nosotros{
  top: 55px; left: 0px;
  margin: 0px auto;
  width: 100%; height:100%;
  font-family: arial; text-shadow: 0 1px 1px rgba(0,0,0,.4); font-size: 12px; color: #fff;
  overflow: scroll;
}
.nosotros h2 {
  font-size: 24px; 
  padding: 10px 0;
}
.nosotros h3 {
  font-size: 16px;
}


/*--------------------------*/

.banner_listo {
  top: 220px;
}
.banner_listo .banner_contenido{
  margin: 0px auto;
  width: 100%;
}

.banner_listo h2{
  font-size: 24px;
}
.banner_listo h3 {
  font-size: 14px;
}

/*--------------------------*/

.form_login{
  top: 60px;
  left: 0px; right: 0px;
  width: 100%;
}
.form_login > .login_contenido {
  margin: 0px auto;
  width: 300px;
}

.box_form {
  width: 250px;
}

/*--------------------------*/

.form_contacto {
  top: 60px;
  left: 0px; right: 0px;
  width: 100%;
}
.form_contacto > .contacto_contenido {
  margin: 0px auto;
  width: 300px;
}

/*--------------------------*/

#footer{
  display: none;
}