@charset "UTF-8";
/* CSS Document */

body, html {
    margin: 0;
    padding: 0;
    height: 100vh;
}

#wrap {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#pragmaticdesign {
    opacity: 0;
    width: 76%;
    left: 12%;
    top:30%;
    position: absolute;
    z-index: 99;
}
#pragmaticdesign img {
    width: 100%;
    height: auto;
}

#bubble {
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    z-index: 50;
}
#bubble ul {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    text-align:center;
}
#bubble li {
    list-style: none;
    margin: 5px;
    width: calc(12.5% - 10px);
    height: calc(20% - 10px);
    float: left;
    overflow: hidden;
}

.box {
    margin: auto;
    opacity: 0;
    width: 100%;
    height: auto;
    background-size: cover;
    background-position: top center;
}
#box1 {
    background-image:url('img/fun-lovin-criminals-berlin-dvd-design.jpg');
}
#box2 {
    background-image:url('img/mike-ross-vinyl-cd-design.jpg');
}
#box3 {
    background-image:url('img/wolverhampton-fireplaces-web-design.jpg');
}
#box4 {
    background-image:url('img/eska-web-design.jpg');
}
#box5 {
    background-image:url('img/dolittles-pet-superstore-web-design.jpg');
}
#box6 {
    background-image:url('img/kamal-astrologer-web-design.jpg');
}
#box7 {
    background-image:url('img/eco1-today-typesetting.jpg');
}
#box8 {
    background-image:url('img/sugar-n-spice-web-design.jpg');
}
#box9 {
    background-image:url('img/lussh-web-design.jpg');
}
#box10 {
    background-image:url('img/kes-web-design.jpg');
}
#box11 {
    background-image:url('img/cut-n-dry-barbers-web-design.jpg');
}
#box12{
    background-image:url('img/1st-gas-web-design.jpg');
}
#box13 {
    background-image:url('img/rnr-sharon-shannon-typesetting.jpg');
}
#box14 {
    background-image:url('img/affordable-windows-web-design.jpg');
}
#box15 {
    background-image:url('img/eco-salons-web-design.jpg');
}
#box16 {
    background-image:url('img/njb-physiotherapy-web-design.jpg');
}
#box17 {
    background-image:url('img/racing-productions-web-design.jpg');
}
#box18 {
    background-image:url('img/carol-davies-web-design.jpg');
}
#box19 {
    background-image:url('img/jooles-teare-web-design.jpg');
}
#box20 {
    background-image:url('img/cousteaux-web-design.jpg');
}
#box21 {
    background-image:url('img/voip-web-design.jpg');
}
#box22 {
    background-image:url('img/thermal-render-solutions-web-design.jpg');
}
#box23 {
    background-image:url('img/blueeyes-web-design.jpg');
}
#box24 {
    background-image:url('img/marc-ford-cd-design.jpg');
}
#box25 {
    background-image:url('img/clc-brochure-design.jpg');
}
#box26 {
    background-image:url('img/andy-leek-cd-design.jpg');
}
#box27 {
    background-image:url('img/cas-web-design.jpg');
}
#box28 {
    background-image:url('img/kd-badge-web-design.jpg');
}
#box29 {
    background-image:url('img/zoe-francis-cd-design.jpg');
}
#box30 {
    background-image:url('img/ukhas-web-design.jpg');
}
#box31 {
    background-image:url('img/willenhall-gym-web-design.jpg');
}
#box32 {
    background-image:url('img/martin-barre-cd-design.jpg');
}
#box33 {
    background-image:url('img/mobile-web-design-web-design.jpg');
}
#box34 {
    background-image:url('img/tranquillo-cd-design.jpg');
}
#box35 {
    background-image:url('img/platform1-cd-design.jpg');
}
#box36 {
    background-image:url('img/mosh-brochure-design.jpg');
}
#box37 {
    background-image:url('img/scuba-shack-web-design.jpg');
}
#box38 {
    background-image:url('img/and-did-those-feet-cd-design.jpg');
}
#box39 {
    background-image:url('img/r2-robert-plant-typesetting.jpg');
}
#box40 {
    background-image:url('img/pragmatic-design-web-design.jpg');
}

/* Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #bubble li {
        width: calc(20% - 10px);
        height: calc(20% - 10px);

    }
}

/* Mobile (Portrait) */
@media only screen and (max-width: 767px) {
    #bubble li {
        width: calc(25% - 10px);
        height: calc(10% - 10px);
    }

}

/* Mobile (Landscape) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #bubble li {
        width: calc(20% - 10px);
        height: calc(25% - 10px);
    }
    #box21, #box22, #box23, #box24, #box25, #box26, #box27, #box28, #box29, #box30, #box31, #box32, #box33, #box34, #box35, #box36, #box37, #box38, #box39, #box40 {
        display: none;
    }
}