/* SLIDING FILL BOXES */
/* ****************** */

/*
1. containing div needs class of .button-hover-effects
2. inner div needs class of fill-top, fill-right, fill-left or fill-bottom
3. text inside that needs z-index > 0 
*/

/* ****************** */

.button-hover-effects div {
     border-left: 2px solid #999999;
     padding: 10px;
     position: relative;
     transition-duration: 150ms;
     transition-property: all;
}

.button-hover-effects p, .button-hover-effects h3, .button-hover-effects h2, .button-hover-effects ul {
     position: relative;
     z-index: 4;
}

.button-hover-effects div::before, .button-hover-effects div::after {
     content: "";
     display: block;
     height: 100%;
     left: 0px;
     position: absolute;
     top: 0px;
     transition-duration: 600ms;
     transition-property: all;
     width: 100%;
     z-index: 2;
}

.no-touch .button-hover-effects div.fill-top::after, .button-hover-effects div.fill-top::before {
     background-color: #cccccc;
     bottom: 0px;
     height: 0px;
     top: auto;
}

.no-touch .button-hover-effects div.fill-top:hover {
     color: #ffffff;
}

.button-hover-effects div.fill-top:hover::after, .button-hover-effects div.fill-top:hover::before {
     height: 100%;
}

.no-touch .button-hover-effects div.fill-right::after, .no-touch .button-hover-effects div.fill-right::before {
     background-color: #cccccc;
     width: 0px;
}
@media screen and (max-width:767px) {
     .button-hover-effects div.fill-right::after, .button-hover-effects div.fill-right::before {
     left: 30%;
 }
}

.no-touch .button-hover-effects div.fill-right:hover {
     color: #ffffff;
}

.no-touch .button-hover-effects div.fill-right:hover::after, .button-hover-effects div.fill-right:hover::before {
     width: 100% !important;
}

.button-hover-effects div.fill-bottom::after, .button-hover-effects div.fill-bottom::before {
     background-color: #999999;
     height: 0px;
}

.button-hover-effects div.fill-bottom:hover {
     color: #ffffff;
}

.button-hover-effects div.fill-bottom:hover::after, .button-hover-effects div.fill-bottom:hover::before {
     height: 100%;
}

.button-hover-effects div.fill-left::after, .button-hover-effects div.fill-left::before {
     background-color: #999999;
     left: auto;
     right: 0px;
     width: 0px;
}

.button-hover-effects div.fill-left:hover {
     color: #ffffff;
}

.button-hover-effects button.fill-left:hover::after, .button-hover-effects button.fill-left:hover::before {
     width: 100%;
}

.no-touch div.item-box-desc:hover h2, .no-touch div.item-box-desc:hover h3, .no-touch div.item-box-desc:hover p, .no-touch div.item-box-desc:hover li {
  color: #000000; 
}

.no-touch div.item-box-desc:hover .bike-price {
     background-color: #ff6600;
}

.no-touch div.item-box-desc:hover .bike-price p {
     color: #ffffff;
}