/* Author: Soap Creative */
/* build: 13/11/2014, 10:49:06 AM */

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {
    display: block
}

audio,canvas,video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden] {
    display: none
}

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

a:active,a:hover {
    outline: 0
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

hr {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

mark {
    background: #ff0;
    color: #000
}

code,kbd,pre,samp {
    font-family: monospace,serif;
    font-size: 1em
}

pre {
    white-space: pre-wrap
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019"
}

small {
    font-size: 100%
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 0
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

button,input,select,textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0
}

button,input {
    line-height: normal
}

button,select {
    text-transform: none
}

button,html input[type=button],input[type=reset],input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],html input[disabled] {
    cursor: default
}

input[type=checkbox],input[type=radio] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0
}

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
}

@font-face {
    font-family: Albertus;
    src: url(../fonts/albertus/068aac72-b233-4bd0-a53d-8176880b8ddd.eot?#iefix);
    src: url(../fonts/albertus/068aac72-b233-4bd0-a53d-8176880b8ddd.eot?#iefix) format("eot"),url(../fonts/albertus/561bf96c-5a1c-4050-8c17-50b87127841d.woff) format("woff"),url(../fonts/albertus/31648f5b-1b58-476f-87c6-291be600ad92.ttf) format("truetype"),url(../fonts/albertus/f2ca34cb-6342-4f09-875e-57ef42bff3cf.svg#f2ca34cb-6342-4f09-875e-57ef42bff3cf) format("svg");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: Albertus;
    src: url(../fonts/albertus/fe7384ed-e8fb-440d-8e3f-d825862a4005.eot?#iefix);
    src: url(../fonts/albertus/fe7384ed-e8fb-440d-8e3f-d825862a4005.eot?#iefix) format("eot"),url(../fonts/albertus/ad074495-689d-46c5-af57-2f403b39e5a2.woff) format("woff"),url(../fonts/albertus/534a6e48-e81e-4b25-897f-c70aa655cfa4.ttf) format("truetype"),url(../fonts/albertus/1da688b9-81c2-4845-bdfd-ccee806d0612.svg#1da688b9-81c2-4845-bdfd-ccee806d0612) format("svg");
    font-weight: 400;
    font-style: normal
}

@-webkit-keyframes rotate-360 {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg)
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg)
    }
}

@keyframes rotate-360 {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg)
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg)
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fade-in {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes grow-shrink {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50%,60% {
        -webkit-transform: scale(1.7);
        transform: scale(1.7)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes grow-shrink {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50%,60% {
        -webkit-transform: scale(1.7);
        transform: scale(1.7)
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@-webkit-keyframes rotate-arrows {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg)
    }

    50%,60% {
        -webkit-transform: rotateZ(180deg);
        transform: rotateZ(180deg)
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg)
    }
}

@keyframes rotate-arrows {
    0% {
        -webkit-transform: rotateZ(0deg);
        transform: rotateZ(0deg)
    }

    50%,60% {
        -webkit-transform: rotateZ(180deg);
        transform: rotateZ(180deg)
    }

    100% {
        -webkit-transform: rotateZ(360deg);
        transform: rotateZ(360deg)
    }
}

.phantom {
    display: none
}

.inline-svg .inline-link,.remove-text {
    display: block;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    font-size: 0;
    line-height: 0
}

.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden
}

.nobr {
    white-space: nowrap
}

.flexible-iframe {
    position: relative;
    background: #000
}

.flexible-iframe .height {
    padding-top: 56.25%
}

.flexible-iframe iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

.browser-not-supported,.external-screen,.game-footer .ui-popup-menu li,.vertical-center {
    text-align: center
}

.browser-not-supported:before,.external-screen:before,.game-footer .ui-popup-menu li:before,.vertical-center:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-left: -.25em
}

.browser-not-supported .center,.external-screen .center,.game-footer .ui-popup-menu li .center,.vertical-center .center {
    display: inline-block;
    vertical-align: middle
}

.clear-list,.ui-popup-menu {
    margin: 0;
    padding: 0;
    list-style: none
}

.flexible-image-replace {
    overflow: hidden;
    white-space: nowrap;
    -webkit-background-size: 100% 100%;
    background-size: 100%;
    background-repeat: no-repeat
}

.flexible-image-replace:before {
    content: '';
    width: 100%;
    display: inline-block;
    padding-top: 100%;
    margin-right: .2em
}

.strong,strong {
    font-weight: 500
}

embed,img,object,video {
    max-width: 100%;
    outline: 0
}

a {
    color: #7f81da;
    outline: 0;
    text-decoration: none
}

a:hover {
    color: #b0b2ff
}

a:focus {
    outline: 0
}

.btn,.btn-action-1,.btn-action-2,.btn-action-3,.btn-social,.game-footer .ui-popup-menu .logo,.level-select-screen .btn-level,.pagination .btn-pagination {
    appearance: none;
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
    background: 0 0;
    cursor: pointer;
    color: #fff;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

.heading {
    margin: 0;
    font-size: 3em;
    font-weight: 300
}

.title {
    margin: 0;
    color: #ffac2d;
    font-size: 1.3125em;
    line-height: 1.2em
}

.body-text p {
    margin: .9em 0 0;
    font-size: 1.1875em;
    font-weight: 400;
    line-height: 1.35em
}

.body-text p:first-child {
    margin: 0
}

.body-text ol,.body-text ul {
    font-size: 1em;
    line-height: 1.35em
}

.yellow-text-highlight {
    color: #ffac2d
}

.svg-store {
    display: none
}

.inline-svg {
    position: relative;
    display: inline-block
}

.inline-svg .holder {
    width: 100%;
    padding-top: 100%;
    position: relative;
    overflow: hidden
}

.inline-svg .inline-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1
}

.inline-svg img,.inline-svg svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.svg-gradient-container {
    visibility: hidden
}

.btn-action-1 {
    width: 9.7em;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.btn-action-1 .holder {
    z-index: 1
}

.btn-action-1 .trophy {
    opacity: 0
}

.btn-action-1 .border,.btn-action-1 .border path,.btn-action-1 .border polygon,.btn-action-1 .icon,.btn-action-1 .icon path,.btn-action-1 .icon polygon {
    -webkit-transition: none;
    transition: none
}

.btn-action-1:hover .border,.btn-action-1:hover .border path,.btn-action-1:hover .border polygon,.btn-action-1:hover .icon,.btn-action-1:hover .icon path,.btn-action-1:hover .icon polygon {
    fill: #fff
}

.btn-action-1:active .holder {
    -webkit-transform: translateY(5%);
    -ms-transform: translateY(5%);
    transform: translateY(5%)
}

.btn-action-1:active .border,.btn-action-1:active .border path,.btn-action-1:active .border polygon,.btn-action-1:active .icon,.btn-action-1:active .icon path,.btn-action-1:active .icon polygon {
    fill: #ffac2d
}

.btn-action-2,.btn-action-3 {
    overflow: visible
}

.btn-action-2:hover .border,.btn-action-2:hover .border path,.btn-action-2:hover .border polygon,.btn-action-2:hover .icon,.btn-action-2:hover .icon path,.btn-action-2:hover .icon polygon,.btn-action-3:hover .border,.btn-action-3:hover .border path,.btn-action-3:hover .border polygon,.btn-action-3:hover .icon,.btn-action-3:hover .icon path,.btn-action-3:hover .icon polygon {
    fill: #fff
}

.btn-action-2:active .holder,.btn-action-3:active .holder {
    -webkit-transform: translateY(8%);
    -ms-transform: translateY(8%);
    transform: translateY(8%)
}

.btn-action-2:active .border,.btn-action-2:active .border path,.btn-action-2:active .border polygon,.btn-action-2:active .icon,.btn-action-2:active .icon path,.btn-action-2:active .icon polygon,.btn-action-3:active .border,.btn-action-3:active .border path,.btn-action-3:active .border polygon,.btn-action-3:active .icon,.btn-action-3:active .icon path,.btn-action-3:active .icon polygon {
    fill: #ffac2d
}

.btn-bg-glow:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: .2em;
    height: .2em;
    background: rgba(248,227,217,.5);
    -webkit-border-radius: 1em;
    border-radius: 1em;
    -webkit-box-shadow: 0 0 6.7em 1.8em #f8e3d9;
    box-shadow: 0 0 6.7em 1.8em #f8e3d9;
    -webkit-transition: none;
    transition: none
}

