/*  COMMON CSS START  */
.game-wrapper{width:100%; height: 100%; background: #1e272c; position:relative; overflow:hidden;}
.popup-container { width: 100%; height: 100%; position: absolute; top: 0; background: rgba(30, 39, 44, 1); z-index: 999; }
.popup-container h1{color:#fff; text-align:center; margin-top:10%; font-size:4em;}
.popup-container img { position: absolute; bottom: 0px; left: 0%; }
.popup-container span { font-weight: 100; width: auto; height: auto; padding: 13px 20px; color: #fdcb34; background: #09A465; background-image: -webkit-linear-gradient(top, #09A465, #088d57); background-image: -moz-linear-gradient(top, #09A465, #088d57); background-image: -ms-linear-gradient(top, #09A465, #088d57); background-image: -o-linear-gradient(top, #09A465, #088d57); background-image: linear-gradient(to bottom, #09A465, #088d57); border: 2px solid #09A465; border-radius: 5px; margin: 25% auto; display: inline; text-align: center; font-size: 2em; position: absolute; top: 5%; left: 43%; }
.popup-container span:hover { color: #09A465; background: #e8c35d; background-image: -webkit-linear-gradient(top, #e8c35d, #fdcb34); background-image: -moz-linear-gradient(top, #e8c35d, #fdcb34); background-image: -ms-linear-gradient(top, #e8c35d, #fdcb34); background-image: -o-linear-gradient(top, #e8c35d, #fdcb34); background-image: linear-gradient(to bottom, #e8c35d, #fdcb34); cursor: pointer; }
.header { display: block; margin-top: 0; width: 100%; }
.header h1{ font-size: 2em; text-align: center; margin: 30px 0; color:#fff;}
.container { width: 80%; height: auto; display: block; margin: 0px auto 0px auto; }
.navigation-arrows { height: auto; display: inline-block; width: 100%; }
.navigation-arrows a { background: #F1F1F1 none repeat scroll 0% 0%; border-radius: 4px; font-family: Arial; color: #333; font-size: 1.5em; padding: 7px 20px; text-decoration: none; width: auto; display: table; display: table; text-align: center; margin: 30px auto; }
.navigation-arrows a:hover { background: #d2af2a; background-image: -webkit-linear-gradient(top, #d2af2a, #8d7722); background-image: -moz-linear-gradient(top, #d2af2a, #8d7722); background-image: -ms-linear-gradient(top, #d2af2a, #8d7722); background-image: -o-linear-gradient(top, #d2af2a, #8d7722); background-image: linear-gradient(to bottom, #d2af2a, #8d7722); text-decoration: none; cursor: pointer; }
.playagain-navigation-arrows { height: auto; display: none; width: 100%; }
.playagain-navigation-arrows a { background: #F1F1F1 none repeat scroll 0% 0%; border-radius: 4px; font-family: Arial; color: #333; font-size: 0.7em; font-weight:normal; padding: 0px 20px; text-decoration: none; width: auto; display: table; display: table; text-align: center; margin: 30px auto; }
.playagain-navigation-arrows a:hover { background: #d2af2a; background-image: -webkit-linear-gradient(top, #d2af2a, #8d7722); background-image: -moz-linear-gradient(top, #d2af2a, #8d7722); background-image: -ms-linear-gradient(top, #d2af2a, #8d7722); background-image: -o-linear-gradient(top, #d2af2a, #8d7722); background-image: linear-gradient(to bottom, #d2af2a, #8d7722); text-decoration: none; cursor: pointer; }
div.common-scramble { display: none; }
div.common-scramble1 { display: block; }
.timer-and-ranking { height: auto; position: absolute; margin: 20px 0px; z-index: 1; top: 80px; left: 0px; right: 0px; }
.timer-section { width: auto; display: block; margin: 0 auto; }
#counter { width: auto; height: auto; padding: 13px 0px; color: #fff; display: block; text-align: center; border-radius: 25px; font-size: 2.5em; }
.ranking { width: auto; height: auto; margin: 30px auto; display: table; }
.ranking ul { list-style: none; margin: 0px; padding: 0px; }
.ranking ul li { float: left; opacity: 0.3; margin: 0 5px; width: 30px; height: 22px; background-color: #0aaa6b; border-radius: 15px; display: block; color: #09A465; padding: 6px 2px 5px 2px; text-decoration: none; text-align: center; }
.ranking ul li.star-success { opacity: 1; background: url(../images/correct-answer.png) no-repeat #0aaa6b; background-size: 60%; background-position: center center; color: #fff; font-size: 0px; }
.ranking ul li.star-failure { opacity: 1; background: url(../images/wrong-answer.png) no-repeat #f6cd2f; background-size: 60%; background-position: center center; color: #fff; font-size: 0px; }
.final-results { display: none; }
.common-scramble h2 { text-align: center; font-size: 32px; color: #fff; padding: 20px; font-weight: 100; line-height: 46px; font-weight: 100; }
.common-scramble h2.message-below-fifty, .common-scramble h2.message-above-fifty, .common-scramble h2.message-above-seventy{margin:0 0 0 0;}
.common-scramble h2 span.appreciation { font-weight: 100; color: #0AAA6B; }
.common-scramble h2 span { font-weight: bold; color: #0AAA6B; }
section.rating-and-navigations { width: 100%; height: auto; float: left; margin: 50px 0px; }
p.hint-words { color: #fff; text-align: center; }
p.hint-words span:first-child { color: #0aaa6b; }
div.some-divider { width: 300px; height: 1px; display: block; margin: 0 auto; background: #222; }
.timer { position: relative; font-size: 100px; width: 1em; height: 1em; margin: 0 auto; }
.timer > .percent { position: absolute; top: 1.05em; left: 0; width: 3.33em; font-size: 0.3em; text-align: center; }
.timer > #slice1 { position: absolute; width: 1em; height: 1em; clip: rect(0px,1em,1em,0.5em); }
.timer > #slice1.gt50 { clip: rect(auto, auto, auto, auto); }
.timer > #slice1 > .pie1 { border: 0.1em solid #0aaa6b; position: absolute; width: 0.8em; /* 1 - (2 * border width) */ height: 0.8em; /* 1 - (2 * border width) */ clip: rect(0em,0.5em,1em,0em); -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; }
.timer > #slice1 > .pie1.fill { -moz-transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; -o-transform: rotate(180deg) !important; transform: rotate(180deg) !important; }
.timer.fill > .percent { display: none; }
.timer.fill > #slice1 > .pie1 { border: transparent; background-color: #0aaa6b; width: 1em; height: 1em; }
/*  COMMON CSS END  */

/*  GAME CSS START  */
.embossTile { box-shadow: inset 0 2px 13px 0px rgba(255, 255, 255, 0.6), inset 0 -9px 10px -5px rgba(0, 0, 0, 0.9), 0 5px 10px -5px black; }
.noTouchy { -webkit-touch-callout: none; -moz-touch-callout: none; -o-touch-callout: none; -ms-touch-callout: none; touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#scramble-word10 h2{color:#fff !important; padding:0px;}
.share_icon_wrapper{display:inline; padding:0 20px 0 20px;}
.game-instruction-gif{position:absolute; bottom:0px; left:0px; z-index:000;}
span.success-message-after{font-weight:normal !important; color:#fff !important;}
span.success-send-cardbutton{padding: 3px 10px;background: #09A465 none repeat scroll 0% 0%;text-align: center;color: #FFF !important;font-weight: normal !important;margin: 20px 0px;display: inline-block;}
span.success-send-cardbutton:hover{ cursor:pointer;}
p.know-your-system-button{color:#fff; font-size:1.5em; text-align:center;}
@keyframes wobble {
 0% {
 -webkit-transform: translateX(0%);
 -moz-transform: translateX(0%);
 -o-transform: translateX(0%);
 -ms-transform: translateX(0%);
 transform: translateX(0%);
}
 50% {
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 -ms-transform: rotate(-3deg);
 transform: rotate(-3deg);
}
 100% {
 -webkit-transform: rotate(3deg);
 -moz-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 -ms-transform: rotate(3deg);
 transform: rotate(3deg);
}
}
@-moz-keyframes wobble {
 0% {
 -webkit-transform: translateX(0%);
 -moz-transform: translateX(0%);
 -o-transform: translateX(0%);
 -ms-transform: translateX(0%);
 transform: translateX(0%);
}
 50% {
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 -ms-transform: rotate(-3deg);
 transform: rotate(-3deg);
}
 100% {
 -webkit-transform: rotate(3deg);
 -moz-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 -ms-transform: rotate(3deg);
 transform: rotate(3deg);
}
}
@-webkit-keyframes wobble {
0% {
 -webkit-transform: translateX(0%);
 -moz-transform: translateX(0%);
 -o-transform: translateX(0%);
 -ms-transform: translateX(0%);
 transform: translateX(0%);
}
 50% {
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 -ms-transform: rotate(-3deg);
 transform: rotate(-3deg);
}
 100% {
 -webkit-transform: rotate(3deg);
 -moz-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 -ms-transform: rotate(3deg);
 transform: rotate(3deg);
}
}
@-ms-keyframes wobble {
0% {
 -webkit-transform: translateX(0%);
 -moz-transform: translateX(0%);
 -o-transform: translateX(0%);
 -ms-transform: translateX(0%);
 transform: translateX(0%);
}
 50% {
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 -ms-transform: rotate(-3deg);
 transform: rotate(-3deg);
}
 100% {
 -webkit-transform: rotate(3deg);
 -moz-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 -ms-transform: rotate(3deg);
 transform: rotate(3deg);
}
}
@-o-keyframes wobble {
0% {
 -webkit-transform: translateX(0%);
 -moz-transform: translateX(0%);
 -o-transform: translateX(0%);
 -ms-transform: translateX(0%);
 transform: translateX(0%);
}
 50% {
 -webkit-transform: rotate(-3deg);
 -moz-transform: rotate(-3deg);
 -o-transform: rotate(-3deg);
 -ms-transform: rotate(-3deg);
 transform: rotate(-3deg);
}
 100% {
 -webkit-transform: rotate(3deg);
 -moz-transform: rotate(3deg);
 -o-transform: rotate(3deg);
 -ms-transform: rotate(3deg);
 transform: rotate(3deg);
}
}

.scramble { margin: 30px auto; text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.scramble * { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.scramble .scrambled-letter { display: inline-block; margin: 0px; background: #0aaa6b none repeat scroll 0% 0%; color: #FFF; text-shadow: -1px -1px 3px #928C86; cursor: move; font-size: 2.2em; font-family: 'Roboto Slab', serif; border-radius: 14%; vertical-align: middle; z-index: 10; width: auto; height: auto; line-height: 1.2em; padding: 1px 10px; text-align: center;/*box-shadow: 0px 2px 5px 0px rgba(255, 255, 255, 0.6) inset, 0px -9px 1px -5px rgba(0, 0, 0, 0.9) inset, 0px 5px 1px -9px #000;*/
}
.scramble .scrambled-letter.invisible { opacity: 0; }
.scramble .scrambled-letter.drag-clone { cursor: move; position: absolute; pointer-events: none; z-index: 9999999; }
.scramble .scrambled-letter.drag-clone.snap-to-place { -webkit-transition: all 50ms ease; -moz-transition: all 50ms ease; -o-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; }
.scramble .spacer { display: inline-block; width: 20px; height: 92.5px; vertical-align: middle; }
.scramble.dragging .spacer { -webkit-transition: width 500ms ease; -moz-transition: width 500ms ease; -o-transition: width 500ms ease; -ms-transition: width 500ms ease; transition: width 500ms ease; width: 30px; }
.scramble.dragging .spacer.hover { width: 114px; }
.scramble.dragging .spacer.hover:before { content: "\25bc"; color: #928c86; position: relative; top: -12px; }
.scramble.dragging .scrambled-letter {-webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none;}
.scramble.dragging .drag-clone { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; }
.scramble.solved { /*background: #12e58f; border:2px solid #FC3;*/}

/*  GAME CSS END  */

/*  MEDIA CSS START  */
@media screen and (max-width:1440px) {
    #slides a.slidesjs-previous
    {
     left:10%;
    }
    #slides a.slidesjs-next
    {
     right:10%;
    }
}
@media screen and (max-width:1366px) {
    .popup-container img {
        width:27%;
    }
    .game-instruction-gif
    {
     width:27%;
    }
}
@media screen and (max-width: 1050px) {
    #slides a.slidesjs-previous
    {
     left:5%;
    }
    #slides a.slidesjs-next
    {
     right:5%;
    }
    .popup-container img {
        width:27%;
    }
    .game-instruction-gif
    {
     width:27%;
    }
    .main-menu li
    {
     padding:5px 0px;
    }
    .cont-container-asides:first-child
    {
     margin:20% 5% 0 0;
    }
    .cont-container-asides img{width:95%;}
}
/*  MEDIA CSS END  */