.categoryCanvas{
    padding: 10px;    
}
.categoryDiv{
   font-family: 'Asap', sans-serif;
   font-size: 20px;
    width: 55%;
    height: 50px;
    background-color:  #ff6a00;
    margin: 10px auto 5px auto;
   color: white;
   text-align: center; 
   cursor: pointer;
   vertical-align: middle;
   padding-top: 15px;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.categoryDiv:before{
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  border: 2px dashed #ff6a00;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out; 
}
.categoryDiv:hover, .categoryDiv:focus, .categoryDiv:active {
    color: #ff6a00;
     
}
.categoryDiv:hover:before, .categoryDiv:focus:before, .categoryDiv:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
.categoryDiv span{ 
       
    margin: auto;
}