html,
body {
    /* Disabling text selection */
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select:   none; /* Chrome/Safari/Opera */
    -khtml-user-select:    none; /* Konqueror */
    -moz-user-select:      none; /* Firefox */
    -ms-user-select:       none; /* IE/Edge */
    user-select:           none; /* non-prefixed version, currently not supported by any browser */
    height: 100%;
}

body {
    cursor: default;
    background-color: black;
    font-family: 'Helvetica Neue LT Std BlkCn', Arial, sans-serif;
    font-weight: 900;
    font-size: 16px;
}

body.loading {
    cursor: wait;
}

@media only screen
AND (min-width  : 970px)
AND (min-height : 540px) {
    
    body {
        background-image: url(../img/bg-big.jpg);
        background-repeat: no-repeat;
        background-position: center center;
    }
    
}

body,
a {
    color: white;
}

a {
    text-decoration: none;
}

a img {
    border: 0;
}

audio {
    visibility: hidden;
    width:  1px;
    height: 1px;
}

.wrapper,
.wrapper-inside,
.page,
.bg-overlay {
    width:  960px;
    height: 540px;
}

.wrapper {
    display: none;
    overflow: hidden;
    position: absolute;
    background-color: #222;
}

body.loaded .wrapper {
    background-image: url(../img/bg.jpg);
}

.wrapper-inside {
    position: relative;
}

.page {
    display: none;
    position: absolute;
    top:  0;
    left: 0;
    padding: 100px;
}

.bg-overlay {
    display: none;
    z-index: 2;
    position: absolute;
    top:  0;
    left: 0;
}

body.loaded .bg-overlay {
    background-image: url(../img/bg-overlay.png);
}

.lenovo-intel-logos {
    position: absolute;
    bottom: 22px;
    left:   0;
    width:  403px;
    height: 339px;
    background-image: url(../img/lenovo-intel-graphics.png);
    background-repeat: no-repeat;
}

.page-splashscreen .splashscreen {
    position: absolute;
    top:  0;
    left: 0;
}

.page-splashscreen .logo-goodweird-battle {
    position: absolute;
    top:  195px;
    left: 100px;
}

.page-loader {
    background-image: url(../img/bg-loader.jpg);
}

.page-loader .loader {
    position: absolute;
    top:  245px;
    left: 200px;
    color: white;
}

.page-loader .loader,
.page-loader .loader .progress .value {
    display: block;
    width: 570px;
    height: 45px;
    padding-top: 10px;
    border: 2px solid white;
    font-size: 24px;
    text-align: center;
}

.page-loader .loader .progress {
    overflow: hidden;
    position: absolute;
    top:  0;
    left: 0;
    width: 0;
}

.page-loader .loader .progress .value {
    margin-top:  -2px;
    margin-left: -2px;
    background-color: white;
    color: black;
}

.page-startscreen {
    background-image: url(../img/bg-startscreen.jpg);
}

.page-startscreen .btn-go {
    display: block;
    position: absolute;
    top:  0px;
    left: 0px;
    width:  960px;
    height: 540px;
}

.your-stats {
    z-index: 1;
    position: absolute;
    top:  25px;
    left: 25px;
    width: 260px;
    height: 43px;
    font-weight: bold;
}

.your-stats-name {
    float: left;
    height: 43px;
    margin-right: 10px;
    background-color: #cb1b1a;
}

.your-stats-lives {
    cursor: help;
    position: absolute;
    top:   0;
    right: 0;
}

body.loaded .your-stats-lives .life {
    display: inline-block;
    width:  19px;
    height: 14px;
    background-image: url(../img/icon-heart.png);
    background-repeat: no-repeat;
}

.your-stats-frenzymeter {
    cursor: help;
}

.your-stats-frenzymeter .frenzy {
    display: inline-block;
    width:  33px;
    height: 19px;
    margin-top:    5px;
    margin-right: -1px;
}

