/* PC */
body	 { background-color:#000; color:#ffffff;font-family:sans-serif; font-size: 0.92em; }
.logo	 { width:20%; height:auto; margin-top:-55px; margin-left:5.5%; z-index:-98; }
.product { float:left; width:25%; height:auto; margint-top:30px; }
a	 { color: #fff; text-decoration:none; }
p 	 { font-weight: bold; z-index:-98; }

/* Menu responsivo */
.topnav	{ background-color: #000; overflow: hidden; font-family:"Microgramma"; margin-top: -10%; margin-bottom:80px; margin-left:60%; position: relative; }
.topnav a { float: left; display: block; color: #fff; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 1.25em; padding-right:10%; }
.topnav a:hover { background-color: #ff0000; color: #fff; text-decoration: none; }
.topnav a.active { background-color: #000; color: #fff; font-weight:bold; border-style: solid; border-color: #000 #000 #ff0000 #000; }
.topnav .icon { display: none; }

/* EXPERIMENTO 
  .table-tt { width:86.18%; float:left; font-weight:bold; padding:15px; background:#340E70; color:#fff; font-size:16px; font-family:Microgramma; height:10px; border-bottom:2px; border-color: #340E70 #340E70 #D4AA00 #340E70; border-style:solid; position: absolute; left:5.5% }

  .table-td1 { width:25%; font-weight:bold; float:left; left:5.2%; position: relative; top:29px; padding:7px; }
  .table-alt { width:21.545%; font-weight:bold; float:left; left:5.2%; position: relative; top:29px; padding:7px;  }
  .table-td2 { width:17.64%; font-weight:bold; float:left; left:5.2%; position: relative; top:29px; padding:7px;  }

  .table-tr1 { width:25%; padding:7px; left:5.2%; float:left; border-bottom:2px; border-color: #000 #000 #333 #000; border-style:solid; position: relative; top:43px; }
  .alt-pn {  width:21.545%; padding:7px; left:5.2%; float:left; border-bottom:2px; border-color: #000 #000 #333 #000; border-style:solid; position: relative; top:43px; }
  .table-tr2 { width:16.27%; padding:7px; left:5.2%; float:left; border-bottom:2px; border-color: #000 #000 #333 #000; border-style:solid; position: relative; top:43px;   }
*/

  .table-tt { width:97.5%; float:left; font-weight:bold; padding:1%; background:#340E70; color:#fff; font-size:16px; font-family:Microgramma; height:10px; border-bottom:2px; border-color: #340E70 #340E70 #D4AA00 #340E70; border-style:solid; }
  .alt-pn {  width:24.25%; padding:0.5%; float:left; border-bottom:2px; border-color: #000 #000 #333 #000; border-style:solid; }
  .table-td1 { width:23.95%; padding:0.5%; font-weight:bold; float:left; }
  .table-alt {  width:24.45%; padding:0.5%; font-weight:bold; float:left; }
  .table-td2 { width:23%; padding:0.5%; font-weight:bold; float:left; }
  .table-tr1 { width:23%; padding:0.5%; float:left; border-bottom:2px; border-color: #000 #000 #333 #000; border-style:solid; }
  .table-tr2 { width:23%; padding:0.5%; float:left; border-bottom:2px; border-color: #000 #000 #333 #000; border-style:solid;  }

footer	 { position: relative; text-align:center; z-index:-99; }

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

/* Smartphones */ @media screen and (max-width: 800px) 
{
 body { font-size:0.875em; }
 p { font-size:1em; font-family:sans-serif; font-weight:bold; margin:3px; }
  .logo { width:96%; height:auto; margin-bottom:-50px; left:-4%; position: relative; display: show; }
 img { width:100%; height:auto; } 
  .product { width:98%; height:auto; border-style:dashed; border-width:1px; border-color:#ff0000;/*#340E70;*/ margin-left:0px; padding:5px; word-wrap: break-word; /* tamanho de 100% quando o viewport for menor que 800px */ } 
  
 /* MENU RESPONSIVO */
  .topnav { margin:0px; margin-top:7px; position: relative; }
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon { float: right; display: block; }
  .topnav.responsive { position: relative; }
  .topnav.responsive a.icon { position: absolute; right: 0; top: 15px; }
  .topnav.responsive a { float: none; display: block; text-align: left; padding:-10%; }
  .fa {display:inline-block; color:#fff; font-weight:bold; font-size:2em; }

  .rodape { position: relative; top: 10px; }

  .table-tt { width:94%; float:left; font-weight:bold; padding:2%; background:#340E70; color:#fff; font-size:16px; font-family:Microgramma; height:auto; }
  .alt-pn { display:none; }
  .table-alt{ display:none; }
  .table-td1 { width:72.5%; padding:1%; font-weight:bold; float:left; }
  .table-td2 { width:23%; padding:1%; font-weight:bold; float:left; }
  .table-tr1 { width:71%; padding:1%; float:left; border-bottom:2px; border-color: #000 #000 #333 #000; border-style:solid; }
  .table-tr2 { width:22%; padding:1%; float:left; border-bottom:2px; border-color: #000 #000 #333 #000; border-style:solid;  }

}