.btn-social .icon {
    display: none
}

.btn-social.btn-facebook .facebook,.btn-social.btn-google-plus .google-plus,.btn-social.btn-twitter .twitter {
    display: block
}

.ui-popup-menu {
    position: absolute;
    left: 0;
    bottom: 100%;
    padding: 1em;
    -webkit-transform: translateY(20%) translateZ(0);
    transform: translateY(20%) translateZ(0);
    height: 0;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
    -webkit-transition-delay: 50ms;
    transition-delay: 50ms;
    cursor: default;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.ui-popup-container {
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

.ui-popup-container.js-active .ui-popup-menu {
    height: auto;
    -webkit-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
    opacity: 1
}

.external-screen {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    overflow: hidden
}

@media (min-width: 75em) {
    .external-screen {
        overflow:visible
    }
}

.external-screen:before {
    margin-left: -.5em
}

.external-screen .bg-layer {
    position: absolute;
    width: 150%;
    height: 100%;
    left: 50%;
    top: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-position: 50% 50%;
    -webkit-background-size: cover cover;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-box-shadow: inset 0 .2em .4em #000;
    box-shadow: inset 0 .2em .4em #000
}

.external-screen .panel {
    position: relative;
    width: 100%;
    max-width: 75em;
    background-color: rgba(20,20,20,.8)
}

.external-screen .panel:before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 56.25%
}

@media (min-aspect-ratio: 2/1) {
    .external-screen .panel:before {
        padding-top:55.5%
    }
}

@media (min-aspect-ratio: 7/3) {
    .external-screen .panel:before {
        padding-top:52%
    }
}

.external-screen .container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.character-img {
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat
}

.character-img:before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 100%
}

.character-img[data-character=legolas] {
    background-image: url(../img/character-legolas.png)
}

.character-img[data-character=legolas]:before {
    padding-top: 115.4205607476636%
}

.character-img[data-character=bard] {
    background-image: url(../img/character-bard.png)
}

.character-img[data-character=bard]:before {
    padding-top: 72.0116618075802%
}

.character-img[data-character=tauriel] {
    background-image: url(../img/character-tauriel.png)
}

.character-img[data-character=tauriel]:before {
    padding-top: 107.31707317073169%
}

.carousel .pane.js-disabled {
    display: none
}

.pagination {
    position: relative;
    display: inline-block
}

.pagination.js-hidden {
    display: none
}

.pagination .btn-pagination {
    width: .8em;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-55%);
    -ms-transform: translateY(-55%);
    transform: translateY(-55%)
}

.pagination .btn-pagination:before {
    content: '';
    display: block;
    position: absolute;
    width: 300%;
    height: 200%;
    left: 50%;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.pagination .btn-pagination:hover path,.pagination .btn-pagination:hover polygon {
    fill: #ffac2d
}

.pagination .btn-next {
    right: 0
}

.pagination .btn-next .holder {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.pagination .btn-prev {
    left: 0
}

.pagination .page-indicators {
    margin: 0 4em
}

.pagination .page-indicator {
    display: inline-block;
    margin: 0 .2em;
    white-space: nowrap;
    width: .875em;
    line-height: 0;
    border: 1px solid #ffac2d;
    overflow: hidden;
    -webkit-border-radius: 10em;
    border-radius: 10em;
    cursor: pointer
}

.pagination .page-indicator:before {
    content: '';
    display: inline-block;
    width: 100%;
    padding-top: 100%;
    margin-right: .3em
}

.pagination .page-indicator:hover {
    background: #ffac2d
}

.pagination .page-indicator.js-active {
    background: #ffac2d;
    cursor: default
}

.pagination .page-indicator.js-disabled {
    display: none
}

.bg-stat-track .holder {
    padding-top: 11.6666666666667%
}

.shape-stats-front .holder {
    padding-top: 110.5263157894737%
}

.shape-stats-back .holder {
    padding-top: 116.6666666666667%
}

.icon-rotate-device .holder {
    padding-top: 71.3333333333333%
}

.lock-icon .holder {
    padding-top: 118.42105263157889%
}

.icon-level .holder {
    padding-top: 109.4594594594595%
}

.icon-arrow-1 .holder {
    padding-top: 200%
}

.icon-arrow-star .holder {
    padding-top: 118.51851851851849%
}

.logo-facebook .holder {
    padding-top: 190.9090909090909%
}

.logo-twitter .holder {
    padding-top: 86.3636363636364%
}

.logo-tumblr .holder {
    padding-top: 166.66666666666669%
}

.logo-youtube .holder {
    padding-top: 70.8333333333333%
}

.logo-gplus .holder,.logo-instagram .holder {
    padding-top: 100%
}

.btn-action-2 .holder,.btn-social .holder {
    padding-top: 68.75%
}

*,:after,:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html {
    width: 100%;
    overflow: hidden;
    min-height: 268px
}

body,html {
    height: 100%
}

body {
    position: relative;
    margin: 0 0 1px;
    font: normal normal 400 100%/1 Albertus,Helvetica,Arial,sans-serif;
    background: #000;
    color: #fff;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%
}

.rotate-device-overlay {
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.9);
    display: none
}

.rotate-device-overlay.js-active {
    display: block
}

.rotate-device-overlay.js-active .segment-arrows {
    -webkit-animation-name: rotate-arrows;
    animation-name: rotate-arrows;
    -webkit-animation-delay: 500ms;
    animation-delay: 500ms;
    -webkit-animation-duration: 1500ms;
    animation-duration: 1500ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease
}

.rotate-device-overlay .center {
    position: relative
}

.rotate-device-overlay .icon-rotate-device {
    width: 15.625em
}

.rotate-device-overlay .segment-arrows {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.rotate-device-overlay .segment-arrows .phone,.rotate-device-overlay .segment-phone .arrows {
    display: none
}

.browser-not-supported {
    position: fixed;
    background: #000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000
}

.browser-not-supported .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    margin: 0 auto;
    max-width: $max-width;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    overflow: visible;
    width: 100%;
    height: 185px;
    text-indent: 100%;
    white-space: nowrap;
    background-image: url(../img/not-supported-footer.jpg);
    background-position: center center
}

.canvas-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    visibility: hidden;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    overflow: visible;
    font-size: .55em
}

@media (min-width: 40em) {
    .canvas-loader {
        font-size:.7em
    }
}

@media (min-width: 40em) {
    .canvas-loader {
        font-size:.85em
    }
}

@media (min-width: 60em) {
    .canvas-loader {
        font-size:1em
    }
}

.canvas-loader.js-show {
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
    visibility: visible;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

.canvas-loader .center {
    position: relative;
    padding: 2em;
    -webkit-border-radius: 20em;
    border-radius: 20em;
    top: -5%;
    overflow: visible
}

.canvas-loader .center:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 1px;
    height: 1px;
    -webkit-box-shadow: 0 0 21.625em 4.75em rgba(0,0,0,.7);
    box-shadow: 0 0 21.625em 4.75em rgba(0,0,0,.7)
}

.canvas-loader .canvas {
    position: relative;
    z-index: 2;
    width: 10em;
    height: 10em;
    top: 3.8em
}

@media (min-width: 40em) {
    .canvas-loader .canvas {
        top:2.3em;
        left: -.1em
    }
}

@media (min-width: 48em) {
    .canvas-loader .canvas {
        top:1.2em
    }
}

@media (min-width: 60em) {
    .canvas-loader .canvas {
        top:1em;
        width: 14em;
        height: 14em
    }
}

