* {
  box-sizing: border-box;
  max-height: 1000000em; /* Chrome for Android */
  -moz-text-size-adjust: none; /* Firefox Mobile */
  font-size:14px;
}

body {
  font-family: Helvetica, sans-serif;
  margin:0; padding:0;
}

/* Style the header */
header {
  padding:0;
  margin:0;
  height:162px;
}

header #loged_user {
  background:#349faf;
  height:32px;
  /*line-height:32px;*/
  padding:7px 15px;
  color:#fff;
  font-weight: bold;
  font-size:16px;
}

header #account_links {
  height:30px;
  margin:1px 0 0 0;
  background:#afcf64;
}

header #account_links a {
  float:left;
  height:30px;
  /*line-height:30px;*/
  padding:6px 0;
  width:125px;
  text-align: center;
  font-size:16px;
  color:#fff;
  text-decoration: none;
  font-weight: bold;
}

header #account_links a.logout {
  margin:0 0 0 3px;
  width:140px;
  border-left: 2px solid #fff;
}

header #cart-link {
  background:#fff url(/img/web/cart_top.png) no-repeat 0 0;
  float:right;
  height: 63px;
  text-align: center;
  width:80px;
  padding:0 25px;
}

header #cart-link a{
  font-size:24px;
  font-weight: bold;
  color:#acce5d;
  text-decoration: none;
}

header #logo {
  height: 89px;
  background:#fff url(/img/web/logo_bg.png) no-repeat top right;
  padding:0 60px 0 0;
  margin:10px 0 0 0;
  text-align: center;
}

/* Create two columns/boxes that floats next to each other */
nav {
/*  float: left;
  width: 20%;
  padding: 20px;
*/}

article {
  float: left;
  padding: 10px 0;
  width: 100%;
}

article h1 {
  height: 96px;
  /*line-height: 96px;*/
  margin:5px 0 0 0; 
  text-shadow: 0px 0px 7px #000;
  padding:35px 0;
}

article h2 {
  height: 31px;
  /*line-height: 31px;*/
  text-shadow: 0px 0px 7px #000;
  margin:0; padding:5px 0;
}

article h3 {
  height: 32px;
  /*line-height: 32px;*/
  margin:0;
  padding: 7px 0 0 0;
}

article h1 * {
  display:block;
  width: 360px;
  padding: 0 55px 0 0;
  text-decoration: none;
  text-align: right;
  font-size:28px;
  font-weight: bold;
  color:#fff;
}

article h2 a {
  display:block;
  width: 360px;
  text-align: right;
  text-decoration: none;
  font-size:18px;
  padding: 0 80px 0 0;
  font-weight: bold;
  color:#fff;
}

article h3 span {
  display:block;
  width: 360px;
  padding: 0 100px 0 0;
  text-align: right;
  font-size:14px;
  font-weight: bold;
  color:#000;
}

article h1.alone {
  height: 106px;
}

article h1.titulo {
  background:#fff url(/img/web/title_productos.png) no-repeat 0 0;
}

article h1.titulo-green {
  height: 106px;
  padding:40px 0;
  background:#fff url(/img/web/title_green.png) no-repeat 0 0;
}

article h2.productos {
  background:#fff url(/img/web/product_subtitle_bg.png) no-repeat 0 0;  
}

article h3.productos {
  background:#fff url(/img/web/product_sub_subtitle_bg.png) no-repeat 0 0;  
}

/* Clear floats after the columns */
section:after {
  content: "";
  display: table;
  clear: both;
}

section {
  padding:0 0 85px 0;
  background:#fff url(/img/web/main_bg.png) repeat-x 0 bottom;
}


section article #main-nav {
  background:#fff;
  width: 360px;
  padding:0; margin:5px auto;
}
 
section article #main-nav .btn {
  position: relative;
  width:108px; 
  height:94px;
  /*line-height:94px;*/
  text-align: center;
  padding:39px 0; margin:0;
}

section article #main-nav .btn a {
  font-size:11px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  color:#fff;
  text-shadow: 0px 0px 7px #000;
}

section article #main-nav .l-btn {
  left: 42px;
}

section article #main-nav .c-btn {
  left: 126px;
}

section article #main-nav .r-btn {
  left: 212px;
}

section article #main-nav .green {
  background:transparent url(/img/web/hexa_verde.png) no-repeat 0 0;
}

section article #main-nav .blue {
  background:transparent url(/img/web/hexa_azul.png) no-repeat 0 0;
}



/* Style the footer */
footer {
  background:#fff url(/img/web/footer.png) repeat-x left top;
  height:64px;
  color:#fff;
  font-weight: bold;
  font-size: 14px;
  text-align: center;
  padding:8px 0 0 0;
}

footer a {
  color:#fff;
  text-decoration:underline;
}


/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 500px) {
  nav, article {
    width: 100%;
    height: auto;
    /*padding:0; margin:0;*/
  }

  /*
  header {
    padding:0;
    margin:0;
    height:152px;
    border:0;
    font-size:16px;
  }

  header #loged_user {
    background:#349faf;
    height:32px;
    line-height:32px;
    padding:0 15px;
    color:#fff;
    font-weight: bold;
  }

  header #account_links {
    height:30px;
    margin:1px 0 0 0;
  }

  header #account_links a {
    background: #afcf64;
    color:#fff;
    text-decoration: none;
    font-weight: bold;
    float:left;
    height:30px;
    line-height:30px;
    width:125px;
    text-align: center;
  }

  header #account_links a.logout {
    margin:0 0 0 3px;
    width:153px;
  }

  header #cart-link {
    background:#fff url(/img/web/cart_top.png) no-repeat 0 0;
    float:right;
    height: 63px;
    width:80px;
    padding:3px 25px;
    font-size:24px;
    font-weight: bold;
    color:#acce5d;
  }

  header #logo {
  }

  section {
    padding:0 0 82px 0;
    background:#fff url(/img/web/main_bg.png) repeat-x 0 bottom;
  }

  section #links-bar {
    background:#fff url(/img/web/links.png) no-repeat center top;
    height: 46px;
    padding:10px;
    text-align:center;
  }

  footer {
    background:#fff url(/img/web/footer.png) repeat-x left top;
    height:64px;
    color:#fff;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    padding:8px 0 0 0;
  }

  footer a {
    color:#fff;
    text-decoration:underline;
  }

  */

}