body {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    background-color:#323232;
    background-image:
    linear-gradient(transparent 20px, #999 20px, #999 21px,transparent 21px),
    linear-gradient(90deg, #999 1px, transparent 1px),
    linear-gradient(#555 1px, transparent 1px),
    linear-gradient(90deg, #555 1px, transparent 1px);
    background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: center -1px;
    font-family: 'Alegreya Sans SC', "Helvetica Neue", helvetica, sans-serif;
    font-size: 20px;
    line-height: 2em;
    color: #f7f7f7;
}

#wrapper {
    position: relative;
    width: 299px;
    margin: 0 auto;
    height: 100%;
}

#container {
    position: absolute;
    top: 0;
    left: -.5px;
    width: 100%;
    height: auto;
    margin: 19px 0;
    border: 1px solid #999;
    background-color: rgba(25,25,25, .8);
}

#header {
    height: 99px;
}

#header h1 {
    position: relative;
    top: 30px;
    margin: 0;
    font-size: 2.25em;
    text-align: center;
}

#content {
    position: relative;
}

a.site-link {
    position: relative;
    display: block;
    width: 219px;
    height: 219px;
    margin: 0 39px 29px 39px;
    float: left;
    border: 1px solid #999;
    text-decoration: none;
    background-color: #1a1a1a;
}

a.site-link .link-bg {
    position: relative;
    width: 90%;
    height: 90%;
    margin: 5%;
}

a.site-link h2 {
    position: absolute;
    top: 30px;
    width: 100%;
    text-align: center;
    font-size: 3.5em;
    font-weight: 400;
}

a.site-link#design-link h2 {
    color: #cef;
}
a.site-link#photo-link h2 {
    color: #fce;
}
a.site-link#food-link h2 {
    color: #efc;
}

a.site-link#design-link .link-bg #gear-adjust {
    transform: translate(150px, 150px);
    -webkit-transform: translate(150px, 150px);
}
a.site-link#design-link .link-bg #gear {
    transform: translate(-150px, -150px);
    -webkit-transform: translate(-150px, -150px);
}

a.site-link#photo-link .link-bg #bellows {
    transform-origin: 60px center;
    -webkit-transform-origin: 60px center;
}
a.site-link#photo-link .link-bg #lens {
    transform-origin: left center;
    -webkit-transform-origin: left center;
}

h1, h2, h3, h4, h5 {
    font-weight: 300;
    color: #f7f7f7;
}

p {
    line-height: 1.5em;
    margin: 0 0 20px 0;
}

ul, ol {
    padding-left: 25px;
    margin: 0;
}

ul li, ol li {
    padding-left: 10px;
}


/***********************************************************************************************************************
* MEDIA QUERIES
***********************************************************************************************************************/


/* Touch Interface -------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    a.site-link .link-bg {
        opacity: .2;
    }
    
    a.site-link h2 {
        opacity: 1;
    }
    
    a.site-link#food-link .link-bg #glass-mask {
        transform: translateY(-50px);
        -webkit-transform: translateY(-50px);
    }
    
    a.site-link#food-link .link-bg #bottle-mask {
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}

/* Smartphone Landscape */
@media screen and (min-width: 321px) {
    #wrapper {
        width: 299px;
    }
}


/* Tablet Portrait */
@media screen and (min-width: 521px) {
    body {
        background-image:
        linear-gradient(transparent 60px, #999 60px, #999 61px,transparent 61px),
        linear-gradient(90deg, #999 1px, transparent 1px),
        linear-gradient(#555 1px, transparent 1px),
        linear-gradient(90deg, #555 1px, transparent 1px);
        background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    }
    #wrapper {
        width: 499px;
    }
    #container {
        margin: 59px 0;
        padding-bottom: 30px;
    }
    #header {
        height: 119px;
    }
    #header h1 {
        top: 30px;
        font-size: 3em;
    }
    
    a.site-link {
        margin: 0 139px 29px 139px;
    }
}
/* iPad Portrait */
@media screen and (min-width: 721px) and (orientation: portrait) and (max-width: 801px) {
    body {
        background-image:
        linear-gradient(transparent 40px, #999 40px, #999 41px,transparent 41px),
        linear-gradient(90deg, #999 1px, transparent 1px),
        linear-gradient(#555 1px, transparent 1px),
        linear-gradient(90deg, #555 1px, transparent 1px);
        background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    }
    
    #wrapper {
        width: 499px;
    }
    #container {
        margin: 39px 0;
        padding-bottom: 40px;
    }
    
    #header {
        height: 159px;
    }
    #header h1 {
        top: 58px;
        font-size: 3.5em;
    }
    
    a.site-link {
        width: 299px;
        height: 159px;
        margin: 0 99px 39px 99px;
    }
    a.site-link .link-bg {
        position: relative;
        width: 40%;
        margin: 5% 30%;
    }
    a.site-link h2 {
        top: 0px;
    }
}

/* Tablet Landscape */
@media screen and (min-width: 769px) and (orientation: landscape) {
    #wrapper {
        width: 699px;
    }
    
    #header {
        height: 110px;
    }
    #header h1 {
        top: 51px;
        font-size: 3.5em;
    }
    
    a.site-link {
        width: 199px;
        height: 199px;
        margin: 29px 15px;
    }
    a.site-link#design-link {
        margin-left: 19px;
    }
    a.site-link#photo-link {
        margin: 29px 14px;
    }
    a.site-link#food-link {
        margin-right: 19px;
    }
    a.site-link h2 {
        top: 25px;
        font-size: 3em;
    }
}