.canvas-loader .text {
    font-size: 1.2em
}

.canvas-loader .progress {
    position: relative;
    width: 37.5em;
    height: .3125em;
    overflow: hidden;
    margin: 1em 0 0;
    background: #e9aa90;
    -webkit-box-shadow: 0 0 10px rgba(240,95,34,.65);
    box-shadow: 0 0 10px rgba(240,95,34,.65)
}

.canvas-loader .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f05f22;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%)
}

.css-loader {
    overflow: hidden;
    width: 1.875em;
    height: 1.875em;
    text-indent: 100%;
    white-space: nowrap;
    background-image: url(../img/loader-1.gif);
    background-repeat: no-repeat;
    background-position: 50% 50%
}

.css-loader:not(:required) {
    -webkit-animation-name: rotate-360;
    animation-name: rotate-360;
    -webkit-animation-duration: 450ms;
    animation-duration: 450ms;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-border-radius: 1.875em;
    border-radius: 1.875em;
    border: .125em solid #ffac2d;
    border-right-color: transparent;
    overflow: hidden;
    background-image: none;
    outline: 1px solid transparent
}

#gameContainer {
    position: relative
}

.gameContainer canvas {
    background: #333;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.preload-screen {
    display: block;
    z-index: 1;
    background-color: #0a0a0a;
    text-align: center;
    -webkit-transition: opacity 400ms cubic-bezier(0.215,.61,.355,1);
    transition: opacity 400ms cubic-bezier(0.215,.61,.355,1)
}

.preload-screen .panel {
    position: relative
}

.preload-screen .panel:before {
    background-image: url(../img/responsive/bg-film-still-01-50pc.jpg);
    -webkit-background-size: cover cover;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-animation-name: fade-in;
    animation-name: fade-in;
    -webkit-animation-delay: 100ms;
    animation-delay: 100ms;
    -webkit-animation-duration: 400ms;
    animation-duration: 400ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

@media (min-width: 40em) {
    .preload-screen .panel:before {
        background-image:url(../img/responsive/bg-film-still-01-70pc.jpg)
    }
}

@media (min-width: 60em) {
    .preload-screen .panel:before {
        background-image:url(../img/responsive/bg-film-still-01-100pc.jpg)
    }
}

.preload-screen .panel:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/optimised/bg-halftone-repeat.png) repeat;
    z-index: 1
}

.preload-screen .css-loader-container {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-animation-name: fade-in;
    animation-name: fade-in;
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-transition: opacity 400ms ease;
    transition: opacity 400ms ease
}

.preload-screen.js-hide-loader .css-loader-container {
    opacity: 0
}

.title-screen .bg-layer {
    background-position: 50% 0;
    background-image: url(../img/responsive/bg-film-still-01-50pc.jpg)
}

@media (min-width: 40em) {
    .title-screen .bg-layer {
        background-image:url(../img/responsive/bg-film-still-01-70pc.jpg)
    }
}

@media (min-width: 60em) {
    .title-screen .bg-layer {
        background-image:url(../img/responsive/bg-film-still-01-100pc.jpg)
    }
}

.title-screen .container {
    z-index: 1;
    text-align: center;
    padding-top: .5em
}

@media (min-width: 40em) {
    .title-screen .container {
        padding-top:1em
    }
}

@media (min-width: 48em) {
    .title-screen .container {
        padding-top:1.2em
    }
}

.title-screen .container>.center {
    width: 90%;
    margin-top: -19%
}

@media (min-width: 40em) {
    .title-screen .container>.center {
        margin-top:-20%
    }
}

@media (min-width: 48em) {
    .title-screen .container>.center {
        margin-top:-15%
    }
}

@media (min-width: 60em) {
    .title-screen .container>.center {
        margin-top:-10%
    }
}

@media (min-width: 75em) and (min-height:39.375em) {
    .title-screen .container>.center {
        margin-top:-4%
    }
}

.js-footer-expanded .title-screen .container>.center {
    margin-top: 5%
}

.title-screen .logo-game {
    width: 45%;
    margin: 0 auto;
    padding: 0;
    background-image: url(../img/logo-game.png)
}

.title-screen .logo-game:before {
    padding-top: 21.6772151898734%
}

.title-screen .btn-play {
    width: 16%
}

.title-screen .btn-play .icon {
    display: none
}

.title-screen .btn-play .text {
    opacity: 0
}

.title-screen .btn-play .html-text {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

@media (min-width: 30em) {
    .title-screen .btn-play .html-text {
        font-size:.9em
    }
}

@media (min-width: 40em) {
    .title-screen .btn-play .html-text {
        font-size:1.1em
    }
}

@media (min-width: 48em) {
    .title-screen .btn-play .html-text {
        font-size:1.25em
    }
}

@media (min-width: 60em) {
    .title-screen .btn-play .html-text {
        font-size:1.4em
    }
}

@media (min-width: 40em) {
    .title-screen .btn-play {
        width:13%
    }
}

@media (min-width: 60em) {
    .title-screen .btn-play {
        width:12.5%
    }
}

.title-screen .btn-play:before {
    display: none
}

.title-screen .btn-play:active .html-text {
    -webkit-transform: translateX(-50%) translateY(-15%);
    -ms-transform: translateX(-50%) translateY(-15%);
    transform: translateX(-50%) translateY(-15%)
}

.level-select-screen .bg-layer {
    background-image: url(../img/responsive/bg-abstract-1-50pc.jpg)
}

@media (min-width: 40em) {
    .level-select-screen .bg-layer {
        background-image:url(../img/responsive/bg-abstract-1-70pc.jpg)
    }
}

@media (min-width: 60em) {
    .level-select-screen .bg-layer {
        background-image:url(../img/responsive/bg-abstract-1-100pc.jpg)
    }
}

.level-select-screen .container {
    padding: 2% 0 0
}

.level-select-screen .container>.center {
    width: 90%
}

.level-select-screen .btn-back {
    width: 3em;
    position: absolute;
    top: 115%;
    left: 2em;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media (min-width: 40em) {
    .level-select-screen .btn-back {
        width:3.2em;
        top: 35%
    }
}

@media (min-width: 48em) {
    .level-select-screen .btn-back {
        width:3.4em;
        top: 50%
    }
}

.level-select-screen .header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin-top: 2em;
    font-size: .6em
}

@media (min-width: 40em) {
    .level-select-screen .header {
        font-size:.8em;
        margin-top: 3em
    }
}

@media (min-width: 48em) {
    .level-select-screen .header {
        font-size:.9em
    }
}

@media (min-width: 60em) {
    .level-select-screen .header {
        font-size:1em
    }
}

.level-select-screen .pagination {
    margin: 1.5em 0 0;
    font-size: .6em
}

@media (min-width: 48em) {
    .level-select-screen .pagination {
        font-size:.9em
    }
}

@media (min-width: 60em) {
    .level-select-screen .pagination {
        font-size:1em
    }
}

.level-select-screen .carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 2em 0 0;
    font-size: 7px
}

@media (min-width: 40em) {
    .level-select-screen .carousel {
        padding-top:4em;
        font-size: 7.6px
    }
}

@media (min-width: 48em) {
    .level-select-screen .carousel {
        padding-top:4em;
        font-size: .74em
    }
}

@media (min-width: 60em) {
    .level-select-screen .carousel {
        padding-top:4.5em;
        font-size: .9em
    }
}

@media (min-width: 75em) and (min-height:39.375em) {
    .level-select-screen .carousel {
        font-size:1em;
        padding: 2em 0 0
    }
}

@media (max-height: 300px) {
    .level-select-screen .carousel {
        padding-top:0
    }
}

.level-select-screen .carousel .panes {
    height: 100%;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease
}

.level-select-screen .carousel .pane {
    position: relative;
    height: 100%;
    float: left
}

