body {
    font: 400 16px 'Arya', sans-serif;
    //font: 400 16px 'Roboto', sans-serif;
    margin: 0;
}

#g1 {
    transform: translate3d(0px, 0px, 0px);
    z-index: 1;
}

#g1 img {
    transform: rotate(0deg);
}
#g2 {
    transform: translate3d(500px, -45px, 0px);
    z-index: 0;
}
#g3 {
    transform: translate3d(95px, -3px, 0px);
}
#g3 img {
    transform: rotate(-8.5deg);
}
#g4 {
    transform: translate3d(47px, 50px, 0px);
}
#g4 img {
    transform: rotate(-18deg);
}

.gears {
    height: 10em;
    background: white;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&1+25,0.8+65,0.8+100,1+100,0.4+100 */
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,0.8) 65%, rgba(255,255,255,0.4) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.8) 65%,rgba(255,255,255,0.4) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 25%,rgba(255,255,255,0.8) 65%,rgba(255,255,255,0.4) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#66ffffff',GradientType=0 ); /* IE6-9 */




    position: fixed;
    width: 100vw;
    top: 0;
    left: 0;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px) grayscale(80%);
    border-bottom: 1px solid #ccc;
}

.gears>div {
    position: absolute;

}

main {
    display: block;
    z-index: 9999;
    position: relative;
}

#intro {
    font-size: 2em;
    height: 30vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
    line-height: 1.2;
    background: white;
}

#intro h2,#intro h3 {
    color: #8dbda7;
}

h1,h2,h3 {
    text-transform: uppercase;
    font-weight: normal;
    margin: 0;
}

#background {
    position: fixed;
    background: aquamarine;
    width: 100vw;
    height: 100vh;
}

#gears {
    position: relative;
    width: 50vw;
    height: 50vw;
    top: calc(30vh + 25vw);
    left: 25vw;
}

#gears img {
    display: block;
}

#circle {
    background: -moz-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
    background: -webkit-radial-gradient(transparent 25vw, rgba(255,255,255,1) 150px);
    background: -ms-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
    background: -o-radial-gradient(transparent 150px, rgba(0,0,0,1) 150px);
    width: 100vw;
    height: 100vw;
}