body.loaded .your-stats-frenzymeter .frenzy {
    background-image: url(../img/frenzy-bar.jpg);
}

body.loaded .your-stats-frenzymeter .frenzy .active {
    display: none;
    width:  33px;
    height: 19px;
    background-image: url(../img/frenzy-bar-active.jpg);
}

.your-stats-frenzymeter .frenzy-5 {
    margin-right: 0;
}

.your-stats .frenzy-flare {
    display: none;
    position: absolute;
    top:  -45px;
    left: 104px;
}

.page-game .btn-give-up {
    cursor: pointer;
    z-index: 1;
    position: absolute;
    top:  80px;
    left: 25px;
    font-size: 26px;
}

.page-game .card {
    display: none;
    cursor: pointer !important;
    position: absolute;
}

.page-game .text-pick-a-card {
    position: absolute;
    top:  385px;
    left: 390px;
    font-size: 34px;
}

body.loaded .card-categories {
    display: none;
    z-index: 3;
    position: absolute;
    top:   70px;
    width:  715px;
    height: 402px;
    background-image: url(../img/card-frontside.jpg);
    font-size: 30px;
    color: #202020;
}

.card-categories small {
    display: block;
    margin-top: -5px;
    font-size: 16px;
}

.card-categories .card-title {
    position: absolute;
    top:  25px;
    left: 35px;
    width:  200px;
    height: 300px;
    font-family: 'Coalition', Arial, sans-serif;
    font-size: 16px;
    word-wrap: break-word;
    letter-spacing: 1px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    text-transform: lowercase;
    color: white;
}

.card-categories .card-image {
    position: absolute;
    top: 67px;
    left: 0px;
}

.card-categories .specs-power,
.card-categories .specs-goodweird,
.card-categories .specs-weight,
.card-categories .specs-height,
.card-categories .specs-stamina,
.card-categories .specs-coolness {
    cursor: pointer;
    width: 100%;
}

.card-categories .specs-power:hover,
.card-categories .specs-goodweird:hover,
.card-categories .specs-weight:hover,
.card-categories .specs-height:hover,
.card-categories .specs-stamina:hover,
.card-categories .specs-coolness:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

.card-categories .specs-power {
    position: absolute;
    top: 0px;
    height: 65px;
    background-position: 336px 0;
    background-repeat: no-repeat;
}

body.loaded .card-categories .specs-power.power-0 {
    background-image: url(../img/specs-power-0.png);
}
body.loaded .card-categories .specs-power.power-1 {
    background-image: url(../img/specs-power-1.png);
}
body.loaded .card-categories .specs-power.power-2 {
    background-image: url(../img/specs-power-2.png);
}
body.loaded .card-categories .specs-power.power-3 {
    background-image: url(../img/specs-power-3.png);
}
body.loaded .card-categories .specs-power.power-4 {
    background-image: url(../img/specs-power-4.png);
}
body.loaded .card-categories .specs-power.power-5 {
    background-image: url(../img/specs-power-5.png);
}
body.loaded .card-categories .specs-power.power-6 {
    background-image: url(../img/specs-power-6.png);
}

.card-categories .specs-goodweird {
    position: absolute;
    top: 68px;
    height: 66px;
    background-position: 440px 0;
    background-repeat: no-repeat;
}

body.loaded .card-categories .specs-goodweird.goodweird-0 {
    background-image: url(../img/specs-goodweird-0.png);
}
body.loaded .card-categories .specs-goodweird.goodweird-1 {
    background-image: url(../img/specs-goodweird-1.png);
}
body.loaded .card-categories .specs-goodweird.goodweird-2 {
    background-image: url(../img/specs-goodweird-2.png);
}
body.loaded .card-categories .specs-goodweird.goodweird-3 {
    background-image: url(../img/specs-goodweird-3.png);
}
body.loaded .card-categories .specs-goodweird.goodweird-4 {
    background-image: url(../img/specs-goodweird-4.png);
}

.card-categories .specs-weight {
    position: absolute;
    top: 155px;
    padding-left: 478px;
}