.level-select-screen .btn-level {
    margin: .6em .8em;
    display: inline-block;
    position: relative;
    cursor: default;
    overflow: visible
}

.level-select-screen .btn-level:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 0;
    height: 0;
    background: rgba(248,227,217,.33);
    -webkit-border-radius: 1em;
    border-radius: 1em;
    -webkit-box-shadow: 0 0 6em 1.8em #f8e3d9;
    box-shadow: 0 0 6em 1.8em #f8e3d9;
    display: none
}

.level-select-screen .btn-level .icon-level {
    width: 9.6875em;
    display: block;
    opacity: .4;
    z-index: 2
}

.level-select-screen .btn-level .icon-star,.level-select-screen .btn-level .standard-border {
    opacity: 0
}

.level-select-screen .btn-level .icon-star path,.level-select-screen .btn-level .icon-star polygon {
    fill: #ffac2d
}

.level-select-screen .btn-level .locked {
    opacity: 1
}

.level-select-screen .btn-level .text {
    opacity: 0;
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    font-size: 3.5em;
    font-weight: 300;
    -webkit-transform: translateX(-50%) translateY(-60%);
    -ms-transform: translateX(-50%) translateY(-60%);
    transform: translateX(-50%) translateY(-60%)
}

@media (min-width: 48em) {
    .level-select-screen .btn-level .text {
        font-size:3em
    }
}

.level-select-screen .btn-level[data-unlocked=true] {
    cursor: pointer
}

.level-select-screen .btn-level[data-unlocked=true]:before {
    display: block
}

.level-select-screen .btn-level[data-unlocked=true] .icon-level,.level-select-screen .btn-level[data-unlocked=true] .standard-border,.level-select-screen .btn-level[data-unlocked=true] .text {
    opacity: 1
}

.level-select-screen .btn-level[data-unlocked=true] .icon-star {
    opacity: .3
}

.level-select-screen .btn-level[data-unlocked=true] .locked {
    opacity: 0
}

.level-select-screen .btn-level[data-unlocked=true]:hover path,.level-select-screen .btn-level[data-unlocked=true]:hover polygon {
    fill: #fff
}

.level-select-screen .btn-level[data-unlocked=true]:active .holder {
    -webkit-transform: translateY(6%);
    -ms-transform: translateY(6%);
    transform: translateY(6%)
}

.level-select-screen .btn-level[data-unlocked=true]:active path,.level-select-screen .btn-level[data-unlocked=true]:active polygon {
    fill: #ffac2d
}

.level-select-screen .btn-level[data-unlocked=true]:active .text {
    top: 58%;
    color: #ffac2d
}

.level-select-screen .btn-level[data-stars="1"] .icon-star-1 {
    opacity: 1
}

.level-select-screen .btn-level[data-stars="1"] .icon-star-1 .icon-fill {
    fill: #fff
}

.level-select-screen .btn-level[data-stars="1"] .icon-star-1 .icon-border {
    fill: #ffac2d
}

.level-select-screen .btn-level[data-stars="2"] .icon-star-1,.level-select-screen .btn-level[data-stars="2"] .icon-star-2 {
    opacity: 1
}

.level-select-screen .btn-level[data-stars="2"] .icon-star-1 .icon-fill,.level-select-screen .btn-level[data-stars="2"] .icon-star-2 .icon-fill {
    fill: #fff
}

.level-select-screen .btn-level[data-stars="2"] .icon-star-1 .icon-border,.level-select-screen .btn-level[data-stars="2"] .icon-star-2 .icon-border {
    fill: #ffac2d
}

.level-select-screen .btn-level[data-stars="3"] .icon-star-1,.level-select-screen .btn-level[data-stars="3"] .icon-star-2,.level-select-screen .btn-level[data-stars="3"] .icon-star-3 {
    opacity: 1
}

.level-select-screen .btn-level[data-stars="3"] .icon-star-1 .icon-fill,.level-select-screen .btn-level[data-stars="3"] .icon-star-2 .icon-fill,.level-select-screen .btn-level[data-stars="3"] .icon-star-3 .icon-fill {
    fill: #fff
}

.level-select-screen .btn-level[data-stars="3"] .icon-star-1 .icon-border,.level-select-screen .btn-level[data-stars="3"] .icon-star-2 .icon-border,.level-select-screen .btn-level[data-stars="3"] .icon-star-3 .icon-border {
    fill: #ffac2d
}

.level-failed-screen .bg-layer {
    background-image: url(../img/responsive/bg-film-still-02-50pc.jpg)
}

@media (min-width: 40em) {
    .level-failed-screen .bg-layer {
        background-image:url(../img/responsive/bg-film-still-02-70pc.jpg)
    }
}

@media (min-width: 60em) {
    .level-failed-screen .bg-layer {
        background-image:url(../img/responsive/bg-film-still-02-100pc.jpg)
    }
}

.level-failed-screen .container {
    font-size: .7em
}

@media (min-width: 40em) {
    .level-failed-screen .container {
        font-size:.9em
    }
}

@media (min-width: 48em) {
    .level-failed-screen .container {
        font-size:1em
    }
}

.level-failed-screen .heading {
    position: absolute;
    top: 8%;
    left: 0;
    width: 100%
}

