ul.reels{
    margin: 0;
    padding: 0 0 3em 0;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

ul.reels a{
    display: inline-block;
}

ul.reels li{
    display: inline-block;
    flex-shrink: 1;
    text-align: center;
    margin: 1.5em;

}

ul.reels a:hover h6{
    color: #ffffff;
}

ul.reels h6{
    font-size: small;
    color: #a0a0a0;
    font-weight: 200;
    letter-spacing: 4px;
    margin: 1em 0 0 0;
    padding: 0;
}



.visual-effects{
    background: url("../img/reels/vfx.jpg");
    background-size: cover;
}

.motion-graphics{
    background: url("../img/reels/motion_gfx.jpg");
    background-size: cover;
}

.character-animation{
    background: url("../img/reels/character_animation.jpg");
    background-size: cover;
}

a:hover .visual-effects{
    background: url("../img/reels/vfx-rollover.jpg");
    background-size: cover;
}

a:hover .motion-graphics{
    background: url("../img/reels/motion_gfx-rollover.jpg");
    background-size: cover;
}

a:hover .character-animation{
    background: url("../img/reels/character_animation-rollover.jpg");
    background-size: cover;
}