html {
    font-size: 16px;
    box-sizing: border-box;
}
body {
    margin: 0;
    background: #c7dff6;
    font-family: 'Helvetica Neue', 'Roboto', 'Segoe UI', sans-serif;
}
#hiddenText{
    opacity: -1;
    position: absolute;
    top: -200px;
    z-index: -999;
}
.container {
    max-width: 970px;
    min-width: 670px;
    min-height: 640px;
    margin: auto;
    background-repeat: no-repeat;
    background-position-x: center;
    font-size: 16px;
    position: relative;
    overflow: hidden;
}
.lesson-container{
	border-radius:0 0 6px 6px;
	margin: auto;
    background-repeat: no-repeat;
    background-position-x: center;
    font-size: 16px;
    position: relative;
    /*overflow: hidden; */
    height: 650px;
}
.fade-overlay{
	margin: auto;
    background-repeat: no-repeat;
    background-position-x: center;
    position: absolute;
    height: 598px;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 1000;
    top: 87px;
    width: 909px;
	display:none;
}
.level-intro{
	margin: auto;
    position: absolute;
    z-index: 1001;
    bottom: 115px;
    margin-left: 20px;
	display:none;
}
.intropopup{
	background: url('../assets/images/Lessons_TeacherSpeechBubble.png') no-repeat 0 0;
    z-index: 1001;
    width: 622px;
    height: 222px;
    margin-left: -11px;
    float: right;
    margin-bottom: 152px;
    /* margin-top: -42px; */
}
.intropopup .text-content {
     padding: 20px 30px;
    min-height: 142px;
}
.intropopup p{
	font: 18px latoregular;
    color: #3e3e3e;
    margin-bottom: 10px;
}
.teacherAvter{
	border: 4px; */
    width: 190px;
    height: 190px;
    z-index: 1001;
    /* margin-bottom: 25px; */
    float: left;
    margin-top: 152px;
}
.teacherAvter img{
	height:160px
}
button {
    background: white;
    border: 1px #99b7d1 solid;
    border-radius: 20px;
    padding: 10px 20px;
    color: #3578a7;
    box-shadow: 0em 0.05em 0.0625em 0.0625em rgba(0, 0, 0, 0.2);
    font-weight: bold;
    font-size: 14px;
    background: -webkit-radial-gradient(ellipse farthest-corner, #FFFFFF 40%, #DAE9F9 98%);
    background: radial-gradient(ellipse farthest-corner, #FFFFFF 40%, #DAE9F9 98%);
}
button:hover, button:focus {
    color: #214E6D;
    border: 2px solid #3578a7;
    outline: none;
}

/*Header Box*/
.header {
    width: 73%;
    min-height: 110px;
    background: white;
    background: -webkit-radial-gradient(ellipse farthest-corner, #FFFFFF 40%, #DAE9F9 98%);
    background: radial-gradient(ellipse farthest-corner, #FFFFFF 40%, #DAE9F9 98%);
    position: absolute;
    bottom: 79%;
    box-sizing: border-box;
    padding: 1.25rem;
    padding-left: 2.5rem;
    margin-left: 12%;
    border: 1px #B7B7B7 solid;
    border-radius: 20px;
    z-index: 6;
    box-shadow: 0em 0.05em 0.0625em 0.0625em rgba(0, 0, 0, 0.2);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-transition: all linear 0.25s;
    transition: all linear 0.25s;
    opacity: 1;
}
.header.ng-hide {
    opacity: 0;
}
.header:after {
    content: "";
    background: url('../assets/images/speech.svg') no-repeat;
    background-size: 100%;
    height: 60px;
    width: 86px;
    position: absolute;
    right: -10px;
    bottom: -56px;
    z-index: -1;
}
.header h1 {
    margin: 0;
    color: #81125e;
    font-family: 'Roboto Slab', serif;
    font-weight: 400;
    font-size: 1.3em;
    width: 100%;
    transition: 1s all;
}
.header h1 strong {
    font-weight: 700;
}
.arrow {
    width: 1em;
    height: 1em;
    padding: 0 5px;
    stroke: currentColor;
}
.prev .arrow {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
}
button .ng-scope {
    height: 1em;
}
.nav {
    position: absolute;
    bottom: -25px;
    min-width: 100px;
}
.next {
    right: 25px;
    padding-right: 5px;

}
.prev {
    left: 55px;
    padding-left: 5px;
    text-align: left;
}
@media (max-width: 800px) {
  .header h1 {
    font-size: 1.1em;
  }
}
/*Avatar*/
.avatar {
    position: absolute;
    bottom: 20%;
    right: 2%;
}
.avatar img{
    max-width: 100%;
    max-height: 400px;
}

/*Bottom nav*/
.navBar {
    height: 50px;
    background: #FFF;
    border: 1px #D0DDE6 solid;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 5;
}
/* .start-over {
    background: -webkit-radial-gradient(ellipse farthest-corner, #FFFFFF 40%, #DAE9F9 98%);
    background: radial-gradient(ellipse farthest-corner, #FFFFFF 40%, #DAE9F9 98%);
    background-image: url('../assets/images/icon_start_over.png');
    background-repeat: no-repeat;
    background-position: 10% center;
    padding: 5px 15px;
    padding-left: 30px;
} */
.navButtons {
    display:inline-block;
    width:60%;
}
.navButtons button {
    float: left;
    width: 25%;
    height: 30px;
    background: #bdcddd;
    color: #FFFFFF;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 1px 1px 2px gray;
    border: 1px solid #A0B1C1;
    border-radius: 0px;
    padding: 0px;
}
.navButtons .demo {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.navButtons .independent {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.navButtons .completed {
    background: #7293B5;
}
.navButtons .active {
    background: #66B609;
}
.navBar p {
    display:inline;
}
/*Score*/
.light-text {
    color: #6D6D6D;
}
.score {
    position: absolute;
    opacity: 1;
    top: 18%;
    border-radius: 20px;
    border: 25px solid #7f1255;
    background: #FFFFFF;
    left: 11%;
    width: 76%;
    height: 68%;
    z-index: 4;
    -webkit-transition: all linear 1s;
    transition: all linear 1s;
    box-sizing: border-box;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    color: #343434;
}
.score.ng-hide-animate {
    top: -100%;
}
.score:before {
    content: " ";
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
    border-radius: 20px;
}
.score h1 {
    margin: 70px 0px 30px;
    text-align: center;
    font-size: 1.8em;
}
.score-data {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 2%;
}
.medal {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
        -ms-flex: 2;
            flex: 2;
    text-align: center;
}
.score-desc-medal {
    -webkit-box-flex: 3;
    -webkit-flex: 3;
        -ms-flex: 3;
            flex: 3;
    font-size: 1.2em;
}
.score-desc-nomedal {
    -webkit-box-flex: 5;
    -webkit-flex: 5;
        -ms-flex: 5;
            flex: 5;
}
.stats {
    -webkit-box-flex: 2;
    -webkit-flex: 2;
        -ms-flex: 2;
            flex: 2;
}
.stats td {
    font-size: 1.3em;
}
.stats tr td {
    padding-bottom: 10px;
}
.stats tr:last-child td {
    padding-bottom: 0;
}
.stats .label {
    font-size: 1em;
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
}
.results {
    -webkit-box-flex: 4;
    -webkit-flex: 4;
        -ms-flex: 4;
            flex: 4;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    padding: 0px 20px;
}
.results div {
    width: 50%;
}
.results h2 {
    margin-top: 0;
    color: #406c99;
}
.results p {
    font-size: 2em;
    margin: 0;
}
.midlevel {
    margin-top: 50px;
}
.midlevel button {
    position: absolute;
    bottom: 5%;
    right: 10%;
}
p.score-desc-nomedal {
    font-size: 1.75em;
    font-weight: bold;
    text-align: center;
}
.qwertyCoins {
    background: #550d3f;
    width: 20%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 15%;
    position: absolute;
    bottom: 0;
    margin-left: 40%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
}
.qwertyCoins p {
    color: #ffffff;
    font-size: 2em;
    margin-left: 20px;
}
.try-again {
    font-size: 1.4em;
    font-weight: bold;
    position: absolute;
    bottom: 1%;
    left: 18%;
}
/*Screen Display*/
.screen {
    border: 3px solid #D4DFEA;
    background: #FFFFFF;
    border-radius: 17px;
    height: 315px;
    max-width: 66%;
    margin: auto;
    padding: 10px 40px;
    box-sizing: border-box;
    z-index: 1;
    position: relative;
    top: 4.6rem;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.screen:before {
    content: " ";
    position: absolute;
    z-index: -1;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border: 10px solid #9AB2C8;
    border-radius: 15px;
}

.screenKeys {
    position: relative;
    overflow: hidden;
    height: 90%;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    font-size: 2em;
    margin-top: 5%;
    color: #324E6A;
    fill: #324E6A; /*for svg symbols*/
} 
.screen-char {
    font-family: 'Source Code Pro', monospace;

}
/*.screenKeys::first-line {
    color: #324E6A;
    fill: #324E6A;
}*/
@-webkit-keyframes blink { 
   50% { border-color: white; } 
}
@keyframes blink { 
   50% { border-color: white; } 
}
.key-container {
    position: relative;
}
.symbol {
    height: .95em;
    width: .95em;
}
.screen-char .symbol {
    padding-right: 5px;
}
.tab-space {
    width: 1em;
}
.keyActive {
    border-bottom: 5px solid yellow;
    -webkit-animation: blink .25s step-end infinite alternate;
            animation: blink .25s step-end infinite alternate;
}

.screenKeys .wrongKey {
    color: red !important;
}
span.inactive,
span.no-key {
    color: #ccc !important;
    fill: #ccc !important;
}

/*Keyboard and Keys*/
.keyboard {
    font-size: 16px; /*sets scale for keyboard*/
    position: relative;
    top: -30px;
    top:4rem;
    width: 78%;
    margin: auto;
    padding: .5em;
/*    -webkit-perspective: 12.5em;  Chrome, Safari, Opera  
    perspective: 12.5em;*/
    z-index: 4;
    -webkit-transition: all 1s;
    transition: all 1s;
}
.base-cont {
    -webkit-perspective: 10.5em;
            perspective: 10.5em;
}
.keyboardBase {
    width: 104%;
    background: #D4DFEA;
    background: -webkit-linear-gradient(top, #D4DFEA, #FFF, #D4DFEA);
    background: linear-gradient(to bottom, #D4DFEA, #FFF, #D4DFEA);
    height: 240px;
    position: absolute;
    top: -15px;
    -webkit-transform: rotateX(15deg);
            transform: rotateX(15deg);
    border-radius: 20px;
    left: -2%;
}
.key {
    border: 0.0625em solid #5F5F5F;
    background: #FFFFFF;
    box-sizing: border-box;
    width: 5.3%;
    margin: .3%;
    height: 1.75em;
    border-radius: 0.3125em;
    box-shadow: 0em 0.125em 0.0625em 0.0625em rgba(0, 0, 0, 0.2);
    font-family: sans-serif;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-transform: rotateX(15deg);
            transform: rotateX(15deg);
}
.key p {
    color: #5F5F5F;
    margin: 0;
    font-size: 1.125em;
}
.timedScreen {
   /*  top: 18rem; */
}
.active p {
    color: #FFFFFF;
}
.two-levels p {
    font-size: 0.8125em;
    line-height: 1.05em;
}
.align-right.key {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
                -ms-grid-row-align: flex-end;
            align-items: flex-end;
}
.align-right.key p {
    margin-right: 0.125em;
}
.align-left.key {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
    -ms-grid-row-align: flex-end;
    align-items: flex-end;
}
.align-left.key p {
    margin-left: 0.125em;
    margin-bottom: 0.2em;
}
.row1, .row2, .row3, .row4, .row5 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin:auto;
    -webkit-perspective: 12.5em; /* Chrome, Safari, Opera  */
    perspective: 12.5em;
    margin-bottom: .1em;
    transform: rotateX(15deg);
    -moz-transform: rotateX(15deg);
    -webkit-transform: rotateX(15deg);
}
.row1 {
    min-height: 31.9375px;
}
.row2 {
    min-height: 33.25px;
}
.row3 {
    min-height: 37.9px;
}
.row4 {
    min-height: 38.6875px;
}
.row5 {
    min-height: 45.4844px;
}
.delete {
    width: 10%;
}
.delete p {
    font-size: 0.5625em;
    text-align: right;
    padding-right: 0.125em;
}
.row2 .key {
    width: 5.55%;
    margin: 0.4%;
    -webkit-transform: rotateX(15deg);
            transform: rotateX(15deg);
}
.tab.key {
    width: 8%;
}
.row3 .key {
    width: 5.9%;
    height: 2em;
    margin: .45%;
}
.caps.key {
    width: 10%;
}
.enter.key {
    width: 10%;
}
.row4 {
    width: 102%;
    position: relative;
    left: -1%;
}
.row4 .key {
    width: 6.2%;
    margin: .5%;
    height: 2em;
}
.key.shift {
    width: 12.5%;
}
.key.rightShift {
    width: 12.5%;
}
.row5 {
    width: 108%;
    position: relative;
    left: -4%;
}
.row5 .key {
    width: 9%;
    margin: .5%;
    height: 2.4em;
}
.space.key {
    width: 40%;
}

/*Fingers  --> Needs to be below the keyboard*/
.leftPinky, .leftShiftActive {
    background: #00da00;
}
.leftRing {
    background: #00d1cf;
}
.leftMiddle {
    background: #7d38ff;
}
.leftIndex {
    background: #e342d4;
}
.rightPinky, .rightShiftActive {
    background: #7bd700;
}
.rightRing {
    background: #ffd200;
}
.rightMiddle {
    background: #ff9700;
}
.rightIndex {
    background: blue;
}
.spaceActive {
    background: #f6ff00;
}

/*Hands*/

.left-hand, .right-hand  {
    position: absolute;
    z-index: 15;
    width: 45%;
    top: 39%;
	height: 159px;
    overflow: hidden;
}
.left-hand img, .right-hand img {
    width: 100%;
}
.left-hand {
    left: -2%;
}
.left-hand.keyb {
    left: 0%;
}
.left-hand.keyt {
    top: 27%;
    left: 0%;
}
.left-hand.key1, .left-hand.key2, .left-hand.key3, .left-hand.key4, .left-hand.key5 {
    top: 12%;
    left: -8%;
}
.left-hand.key4 {
    left: -9%;
}
.left-hand.key5 {
    left: -6%;
}
.right-hand.key8 {
    right: 9%;
    top: 7%;
}
.left-hand.keye, .left-hand.keyq, .left-hand.keyw, .left-hand.keyr, .left-hand.keyt, .left-hand.keytab {
    top: 27%;
}
.left-hand.keyleft.shift {
    left: -5%;
}
.right-hand {
    right: 3%;
}
.right-hand.key6, .right-hand.key7, .right-hand.key8, .right-hand.key9, .right-hand.key0, .right-hand.key-, .right-hand.keyequals, .right-hand.keybackspace {
    top: 12%;
    right: 8%;
}
.right-hand.key6, 
.right-hand.key7,
.right-hand.key8 {
    right: 11%;
}
.right-hand.key9 {
    top: 10%;
    right: 12%;
}
.right-hand.key0 {
    top: 8%;
    right: 10%;
}
.right-hand.key- {
    right: 9.5%;
    top: 8%;
}
.right-hand.keyequals {
    top: 10%;
}
.right-hand.keybackspace {
    right: 2%;
}
.right-hand.keyy, .right-hand.keyu, .right-hand.keyi, .right-hand.keyo, .right-hand.keyp, .right-hand.keyleftbracket, 
.right-hand.keyrightbracket { /*row2*/
    top: 27%;
    right: 6%;
}
.right-hand.keyy {
    right: 7.5%;
}
.right-hand.keyrightbracket {
    right: 3%;
}
.right-hand.keyenter {
    right: 3%;
}
.right-hand.keyright.shift {
    right: 4.5%;
    top: 38%;
}

/*
*		new css
*/

.game-section .bottom-nav{
	position: absolute;
	z-index:100;
	bottom: 0px;
}
.navBarHide{
	visibility: hidden;
}
div.avatar-small-head-bg{
    width: 41px;    
    height: 40px;
    display:inline-block;
    background: url(../images/avatar_popup_bg.png);
    background-size: 80px 60px;
    background-repeat: no-repeat;
    overflow: hidden;
    border-radius: 20px;
    -moz-border-radius: 20px;
    /*float: left;*/
    border: solid 2px #daebfb;
    position:relative;
}
#unlock-level-lesson
{
	top:50%;
    transform:translateY(-50%);
    -webkit-transform:translateY(-50%);
    -moz-transform:translateY(-50%);
    -ms-transform:translateY(-50%);
    -o-transform:translateY(-50%);
}