.level-failed-screen .description {
    position: relative;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.level-failed-screen .btn-group {
    position: absolute;
    bottom: 8%;
    left: 0;
    width: 100%
}

.level-failed-screen .btn-group .btn {
    display: inline-block;
    vertical-align: bottom;
    width: 4.8em;
    margin: 0 0 0 6em
}

.level-failed-screen .btn-group .btn:first-child {
    margin: 0
}

.level-failed-screen .btn-group .btn-resume {
    top: .8em;
    width: 9em
}

@media (min-width: 40em) {
    .level-failed-screen .btn-group .btn-resume {
        width:9em
    }
}

.level-intro-screen {
    background: rgba(0,0,0,.7)
}

.level-intro-screen .panel {
    background: 0;
    max-width: 64em
}

.level-intro-screen .container {
    font-size: .7em
}

@media (min-width: 40em) {
    .level-intro-screen .container {
        font-size:.8em
    }
}

@media (min-width: 48em) {
    .level-intro-screen .container {
        font-size:.9em
    }
}

@media (min-width: 48em) {
    .level-intro-screen .container {
        font-size:1em
    }
}

.level-intro-screen .heading {
    position: absolute;
    top: 8%;
    left: 0;
    width: 100%;
    z-index: 3
}

.level-intro-screen .btn-back {
    position: absolute;
    width: 2.8em;
    top: 2.5em;
    left: 2em;
    z-index: 4;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media (min-width: 48em) {
    .level-intro-screen .btn-back {
        top:1.8em;
        width: 3.2em
    }
}

.level-intro-screen .icon-target {
    width: 2.375em
}

.level-intro-screen .level-info {
    position: relative;
    z-index: 3;
    -webkit-transform: translateY(-35%);
    -ms-transform: translateY(-35%);
    transform: translateY(-35%)
}

.level-intro-screen .btn-play {
    position: absolute;
    z-index: 3;
    bottom: 8%;
    left: 50%;
    width: 8.5em;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    cursor: default
}

@media (min-width: 40em) {
    .level-intro-screen .btn-play {
        width:9.5em
    }
}

.level-intro-screen .btn-play .holder {
    opacity: 0;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    -webkit-transition: all 300ms ease-out;
    transition: all 300ms ease-out
}

.level-intro-screen .btn-play .canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 300ms ease-in;
    transition: all 300ms ease-in
}

.level-intro-screen .btn-play.js-visible {
    cursor: pointer
}

.level-intro-screen .btn-play.js-visible .holder {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.level-intro-screen .btn-play.js-visible .canvas {
    opacity: 0
}

.level-intro-screen .character-img {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 36%;
    left: -8%
}

.level-intro-screen .character-img[data-character=tauriel] {
    left: -3%
}

.level-intro-screen .character-img[data-character=bard] {
    width: 57.1%;
    left: -10%
}

.level-completed-screen .bg-layer {
    background-image: url(../img/responsive/bg-mountains-01-50pc.jpg)
}

@media (min-width: 40em) {
    .level-completed-screen .bg-layer {
        background-image:url(../img/responsive/bg-mountains-01-70pc.jpg)
    }
}

@media (min-width: 60em) {
    .level-completed-screen .bg-layer {
        background-image:url(../img/responsive/bg-mountains-01-100pc.jpg)
    }
}

.level-completed-screen .panel {
    max-width: 64em
}

.level-completed-screen .container {
    font-size: 7.5px
}

@media (min-width: 40em) {
    .level-completed-screen .container {
        font-size:.6em
    }
}

@media (min-width: 48em) {
    .level-completed-screen .container {
        font-size:.8em
    }
}

@media (min-width: 60em) {
    .level-completed-screen .container {
        font-size:1em
    }
}

.level-completed-screen .container>.center {
    position: relative;
    z-index: 2;
    width: 90%
}

.level-completed-screen .character-img {
    position: absolute;
    z-index: 1;
    bottom: 0;
    width: 38%;
    left: -12%
}

.level-completed-screen .character-img[data-character=bard] {
    width: 59%;
    left: -21%
}

.level-completed-screen .score {
    margin: 6% 0 0
}

.level-completed-screen .score .text {
    position: relative;
    font-size: 2.25em;
    letter-spacing: .1em
}

.level-completed-screen .score .text.btn-bg-glow:before {
    background: rgba(248,227,217,.2);
    -webkit-box-shadow: 0 0 1.5em .8em rgba(248,227,217,.3);
    box-shadow: 0 0 1.5em .8em rgba(248,227,217,.3)
}

.level-completed-screen .score-info {
    position: relative
}

.level-completed-screen .bonus {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-120%);
    -ms-transform: translateY(-120%);
    transform: translateY(-120%);
    width: 100%;
    opacity: 0;
    -webkit-transition: all 330ms ease-out;
    transition: all 330ms ease-out
}

.level-completed-screen .bonus.js-visible {
    -webkit-transition-delay: 380ms;
    transition-delay: 380ms;
    opacity: 1;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.level-completed-screen .bonus .inline {
    display: inline-block;
    vertical-align: middle
}

.level-completed-screen .bonus .icon {
    width: 2.8em;
    top: -.1em
}

.level-completed-screen .bonus .text {
    margin: 0 0 0 .2em;
    font-size: 1.3125em
}

.level-completed-screen .bonus .value {
    padding: 0 0 0 .2em
}

.level-completed-screen .stars {
    margin: 1em 0 0
}

.level-completed-screen .stars .star {
    position: relative;
    width: 4.0625em;
    margin-right: .5em;
    opacity: .3;
    -webkit-transition: opacity 380ms ease;
    transition: opacity 380ms ease
}

.level-completed-screen .stars .star path,.level-completed-screen .stars .star polygon {
    fill: #ffac2d
}

.level-completed-screen .stars[data-stars="1"] .star:nth-child(1) {
    -webkit-animation-name: grow-shrink;
    animation-name: grow-shrink;
    -webkit-animation-duration: 380ms;
    animation-duration: 380ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    opacity: 1
}

.level-completed-screen .stars[data-stars="1"] .star:nth-child(1) .arrow-fabric path,.level-completed-screen .stars[data-stars="1"] .star:nth-child(1) .arrow-fabric polygon {
    fill: #fff
}

.level-completed-screen .stars[data-stars="2"] .star:nth-child(1) {
    -webkit-animation-name: grow-shrink;
    animation-name: grow-shrink;
    -webkit-animation-duration: 380ms;
    animation-duration: 380ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    opacity: 1
}

.level-completed-screen .stars[data-stars="2"] .star:nth-child(1) .arrow-fabric path,.level-completed-screen .stars[data-stars="2"] .star:nth-child(1) .arrow-fabric polygon {
    fill: #fff
}

.level-completed-screen .stars[data-stars="2"] .star:nth-child(2) {
    -webkit-animation-name: grow-shrink;
    animation-name: grow-shrink;
    -webkit-animation-duration: 380ms;
    animation-duration: 380ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    opacity: 1
}

.level-completed-screen .stars[data-stars="2"] .star:nth-child(2) .arrow-fabric path,.level-completed-screen .stars[data-stars="2"] .star:nth-child(2) .arrow-fabric polygon {
    fill: #fff
}

.level-completed-screen .stars[data-stars="3"] .star:nth-child(1) {
    -webkit-animation-name: grow-shrink;
    animation-name: grow-shrink;
    -webkit-animation-duration: 380ms;
    animation-duration: 380ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    opacity: 1
}

.level-completed-screen .stars[data-stars="3"] .star:nth-child(1) .arrow-fabric path,.level-completed-screen .stars[data-stars="3"] .star:nth-child(1) .arrow-fabric polygon {
    fill: #fff
}

.level-completed-screen .stars[data-stars="3"] .star:nth-child(2) {
    -webkit-animation-name: grow-shrink;
    animation-name: grow-shrink;
    -webkit-animation-duration: 380ms;
    animation-duration: 380ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    opacity: 1
}

.level-completed-screen .stars[data-stars="3"] .star:nth-child(2) .arrow-fabric path,.level-completed-screen .stars[data-stars="3"] .star:nth-child(2) .arrow-fabric polygon {
    fill: #fff
}

.level-completed-screen .stars[data-stars="3"] .star:nth-child(3) {
    -webkit-animation-name: grow-shrink;
    animation-name: grow-shrink;
    -webkit-animation-duration: 380ms;
    animation-duration: 380ms;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    opacity: 1
}

.level-completed-screen .stars[data-stars="3"] .star:nth-child(3) .arrow-fabric path,.level-completed-screen .stars[data-stars="3"] .star:nth-child(3) .arrow-fabric polygon {
    fill: #fff
}

.level-completed-screen .share {
    margin: 3em 0 0;
    position: relative;
    z-index: 1;
    opacity: 0;
    -webkit-transition: opacity 500ms ease;
    transition: opacity 500ms ease
}

.level-completed-screen .share.js-visible {
    -webkit-transition-delay: 300ms;
    transition-delay: 300ms;
    opacity: 1
}

.level-completed-screen .btn-social {
    width: 4.875em;
    margin: 0 0 0 2em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: visible
}

.level-completed-screen .btn-social:first-child {
    margin: 0
}

.level-completed-screen .btn-social.btn-bg-glow:before {
    background: 0;
    font-size: .8em;
    -webkit-box-shadow: 0 0 4.5em 1.5em rgba(248,227,217,.6);
    box-shadow: 0 0 4.5em 1.5em rgba(248,227,217,.6)
}

@media (min-width: 48em) {
    .level-completed-screen .btn-social.btn-bg-glow:before {
        font-size:.9em
    }
}

@media (min-width: 48em) {
    .level-completed-screen .btn-social.btn-bg-glow:before {
        font-size:1em
    }
}

.level-completed-screen .nav {
    margin: 3% 0 0
}

.level-completed-screen .nav .btn {
    display: inline-block;
    vertical-align: bottom;
    width: 4.8em;
    margin: 0 0 0 6em
}

.level-completed-screen .nav .btn:first-child {
    margin: 0
}

.level-completed-screen .nav .btn-next {
    top: .8em;
    width: 9em
}

.level-completed-screen .nav .btn-next.js-show-trophy .icon {
    opacity: 0
}

.level-completed-screen .nav .btn-next.js-show-trophy .trophy {
    opacity: 1;
    fill: #ffac2d
}

.game-completed-screen .bg-layer {
    background-image: url(../img/responsive/bg-mountains-01-50pc.jpg)
}

@media (min-width: 40em) {
    .game-completed-screen .bg-layer {
        background-image:url(../img/responsive/bg-mountains-01-70pc.jpg)
    }
}

@media (min-width: 60em) {
    .game-completed-screen .bg-layer {
        background-image:url(../img/responsive/bg-mountains-01-100pc.jpg)
    }
}

.game-completed-screen .panel {
    max-width: 64em
}

.game-completed-screen .container {
    font-size: 7.5px
}

@media (min-width: 40em) {
    .game-completed-screen .container {
        font-size:.6em
    }
}

@media (min-width: 48em) {
    .game-completed-screen .container {
        font-size:.8em
    }
}

@media (min-width: 60em) {
    .game-completed-screen .container {
        font-size:1em
    }
}

.game-completed-screen .container>.center {
    position: relative;
    z-index: 2;
    width: 90%
}

.game-completed-screen .description {
    margin-top: 5%
}

.game-completed-screen .character-img {
    position: absolute;
    z-index: 0;
    bottom: 0;
    width: 38%;
    left: -16%
}

.game-completed-screen .character-img[data-character=tauriel] {
    left: -12%
}

.game-completed-screen .character-img[data-character=bard] {
    width: 58%;
    left: -19%
}

.game-completed-screen .share {
    margin: 3.5em 0 0;
    position: relative;
    z-index: 1
}

.game-completed-screen .btn-social {
    width: 4.875em;
    margin: 0 0 0 2em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: visible
}

.game-completed-screen .btn-social:first-child {
    margin: 0
}

.game-completed-screen .btn-social.btn-bg-glow:before {
    background: 0;
    font-size: .8em;
    -webkit-box-shadow: 0 0 4.5em 1.5em rgba(248,227,217,.6);
    box-shadow: 0 0 4.5em 1.5em rgba(248,227,217,.6)
}

@media (min-width: 48em) {
    .game-completed-screen .btn-social.btn-bg-glow:before {
        font-size:.9em
    }
}

@media (min-width: 48em) {
    .game-completed-screen .btn-social.btn-bg-glow:before {
        font-size:1em
    }
}

.game-completed-screen .nav {
    margin: 8% 0 0
}

.game-completed-screen .nav .btn {
    display: inline-block;
    vertical-align: bottom;
    width: 5em;
    margin: 0 0 0 20em
}

.game-completed-screen .nav .btn:first-child {
    margin: 0
}

.game-paused-screen {
    background: rgba(20,20,20,.8);
    z-index: 3
}

.game-paused-screen:after {
    content: '';
    display: block;
    position: absolute;
    height: 50%;
    width: 100%;
    top: 100%;
    left: 0;
    background: rgba(20,20,20,.8)
}

.game-paused-screen .panel {
    max-width: 64em;
    left: .1em;
    background: 0 0
}

.game-paused-screen .container {
    font-size: .75em
}

@media (min-width: 40em) {
    .game-paused-screen .container {
        font-size:.9375em
    }
}

@media (min-width: 48em) {
    .game-paused-screen .container {
        font-size:1em
    }
}

.game-paused-screen .container>.center {
    width: 90%
}

.game-paused-screen .btn-play {
    display: block;
    width: 9em;
    margin: 0 auto
}

.game-paused-screen .btn-group {
    padding: 5em 0 0
}

@media (min-width: 60em) {
    .game-paused-screen .btn-group {
        padding:6em 0 0
    }
}

.game-paused-screen .btn-group .btn {
    display: inline-block;
    width: 4.8em;
    margin: 0 0 0 4em
}

.game-paused-screen .btn-group .btn:first-child {
    margin: 0
}

.game-paused-screen .btn-sound .cross,.game-paused-screen .btn-sound.js-muted .sound-waves {
    opacity: 0
}

.game-paused-screen .btn-sound.js-muted .cross {
    opacity: 1
}

.character-select-screen .bg-layer {
    background-image: url(../img/responsive/bg-abstract-1-50pc.jpg)
}

@media (min-width: 40em) {
    .character-select-screen .bg-layer {
        background-image:url(../img/responsive/bg-abstract-1-70pc.jpg)
    }
}

@media (min-width: 60em) {
    .character-select-screen .bg-layer {
        background-image:url(../img/responsive/bg-abstract-1-100pc.jpg)
    }
}

.character-select-screen .container {
    font-size: .5625em
}

@media (min-width: 40em) {
    .character-select-screen .container {
        font-size:.6875em
    }
}

@media (min-width: 48em) {
    .character-select-screen .container {
        font-size:.875em
    }
}

@media (min-width: 60em) {
    .character-select-screen .container {
        font-size:1em
    }
}

.character-select-screen .btn-back {
    width: 3.4em;
    position: absolute;
    top: 115%;
    left: 2em;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media (min-width: 48em) {
    .character-select-screen .btn-back {
        top:50%
    }
}

.character-select-screen .header {
    position: relative;
    margin: 2.3em 0 0;
    z-index: 1
}

.character-select-screen .btn-play {
    width: 7.4em;
    left: 47%;
    position: absolute;
    bottom: 2em;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 3;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@media (min-width: 40em) {
    .character-select-screen .btn-play {
        left:48%
    }
}

@media (min-width: 60em) {
    .character-select-screen .btn-play {
        width:9.375em;
        left: 50%
    }
}

@media (min-aspect-ratio: 2/1) {
    .character-select-screen .btn-play {
        bottom:4em
    }
}

.character-select-screen .btn-nav {
    position: absolute;
    top: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: -webkit-transform 250ms ease;
    transition: transform 250ms ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    overflow: visible
}

.character-select-screen .btn-nav.btn-bg-glow:before {
    width: .05em;
    height: .05em;
    top: 60%;
    opacity: .7
}

.character-select-screen .btn-nav:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 150%;
    height: 100%;
    -webkit-transform: translateX(-16%);
    -ms-transform: translateX(-16%);
    transform: translateX(-16%)
}

.character-select-screen .btn-nav .text {
    position: relative;
    z-index: 1;
    font-size: 1.3125em;
    display: none;
    -webkit-transition: -webkit-transform 180ms ease;
    transition: transform 180ms ease
}

.character-select-screen .btn-nav .avatar {
    position: relative;
    overflow: hidden;
    margin: 1em 0 0
}

.character-select-screen .btn-nav .frame {
    position: relative;
    z-index: 5;
    width: 6.35em;
    -webkit-border-radius: 10em;
    border-radius: 10em
}

.character-select-screen .btn-nav .holder {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.character-select-screen .btn-nav .img {
    position: absolute;
    z-index: 1;
    bottom: .4em;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 6.1em;
    -webkit-border-radius: 10em;
    border-radius: 10em;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat
}

.character-select-screen .btn-nav .img:before {
    content: '';
    display: block;
    width: 100%;
    padding: 100% 0 0
}

.character-select-screen .btn-nav:hover path,.character-select-screen .btn-nav:hover polygon {
    fill: #fff
}

.character-select-screen .btn-prev {
    left: 3em
}

.character-select-screen .btn-prev:hover {
    -webkit-transform: translateX(-10%) translateY(-50%);
    -ms-transform: translateX(-10%) translateY(-50%);
    transform: translateX(-10%) translateY(-50%)
}

.character-select-screen .btn-prev:hover .text {
    -webkit-transform: translateX(-10%);
    -ms-transform: translateX(-10%);
    transform: translateX(-10%)
}

.character-select-screen .btn-next {
    right: 3em
}

.character-select-screen .btn-next:hover {
    -webkit-transform: translateX(10%) translateY(-50%);
    -ms-transform: translateX(10%) translateY(-50%);
    transform: translateX(10%) translateY(-50%)
}

.character-select-screen .btn-next:hover .text {
    -webkit-transform: translateX(10%);
    -ms-transform: translateX(10%);
    transform: translateX(10%)
}

.character-select-screen .carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.character-select-screen .carousel .panes {
    width: 300%;
    height: 100%;
    padding: 6em 0 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease
}

@media (min-width: 60em) {
    .character-select-screen .carousel .panes {
        padding:8em 0 0
    }
}

.character-select-screen .carousel .pane {
    position: relative;
    width: 33.33%;
    height: 100%;
    float: left
}

.character-select-screen .character {
    display: inline-block;
    text-align: left;
    margin-right: -29%
}

.character-select-screen .character .heading {
    position: relative;
    z-index: 1;
    font-size: 1.875em
}

.character-select-screen .character-img {
    position: absolute;
    bottom: 0;
    left: 5%;
    width: 38%
}

.character-select-screen .character-img[data-character=legolas] {
    left: .9%;
    width: 40%
}

@media (min-width: 40em) {
    .character-select-screen .character-img[data-character=legolas] {
        left:2%
    }
}

.character-select-screen .character-img[data-character=tauriel] {
    left: 5%;
    width: 42%
}

@media (min-width: 40em) {
    .character-select-screen .character-img[data-character=tauriel] {
        left:10%
    }
}

.character-select-screen .character-img[data-character=bard] {
    left: 0;
    width: 63.1%
}

.character-select-screen .character-stats {
    position: relative;
    z-index: 1;
    margin: 1.5em 0 0
}

.character-select-screen .character-stats li:nth-child(1) .stat-label {
    padding-left: 0
}

.character-select-screen .character-stats li:nth-child(2) .stat-label {
    padding-left: 2em
}

.character-select-screen .character-stats li:nth-child(3) .stat-label {
    padding-left: 4em
}

.character-select-screen .character-stats li:nth-child(4) .stat-label {
    padding-left: 6em
}

.character-select-screen .character-stats li:nth-child(5) .stat-label {
    padding-left: 8em
}

.character-select-screen .character-stats li:nth-child(6) .stat-label {
    padding-left: 10em
}

.character-select-screen .character-stats li:nth-child(7) .stat-label {
    padding-left: 12em
}

.character-select-screen .character-stats li:nth-child(8) .stat-label {
    padding-left: 14em
}

.character-select-screen .stat,.character-select-screen .stat-label {
    display: inline-block;
    vertical-align: middle;
    margin: 0
}

.character-select-screen .stat {
    position: relative;
    top: -.1em;
    margin: 0 0 0 .5em;
    overflow: hidden;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.character-select-screen .value-track {
    position: relative;
    display: block;
    width: 11.875em;
    opacity: .2
}

.character-select-screen .stat-value {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 70%;
    height: 100%;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transition: all 400ms ease;
    transition: all 400ms ease
}

.character-select-screen .stat-value .text {
    display: none
}

.character-select-screen .stat-value .shape-middle {
    position: absolute;
    height: 100%;
    top: 0;
    left: 1.1em;
    right: 1.1em;
    background: -webkit-gradient(linear,left top,right top,from(#74462c),color-stop(47%,#ec6a35),to(#fd8450));
    background: -webkit-linear-gradient(left,#74462c 0,#ec6a35 47%,#fd8450 100%);
    background: linear-gradient(to right,#74462c 0,#ec6a35 47%,#fd8450 100%)
}

.character-select-screen .stat-value .shape {
    position: absolute;
    top: 0;
    z-index: 1
}

.character-select-screen .stat-value .shape-stats-front {
    width: 1.26em;
    right: 0
}

.character-select-screen .stat-value .shape-stats-back {
    width: 1.2em;
    left: 0
}

.no-cssgradients .character-select-screen .stat-value .shape-middle {
    background: #ee6e39
}

.no-cssgradients .character-select-screen .stat-value .shape path {
    fill: #ee6e39
}

.character-select-screen .stat-icon {
    width: 3em
}

.character-select-screen .carousel[data-carousel-index="0"] .btn-prev .img {
    background-image: url(../img/optimised/avatar-tauriel.png)
}

.character-select-screen .carousel[data-carousel-index="0"] .btn-prev .text-tauriel {
    display: block
}

.character-select-screen .carousel[data-carousel-index="0"] .btn-next .img {
    background-image: url(../img/optimised/avatar-bard.png)
}

.character-select-screen .carousel[data-carousel-index="0"] .btn-next .text-bard {
    display: block
}

.character-select-screen .carousel[data-carousel-index="1"] .btn-prev .img {
    background-image: url(../img/optimised/avatar-legolas.png)
}

.character-select-screen .carousel[data-carousel-index="1"] .btn-prev .text-legolas {
    display: block
}

.character-select-screen .carousel[data-carousel-index="1"] .btn-next .img {
    background-image: url(../img/optimised/avatar-tauriel.png)
}

.character-select-screen .carousel[data-carousel-index="1"] .btn-next .text-tauriel {
    display: block
}

.character-select-screen .carousel[data-carousel-index="2"] .btn-prev .img {
    background-image: url(../img/optimised/avatar-bard.png)
}

.character-select-screen .carousel[data-carousel-index="2"] .btn-prev .text-bard {
    display: block
}

.character-select-screen .carousel[data-carousel-index="2"] .btn-next .img {
    background-image: url(../img/optimised/avatar-legolas.png)
}

.character-select-screen .carousel[data-carousel-index="2"] .btn-next .text-legolas {
    display: block
}

.help-screen {
    z-index: 100;
    background: rgba(0,0,0,.85);
    height: 110%
}

.help-screen>.center:before {
    padding-top: 49%
}

@media (min-width: 48em) {
    .help-screen>.center:before {
        padding-top:65%
    }
}

.help-screen .panel {
    background: 0;
    max-width: 65em
}

.help-screen .container {
    font-size: .625em
}

@media (min-width: 40em) {
    .help-screen .container {
        font-size:.75em
    }
}

@media (min-width: 48em) {
    .help-screen .container {
        font-size:.9375em
    }
}

@media (min-width: 60em) {
    .help-screen .container {
        font-size:1em
    }
}

.help-screen .close-button {
    position: absolute;
    width: 3.2em;
    top: 50%;
    right: 2em;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.help-screen .header {
    position: relative;
    margin: 0;
    z-index: 1
}

@media (min-width: 48em) {
    .help-screen .header {
        margin:2em 0 0
    }
}

.help-screen .pagination {
    margin: 1.5em 0 0;
    font-size: 1.2em
}

@media (min-width: 48em) {
    .help-screen .pagination {
        font-size:1em;
        margin: 2em 0 0
    }
}

@media (min-width: 60em) {
    .help-screen .pagination {
        margin:3em 0 0
    }
}

.help-screen .carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 2em 0 0;
    text-align: center
}

@media (min-width: 48em) {
    .help-screen .carousel {
        padding:4em 0 0
    }
}

.help-screen .panes {
    width: 400%;
    height: 100%;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform 500ms ease;
    transition: transform 500ms ease
}

.help-screen .pane {
    position: relative;
    width: 25%;
    height: 100%;
    float: left
}

.help-screen .icon-container {
    text-align: center;
    margin: 2.5em 0 0
}

.help-screen .icon-container li {
    display: inline-block;
    vertical-align: top;
    margin-left: 2%;
    width: 9%
}

.help-screen .icon-container li:first-child {
    margin-left: 0
}

.help-screen .icon-container .icon {
    width: 3.125em
}

.help-screen .icon-container .icon-large {
    width: 4em
}

.help-screen .icon-container .description {
    font-size: .9em;
    margin: .5em 0 0
}

.help-screen .img-container {
    position: relative
}

.help-screen .img-container:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 0
}

.help-screen .img {
    margin: 1.5em 0 0;
    max-height: 11em
}

@media (min-width: 48em) and (min-height:33.125em) {
    .help-screen .img {
        max-height:14em;
        margin: 2em 0 0
    }
}

@media (min-width: 60em) and (min-height:43.75em) {
    .help-screen .img {
        max-height:18em
    }
}

.help-screen .torch-help {
    margin-top: 2em
}

.help-screen .torch-help .description,.help-screen .torch-help .img-container {
    display: inline-block;
    vertical-align: middle
}

.help-screen .torch-help .img-container {
    margin-left: -1em
}

.help-screen .torch-help .img {
    margin: 0
}

.help-screen .torch-help .description {
    max-width: 10em;
    font-size: .9em
}

.credits-screen {
    z-index: 100;
    background: rgba(0,0,0,.85)
}

.credits-screen .container {
    font-size: .625em
}

@media (min-width: 40em) {
    .credits-screen .container {
        font-size:.8125em
    }
}

@media (min-width: 48em) {
    .credits-screen .container {
        font-size:.9375em
    }
}

@media (min-width: 60em) {
    .credits-screen .container {
        font-size:1em
    }
}

.credits-screen:after {
    content: '';
    display: block;
    position: absolute;
    height: 50%;
    width: 100%;
    top: 100%;
    left: 0;
    background: rgba(0,0,0,.85)
}

.credits-screen .panel {
    background: 0
}

.credits-screen .close-button {
    position: absolute;
    width: 3.5em;
    right: 2em;
    top: 2em
}

.credits-screen .img-container {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-40%);
    -ms-transform: translateY(-40%);
    transform: translateY(-40%);
    width: 100%;
    background: #efebd8
}

.credits-screen .img-container img {
    margin: 0 auto
}

.game-footer {
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    width: 100%;
    max-width: 75.625em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: visible;
    -webkit-transition: top 300ms ease;
    transition: top 300ms ease
}

.game-footer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    padding-top: 12.875%;
    background-image: url(../img/responsive/bg-footer-low-30pc.png);
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    z-index: 1
}

@media (min-width: 30em) {
    .game-footer:before {
        background-image:url(../img/responsive/bg-footer-low-50pc.png)
    }
}

@media (min-width: 60em) {
    .game-footer:before {
        background-image:url(../img/responsive/bg-footer-low-70pc.png)
    }
}

.game-footer:after {
    content: '';
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 2%;
    display: block;
    width: 100%;
    height: 106%;
    background: #000
}

@media (min-width: 75em) and (min-height:39.375em) {
    .game-footer:after {
        width:150%
    }
}

.game-footer.js-no-transition {
    -webkit-transition: none;
    transition: none
}

.game-footer.js-visible {
    opacity: 1
}

.game-footer.js-hidden {
    visibility: hidden
}

.game-footer .content-holder {
    position: relative;
    z-index: 5;
    padding: .5em 0 0;
    text-align: center;
    font-size: .5em
}

@media (min-width: 48em) {
    .game-footer .content-holder {
        font-size:.85em
    }
}

@media (min-width: 52.5em) {
    .game-footer .content-holder {
        font-size:.95em
    }
}

@media (min-width: 60em) {
    .game-footer .content-holder {
        font-size:1em
    }
}

.game-footer .menu-item,.game-footer .menu-items,.game-footer .menu-list {
    display: inline-block;
    vertical-align: top
}

.game-footer .menu-list {
    min-width: 35%;
    visibility: hidden;
    margin: 0 12%
}

@media (min-width: 30em) {
    .game-footer .menu-list {
        visibility:visible
    }
}

.game-footer .menu-list:first-child {
    margin-left: 0
}

.game-footer .menu-list:last-child {
    margin-right: 0
}

.game-footer .menu-item {
    margin: 0 .3em
}

.game-footer .text {
    color: #ffac2d;
    font-size: 1.4em;
    line-height: 1.2em;
    padding: 1em;
    display: block
}

@media (min-width: 40em) {
    .game-footer .text {
        font-size:1.125em
    }
}

.game-footer .text:hover {
    color: #fff
}

.game-footer .logo-hobbit {
    width: 25em;
    margin: 0 auto -5.5em;
    background-image: url(../img/responsive/logo-hobbit-100pc.png)
}

@media (min-width: 40em) {
    .game-footer .logo-hobbit {
        width:29.25em
    }
}

.game-footer .logo-hobbit:before {
    padding-top: 34.6153846153846%
}

.game-footer .hash-tag {
    margin-top: 2em;
    color: #8d5e25;
    font-size: .8em
}

.game-footer .legal-links {
    margin: -.3em 0 0
}

.game-footer .legal-links li {
    display: inline-block
}

.game-footer .legal-links .text {
    font-size: .75em;
    color: #8d5e25;
    padding: 1em .6em;
    margin: 0 .2em
}

.game-footer .legal-links .link:hover {
    color: #fff
}

.game-footer .ui-popup-menu {
    background: #000;
    -webkit-border-radius: .7em;
    border-radius: .7em;
    padding: .5em;
    font-size: 1.5em
}

@media (min-width: 40em) {
    .game-footer .ui-popup-menu {
        font-size:1.3em
    }
}

@media (min-width: 48em) {
    .game-footer .ui-popup-menu {
        font-size:1.1em
    }
}

@media (min-width: 60em) {
    .game-footer .ui-popup-menu {
        font-size:1em
    }
}

.game-footer .ui-popup-menu li {
    width: 3em;
    height: 2.8em;
    margin: .3em;
    display: block
}

.game-footer .ui-popup-menu li:before {
    margin-left: -.4em
}

.game-footer .ui-popup-menu .logo-link {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.game-footer .ui-popup-menu .logo {
    width: 1.5em;
    overflow: visible;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease
}

.game-footer .ui-popup-menu .logo path,.game-footer .ui-popup-menu .logo polygon {
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease
}

.game-footer .ui-popup-menu .logo:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

.game-footer .ui-popup-menu .logo:hover path,.game-footer .ui-popup-menu .logo:hover polygon {
    fill: #fff
}

.game-footer .ui-popup-menu .logo:active path,.game-footer .ui-popup-menu .logo:active polygon {
    -webkit-transition: none;
    transition: none;
    fill: #ffef9c
}

.game-footer .ui-popup-menu .logo:before {
    content: '';
    display: block;
    position: absolute
}

.game-footer .ui-popup-menu .logo .inline-link,.game-footer .ui-popup-menu .logo:before {
    top: 50%;
    left: 50%;
    width: 180%;
    height: 180%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%)
}

.game-footer .ui-popup-menu .logo-facebook,.game-footer .ui-popup-menu .logo-tumblr {
    width: .75em
}

.game-footer .ui-popup-menu .logo-instagram {
    width: 1.35em
}

.game-footer .follow-ui-popup {
    min-width: 8.8em
}

.game-footer .follow-ui-popup li {
    display: inline-block
}

.helper-btns {
    opacity: 0;
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    font-size: .5em;
    padding-top: .8em
}

@media (min-width: 40em) {
    .helper-btns {
        font-size:.7em;
        padding-top: .8em
    }
}

@media (min-width: 48em) {
    .helper-btns {
        font-size:1em;
        padding-top: .5em
    }
}

.helper-btns .btn {
    display: none;
    top: 2.2em;
    right: 1em;
    width: 3.4375em;
    vertical-align: middle
}

@media (min-width: 48em) {
    .helper-btns .btn {
        top:1.2em
    }
}

.helper-btns .btn-menu {
    right: 1.2em
}

.helper-btns .btn-help:before,.helper-btns .btn-sound:before {
    background: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 3.2em 1.3em rgba(0,0,0,.8);
    box-shadow: 0 0 3.2em 1.3em rgba(0,0,0,.8)
}

.helper-btns .btn-help .cross,.helper-btns .btn-help.js-muted .sound-waves,.helper-btns .btn-sound .cross,.helper-btns .btn-sound.js-muted .sound-waves {
    opacity: 0
}

.helper-btns .btn-help.js-muted .cross,.helper-btns .btn-sound.js-muted .cross,.helper-btns.js-visible {
    opacity: 1
}

.helper-btns.js-show-menu-btn .btn-menu {
    display: block
}

.helper-btns.js-show-help-btn {
    min-width: 8.5em
}

.helper-btns.js-show-help-btn .btn-help {
    display: inline-block;
    margin-left: .5em
}

.helper-btns.js-show-help-btn .btn-sound {
    display: inline-block
}