.card-categories .specs-height {
    position: absolute;
    top: 219px;
    padding-left: 457px;
}

.card-categories .specs-stamina {
    position: absolute;
    top: 287px;
    padding-left: 430px;
}

.card-categories .specs-coolness {
    position: absolute;
    top: 336px;
    height: 65px;
    background-position: 360px 0;
    background-repeat: no-repeat;
}

body.loaded .card-categories .specs-coolness.coolness-0 {
    background-image: url(../img/specs-coolness-0.png);
}
body.loaded .card-categories .specs-coolness.coolness-1 {
    background-image: url(../img/specs-coolness-1.png);
}
body.loaded .card-categories .specs-coolness.coolness-2 {
    background-image: url(../img/specs-coolness-2.png);
}
body.loaded .card-categories .specs-coolness.coolness-3 {
    background-image: url(../img/specs-coolness-3.png);
}
body.loaded .card-categories .specs-coolness.coolness-4 {
    background-image: url(../img/specs-coolness-4.png);
}
body.loaded .card-categories .specs-coolness.coolness-5 {
    background-image: url(../img/specs-coolness-5.png);
}
body.loaded .card-categories .specs-coolness.coolness-6 {
    background-image: url(../img/specs-coolness-6.png);
}

.card-categories-countdown {
    display: none;
    z-index: 3;
    position: absolute;
    left:   0;
    bottom: 0;
    overflow: hidden;
    width: 100%;
    height: 15px;
}

