/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

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

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

::-moz-selection {
    background: #ffd248;
    text-shadow: none;
    color: #fff;
}

::selection {
    background: #ffd248;
    text-shadow: none;
    color: #fff;
}

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

img {
    vertical-align: middle;
}

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

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

html, body { overflow: hidden; overflow-y: auto; overflow-x: hidden; }
body {
    background-color: #2d3235;
    font-family: Eurostile, Verdana, Helvetica, sans-serif;
    color: #ffc000;
}

em { font-style: normal; color: #ffd248; }
a { text-decoration: none; color: inherit; }

.gg {
    display: none;

    position: absolute;
    top: 100px; right: 100px; bottom: 100px; left: 100px;

    border: 15px solid #ffc000;
    padding: 75px;
    margin: 0;
    background: #222;

    z-index: 99;
}
    .gg img { margin: 0 0 30px 0; }
    .gg h1 {
        margin: 0 0 30px 0;
        font-size: 36px;
        line-height: 60px;
        font-family: Arial, Helvetica, sans-serif;
    }
        .gg h1 a {
            color: #ffc000;
            border-bottom: 2px solid #ffc000;
        }

    html.no-js .gg, html.lt-ie8 .gg { display: block; }

.no-light { display: none; }

.the-grid, .the-noise, .light, .light .ray {
    position: absolute;
    top: 0; left: -80px; right: 0px;
    width: auto;
    height: 100%;
    /*margin: -80px -81px;*/
}

.light {
    z-index: -15;
}
    .light .ray {
        z-index: -14;

        background: url(../img/the-light.png) no-repeat;
        background-size: auto 100%;

        /*animation: rays 14s ease 1s infinite;
            -webkit-animation: rays 14s ease 1s infinite;
            -moz-animation: rays 14s ease 1s infinite;
            -o-animation: rays 14s ease 1s infinite;

        transform: scale(1.3);
            -webkit-transform: scale(1.3);
            -moz-transform: scale(1.3);
            -o-transform: scale(1.3);*/
    }
        .light .ray:first-child {
            background-position: 35% top;
            background-size: 25% 100%;
        }
        .light .ray:last-child {
            background-position: 20% top;
            background-size: 65% 100%;
        }

.the-noise {
    z-index: -10;

    background: url(../img/the-noise.png) repeat;

    /*animation: pulse 6s ease 2s infinite;
        -webkit-animation: pulse 6s ease 2s infinite;
        -moz-animation: pulse 6s ease 2s infinite;
        -o-animation: pulse 6s ease 2s infinite;*/
}
.the-grid {
    z-index: -5;

    background: url(../img/the-grid.png) repeat;

    animation: grid 8s ease 3s infinite;
        -webkit-animation: grid 8s ease 3s infinite;
        -moz-animation: grid 8s ease 3s infinite;
        -o-animation: grid 8s ease 3s infinite;
}

.main-container {
    position: relative;
    /*top: 0px; right: 0px; bottom: 0px; left: 0px;*/
    z-index: 4;

    width: auto;
    height: auto;

    padding: 81px;
}
    .logo {
        position: relative;
        height: 79px;
        width: 239px;
        margin: 0 81px 81px 0;
        float: left;
    }
        .logo h1 {
            position: absolute;
            margin: 0;
            width: 239px;
            height: 79px;
            background: url(../img/Epic-Logo.png) no-repeat;
            z-index: 50;
        }
            .logo span.ghost {
                position: absolute;
                top: -4px;
                left: -12px;

                float: left;

                display: inline-block;
                width: 263px;
                height: 88px;
                background: url(../img/Epic-Logo-Blur.png) no-repeat;
                z-index: 49;
                visibility: hidden;
            }
                .logo span.ghost.animated {
                    visibility: visible;

                    animation: ghostx 0.5s ease 0s infinite;
                        -webkit-animation: ghostx 1s ease 0s infinite;
                        -moz-animation: ghostx 0.5s ease 0s infinite;
                        -o-animation: ghostx 0.5s ease 0s infinite;
                }

    h2 {
        float: left;
        font-weight: normal;
        font-size: 30px;
        line-height: 79px;
        height: 79px;
        margin: 0;
        padding: 0;
        text-shadow: 0 0 3px rgba(0, 0, 0, .35);
    }
        h2 a {
            text-decoration: none;
            color: inherit;
            border-bottom: 2px solid #ffd248;
        }
            h2 a:hover { border-bottom: 0; }

    .works {
        -moz-transform: translateZ(0);
        -webkit-transform: translateZ(0);

        cursor: move;
        position: relative;
        clear: both;
        width: 5280px;
    }
        .works .item {
            position: relative;
            margin: 0 1px 1px 0;

            float: left;
        }
            .works .item img { display: block; }
                .works .item > img { height: 399px; }
            .works .extension {
                position: absolute;
            }








/* ==========================================================================
   Media Queries
   ========================================================================== */

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

}

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

}

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

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