/* Large Tablet Landscape */
@media screen and (min-width: 961px) and (min-height: 521px) {
    body {
        background-image:
        linear-gradient(transparent 40px, #999 40px, #999 41px,transparent 41px),
        linear-gradient(90deg, #999 1px, transparent 1px),
        linear-gradient(#555 1px, transparent 1px),
        linear-gradient(90deg, #555 1px, transparent 1px);
        background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    }
    
    #wrapper {
        width: 899px;
    }
    #container {
        margin: 39px 0;
        padding-bottom: 40px;
    }
    
    #header {
        height: 160px;
    }
    #header h1 {
        top: 75px;
        font-size: 4em;
    }
    
    a.site-link {
        width: 219px;
        height: 219px;
        margin: 39px 29px;
    }
    a.site-link#design-link {
        margin-left: 59px;
    }
    a.site-link#photo-link {
        margin: 39px 30px;
    }
    a.site-link#food-link {
        margin-right: 59px;
    }
    a.site-link h2 {
        top: 35px;
        font-size: 3em;
    }
}

/* iPad Landscape */
@media screen and (min-width: 961px) and (min-height: 721px) {
    body {
        background-image:
        linear-gradient(transparent 0px, #999 0px, #999 1px,transparent 1px),
        linear-gradient(90deg, #999 1px, transparent 1px),
        linear-gradient(#555 1px, transparent 1px),
        linear-gradient(90deg, #555 1px, transparent 1px);
        background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    }

    #container {
        margin: 99px 0;
    }
}


/* Mouse Interface -------------------------------------------------------------------------------------------------- */
/* Small Laptop */
@media screen and (min-width: 1025px) {
    body {
        background-image:
        linear-gradient(transparent 0px, #999 0px, #999 1px,transparent 1px),
        linear-gradient(90deg, #999 1px, transparent 1px),
        linear-gradient(#555 1px, transparent 1px),
        linear-gradient(90deg, #555 1px, transparent 1px);
        background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    }
    
    #container {
        margin: 99px 0;
    }
    
    a.site-link .link-bg {
        opacity: 1;
        transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
        transition-delay: .25s;
        -webkit-transition-delay: .25s;
    }
    a.site-link:hover .link-bg {
        opacity: .2;
    }
    
    a.site-link h2 {
        opacity: 0;
        transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
        transition-delay: .25s;
        -webkit-transition-delay: .25s;
    }
    a.site-link:hover h2 {
        opacity: 1;
    }
    
    a.site-link#design-link .link-bg #gear-wrap {
        transition: .5s ease-in-out;
        -webkit-transition: .5s ease-in-out;
    }
    a.site-link#design-link:hover .link-bg #gear-wrap {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }
    
    a.site-link#photo-link .link-bg #bellows {
        transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        transition: .5s linear;
        -webkit-transition: .5s linear;
    }
    a.site-link#photo-link:hover .link-bg #bellows {
        transform: scale(.72, 1);
        -webkit-transform: scale(.72, 1);
    }
    a.site-link#photo-link .link-bg #lens {
        transition: .5s linear;
        -webkit-transition: .5s linear;
    }
    a.site-link#photo-link:hover .link-bg #lens {
        transform: translateX(-55px);
        -webkit-transform: translateX(-55px);
    }
    
    a.site-link#food-link .link-bg #glass-mask {
        transform: translateY(0);
        -webkit-transform: translateY(0);
        transition: .5s ease-in-out;
        -webkit-transition: .5s ease-in-out;
    }
    a.site-link#food-link:hover .link-bg #glass-mask {
        transform: translateY(-50px);
        -webkit-transform: translateY(-50px);
    }
    
    a.site-link#food-link .link-bg #bottle-mask {
        transform: translateY(-50px);
        -webkit-transform: translateY(-50px);
        transition: .5s ease-in-out;
        -webkit-transition: .5s ease-in-out;
    }
    a.site-link#food-link:hover .link-bg #bottle-mask {
        transform: translateY(0);
        -webkit-transform: translateY(0);
    }
}

/* Laptop */
@media screen and (min-width: 1321px) {
    #wrapper {
        width: 1099px;
    }
    #container {
        padding-bottom: 60px;
    }
    
    #header h1 {
        top: 80px;
        font-size: 4.5em;
    }
    
    a.site-link {
        width: 299px;
        height: 299px;
        margin: 39px 19px;
    }
    a.site-link#design-link {
        margin-left: 49px;
    }
    a.site-link#photo-link {
        margin: 39px 30px;
    }
    a.site-link#food-link {
        margin-right: 49px;
    }
    a.site-link h2 {
        top: 50px;
        font-size: 4em;
    }
}

/* Desktop */
@media screen and (min-width: 1601px) {
    #wrapper {
        width: 1299px;
    }
    
    #header {
        height: 260px;
    }
    #header h1 {
        top: 133px;
        font-size: 6em;
    }
    
    a.site-link {
        margin: 39px 49px;
    }
    a.site-link#design-link {
        margin-left: 99px;
    }
    a.site-link#photo-link {
        margin: 39px 50px;
    }
    a.site-link#food-link {
        margin-right: 99px;
    }
    a.site-link h2 {
        top: 60px;
    }
}

/* Large Desktop */
@media screen and (min-width: 1921px) {
    #wrapper {
        width: 1499px;
    }
    a.site-link#design-link {
        margin-left: 199px;
    }
    a.site-link#food-link {
        margin-right: 199px;
    }
}