.game-container {
    height: 100vh;
    width: 133.33vh;
    background-color: #4a469c;
    position: fixed;
    margin-left: calc(50vw - 66.666vh);
    padding: 0;
    border: 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.game-container img {
    width: 100%;
    height: 100%;
    position: absolute;
}
.game-container img.team-builder-splash {
    width: 35%;
    height: auto;
    top: 4%;
    left: 3%;
}
/*
.game-container .loader {
    position: fixed;
    left: 50%;
    top: 50%;
}
*/
.game-container .selection-board {
    width: 61.111%;
    height: 65.4%;
    margin: 26% 0 0 19.5%;
}

.game-container .selection-story {
    position: absolute;
    width: 100%;
    text-align: center;
    margin: 65.535% 0 0 0%;
    font-size: 5.5vh;
    color: #fff;
    font-weight: 600;
}

    .game-container .story-display-info {
        background: #BDDF7C;
        width: 50%;
        margin-left: 25%;
        border-style: solid;
        border-width: 10px;
        border-radius: 15px;
        border-color: #99CA3C;
        font-size: 4vh;
        line-height: 1.1;
        box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
    }
    .game-container .tutorial-splash {
        width: 38.875%;
        height: 24%;
        margin: 5% 0 0 40.5625%;
    }
}

.game-container .team-builder-splash {
    width: 40%;
    height: 20.45%;
    margin: 2% 0 0 2%;
}
.team-builder-splash {
    width: 40%;
    height: 20.45%;
    margin: 2% 0 0 2%;
}
.game-container .done-button {
    width: 20%;
    height: 14.7%;
    margin: 0 0 0 80%;
}

.game-container .color-button {
    width: 9%;
    height: 8%;
    margin: 0 0 0 0;
}

.game-container .color-button.color-0 {
    margin: 24% 0 0 18%;
}

.game-container .color-button.color-1 {
    margin: 23.66% 0 0 29%;
}

.game-container .color-button.color-2 {
    margin: 23.33% 0 0 40%;
}

.game-container .color-button.color-3 {
    margin: 23% 0 0 51%;
}

.game-container .color-button.color-4 {
    margin: 30% 0 0 18%;
}

.game-container .color-button.color-5 {
    margin: 29.66% 0 0 29%;
}

.game-container .color-button.color-6 {
    margin: 29.33% 0 0 40%;
}

.game-container .color-button.color-7 {
    margin: 29% 0 0 51%;
}

.game-container .team-color-panel {
    width: 76.5%;
    height: 48.5%;
    margin: 17% 0 0 0%;
}

.game-container .team-color-selection {
    width: 10.84%;
    height: 19%;
    margin: 21.2% 0 0 65.8%;
}

.game-container .team-avatar-selection-button {
    width: 4.5%;
    height: 7.2%;
}

.game-container .team-avatar-selection-button.left-left {
    margin: 62.3% 0 0 41.5%;
}

.game-container .team-avatar-selection-button.left-right {
    margin: 63% 0 0 7.8%;
}

.game-container .team-avatar-selection-button.right-left {
    margin: 61.66% 0 0 89%;
}

.game-container .team-avatar-selection-button.right-right {
    margin: 62% 0 0 55.5%;
}

.game-container .team-avatar-selection-left-back {
    width: 41.55%;
    height: 34.6%;
    margin: 49.2% 0 0 5.8%;
}

.game-container .team-avatar-selection-left-avatar {
    width: 15%;
    height: 15.34%;
    margin: 59.1% 0 0 17.8%;
}

.game-container .team-avatar-selection-right-back {
    width: 41.55%;
    height: 34.6%;
    margin: 49.2% 0 0 53.8%
}

.game-container .team-avatar-selection-right-avatar {
    width: 16%;
    height: 16.34%;
    margin: 58% 0 0 66.5%;
}

.game-container .team-avatar-selection-name {
    width: 18%;
    height: 5%;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    font-size: 4vh;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    border-radius: 25px;
}

.game-container .team-avatar-selection-name.left {
    margin: 50.33% 0 0 17.8%;
}

.game-container .team-avatar-selection-name.right {
    margin: 50.33% 0 0 64.8%;
}

.game-container .world-blend-splash {
    width: 46.875%;
    height: 25%;
    margin: 5% 0 0 26.5625%;
}

.game-container .word-quest-splash {
    width: 46.875%;
    height: 27%;
    margin: 5% 0 0 26.5625%;
}

.game-container .letter-launch-splash {
    width: 46.875%;
    height: 26.88%;
    margin: 5% 0 0 26.5625%;
}

.game-container .password.password-panel {
    transition: all 0.3s ease;
    width: 33.33%;
    height: 16%;
    margin: 0 0 0 11%;
    position: absolute;
    transform: translateY(0vh);
    -ms-transform: translateY(0vh);
    z-index: 1;
}