.animated {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@-webkit-keyframes slide {
    0% { background-position: 0px 0px; }
    100% { background-position: 120px 0px; }
}

@-webkit-keyframes pulsetate {
    0% {  }

    3% { -webkit-transform: rotate(0) }
    5% { opacity: 1; }
    6% { opacity: 0.7; -webkit-transform: rotate(0.3deg); }
    7% { opacity: 1; }
    9% { -webkit-transform: rotate(0); }

    42% { -webkit-transform: rotate(0); }
    45% { opacity: 1; }
    46% { opacity: 0.7; -webkit-transform: rotate(-0.4deg); }
    47% { opacity: 1; }
    49% { -webkit-transform: rotate(0); }

    75% { opacity: 1; }
    76% { opacity: 0.7; }
    77% { opacity: 1; }
    
    100% {  }
}

@-webkit-keyframes rays {
    0%, 100% { left: 0; -webkit-transform: rotate(0) scale(1.3); }
    50% { left: -150px; -webkit-transform: rotate(5deg) scale(1.3); }
}

@keyframes pulse {
    3%, 9%, 43%, 49%, 73%, 79% { opacity: 1; }
    5%, 45%, 75% { opacity: 0.7; }
    6%, 46%, 76% { opacity: 0.8; }
}

    @-webkit-keyframes pulse {
        3%, 9%, 43%, 49%, 73%, 79% { opacity: 1; }
        5%, 45%, 75% { opacity: 0.7; }
        6%, 46%, 76% { opacity: 0.8; }
    }

    @-moz-keyframes pulse {
        3%, 9%, 43%, 49%, 73%, 79% { opacity: 1; }
        5%, 45%, 75% { opacity: 0.7; }
        6%, 46%, 76% { opacity: 0.8; }
    }

    @-o-keyframes pulse {
        3%, 9%, 43%, 49%, 73%, 79% { opacity: 1; }
        5%, 45%, 75% { opacity: 0.7; }
        6%, 46%, 76% { opacity: 0.8; }
    }

@keyframes grid {
    10%, 45%, 47%, 75%, 79%, 83% { opacity: 1; background-position: 0 0; }
    1% { opacity: 1; transform: rotate(0); }
    3% { background-position: 0 0; }
    5% { opacity: 0.6; transform: rotate(-0.3deg); }
    7% { background-position: 0 0; transform: rotate(0); }
    8% { background-position: 2px -1px; }
    78% { opacity: 0.6; background-position: -2px -1px; }
    81% { opacity: 0.6; }
}

    @-webkit-keyframes grid {
        10%, 45%, 47%, 75%, 79%, 83% { opacity: 1; background-position: 0 0; }
        1% { opacity: 1; -webkit-transform: rotate(0); }
        3% { background-position: 0 0; }
        5% { opacity: 0.6; -webkit-transform: rotate(-0.3deg); }
        7% { background-position: 0 0; -webkit-transform: rotate(0); }
        8% { background-position: 2px -1px; }
        78% { opacity: 0.6; background-position: -2px -1px; }
        81% { opacity: 0.6; }
    }

    @-moz-keyframes grid {
        10%, 45%, 47%, 75%, 79%, 83% { opacity: 1; background-position: 0 0; }
        1% { opacity: 1; -moz-transform: rotate(0); }
        3% { background-position: 0 0; }
        5% { opacity: 0.6; -moz-transform: rotate(-0.3deg); }
        7% { background-position: 0 0; -moz-transform: rotate(0); }
        8% { background-position: 2px -1px; }
        78% { opacity: 0.6; background-position: -2px -1px; }
        81% { opacity: 0.6; }
    }

    @-o-keyframes grid {
        10%, 45%, 47%, 75%, 79%, 83% { opacity: 1; background-position: 0 0; }
        1% { opacity: 1; -o-transform: rotate(0); }
        3% { background-position: 0 0; }
        5% { opacity: 0.6; -o-transform: rotate(-0.3deg); }
        7% { background-position: 0 0; -o-transform: rotate(0); }
        8% { background-position: 2px -1px; }
        78% { opacity: 0.6; background-position: -2px -1px; }
        81% { opacity: 0.6; }
    }

@keyframes ghost {
    0% {transform: scale(1);}   
    10%, 20% {transform: scale(0.9) rotate(-3deg);}
    30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
    40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
    100% {transform: scale(1) rotate(0);}
}

    @-webkit-keyframes ghost {
        0% {-webkit-transform: scale(1);}   
        10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
        30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
        40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
        100% {-webkit-transform: scale(1) rotate(0);}
    }

    @-moz-keyframes ghost {
        0% {-moz-transform: scale(1);}  
        10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
        30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
        40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
        100% {-moz-transform: scale(1) rotate(0);}
    }

    @-o-keyframes ghost {
        0% {-o-transform: scale(1);}    
        10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
        30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
        40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
        100% {-o-transform: scale(1) rotate(0);}
    }

@keyframes ghostx {
    0% { transform: scale(0.8) rotate(0); opacity: 0.4; }

    11% { transform: scale(0.7) rotate(0); opacity: 0.5; }
    12% { transform: scale(1.3, 1) rotate(0); opacity: 0.1; }
    17% { transform: scale(0.8) rotate(0); opacity: 0.5; }

    40% { transform: scale(1) rotate(-1deg); opacity: 0.9; }

    42% { transform: scale(0.9) rotate(-1deg); opacity: 0.9; }
    43% { transform: scale(1.1, 1.5) rotate(-10deg); opacity: 0.3; }
    47% { transform: scale(0.9) rotate(-1deg); opacity: 0.8; }

    70% { transform: scale(1.05, 1) rotate(-2deg); opacity: 0.75; }

    72% { transform: scale(1.05) rotate(-2deg); opacity: 0.9; }
    73% { transform: scale(1.5, 1.2) rotate(-10deg); opacity: 0.3; }
    77% { transform: scale(1.07) rotate(-3deg); opacity: 0.9; }

    84% { transform: scale(1.07, 1.04) rotate(-3deg); opacity: 0.9; }
    85% { transform: scale(1.07, 1.04) rotate(-1deg); opacity: 0.1; }
    87% { transform: scale(1.07, 1.03) rotate(-3deg); opacity: 0.9; }

    100% { transform: scale(1.07, 1) rotate(-3deg); opacity: 0; }
}

    @-webkit-keyframes ghostx {
        0% { -webkit-transform: scale(0.8) rotate(0); opacity: 0.4; }

        11% { -webkit-transform: scale(0.7) rotate(0); opacity: 0.5; }
        12% { -webkit-transform: scale(1.3, 1) rotate(0); opacity: 0.1; }
        17% { -webkit-transform: scale(0.8) rotate(0); opacity: 0.5; }

        40% { -webkit-transform: scale(1) rotate(-1deg); opacity: 0.9; }

        42% { -webkit-transform: scale(0.9) rotate(-1deg); opacity: 0.9; }
        43% { -webkit-transform: scale(1.1, 1.5) rotate(-10deg); opacity: 0.3; }
        47% { -webkit-transform: scale(0.9) rotate(-1deg); opacity: 0.8; }

        70% { -webkit-transform: scale(1.05, 1) rotate(-2deg); opacity: 0.75; }

        72% { -webkit-transform: scale(1.05) rotate(-2deg); opacity: 0.9; }
        73% { -webkit-transform: scale(1.5, 1.2) rotate(-10deg); opacity: 0.3; }
        77% { -webkit-transform: scale(1.07) rotate(-3deg); opacity: 0.9; }

        84% { -webkit-transform: scale(1.07, 1.04) rotate(-3deg); opacity: 0.9; }
        85% { -webkit-transform: scale(1.07, 1.04) rotate(-1deg); opacity: 0.1; }
        87% { -webkit-transform: scale(1.07, 1.03) rotate(-3deg); opacity: 0.9; }

        100% { -webkit-transform: scale(1.07, 1) rotate(-3deg); opacity: 0; }
    }

    @-moz-keyframes ghostx {
        0% { -moz-transform: scale(0.8) rotate(0); opacity: 0.4; }

        11% { -moz-transform: scale(0.7) rotate(0); opacity: 0.5; }
        12% { -moz-transform: scale(1.3, 1) rotate(0); opacity: 0.1; }
        17% { -moz-transform: scale(0.8) rotate(0); opacity: 0.5; }

        40% { -moz-transform: scale(1) rotate(-1deg); opacity: 0.9; }

        42% { -moz-transform: scale(0.9) rotate(-1deg); opacity: 0.9; }
        43% { -moz-transform: scale(1.1, 1.5) rotate(-10deg); opacity: 0.3; }
        47% { -moz-transform: scale(0.9) rotate(-1deg); opacity: 0.8; }

        70% { -moz-transform: scale(1.05, 1) rotate(-2deg); opacity: 0.75; }

        72% { -moz-transform: scale(1.05) rotate(-2deg); opacity: 0.9; }
        73% { -moz-transform: scale(1.5, 1.2) rotate(-10deg); opacity: 0.3; }
        77% { -moz-transform: scale(1.07) rotate(-3deg); opacity: 0.9; }

        84% { -moz-transform: scale(1.07, 1.04) rotate(-3deg); opacity: 0.9; }
        85% { -moz-transform: scale(1.07, 1.04) rotate(-1deg); opacity: 0.1; }
        87% { -moz-transform: scale(1.07, 1.03) rotate(-3deg); opacity: 0.9; }

        100% { -moz-transform: scale(1.07, 1) rotate(-3deg); opacity: 0; }
    }

    @-o-keyframes ghostx {
        0% { -o-transform: scale(0.8) rotate(0); opacity: 0.4; }

        11% { -o-transform: scale(0.7) rotate(0); opacity: 0.5; }
        12% { -o-transform: scale(1.3, 1) rotate(0); opacity: 0.1; }
        17% { -o-transform: scale(0.8) rotate(0); opacity: 0.5; }

        40% { -o-transform: scale(1) rotate(-1deg); opacity: 0.9; }

        42% { -o-transform: scale(0.9) rotate(-1deg); opacity: 0.9; }
        43% { -o-transform: scale(1.1, 1.5) rotate(-10deg); opacity: 0.3; }
        47% { -o-transform: scale(0.9) rotate(-1deg); opacity: 0.8; }

        70% { -o-transform: scale(1.05, 1) rotate(-2deg); opacity: 0.75; }

        72% { -o-transform: scale(1.05) rotate(-2deg); opacity: 0.9; }
        73% { -o-transform: scale(1.5, 1.2) rotate(-10deg); opacity: 0.3; }
        77% { -o-transform: scale(1.07) rotate(-3deg); opacity: 0.9; }

        84% { -o-transform: scale(1.07, 1.04) rotate(-3deg); opacity: 0.9; }
        85% { -o-transform: scale(1.07, 1.04) rotate(-1deg); opacity: 0.1; }
        87% { -o-transform: scale(1.07, 1.03) rotate(-3deg); opacity: 0.9; }

        100% { -o-transform: scale(1.07, 1) rotate(-3deg); opacity: 0; }
    }

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}