body {
    margin: 0;
    padding: 0;
    background: url(/images/bg.jpg) no-repeat top left #352f2f;
    font-family: 'Lato', sans-serif;
}
div#body {
    padding: 120px 60px;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
    perspective:2000px;
}
ul li {
    position: absolute;
    padding: 0;
    margin: 0;
    font-size: 9px;
    border: 1px solid #ccc;
    border-radius: 2%;
}
ul li.row-1 {
    transform: rotateY(-15deg) rotateX(-3deg); 
}
ul li.row-2 {
    transform: rotateY(14deg) rotateX(13deg); 
}
ul li.row-3 {
    transform: rotateY(24deg) rotateX(6deg); 
}
ul li.row-4 {
    transform: rotateY(30deg) rotateX(7deg); 
}
ul li a {
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: black;
    text-align: center;
}
ul li a span {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    background: #CCCCFC;
    padding: 5px 0;
    display: none;
}
ul li a:hover span {
    display:block;
}
/* ROW #1 */
#alex-s {
    top: 49px;
    left: 181px;
    width: 80px;
    height: 93px; 
}
#alex-s a {    background-image: url(/images/heads/alex-s.png);}

#erica-s {
    top: 59px;
    left: 365px;
    width: 70px;
    height: 86px; 
}
#erica-s a {    background-image: url(/images/heads/erica-s.png);}

/* ROW #2 */
#diccon-s {
   top: 171px;
    left: 255px;
    width: 77px;
    height: 95px; 
}
#diccon-s a {    background-image: url(/images/heads/diccon-s.png);}


#dylan-s {
    top: 176px;
    left: 415px;
    width: 70px;
    height: 85px; 
}
#dylan-s a {    background-image: url(/images/heads/dylan-s.png);}

#caroline-s {
    top: 176px;
    left: 502px;
    width: 72px;
    height: 81px; 
}
#caroline-s a {    background-image: url(/images/heads/caroline-s.png);}

/* ROW #3 */
#alan-s {
    top: 303px;
    left: 76px;
    width: 81px;
    height: 101px; 
}
#alan-s a {    background-image: url(/images/heads/alan-s.png);}

#clive-s {
    top: 297px;
    left: 171px;
    width: 80px;
    height: 98px; 
}
#clive-s a {    background-image: url(/images/heads/clive-s.png);}

#bryn-s {
   top: 289px;
    left: 345px;
    width: 76px;
    height: 91px; 
}
#bryn-s a {    background-image: url(/images/heads/bryn-s.png);}

#emlyn-s {
    top: 280px;
    left: 521px;
    width: 69px;
    height: 83px; 
}
#emlyn-s a {    background-image: url(/images/heads/emlyn-s.png);}

/* ROW #4 */
#katy-s {
    top: 410px;
    left: 265px;
    width: 78px;
    height: 95px; 
}
#katy-s a {    background-image: url(/images/heads/katy-s.png);}

#michelle-s {
    top: 400px;
    left: 365px;
    width: 76px;
    height: 91px; 
}
#michelle-s a {    background-image: url(/images/heads/Michelle-s.png);}

#emma-s {
    top: 390px;
    left: 465px;
    width: 76px;
    height: 86px; 
}
#emma-s a {    background-image: url(/images/heads/emma-s.png);}


@media only screen and (max-width: 700px) {
    /* For mobile phones: */
    body {
        background:#ccc;
    }
    div#body {
        padding: 0;
    }
    ul {
        list-style: none;
        padding: 0;
        margin: 0;
        perspective:none;
        position: absolute;
        top: 10px;
        left: 25%
    }
    div ul li{
        height: 120px!important;
        width: 90px!important;
    }
    div ul li{
    transform:none!important;
    }
    ul li a span {
        display: block;
    }
    #alex-s {
        top: 10px;
        left: 10px;
    }
    #erica-s {
        top: 10px;
        left: 110px;
    }
    #diccon-s {
       top: 10px;
        left: 210px;
    }
    #dylan-s {
        top: 140px;
        left: 10px;
    }
    #caroline-s {
        top: 140px;
        left: 110px;
    }
    #alan-s {
        top: 140px;
        left: 210px;
    }
    #clive-s {
        top: 270px;
        left: 10px;
    }
    #bryn-s {
        top: 270px;
        left: 110px;
    }
    #emlyn-s {
        top: 270px;
        left: 210px; 
    }
    #katy-s {
        top: 400px;
        left: 10px;
    }
    #michelle-s {
        top: 400px;
        left: 110px;
    }

    #emma-s {
        top: 400px;
        left: 210px;
    }