/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,button,input,select,textarea{font-family:sans-serif}
body{margin:0}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
h2{font-size:1.5em;margin:.83em 0}
h3{font-size:1.17em;margin:1em 0}
h4{font-size:1em;margin:1.33em 0}
h5{font-size:.83em;margin:1.67em 0}
h6{font-size:.75em;margin:2.33em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
blockquote{margin:1em 40px}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
p,pre{margin:1em 0}
code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
q{quotes:none}
q:before,q:after{content:'';content:none}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
dl,menu,ol,ul{margin:1em 0}
dd{margin:0 0 0 40px}
menu,ol,ul{padding:0 0 0 40px}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){overflow:hidden}
figure{margin:0}
form{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
button,input{line-height:normal}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}


/* GLOBAL STYLES */
html {
    -webkit-font-smoothing: antialiased;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html, body {
    height: 100%;
}

body {
    background: #111;
    color: #fff;
    font-family: 'Rokkitt', Rockwell, 'RockwellStd', serif;
    font-weight: 700;
    text-transform: uppercase;
}

header {
    position: relative;
    width: 100%;
    height: 48px;
    z-index: 1000;
}

    header h1 {
        position: absolute;
        top: 7px;
        left: 9px;
        right: 7px;
        margin: 0;
        font-size: 23px;
        text-align: center;
        height: 41px;
        line-height: 43px;
        background: #363636;
        z-index: 1;
    }

        header h1::before {
            content: '';
            width: 9px;
            height: 48px;
            background: url(../img.png) -133px -117px no-repeat;
            position: absolute;
            left: -9px;
            top: -7px;
        }

        header h1::after {
            content: '';
            width: 7px;
            height: 48px;
            background: url(../img.png) -164px -117px no-repeat;
            position: absolute;
            right: -7px;
            top: -7px;
        }

    header .share {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 24px;
        height: 24px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius: 12px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        background: #232323 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAALhJREFUOMtj+P//PwMRmA2XHAORBqwAYiFKDHgIxOeBWJQSA0DgKhBLEzJAC4jrgHgmEB8D4sNA/Pk/AtwDYjlsBvAA8er/xIEnQKyObAAb1CZSAMglnDADMknU/BaI7ZFdcAwq8Q2IG4HYGIiZod4CsV8haQYFqC56GHyGmqqFIxY+QDWfRA5AmAFCUMkEPNEIMmAOthQJi7Z7UCfjMiAWX1LWgsY5AzkYFoWNlBgAwk6UGsBMrgEAcv0/o5MpapQAAAAASUVORK5CYII=) 5px 4px no-repeat;
        text-indent: -10000px;
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        z-index: 1;
    }

        header .share:hover, header .share.active {
            background-color: #2a6dd0;
        }

        header .share-btns {
            position: absolute;
            top: 10px;
            right: 7px;
            background: #191919;
            height: 35px;
            padding: 5px 12px 5px 5px;
            opacity: 0;
            z-index: 0;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }

            .lt-ie9 header .share-btns {
                display: none;
            }

            header .share-btns::before {
                content: '';
                width: 19px; height: 46px; background: url(../img.png) -187px -118px no-repeat;
                position: absolute;
                left: -19px;
                top: 0;
            }

            header .share-btns::after {
                content: '';
                width: 7px; height: 54px; background: url(../img.png) -475px -114px no-repeat;
                position: absolute;
                right: -7px;
                top: -8px;
            }

            header .share-btns.show {
                top: 48px;
                opacity: 1;
            }

                .lt-ie9 header .share-btns.show {
                    display: block;
                }
                
            header .share-btns a {
                margin: 0 0 0 8px;
            }

.overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #121212;
    opacity: 0.8;
    display: none;
    z-index: 9000;
}

.share-btns a {
    display: inline-block;
    width: 34px;
    height: 34px;
    background: url(../img.png) -482px -124px no-repeat;
    margin: 0 4px 0 0;
    text-align: center;
    float: left;
}

    .share-btns a:hover {
        background: url(../img.png) -516px -124px no-repeat;
    }

    .share-btns a:active {
        background: url(../img.png) -550px -124px no-repeat;
    }

    .share-btns a span {
        display: inline-block;
        line-height: 1;
    }

    .share-btns a.gplus, .share-btns a.facebook {
        line-height: 48px;
    }

    .share-btns a.twitter {
        line-height: 42px;
    }

    .share-btns a.gplus span {
        width: 12px;
        height: 21px;
        background: url(../img.png) -121px -131px no-repeat;
    }

    .share-btns a.twitter span {
        width: 19px;
        height: 15px;
        background: url(../img.png) -584px -134px no-repeat;
    }

    .share-btns a.facebook span {
        width: 12px;
        height: 21px;
        background: url(../img.png) -109px -131px no-repeat;
    }

.share-panel {
    display: none;
    position: absolute;
    left: 50%;
    top: 35px;
    width: 269px;
    height: 283px;
    margin: 0 0 0 -134px;
    background: url(../img.png) -206px 0px no-repeat;
    z-index: 10000;
}

    .share-panel h1 {
        font-size: 18px;
        margin: 20px 0 0;
    }

    .share-panel p {
        position: static;
        padding: 0;
        margin: 5px auto;
    }

    .share-panel .final-score {
        position: absolute;
        left: 60px;
        top: 115px;
        width: 54px;
        height: 54px;
        background: #d91f29;
        line-height: 56px;
        font-size: 32px;
        color: #fff;
        -webkit-border-radius: 200px;
        -moz-border-radius: 200px;
        border-radius: 200px;
    }

    .share-panel .close {
        position: absolute;
        top: 18px;
        right: 14px;
        width: 24px;
        height: 24px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius: 12px;
        -moz-background-clip: padding;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        background: #242424 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJhJREFUGBkFwc9JggEAwNHfFiHNIviPLxxA1LIlunhotiRXCA86QFQLSNHh+V4Y4YAVQgghbPGGu3AGwAwhhAEAH+EZADBGmAIAnkJYAuCKPf4AMKAQwgN+AADfWCAUQgh7AMALQiiEsMAXAOATU4RCGADwi1f8A2COwiMAYIIwBwCswwUAA0IISwCcwj2O2CCEEMIO7xjdAPB3pZyYFXu1AAAAAElFTkSuQmCC) center no-repeat;
        cursor: pointer;
    }

        .share-panel .close:hover {
            background-color: #2f7ff5;
        }

    .share-panel .share-btns {
        position: absolute;
        bottom: 20px;
        left: 79px;
    }

@media only screen and (max-device-width: 1024px) {
    header {
        text-align: center;
    }

    header h1 {
        position: relative;
        left: auto;
        right: auto;
        display: inline-block;
        padding: 0 20px;
        font-size: 20px;
        background-color: transparent;
    }

        header h1::before {
            display: none;
        }

        header h1::after {
            display: none;
        }
}