.card-categories-countdown .colors {
    width: 960px;
    height: 15px;
    background: white; /* Old browsers */
    background: -moz-linear-gradient(left, #e60000 0%, #ff9100 25%, #f6ff00 50%, #17ea08 75%, #1f9900 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #e60000 0%,#ff9100 25%,#f6ff00 50%,#17ea08 75%,#1f9900 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #e60000 0%,#ff9100 25%,#f6ff00 50%,#17ea08 75%,#1f9900 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e60000', endColorstr='#1f9900', GradientType=1 ); */ /* IE6-9 */
}

.card-categories-description {
    display: none;
    z-index: 3;
    position: absolute;
    top:  495px;
    left: 0;
    width: 100%;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
}

.battle-player-card-image,
.battle-ai-card-image {
    display: none;
    z-index: 4;
    position: absolute;
    top: -50px;
}

.battle-player-card-name,
.battle-ai-card-name {
    display: none;
    z-index: 4;
    position: absolute;
    bottom: 50px;
    width: 400px;
    font-family: 'Coalition', Arial, sans-serif;
    font-size: 20px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
    text-transform: lowercase;
}
.battle-ai-card-name {
    text-align: right;
}

.battle-player-card-spec,
.battle-ai-card-spec {
    display: none;
    z-index: 4;
    position: absolute;
    bottom: 0;
    width: 340px;
    height: 45px;
    padding-top: 13px;
    font-size: 20px;
    text-align: center;
    color: #202020;
}
.battle-player-card-spec {
    left: 0;
}
.battle-ai-card-spec {
    right: 0;
    padding-left: 25px;
}

.battle-player-card-spec small,
.battle-ai-card-spec small {
    display: none;
}

.battle-player-card-spec img {
    float: right;
    display: block;
}
.battle-ai-card-spec img {
    float: left;
    display: block;
}

body.loaded .battle-player-card-spec.specs-coolness {
    background-image: url(/img/spec-bar-coolness-left.png);
}
body.loaded .battle-player-card-spec.specs-goodweird {
    background-image: url(/img/spec-bar-goodweird-left.png);
}
body.loaded .battle-player-card-spec.specs-height {
    background-image: url(/img/spec-bar-height-left.png);
}
body.loaded .battle-player-card-spec.specs-power {
    background-image: url(/img/spec-bar-power-left.png);
}
body.loaded .battle-player-card-spec.specs-stamina {
    background-image: url(/img/spec-bar-stamina-left.png);
}
body.loaded .battle-player-card-spec.specs-weight {
    background-image: url(/img/spec-bar-weight-left.png);
}

body.loaded .battle-ai-card-spec.specs-coolness {
    background-image: url(/img/spec-bar-coolness-right.png);
}
body.loaded .battle-ai-card-spec.specs-goodweird {
    background-image: url(/img/spec-bar-goodweird-right.png);
}
body.loaded .battle-ai-card-spec.specs-height {
    background-image: url(/img/spec-bar-height-right.png);
}
body.loaded .battle-ai-card-spec.specs-power {
    background-image: url(/img/spec-bar-power-right.png);
}
body.loaded .battle-ai-card-spec.specs-stamina {
    background-image: url(/img/spec-bar-stamina-right.png);
}
body.loaded .battle-ai-card-spec.specs-weight {
    background-image: url(/img/spec-bar-weight-right.png);
}

.battle-title,
.battle-title-draw {
    display: none;
    z-index: 4;
    position: absolute;
    top:  200px;
    left: 0;
    width: 100%;
    font-family: 'Coalition', Arial, sans-serif;
    text-transform: lowercase;
    text-align: center;
}
.battle-title .small,
.battle-title-draw .small {
    font-size: 30px;
}
.battle-title .large {
    font-size: 115px;
}
.battle-title-draw .large {
    font-size: 130px;
    color: #e2231a;
}

.battle-winner-text,
.battle-winner-arms,
.battle-winner-image,
.battle-winner-name,
.battle-loser-arms {
    display: none;
    z-index: 4;
    position: absolute;
    font-family: 'Coalition', Arial, sans-serif;
    text-transform: lowercase;
    text-align: center;
}

.battle-winner-text {
    top:  50px;
    left: 0;
    width: 100%;
    font-size: 130px;
}

.battle-winner-arms {
    top: 50px;
    left: 0;
    width: 100%;
    text-align: center;
}

.battle-winner-image {
    top:  175px;
    left: 330px;
}

.battle-winner-name {
    top: 485px;
    left: 0;
    width: 100%;
    font-size: 24px;
}

.battle-loser-arms {
    top:  0;
    left: 0;
    width: 100%;
    text-align: center;
}

.ai-hand,
.player-hand {
    pointer-events: none;
    position: absolute;
}

.game-splash {
    display: none;
    z-index: 5;
    position: absolute;
    top:  0;
    left: 0;
}

.game-splash.battle-animation,
.game-splash.battle-animation img {
    display: none;
    z-index: 5;
    position: absolute;
    top:  0;
    left: 0;
}

body.loaded .page-gameover {
    background-image: url(../img/bg-overlay.png);
}

.page-gameover .left {
    float: left;
    width: 50%;
}

.page-gameover .score-text {
    font-family: 'Coalition', Arial, sans-serif;
    font-size: 26px;
}

.page-gameover .score-text .large {
    font-size: 48px;
}

.page-gameover .description {
    margin-top: 50px;
    line-height: 150%;
    font-family: Arial, sans-serif;
    font-weight: 100;
    font-size: 30px;
}

.page-gameover .form {
    float: right;
    width: 50%;
}

.page-gameover .form #register-name,
.page-gameover .form #register-email {
    display: block;
    width: 100%;
}

.page-gameover .form #register-name,
.page-gameover .form #register-email,
.page-gameover .form #register-phone {
    padding: 10px 20px;
    margin-bottom: 5px;
    border: 3px solid white;
    background-color: transparent;
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 200;
    color: white;
}

.page-gameover .form #register-email {
    margin-bottom: 15px;
}

.page-gameover .form #register-phone {
    float: right;
    width: 50%;
    margin-top: -1px;
    font-size: 16px;
}

.page-gameover .form .terms {
    margin: 15px 0;
    font-family: Arial, sans-serif;
    font-weight: 200;
    font-size: 26px;
}

