On the following site <http://haircolourideas.eu/#section2> I have a ul in the services section and the li's have background images . The li's have classes of service1 , service2 etc. The background images have suddenly become invisible . If I inspect element the css is correct and it shows that the images are present . The site has been live a couple of months and without me changing anything this has just happened today 

```
<ul id="services-list" class="hidden">
    <li class="service1 service-img"><label class="btn" for="modal-1"><h3>meche</h3></label></li>
    <li class="service2 service-img"><label class="btn" for="modal-2"><h3>tinting</h3></label></li>
    <li class="service3 service-img"><label class="btn" for="modal-3"><h3>fashion</h3></label></li>
    <li class="service4 service-img"><label class="btn" for="modal-4"><h3>change</h3></label></li>
</ul>

.service1 {
    background: url(../img/meche1.png);
    cursor: pointer;
}

.service2 {
    background: url(../img/tint1.png);
    cursor: pointer;
}

.service3 {
    background: url(../img/fashion1.png);
    cursor: pointer;
}

.service4 {
    background: url(../img/change1.png);
    cursor: pointer;
}

```