.categoria{
background-color: DimGray;
color: #ddd;
padding: 13px 7px 13px 15px;
margin: 1;
font-size: 20px;
font-family: Arial;
text-align: left;
overflow: hidden;
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 0.40s;
  animation-name: animatebottom;
  animation-duration: 0.40s;
}
@-webkit-keyframes animatebottom {
  from { right:-360px; } 
  to { right:0px; }
}

@keyframes animatebottom { 
  from{ right:-360px;} 
  to{ right:0; }
}
.categoria:hover{
background-color: Orange;
color: white;
}
.subcategoria{
color: #ddd;
padding: 14px 7px 14px 7px;
margin: -1px 1px 1px 1px;
font-size: 20px;
font-family: Arial;
text-align: center;
}
.subcategoria:hover{
background-color: Orange;
color: white;
}

/* configuraçoes */

.categoria{
background-color: DimGray;
color: #ddd;
padding: 13px 7px 13px 7px;
margin: 1;
font-size: 20px;
font-family: Arial;
text-align: center;
}
.categoria:hover{
background-color: Orange;
color: white;
}
.subcategoria{
color: #ddd;
padding: 14px 7px 14px 7px;
margin: -1px 1px 1px 1px;
font-size: 20px;
font-family: Arial;
text-align: center;
}
.subcategoria:hover{
background-color: Orange;
color: white;
}
#titulo1{
padding: 15px;
font-size: 20px;
text-align: left;
}
#check1{
width: 45px;
height: 25px;
float: right;
border-radius: 12px;
}

.separe{
text-align: center;
width: 100%;
}
.separe #coresOP{
margin: -2;
width: 90;
height: 60;
border-width: 0;
}

#check2{
width: 45px;
height: 25px;
float: right;
border-radius: 12px;
}
#check3{
width: 45px;
height: 25px;
float: right;
border-radius: 12px;
}