/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/*!*********************************
 *
 *  Developed by Daniel Redwood
 *  http://redwoodmatthews.com/
 *  Copyright 2013 Redwood Matthews
 *  All rights reserved.
 *
**********************************!*/

/* Global */

    body {
        color: #222;
    }
        .page {
            padding: 14px 0;
        }
            a, a:visited {
                color: #f7f7f7;
                text-decoration: none;
            }
                a:hover {
                    text-decoration: underline;
                }
            img {
                width: 100%;
                height: auto;
            }
            ul, ol {
                margin: 0;
                padding: 0;
                list-style: none;
            }

/* Header */

    header {
        padding: 14px;
        text-align: center;
    }
        header h1 {
            margin: 0;
            font-family: gotham, helvetica neue, sans-serif;
            font-weight: 100;
            letter-spacing: .05em;
        }

/* Main */

    .main {
        padding: 14px 0;
    }
        #figure {
            //max-width: 1280px;
            position: relative;
            margin: 0 auto;
            -webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
        }
            #play {
                width: 40px;
                height: 40px;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 2;
                margin: -20px 0 0 -20px;
                font-family: gotham, helvetica neue, sans-serif;
                font-weight: 100;
                line-height: 40px;
            }
                #play.inactive {
                    display: none;
                }
            #loader {
                display: none;
                width: 24px;
                height: 24px;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 1;
                margin: -12px 0 0 -12px;
                background-image: url(../img/loading.gif);
                background-position: center center;
                background-repeat: no-repeat;
            }
                #loader.loading {
                    display: block;
                }
            .motion .frame {
                opacity: 0;
                position: absolute;
                top: 0;
                left: 0;
            }
                /*.motion li.poster img {
                    opacity: 1;
                }*/
                .motion .show .frame {
                    opacity: 1;
                }
        #bin {
            display: none;
        }

/* Footer */

    footer {
        padding: 14px;
        text-align: center;
    }
        footer small {
            font-size: .625em;
        }

/* Media Queries */

    /* Bigger */

        @media only screen and (min-width: 768px){

            /* Header */

                header h1 {
                    font-size: 3em;
                }
        }

    /* High DPI */

        @media  only screen and (-webkit-min-device-pixel-ratio: 1.3),
                only screen and (-o-min-device-pixel-ratio: 13/10),
                only screen and (min-resolution: 120dpi){

            /* Main */

                #loader {
                    backgronud-image: url(../img/loading@2x.gif);
                    backgrond-size: 100% 100%;
                }
        }