* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    font-family: 'Arial';
    padding: 0;
    margin: 0;
    list-style: none;
    outline: none;
}
html,
body {
    margin: 0;
    padding: 0;
}
body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000000;
}
.transitions {
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
}
.clear {
    display: block;
    height: 1px;
    clear: both;
}
    

#space {
    background: #000000;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0;
}

#brand {
    font-size: 25px;
    color: #FFF;
    letter-spacing: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% ) ;
    z-index: 1;
}

    #mosaic {
        width: 90vw;
        position: relative;
        top: 5vw;
        left: 5vw;
        z-index: 3;
    }
        #mosaic .mosaic-item {
            overflow: hidden;
            box-shadow: 0 10px 35px rgba( 0,0,0,0.3 );
            transform: scale( 1 );
            transition: all 0.6s ease 0.1s;
            -webkit-transition: all 0.6s ease 0.1s;
        }
        #mosaic .mosaic-item:hover {
            box-shadow: 0 10px 60px rgba( 0,0,0,0.9 ), 0 5px 30px rgba( 0,0,0,0.5 );
            z-index: 10;
            transform: scale( 1.22 );
        }
            #mosaic .mosaic-item::before,
            #mosaic .mosaic-item::after {
                content: '';
                position: absolute;
                width: 100%;
                height: 0;
                height: 100%;
                top: 0;
                transition: all 0.3s ease-out 0.1s;
                -webkit-transition: all 0.3s ease-out 0.1s;
            }
            #mosaic .mosaic-item::before {
                background: rgb( 0,0,0,0.2 );
                z-index: 1;
                
            }
            #mosaic .mosaic-item:hover::before {
                height: 0;
            }


            #mosaic .mosaic-item::after {
                background: rgb( 0,0,0,0.3);
                z-index: 2;
                transition-delay: 0.1.4s;
            }
            #mosaic .mosaic-item:hover::after {
                height: 0;
            }


            #mosaic .mosaic-item img {
                display: block;
                width: 100%;
                height: auto;
                opacity: 0;
                position: relative;
                top: 25px;
                transition: all 0.6s ease 0.1s;
                -webkit-transition: all 0.6s ease 0.1s;
            }
            #mosaic .mosaic-item:hover img {
                border-radius: 3px;
            }