html { 
background-color:#ffffff;
  background: url(../images/bg.jpg) no-repeat top fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
body    {margin:0;padding:0; font-family: arial, Calibri; font-size:13px;}
img 	{max-width: 100%; height: auto;  border: 0;}
a		{text-decoration:none;}
input	{padding: 5px; width: 50%;  width:-webkit-calc(100% - 10px); width:calc(100% - 10px); }
select 	{padding: 5px; width: 95%;  width:-webkit-calc(100% - 10px); width:calc(100% - 10px); }
textarea{padding: 5px; width: 95%;  width:-webkit-calc(100% - 10px); width:calc(100% - 10px); }
.container	{margin:0 auto; max-width:1024px;} /* essa div define um tamanho e centraliza a página */
.row		{margin:0 auto; width: 100%; height:auto;clear:both;}/* é a linha */
.clear {clear:both;text-align:center;	}

/******  BOX  *********/
.tarja{
background-color:#fff;
	opacity:0.65;
	-moz-opacity: 0.65;
	filter: alpha(opacity=65);
	text-align:left;
}
.box{
	text-align:center;
	min-height:30px;
	height:auto !important;
	height:30px;
	padding:5px;
	color: #000000;
	 font-size: 22px;
    width: 100%;
     font-weight: bold;
}
.aa .box{
	width: 60%; 
	width: -webkit-calc(65% - 12px);
	width: -moz-calc(65% - 12px);
	width: calc(65% - 12px);
}
.ab .box{
	width: 34%; 
	width: -webkit-calc(35% - 12px); 
	width: -moz-calc(35% - 12px);
	width: calc(35% - 12px);
}
.quatro .box{
	width: 20%; 
	width: -webkit-calc(25% - 12px);
	width: -moz-calc(25% - 12px);
	width: calc(25% - 12px);
}

.tres .box{
	width: 30%; 
	width: -webkit-calc(33% - 12px);
	width: -moz-calc(33% - 12px);
	width: calc(33% - 12px);
}

.dois .box{
	width: 45%; 
	width: -webkit-calc(50% - 12px);
	width: -moz-calc(50% - 12px);
	width: calc(50% - 12px);
}

.um .box{
	width: 95%; 
	width: -webkit-calc(100% - 12px);
	width: -moz-calc(100% - 12px);
	width: calc(100% - 12px);

}

/*******  Cubo  *********/
.rodape_lado
{
    display:block;
    float:right;
    width:20%;
    height:62px;
}

.rodape_lado a
{
    display:block;
    float:right;
    width:57px;
    height:54px;
    margin-right:4px;
    margin-top:4px;
    background: url(../images/cubo.png) top left no-repeat;
    background-position: 0px 0px;
}

.rodape_lado a:hover
{
    background-position: 0px -54px;
}

@media only screen and (max-width: 480px) {
	 body { font-size:75%;}  
	.box{
		width:-webkit-calc(100% - 12px) !important;
		width:calc(100% - 12px) !important;
		min-height:20px;
		height:auto !important;
		height:20px;
		font-size: 1.125rem;
	}
	.container	{width: 100%;}
	.manchete{
		font-size:80%;
		text-align: center;
	}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
body { font-size:90%;}  
	.box{
		width:-webkit-calc(100% - 20px) !important;
		width:calc(100% - 20px) !important;
		height:auto;
		font-size: 1.0rem;
	}
	.container	{width:100%;}
}