.game-container .password.password-panel.left {
    margin: 0 0 0 18%;
}

.game-container .password.password-panel.obscured {
    transform: translateY(-20vh);
    -ms-transform: translateY(-20vh);
}

.game-container .bonus-meter {
    position: absolute;
    width: 17.78%;
    height: 13.66%;
    margin: 65% 0 0 41.11%;
}

.game-container .bonus-meter-meter {
/*    background-color: #4a469c; */
    position: absolute;
    width: 14.5%;
    height: 4%;
    margin: 66% 0 0 42.11%;
}

.game-container .bonus-meter-meter .numeric {
    color: #fff;
    text-align: center;
    font-weight: 600;
    font-size: 5vh;
}

.game-container .bonus-meter-meter .fill {
    background-color: #00853F;
    width: 0%;
    height: 100%;
}

.game-container .bonus-meter-particle {
    width: 5%;
    height: 5%;
    font-size: 5vh;
    color: #FFF;
}

.game-container .bonus-meter-particle.small {
    font-size: 4vh;
}

.game-container .bonus-meter-particle-container {
    margin: 67.5% 0 0 50%;
    position: absolute;
}

.game-container .time-is-up {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 5vh 0 0 0;
}

.game-container .half-time {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 0 0 0;
}

.game-container .congrats {
    position: absolute;
    width: 100%;
    height: 90%;
    margin: 10% 0 0 0;
    text-align: center;
    color: #fff;
    font-size: 13vh;
    font-weight: 600;
}

.game-container .password.password-input {
    width: 29%;
    height: 6%;
    line-height: 6%;
    margin: 4.5% 0 0 13%;
    position: absolute;
    border: 0 !important;
    font-size: 5vh;
    text-align: center;
    background-color: transparent;
    -webkit-appearance: none;
    outline: 0;
    z-index: 2;
}

.game-container .password.password-input.left {
    margin: 4.5% 0 0 20%;
}
.game-container .password.password-input.left.right-adjust {
    margin: 4.5% 0 0 20%;
}
/* BUTTONS */

    .game-container .button-1 {
        width: 32%;
        height: 14.25%;
        margin: 28.5% 0 0 33.8%;
    }

    .game-container .button-2 {
        width: 32%;
        height: 14.25%;
        margin: 39.5% 0 0 33.8%;
    }

    .game-container .button-3 {
        width: 32%;
        height: 14.25%;
        margin: 51.2% 0 0 33.8%;
    }

    .game-container .button-4 {
        width: 32%;
        height: 14.25%;
        margin: 28.1% 0 0 33.8%;
    }

    .game-container .button-5 {
        width: 32%;
        height: 14.25%;
        margin: 39.5% 0 0 33.8%;
    }

    .game-container .button-6 {
        width: 32%;
        height: 14.25%;
        margin: 51.3% 0 0 33.8%;
    }

.game-container .button-free {
    width: 32%;
    height: 9.74%;
    margin: 66% 0 0 76%;
}

.game-container .button-start {
    width: 35%;
    height: 24.7%;
    margin: 37.5% 0 0 32.5%;
}


    .game-container .button-begin {
        width: 26%;
        height: 15.7%;
        margin: 54.5% 0 0 35.5%;
    }
    .game-container .button-begin-storyQuest {
        width: 32%;
        height: 27.7%;
        margin: 66.5% 0 0 35.5%;
    }

.game-container .button-home {
    width: 6.2%;
    height: 8.2%;
    margin: 2.5% 0 0 2.5%;
    z-index: 1;
}

.game-container .button-tutor {
    width: 6.2%;
    height: 8.2%;
    margin: 2.5% 0 0 9.5%;
    z-index: 1;
}

.game-container .button-rewards {
    width: 6.2%;
    height: 8.2%;
    margin: 9.5% 0 0 2.5%;
    z-index: 1;
}

.game-container .button-help {
    width: 6.2%;
    height: 8.2%;
    margin: 2.5% 0 0 91.3%;
    z-index: 1;
}


/* INTRO */

.game-container .intro-board {
    width: 90%;
    height: 60%;
    margin: 30% 0 0 5%;
}

.game-container .intro-ready-reader {
    width: 15%;
    height: 12.45%;
    margin: 36.8% 0 0 5%;
    transform-origin: 45% 100%;
}

.game-container .intro-ready-coach {
    width: 17.3%;
    height: 12.45%;
    margin: 37% 0 0 76%;
    transform-origin: 55% 100%;
}

.game-container .intro-cloud {
    width: 16%;
    height: 3.2%;
}

.game-container .cloud-a {
    margin: 7% 0 0 76%;
}

.game-container .cloud-b {
    margin: 38% 0 0 82%;
}

.game-container .cloud-c {
    margin: 17% 0 0 6%;
}