.page-gameover .form .flag {
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
    filter: alpha(opacity=20);
    -moz-opacity:   0.2;
    -khtml-opacity: 0.2;
    opacity:        0.2;
}

.page-gameover .form .flag.selected {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity:   1;
    -khtml-opacity: 1;
    opacity:        1;
}

body.loaded .page-highscore {
    background-image: url(../img/bg-overlay.png);
}

.page-highscore h1 {
    font-family: 'Coalition', Arial, sans-serif;
    font-size: 50px;
}

.page-highscore .highscore {
    width: 525px;
    padding: 10px 20px;
    margin-bottom: 5px;
    border: 3px solid white;
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 200;
    color: white;
}

.page-highscore .highscore .score {
    font-weight: 700;
}

.page-highscore .highscore .name {
    font-size: 20px;
}

.page-highscore .btns {
    float: right;
    margin-top: 5px;
}

.page-highscore .btns .btn {
    display: block;
    margin-bottom: 40px;
}

body.loaded .checkbox {
    cursor: pointer;
    float: left;
    display: block;
    width:  29px;
    height: 29px;
    margin-right: 25px;
    background-image: url(/img/checkbox.png);
}
body.loaded .checkbox.checked {
    background-image: url(/img/checkbox-checked.png);
}

body.loaded .msg {
    display: none;
    z-index: 6;
    position: absolute;
    top:  185px;
    left: 330px;
    width:  299px;
    height: 169px;
    padding: 25px;
    background-image: url(/img/bg-message.png);
    text-align: center;
    color: white;
}

.msg .choices {
    position: absolute;
    bottom: 25px;
    left:   0;
    width: 100%;
}

.msg .choices a {
    display: inline-block;
    margin: 0 15px;
    border-bottom: 2px solid white;
}

.terms-and-conditions-page {
    -webkit-overflow-scrolling: touch;
    overflow: scroll;
    height: 515px;
    margin: 25px;
}

.terms-and-conditions-page h1 {
    margin-bottom: 25px;
    font-size: 30px;
}

.terms-and-conditions-page p {
    margin-bottom: 25px;
    font-family: Arial, sans-serif;
    font-weight: 200;
}

a,
.btn {
    cursor: pointer !important;
}

.btn.left {
    float: left;
}

.btn.right {
    float: right;
}

.clear {
    clear: both;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:   white;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:   white;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:   white;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:   white;
}
:placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
    color:   white;
}

/* Animations */
.floating {
    -webkit-animation-name: Floatingx;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floating;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}
@-webkit-keyframes Floatingx {
    from {-webkit-transform:translate(0, 0px);     }
    65%  {-webkit-transform:translate(-3px, 12px); }
    to   {-webkit-transform: translate(0, -0px);   }
}
@-moz-keyframes Floating {
    from {-moz-transform:translate(0, 0px);    }
    65%  {-moz-transform:translate(3px, 12px); }
    to   {-moz-transform: translate(0, -0px);  }
}

.wiggling {
    -ms-animation:     wiggle .6s infinite;
    -moz-animation:    wiggle .6s infinite;
    -webkit-animation: wiggle .6s infinite;
    animation:         wiggle .6s infinite;
}
@-ms-keyframes wiggle {
    0%   {-ms-transform: rotate(3deg);  }
    50%  {-ms-transform: rotate(-3deg); }
    100% {-ms-transform:rotate(3deg);   }
}
@-moz-keyframes wiggle {
    0%   {-moz-transform:rotate(3deg);  }
    50%  {-moz-transform:rotate(-3deg); }
    100% {-moz-transform:rotate(3deg);  }
}
@-webkit-keyframes wiggle {
    0%   {-webkit-transform:rotate(3deg);  }
    50%  {-webkit-transform:rotate(-3deg); }
    100% {-webkit-transform:rotate(3deg);  }
}
@keyframes wiggle{
    0%   {transform:rotate(3deg);  }
    50%  {transform:rotate(-3deg); }
    100% {transform:rotate(3deg);  }
}