/**
 * @copyright 2015 MarkCon
 * @link http://www.markcon.hu
 */

@CHARSET "UTF-8";

/* Mini-játékok közös beállításai

    Mindegyik elején: .MiniGame 
*/

/*  ----------  CONTENT  ----------  */

    .MiniGame,
    .MiniGame > .Content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #f5f5f5;
    }

/*  ----------  HEADER  ----------  */

    .MiniGame .Header {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 9.2%;
        background: rgb(28,228,174);
        background: -moz-linear-gradient(left,  rgba(28,228,174,1) 0%, rgba(66,179,229,1) 100%);
        background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(28,228,174,1)), color-stop(100%,rgba(66,179,229,1)));
        background: -webkit-linear-gradient(left,  rgba(28,228,174,1) 0%,rgba(66,179,229,1) 100%);
        background: -o-linear-gradient(left,  rgba(28,228,174,1) 0%,rgba(66,179,229,1) 100%);
        background: -ms-linear-gradient(left,  rgba(28,228,174,1) 0%,rgba(66,179,229,1) 100%);
        background: linear-gradient(to right,  rgba(28,228,174,1) 0%,rgba(66,179,229,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ce4ae', endColorstr='#42b3e5',GradientType=1 );
        padding: 0 9% 0 1.5%;
    }

    .MiniGame .Header .CloseButton,
    .MiniGame .Header .SoundButton {
        position: absolute;
        width: 2em;
        height: 2em;
        white-space: nowrap;
        overflow: hidden;
        text-indent: -9999px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        cursor: pointer;
    }

    .MiniGame .Header .CloseButton {
        right: 1%;
        background-image: url("image/close-button.png");
    }

    .MiniGame .Header .SoundButton {
        right: 4.5%;
    }

    .MiniGame .Header .SoundButton.Enabled {
        background-image: url("image/sound-enabled.png");
    }

    .MiniGame .Header .SoundButton.Disabled {
        background-image: url("image/sound-disabled.png");
    }

    .MiniGame .Header > div {
        position: relative;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .MiniGame .Header .Lifes {
        margin-right: 1.6em;
        float: left;
    }

    .MiniGame .Header .Lifes .Life {
        width: 1.6em;
        height: 1.6em;
        float: left;
        margin-right: 0.6em;
        background-image: url("image/life.png");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% auto;
    }

    .MiniGame .Header .Lifes .Life:last-child {
        margin-right: 0;
    }

    .MiniGame .Header .Lifes .Life.Lost {
        -webkit-animation-timing-function: linear;
        -moz-animation-timing-function: linear;
        -ms-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-duration: 1.5s;
        -moz-animation-duration: 1.5s;
        -ms-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-name: life-blink;
        -moz-animation-name: life-blink;
        -ms-animation-name: life-blink;
        animation-name: life-blink;
        -webkit-animation-iteration-count: 1;
        -moz-animation-iteration-count: 1;
        -ms-animation-iteration-count: 1;
        animation-iteration-count: 1;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        -ms-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
    }

    @-webkit-keyframes life-blink {
        0% { opacity: 1; background-position: center top; }
        33% { opacity: 0; background-position: center top; }
        66% { opacity: 1; background-position: center top; }
        99% { opacity: 0; background-position: center top; }
        100% { opacity: 1; background-position: center bottom; }
    }

    @-moz-keyframes life-blink {
        0% { opacity: 1; background-position: center top; }
        33% { opacity: 0; background-position: center top; }
        66% { opacity: 1; background-position: center top; }
        99% { opacity: 0; background-position: center top; }
        100% { opacity: 1; background-position: center bottom; }
    }

    @-ms-keyframes life-blink {
        0% { opacity: 1; background-position: center top; }
        33% { opacity: 0; background-position: center top; }
        66% { opacity: 1; background-position: center top; }
        99% { opacity: 0; background-position: center top; }
        100% { opacity: 1; background-position: center bottom; }
    }

    @keyframes life-blink {
        0% { opacity: 1; background-position: center top; }
        33% { opacity: 0; background-position: center top; }
        66% { opacity: 1; background-position: center top; }
        99% { opacity: 0; background-position: center top; }
        100% { opacity: 1; background-position: center bottom; }
    }

    .MiniGame .Header .Count {
        color: #bdefe7;
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        font-weight: bold;
        font-size: 1.6em;
        float: left;
    }

    .MiniGame .Header .Count .CorrecAnswers {
        color: #fff;
    }

    .MiniGame .Header .Points {
        color: #bdefe7;
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        font-weight: bold;
        font-size: 1.6em;
        float: right;
        display: none;
    }

    .MiniGame .Header .Points span {
        color: #fff;
    }

    .MiniGame .TimeLimit {
        float: right;
    }

    .MiniGame .TimeLimit .WarningMessage {
        float: left;
        white-space: nowrap;
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        font-weight: bold;
        font-size: 1.2em;
        line-height: 1.33em;
        color: rgba(255,255,255,0.6);
        margin-right: 1em;
        opacity: 0;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        transition: all 0.5s;
    }

    .MiniGame .TimeLimit .WarningMessage.Visible {
        opacity: 1;
    }

    .MiniGame .TimeLimit .WarningMessage span {
        color: #fff;
    }

    .MiniGame .TimeLimit .Icon {
        width: 1.6em;
        height: 1.6em;
        float: left;
        margin-right: 0.8em;
        background-image: url("image/time.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        opacity: 0.6;
    }

    .MiniGame .TimeLimit .Bar {
        float: left;
        padding: 0.2em 0;
        margin-right: 1em;
        /*min-width: 14.2em;*/
    }

    .MiniGame .TimeLimit .Bar > div {
        width: 0.5em;
        height: 1.2em;
        margin: 0 0.1em;
        float: left;
        border-radius: 1px;
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        -ms-transition: all 0.5s;
        transition: all 0.5s;
    }

    .MiniGame .TimeLimit .Bar .Red {
        background-color: #e76846;
    }

    .MiniGame .TimeLimit .Bar .Yellow {
        background-color: #e7b846;
    }

    .MiniGame .TimeLimit .Bar .Green {
        background-color: #b8f674;
    }

    .MiniGame .TimeLimit .Bar > div.Empty {
        background-color: #44d1ee;
    }

    .MiniGame .TimeLimit .Text {
        float: left;
        white-space: nowrap;
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        font-weight: bold;
        font-size: 1.6em;
        line-height: 1em;
        color: rgba(255,255,255,0.6);
        min-width: 2.2em;
    }

/*  ----------  FOOTER  ----------  */

    .MiniGame .Footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 12.5%;
        background-color: #fefefe;
        box-shadow: 0px -1px 3px 0px rgba(0, 0, 0, 0.1);
        padding: 0 1.5%;
    }

    .MiniGame .Footer .Results {
        width: 100%;
        height: 100%;
        float: left;
    }

    .MiniGame .Footer .Results .Result {
        width: 80%;
        height: 100%;
        float: left;
    }

    .MiniGame .Footer .Results .Point {
        display: none;
    }

    .MiniGame .Footer .Result > div {
        position: relative;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        float: left;
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
    }

    .MiniGame .Footer .Result .Type {
        width: 25%;
        text-transform: uppercase;
        font-weight: bold;
        padding-left: 1.6em;
        font-size: 1.6em;
        line-height: 1.3em;
    }

    .MiniGame .Footer .Result .Type:after {
        content: " ";
        position: absolute;
        left: 0;
        top: 0;
        width: 1.3em;
        height: 1.3em;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .MiniGame .Footer .Result.Correct .Type:after {
        background-image: url("image/result-correct.png");
    }

    .MiniGame .Footer .Result.Incorrect .Type:after {
        background-image: url("image/result-incorrect.png");
    }

    .MiniGame .Footer .Result.Incorrect .Type {
        color: #e46e4e;
    }

    .MiniGame .Footer .Result.Correct .Type {
        color: #21deb5;
    }

    .MiniGame .Footer .Result .Text {
        width: 75%;
        text-align: center;
        font-size: 1em;
        line-height: 1.2em;
    }

    .MiniGame .Footer .Result.Incorrect .Text {
        color: #e46e4e;
    }

    .MiniGame .Footer .Result.Correct .Text {
        color: #21deb5;
    }

    .MiniGame .Footer .Buttons {
        height: 100%;
        float: right;
        text-align: right;
    }

    .MiniGame .Footer .Results .Buttons {
        width: 20%;
    }

    .MiniGame .Footer .Buttons button {
        cursor: pointer;
        text-transform: uppercase;
        color: #3db9de;
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        background-color: transparent;
        position: relative;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        background-image: url("image/button-next.png");
        background-repeat: no-repeat;
        background-position: right center;
        background-size: contain;
        padding-right: 1.6em;
        font-weight: bold;
        font-size: 1.6em;
        line-height: 1.3em;
    }

    .MiniGame .Footer .Buttons button.Share {
        font-size: 1.2em;
        font-weight: normal;
        background-position: left center;
        padding-right: 0;
        line-height: 1.6em;
        padding-left: 1.8em;
        margin-right: 0.5em;
        color: #3a9ecb;
    }

    .MiniGame .Footer .Buttons button.Share.Facebook {
        background-image: url("image/button-share-fb.png");
    }

    .MiniGame .Footer .Buttons button.Share.GooglePlus {
        background-image: url("image/button-share-gp.png");
    }

    .MiniGame .Footer .Buttons button.Restart {
        background-image: url("image/button-restart.png");
    }

    .MiniGame .Footer .Results .Buttons .Submit {
        display: inline-block;
    }

    .MiniGame .Footer .Results .Buttons .Continue {
        display: none;
    }

    .MiniGame .Footer .Results.Replied .Buttons .Submit {
        display: none;
    }

    .MiniGame .Footer .Results.Replied .Buttons .Continue {
        display: inline-block;
    }

/*  ----------  PANEL  ----------  */

    .MiniGame .Panel {
        position: absolute;
        top: 9.2%;
        bottom: 0;
        left: 0;
        right: 0;
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
    }

    .MiniGame .Panel .Intro {
        padding: 1.5%;
        text-align: center;
        font-size: 1.2em;
        line-height: 1.2em;
        color: #3db9de;
    }

    .MiniGame .Panel .Inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 12.5%;
        padding: 0 1.5%;
        width: 100%;
        height: 87.5%;
    }

    .MiniGame .Panel .Align {
        position: relative;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .MiniGame .Panel .Inner > .ImageOverlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(232,232,232,0.8);
        z-index: 1;
    }

    .MiniGame .Panel .Inner > .ImageOverlay  .Image {
        position: absolute;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
    }

    .MiniGame .Panel .Inner > .ImageOverlay .HideImage {
        position: absolute;
        right: 0;
        top: 0;
        width: 1em;
        height: 1em;
        margin: 0.5em;
        cursor: pointer;
        background-image: url("image/hide-image.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .MiniGame .Panel .Inner > .ImageOverlay  .Image .Thumbnail {
        display: block;
        max-width: 100%;
        max-height: 100%;
        border: 0.15em solid #fff;
        box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.2);
        top: 50%;
        left: 50%;
        -moz-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        position: relative;
        overflow: visible;
    }

    .MiniGame .Panel .Inner > .ImageOverlay.Hidden {
        display: none;
    }

    .MiniGame .Panel .Inner .TypeText {
        display: none;
    }

    .MiniGame .Panel .Inner .Question {
        text-align: center;
        /*margin-bottom: 2em;*/
    }

    .MiniGame .Panel .Inner .Question .Text {
        font-size: 2em;
        color: #3db9de;
        line-height: 1.2em;
    }

    .MiniGame .Panel .Inner .Question sup,
    .MiniGame .Panel .Inner .Answers sup,
    .MiniGame .Panel .Inner .Pairs sup {
        vertical-align: super;
    }

    .MiniGame .Panel .Inner .Question sub,
    .MiniGame .Panel .Inner .Answers sub,
    .MiniGame .Panel .Inner .Pairs sub {
        vertical-align: sub;
    }

    .MiniGame .Panel .Inner .Question .Text .Placeholder {
        color: #21deb5;
        white-space: nowrap;
        font-weight: bold;
        padding: 0 0.2em;
    }

    .MiniGame .Panel .Inner .Question .Count {
        display: none;
    }

    .MiniGame .Panel .Inner .Information {
        text-align: center;
        font-size: 1.2em;
        line-height: 1.2em;
        margin-bottom: 1em;
    }

    .MiniGame .Panel .Inner .Explanation {
        color: #21deb5;
    }

    .MiniGame .Panel .Inner .ShowImage {
        color: #e46e4e;
        cursor: pointer;
    }

    .MiniGame .Panel .Inner .ShowImage .Image,
    .MiniGame .Panel .Inner .ShowImage .Text {
        display: inline-block;
        vertical-align: middle;
        height: 1.85em;
        line-height: 1.85em;
    }

    .MiniGame .Panel .Inner .ShowImage .Image {
        width: 1.7em;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        position: relative;
    }

    .MiniGame .Panel .Inner .ShowImage .Image:after {
        content: " ";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-image: url("image/picture-mask.png");
        background-position: left top;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .MiniGame .Panel .Inner .Answer {
        text-align: center;
    }

    .MiniGame .Panel .Inner .Answer input[type="text"] {
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        display: block;
        margin: 0 auto;
        width: 50%;
        font-size: 1.2em;
        height: 1.6em;
        padding: 0 0.5em;
        border: 0.08em solid rgba(33,222,181,0.6);
        border-radius: 0.1em;
        color: #3db9de;
        text-align: center;
    }

    .MiniGame .Panel .Inner .Answer input[type="text"]:focus {
        border: 0.08em solid rgba(33,222,181,1);
    }

    .MiniGame .Panel .Inner .Answers {
        text-align: center;
    }

    .MiniGame .Panel .Inner .Answers ul li {
        display: inline-table;
        width: 46%;
        text-align: center;
        border-radius: 0.3em;
        margin: 1%;
        cursor: pointer;
        padding: 0.5em;
        height: 4.9em;
        vertical-align: top;
        border: 0.15em solid #87d1e7;
        background-color: #3db9de;
        color: #fff;
    }

    .MiniGame .Panel .Inner .ui-sortable {
        /*position: relative;
        overflow-x: hidden;
        overflow-y: auto;*/
    }

    .MiniGame .Panel .Inner .Answers ul.Sortable li {
        cursor: move;
    }

    .MiniGame .Panel .Inner .Answers ul li.AnswerPlaceholder {
        background-color: transparent;
        border-style: dashed;
        opacity: 0.5;
    }

    .MiniGame .Panel .Inner .Answers ul li:hover {
        border: 0.15em solid #0084a6;
    }

    .MiniGame .Panel .Inner.Answered .Answers ul li:hover {
        cursor: auto;
        border: 0.15em solid #87d1e7;
    }

    .MiniGame .Panel .Inner .Answers ul li.Selected {
        border: 0.15em solid #62b1c7;
        background-color: #0084a6;
        color: #fff;
    }

    .MiniGame .Panel .Inner .Answers ul li.Incorrect {
        border: 0.15em solid #eba491 !important;
        background-color: #e46e4e;
        color: #fff;
    }

    .MiniGame .Panel .Inner .Answers ul li.Correct {
        border: 0.15em solid #73ebca !important;
        background-color: #1ce4ae;
        color: #fff;
    }

    .MiniGame .Panel .Inner .Answers ul li div {
        font-size: 1.5em;
        font-weight: bold;
        line-height: 1.2em;
        /*
        position: relative;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        */
        display: table-cell;
        vertical-align: middle;
    }

    .MiniGame .Panel .Inner .ResultMessage {
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        position: absolute;
        top: 0;
        right: 0;
        background-color: #fefefe;
        border: 0.15em solid #87d1e7;
        color: #e46e4e;
        font-weight: bold;

        border-radius: 0.3em;
        /*margin-top: -0.15em;
        margin-right: -0.3em;*/
        padding: 0.5em 1em;
        opacity: 0;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        transition: all 0.5s;
        margin: 0.5em;
        z-index: auto;
    }

    .MiniGame .Panel .Inner .ResultMessage.Visible {
        opacity: 1;
    }

    .MiniGame .Panel .Inner .ResultMessage div {
        line-height: 1.2em;
    }

    .MiniGame .Panel .Inner .ResultMessage .Correct {
         color: #1ce4ae;
    }

    .MiniGame .Panel .Inner .ResultMessage .Incorrect {
        color: #e46e4e;
    }

/*  ----------  RESULT  ----------  */

    .MiniGame.Result .Header .IconContainer {
        height: 1.85em;
        width: 1.65em;
        float: left;
        margin-right: 0.8em;
    }

    .MiniGame.Result .Header .Title {
        color: #fff;
        font-family: "PT Sans Narrow","Arial","Verdana";
        font-weight: bold;
        font-size: 1em;
        line-height: 1.2em;
    }

    .MiniGame.Result .Header .Title .Name {
        font-size: 1.2em;
    }

    .MiniGame.Result .Header .Title .Category {
        color: #bdefe7;
        white-space: nowrap;
    }

    .MiniGame.Result .Panel .Inner {
        padding: 0;
    }

    .MiniGame.Result .Panel .Inner .Result,
    .MiniGame.Result .Panel .Inner .Video,
    .MiniGame.Result .Panel .Inner .Stat,
    .MiniGame.Result .Panel .Inner .DemoText {
        width: 50%;
        height: 100%;
        float: left;
        padding: 0 1.5%;
    }

    .MiniGame.Result .Panel .Inner .Video .VideoCarousel,
    .MiniGame.Result .Panel .Inner .Video > .VideoContainer {
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        overflow: hidden;
        /*width: 28em;*/
        margin: 0 auto;
    }

    .MiniGame.Result .Panel .Inner .Video  .VideoCarousel .Videos {
        margin-bottom: 0.5em;
    }

    .MiniGame.Result .Panel .Inner .Video  .VideoCarousel .Videos li {
        /*
        width: 28em;
        height: 16em;
        */
        float: left;
    }

    .MiniGame.Result .Panel .Inner .Video  .VideoCarousel .Navigation a {
        display: block;
        font-size: 1em;
        color: #42b3e5;
        text-transform: uppercase;
        font-family: 'PT Sans Narrow';
        font-weight: bold;
        cursor: pointer;
        line-height: 1.2em;
    }

    .MiniGame.Result .Panel .Inner .Video  .VideoCarousel .JcarouselControl:after {
        display: none;
    }

    .MiniGame.Result .Panel .Inner .Video  .VideoCarousel .JcarouselControl {
        width: auto;
        height: auto;
        position: static;
        text-indent: 0;
        top: auto;
        z-index: auto;
        -moz-transform: none;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        padding: 0 0.8em;
        background-size: auto 100%;
    }

    .MiniGame.Result .Panel .Inner .Video  .VideoCarousel .JcarouselControl.Inactive {
        display: none;
    }

    .MiniGame.Result .Panel .Inner .Video  .VideoCarousel .Navigation .Prev {
        float: left;
        background-image: url("../../Global/image/carousel-control-arrow-prev.png");
        background-position: left center;
    }

    .MiniGame.Result .Panel .Inner .Video  .VideoCarousel .Navigation .Next {
        float: right;
        background-image: url("../../Global/image/carousel-control-arrow-next.png");
        background-position: right center;
    }

    .MiniGame.Result .Panel .Inner .Video .VideoContainer {
        width: 100%;
        padding-bottom: 56.25%;
        position: relative;
        background-color: #3db9de;
        border-radius: 0.2em;
        background-image: url("../../Global/image/video-container.png");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 40% auto;
    }

    .MiniGame.Result .Panel .Inner .Video .VideoContainer.ComingSoon {
        background-image: url("../../Global/image/video-container-coming-soon.png");
    }

    .MiniGame.Result .Panel .Inner .Video .VideoContainer:after {
        content: " ";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 5%;
        height: 0;
        padding-bottom: 5%;
        z-index: 0;
        -moz-transform: translate(-50%,-50%);
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        background-image: url("../../Global/image/preloader.gif");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .MiniGame.Result .Panel .Inner .Video .VideoContainer.ComingSoon:after {
        display: none;
    }

    .MiniGame.Result .Panel .Inner .Video .VideoContainer iframe {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 0.2em;
        z-index: 1;
    }

    .MiniGame.Result .Panel .Inner .Result .Align {
        /*padding: 0 25%;*/
    }

    .MiniGame.Result .Panel .Inner .Result .Icon {
        width: 7.5em;
        height: 8.2em;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        margin: 0 auto 0.5em auto;
    }

    .MiniGame.Result .Panel.Incorrect .Inner .Result .Icon {
        background-image: url("image/result-smiley-incorrect.png");
    }

    .MiniGame.Result .Panel.Correct .Inner .Result .Icon {
        background-image: url("image/result-smiley-correct.png");
    }

    .MiniGame.Result .Panel .Inner .Result .Points,
    .MiniGame.Result .Panel .Inner .Result .SplitPoints,
    .MiniGame.Result .Panel .Inner .Result .Accuracy {
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        text-align: center;
    }

    .MiniGame.Result .Panel .Inner .Result .Points,
    .MiniGame.Result .Panel .Inner .Result .Accuracy {
        font-weight: bold;
        font-size: 1.6em;
        line-height: 1.2em;
    }

    .MiniGame.Result .Panel .Inner .Result .Accuracy {
        font-weight: normal;
        margin-top: 0.5em;
    }


    .MiniGame.Result .Panel .Inner .Result .SplitPoints {
        font-size: 1em;
        line-height: 1.2em;
    }

    .MiniGame.Result .Panel .Inner .Result .Accuracy span,
    .MiniGame.Result .Panel .Inner .Result .SplitPoints span {
        font-weight: bold;
    }

    .MiniGame.Result .Panel.Incorrect .Inner .Result .Points,
    .MiniGame.Result .Panel.Incorrect .Inner .Result .SplitPoints,
    .MiniGame.Result .Panel.Incorrect .Inner .Result .Accuracy {
        color: #e76846;
    }

    .MiniGame.Result .Panel.Correct .Inner .Result .Points,
    .MiniGame.Result .Panel.Correct .Inner .Result .SplitPoints,
    .MiniGame.Result .Panel.Correct .Inner .Result .Accuracy {
        color: #21deb5;
    }

    .MiniGame.Result .Panel .Inner .Result .Points .Value,
    .MiniGame.Result .Panel .Inner .Result .Points .Accuracy {
        display: inline-block;
    }

    .MiniGame.Result .Panel .Inner .Result .Message {
        color: #3db9de;
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        text-align: center;
        font-weight: bold;
        font-size: 1.6em;
        line-height: 1.2em;
        padding: 0;
        margin-top: 0.5em;
    }

    .MiniGame.Result .Panel .Inner .DemoText {
        padding: 5%;
    }

    .MiniGame.Result .Panel .Inner .DemoText h2 {
        font-size: 1.6em;
        color: #3db9de;
        font-size: 2em;
        text-transform: none;
        line-height: 1.2em;
        margin-bottom: 1em;
    }

    .MiniGame.Result .Panel .Inner .DemoText p {
        color: #3db9de;
        font-size: 1em;
        line-height: 1.2em;
        margin: 1.2em 0;
        text-align: center;
    }

    .MiniGame.Result .Panel .Inner .DemoText .Buttons {
        text-align: center;
    }

    .MiniGame.Result .Panel .Inner .DemoText .Buttons .Button {
        border-radius: 0.1em;
        font-size: 1.2em;
        height: 1.8em;
        margin: 1%;
        min-width: 0;
        padding: 0 0.5em;
        width: 46%;
        line-height: 1.2em;
    }

    .MiniGame.Result .Panel .Footer .Buttons {
        float: none;
    }

    .MiniGame.Result .Panel.Correct .Footer .Buttons {
        text-align: left;
    }

    .MiniGame.Result .Panel.Correct .Footer .Buttons .Continue {
        float: right;
    }

    .MiniGame.Result .Panel .Inner .Stat .Data {
        display: table;
        width: 100%;
        font-size: 1.2em;
        font-family: 'PT Sans Narrow';
        line-height: 1.2em;
        margin: 0.5em 0;
    }

    .MiniGame.Result .Panel .Inner .Stat .Data .Label,
    .MiniGame.Result .Panel .Inner .Stat .Data .Value {
        display: table-cell;
    }

    .MiniGame.Result .Panel .Inner .Stat .Data .Label {
        color: #21deb5;
        text-align: left;
    }

    .MiniGame.Result .Panel .Inner .Stat .Data .Value {
        color: #3db9de;
        text-align: right;
        font-weight: bold;
    }