
.fix{
  top:0px;
  left:0px;
}

.w100{ width:100%; box-sizing: border-box; }
.w90{  width:90%;  box-sizing: border-box; }
.w80{  width:80%;  box-sizing: border-box; }
.w70{  width:70%;  box-sizing: border-box; }
.w60{  width:60%;  box-sizing: border-box; }
.w50{  width:50%;  box-sizing: border-box; }
.w50{  width:50%;  box-sizing: border-box; }
.w40{  width:40%;  box-sizing: border-box; }
.w30{  width:30%;  box-sizing: border-box; }
.w25{  width:25%;  box-sizing: border-box; }
.w20{  width:20%;  box-sizing: border-box; }
.w10{  width:10%;  box-sizing: border-box; }

.h100{ height: 100%;   box-sizing: border-box; }
.h400px{ height: 400px;   box-sizing: border-box; }

.p5p {   padding:5%;    box-sizing: border-box; }

.p0{   padding:0px;    box-sizing: border-box; }
.p15{  padding:15px;   box-sizing: border-box; }
.p25{  padding:25px;   box-sizing: border-box; }

.mt400{  margin-top:400px;  }
.mt200{  margin-top:200px;  }
.mt150{  margin-top:150px;  }
.mt100{  margin-top:100px;  }
.mt70{   margin-top:70px;   }
.mt50{   margin-top:50px;   }
.mt25{   margin-top:25px;   }
.mb25{   margin-bottom:25px;   }
.mt15{   margin-top:15px;   }
.mt20{   margin-top:20px;   }
.mt10{   margin-top:10px;   }
.mt5{    margin-top: 5px;   }

.mlr10{ margin-left:10px; margin-right:10px;}

.h5{ height: 5px; }
.h10{ height: 10px; }
.h15{ height: 15px; }
.h20{ height: 20px; }
.h25{ height: 25px; }

.tac{  text-align: center;  }
.tar{  text-align: right;   }
.tal{  text-align: left;    }

.z0{ z-index:0; }
.z1{ z-index:1; }
.z2{ z-index:2; }
.z3{ z-index:3; }
.z4{ z-index:4; }
.z5{ z-index:5; }


.meiodadiv{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.container{
  margin: 0px;
  padding: 0px;
  width:700px;
  margin-left: auto;
  box-sizing: border-box;
  float: left;
  border: solid 2px black; 
}

.container50{
   margin-left:25%;
   margin-right:auto; 
   width: 50%;
   position:absolute;
   top: 0;   
   box-sizing: border-box;
   float: left;
}

.container80{
   margin-left:auto;
   margin-right:auto; 
   width: 80%;
   position:absolute;
   top: 0;   
   box-sizing: border-box;
   float: left;
}

.container100{
   margin-left:0;
   margin-right:0; 
   width: 100%;
   height:100%;
   position:absolute;
   top: 0;   
   box-sizing: border-box;
   float: left;
}

.col1{
  width:100%;
  margin: 0px;
  padding: 0px;
  border: solid 1px white;
  box-sizing: border-box;
  float: left;
}
.col2{
  width:50%;
  margin: 0px;
  padding: 0px;
  border: solid 1px white;
  box-sizing: border-box;
  float: left;
}

.col3{
  width:33%;
  margin: 0px;
  padding: 0px;
  border: solid 1px white;
  box-sizing: border-box;
  float: left;
}

.col4{
  width:25%;
  margin: 0px;
  padding: 0px;
  border: solid 1px white;
  box-sizing: border-box;
  float: left;
}

.col34{
  width:75%;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.col14{
  width:25%;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.setor1{
  width:30%;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.setor2{
  width:70%;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.setor3{
  width:100%;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.setor4{
  width:100%;
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  float: left;
}

.cell{
  margin:0px;
  padding: 0px;
  float: left;
  box-sizing: border-box; 
}

.linha{
  margin: 0px;
  padding: 0px;
  width:100%;
}

.cellCenter{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
}

.rodape{
  margin: 0;
  margin-left: 10%;
  width:80%;
  margin-left: 10%;
  box-sizing: border-box;
  border-top: solid 2px DarkSlateGrey;    
}







/* Quando tela menor que 600px */
@media only screen and (max-width: 600px) {
    .reduzH{
       height:auto;
       background-color:red;
    }

    .cabecalho{
      width:100%;
      margin-left:0px;
    }

    .container{
        width: 100%;
    }
    .corpo{
      width:100%;
      margin-left:0px;
      
    }
    .col2{
      width:100%;
    }
    .col3{
      width:100%;
    }
    .col4{
      width:100%;
    }
    .col34{
      width:0%;
    }
    .col14{
      width:100%;
    }
    .rodape{
      width:100%;
      margin-left: 0px;
    }
    .setor1{
      width:100%;    
    }
    .setor2{
      width:100%;
    }
    .setor3{
      width:30%;
    }
    .setor4{
      width:70%;
      padding: 10px;
    }

  .cellCenter{
     position: relative;
     top: 0;
     transform: translateY(0);
  }
    .container50{
       margin-left:5%;
       width: 90%;
    }
    .container80{
       margin-left:5%;
       width: 90%;
    }

}