.game-container .cloud-d {
    margin: 49% 0 0 1%;
}


/* INTRO AVATARS */

.game-container .intro-avatar-left {
    width: 17%;
    height: 17.36%;
    margin: 47.5% 0 0 6.0%;
}
    .game-container .avatar-name-right {
        width: 17%;
        height: 20px;
        margin: 58% 0 0 72%;
        position: absolute;
        text-align: center;
        font-size: 1.5vh;
        color: #fff;
        z-index: 1;
        -ms-transform: rotate(-1deg);
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }

    .game-container .avatar-name-left {
        width: 17%;
        height: 20px;
        margin: 58% 0 0 11%;
        position: absolute;
        text-align: center;
        font-size: 1.5vh;
        color: #fff;
        z-index: 1;
        -ms-transform: rotate(-1deg);
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
    }


.game-container .intro-avatar-right {
    width: 17%;
    height: 17.36%;
    margin: 47.1% 0 0 76.3%;
}


/* COUNTER */

.game-container .game-counter-board {
    height: 30%;
    width: 20%;
    position: absolute;
}

.game-container .game-counter-board.left {
    margin: 35% 0 0 10%;
}

.game-container .game-counter-board.right {
    margin: 35% 0 0 70%;
}

.game-container .game-counter-score {
    width: 100%;
    height: 40%;
    font-size: 12vh;
    line-height: 12vh;
    text-align: center;
    color: white;
    font-weight: 800;
    vertical-align: middle;
}

.game-container .game-counter-score.middle {
    height: 20%;
    font-size: 6vh;
    line-height: 6vh;
    font-weight: 600;
    color: #005CD2;
}

.game-container .game-counter-score.bottom {}

.game-container .counter-reader-left {}

.game-container .counter-coach-right {}


/* Misc */

.sparkle-star {
    color: white;
    display: none;
    width: initial !important;
    height: 60% !important;
    position: absolute !important;
}

.sparkle-star-a {
    margin-left: 6%;
}

.sparkle-star-b {
    margin-bottom: 6%;
    bottom: 0;
    right: 0;
}

.blinking-cursor {
  color: #FFFFFF;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}
.openResponse {
    position: absolute;
    top: 44%;
    left: 5%;
    width: 90%;
    height: 51%;
    overflow: hidden;
    background-color: #FFF;
    color: #222;
    font-weight: normal;
    font-size: 24px;
    resize: none;
    line-height: 40px;
    padding-left: 41px;
    padding-right: 10px;
    background-image: url(../webapp/games/power_reader/paper.jpg);
    background-repeat: repeat-y, repeat;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 0px 2px 14px #000;
    box-shadow: 0px 2px 14px #000;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}
.openResponse_storyQuest {
    position: absolute;
    top: 32%;
    left: 1%;
    width: 98% !important;
    height: 65% !important;
    overflow: hidden;
    background-color: #FFF;
    color: #222;
    font-weight: normal;
    font-size: 21px;
    resize: none;
    line-height: 28px;
    padding-left: 41px;
    padding-right: 8px;
    background-image: url(../webapp/games/power_reader/paper.jpg);
    background-repeat: repeat-y, repeat;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 0px 2px 14px #000;
    box-shadow: 0px 2px 14px #000;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}
.storyQuest_openResponse {
    position: absolute;
    margin-top: 40%;
    left: 13%;
    width: 77%;
    overflow: hidden;
    background-color: #FFF;
    color: #222;
    font-weight: normal;
    font-size: 4vh;
    resize: none;
    padding-left: 31px;
    padding-right: 10px;
    background-image: url(../webapp/games/power_reader/paper.jpg);
    background-repeat: repeat;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    -webkit-box-shadow: 0px 2px 14px #000;
    box-shadow: 0px 2px 14px #000;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
}
.readerTitle {
    text-align: center;
    font-size: 4vh;
    font-weight: 600;
}
.bonus-meter-override {
    position: absolute;
    background: transparent;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
}

.wcpmTargetMet {
    color: #00853f;
}
.save-answer-button {
    transition: 333ms ease-in margin;
    position: absolute;
    width: 17%;
    height: 17%;
    margin: 60.5% 42.5%;
    background: red;
}
.blinking-cursor.transparent {
    opacity: 0;
}
.readerMeter-Start2 {
    width: 26%;
    height: 23.7%;
    margin: 49.5% 0 0 35.5%;
}

video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-mute-button {
    display: none;
}
video::-webkit-media-controls-volume-slider {
    display: none;
}
video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
@keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

@-moz-keyframes blink {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

@-webkit-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

@-ms-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

@-o-keyframes "blink" {
  from, to {
    color: transparent;
  }
  50% {
    color: white;
  }
}

.shakeInput {
    animation: shake 0.5s;
    animation-iteration-count: 2;
}


@keyframes shakeInput {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}