.category-item .img-container {
    margin-bottom: 24px;
    margin-top: 112px;
    position: relative;
    text-align: center;
}
.category-item .img-container img {
    margin: 0 auto;
}
.category-item .nav-link {
    margin: 0 auto;
}
.category-item .nav-link.active, .nav-pills .show>.nav-link {
    background-color: transparent;
}
.category-item .white-background,
.category-item .coloured-background {
    left: 0;
    position: absolute;
    width: 100%;
}
.category-item .white-background {
    height: 100%;
    z-index: -1;
}
.category-item .coloured-background {
    border-bottom: 5px solid;
    border-left: 5px solid;
    border-right: 5px solid;
    height: 8px;
    visibility: hidden;
}
.category-item a .coloured-background {
    bottom: -8px;    
}
.nav-pills .nav-item button.active .coloured-background,
.category-item .nav-link:hover .coloured-background,
.category-item a:hover .coloured-background {
    visibility: visible;
}
.category-item a {
    align-items: center;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    position: relative;    
    text-decoration: none;    
}
.category-item  button img.desktop, 
.category-item  button img.mobile,
.category-item a img.desktop,
.category-item a img.mobile {
    left: 0;
    position: absolute;
    right: 0;
    visibility: hidden;
}
.category-item  button:hover img.desktop,
.category-item  button:hover img.mobile,
.category-item a:hover img.desktop,
.category-item a:hover img.mobile {
    right: 0;
    visibility: visible;
    z-index: -1;
}
.category-item button:hover img.desktop,
.category-item a:hover img.desktop {
    left: -42px;
    top: 25%;
}
.category-item button:hover img.mobile,
.category-item a:hover img.mobile {
    top: -25%;
}