/* Glow on hover effect */
.glow-on-hover { width: 145px; height: 150px; border: none; outline: none; color: #fff; cursor: pointer; 
                 position: relative; z-index: 0; border-radius: 10px; margin:0 5px; padding-top:5px; }
.glow-on-hover > div { width: 100%; text-align: center; }
.glow-on-hover img { width:90px; height:auto; }
.glow-on-hover > div > span { width: 100%; display: block; text-align: center; font-weight: bold; font-size:120%; }
.glow-on-hover:before { content: ''; background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
                        position: absolute; top: -2px; left: -2px; background-size: 400%; z-index: -1; filter: blur(5px); width: calc(100% + 4px);
                        height: calc(100% + 4px); animation: glowing 20s linear infinite; opacity: 0; transition: opacity .3s ease-in-out; border-radius: 10px; }

.glow-on-hover:active { color: #000 }
.glow-on-hover:active:after { background: transparent; }
.glow-on-hover:hover:before { opacity: 1; }
.glow-on-hover:after { z-index: -1; content: ''; position: absolute; width: 100%; height: 100%; left: 0;top: 0; border-radius: 10px; }

.color-1.glow-on-hover, .color-1.glow-on-hover:after { background: #422b23; }
.color-2.glow-on-hover, .color-2.glow-on-hover:after { background: #a0584a; }
.color-3.glow-on-hover, .color-3.glow-on-hover:after {background: #c56500; }
.color-4.glow-on-hover, .color-4.glow-on-hover:after { background: #8c4d24; }
.color-5.glow-on-hover, .color-5.glow-on-hover:after { background: #696029; }
.color-6.glow-on-hover, .color-6.glow-on-hover:after {  background: #23343e; }
.color-7.glow-on-hover, .color-7.glow-on-hover:after { background: #7e3429; }

/* Glow on hover effect */
@keyframes glowing {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}