.game-container {
    height: 100vh;
    width: 133.33vh;
    background-color: #063dc7;
    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-name-tag {
    height: 7vh !important;
    width: 10.5vh !important;
    right: 9%;
    top: 3.2%;
}
.game-name-tag-under {
    height: 7vh !important;
    width: 10.5vh !important;
    right: 1%;
    top: 11.2%;
}
.game-container img {
    width: 100%;
    height: 100%;
    position: absolute;
}


/*
.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: 12%;
    text-align: center;
    margin: 67.535% 0 0 45%;
    font-size: 5.5vh;
    color: #fff;
    font-weight: 600;
}

    .game-container .tutorial-splash {
        width: 29.875%;
        height: 23%;
        margin: 1% 0 0 34.5625%;
    }

.game-container .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: 66.3% 0 0 18.7%;
    }

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

    .game-container .team-avatar-selection-button.middle-left {
        margin: 66.3% 0 0 53%;
    }

    .game-container .team-avatar-selection-button.middle-right {
        margin: 66.3% 0 0 40.8%;
    }

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

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






/**/
.game-container .team-avatar-selection-left-back {
    width: 21.55%;
    height: 44.6%;
    margin: 45.2% 0 0 4.8%;
}
.game-container .team-avatar-selection-middle-back {
    width: 21.55%;
    height: 44.6%;
    margin: 45.2% 0 0 38.8%;
}
    .game-container .team-avatar-selection-right-back {
        width: 21.55%;
        height: 44.6%;
        margin: 45.2% 0 0 73%;
    }

/**/
.game-container .team-avatar-selection-left-avatar {
    width: 15%;
    height: 15.34%;
    margin: 52% 0 0 7.8%;
}
.game-container .team-avatar-selection-middle-avatar {
    width: 15%;
    height: 15.34%;
    margin: 52% 0 0 41.5%;
}
    .game-container .team-avatar-selection-right-avatar {
        width: 15%;
        height: 15.34%;
        margin: 52% 0 0 75.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: 46% 0 0 6.8%;
    }
.game-container .team-avatar-selection-name.middle {
    margin: 46% 0 0 39.8%;
}

    .game-container .team-avatar-selection-name.right {
        margin: 46% 0 0 74.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 .letter-quest-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: #063dc7; */
    position: absolute;
    width: 14.5%;
    height: 4%;
    margin: 66% 0 0 42.11%;
}

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

.game-container .bonus-meter-meter-triad {
    margin: 66% 0 0 34.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 .bonus-meter-particle-container.triad {
        margin:70.5% 0 0 42%;
    }
.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%;
}

/* BUTTONS */

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

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

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

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

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

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

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

.game-container .button-start {
    width: 35%;
    height: 24.7%;
    margin: 41.5% 0 0 32.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-exit {
        width: 6.2%;
        height: 8.2%;
        margin: 1.5% 0 0 92.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-board-mask {
    width: 90%;
    height: 60%;
    margin: 29% 0 0 5%;
}
    .game-container .intro-ready-reader {
        width: 15%;
        height: 12.45%;
        margin: 46.5% 0 0 5%;
        transform-origin: 45% 100%;
    }

    .game-container .intro-ready-coach {
        width: 17.3%;
        height: 12.45%;
        margin: 46.3% 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: 14%;
        height: 14.36%;
        margin: 57% 0 0 6.3%;
    }


.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: 2;
    -ms-transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
}
.game-container .avatar-name-middle {
    width: 17%;
    height: 20px;
    margin: 58% 0 0 54%;
    position: absolute;
    text-align: center;
    font-size: 1.5vh;
    color: #fff;
    z-index: 2;
    -ms-transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
}

.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: 2;
    -ms-transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
}
.game-container .avatar-name-right-triad {
    width: 17%;
    height: 20px;
    margin: 58% 0 0 76%;
    position: absolute;
    text-align: center;
    color: #fff;
    z-index: 2;
    -ms-transform: rotate(-1deg);
    -webkit-transform: rotate(-1deg);
    transform: rotate(-1deg);
}
    .game-container .intro-avatar-right {
        width: 14%;
        height: 14.36%;
        margin: 56.9% 0 0 78.3%;
    }
    .game-container .intro-avatar-right-triad-one {
        width: 14%;
        height: 14.36%;
        margin: 33.1% 0 0 77.3%;
    }
    .game-container .intro-avatar-right-triad-two {
        width: 14%;
        height: 14.36%;
        margin: 56.3% 0 0 78.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-board.triad-right {
    margin: 35% 0 0 75.5%;
}
.game-container .game-counter-board.triad-middle {
    margin: 35% 0 0 52.5%;
}

.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;
}

.blinking-cursor.transparent {
    opacity: 0;
}

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;
  }
}