/*
 * Globals
 */

/* Links */
a,
a:focus,
a:hover {
    color: #fff;
}

/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
    color: #333;
    text-shadow: none; /* Prevent inheritence from `body` */
    background-color: #fff;
    border: 1px solid #fff;
}


/*
 * Base structure
 */

html,
body {
    height: 100%;
    background-color: #3fc380;
}
body {
    color: #fff;
    text-align: center;
    /* text-shadow: 0 1px 3px rgba(0,0,0,.5); */
}

/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
    display: table;
    width: 100%;
    height: 100%; /* For at least Firefox */
    min-height: 100%;
    -webkit-box-shadow: inset 0 0 50px rgba(0,0,0,.2);
            box-shadow: inset 0 0 50px rgba(0,0,0,.2);
}
.site-wrapper-inner {
    display: table-cell;
    vertical-align: top;
}
.cover-container {
    margin-right: auto;
    margin-left: auto;
}

/* Padding for spacing */
.inner {
    padding: 30px;
}


/*
 * Header
 */
.masthead-brand {
    margin-top: 10px;
    margin-bottom: 10px;
}

.masthead-nav > li {
    display: inline-block;
}
.masthead-nav > li + li {
    margin-left: 20px;
}
.masthead-nav > li > a {
    padding-right: 0;
    padding-left: 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff; /* IE8 proofing */
    color: rgba(255,255,255,.75);
    border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
    background-color: transparent;
    border-bottom-color: #a9a9a9;
    border-bottom-color: rgba(255,255,255,.25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
    color: #fff;
    border-bottom-color: #fff;
}

@media (min-width: 768px) {
    .masthead-brand {
      float: left;
    }
    .masthead-nav {
      float: right;
    }
}


/*
 * Cover
 */

.cover {
    padding: 0 20px;
}
.cover .btn-lg {
    padding: 10px 20px;
    font-weight: 500;
    /* margin: 0 10px; */
}


/*
 * Footer
 */

.mastfoot {
    color: #999; /* IE8 proofing */
    color: rgba(255,255,255,.5);
}


/*
 * Affix and center
 */

@media (min-width: 768px) {
    /* Pull out the header and footer */
    .masthead {
      top: 0;
      margin-bottom: 27px;
    }
    .mastfoot {
      bottom: 0;
    }
    /* Start the vertical centering */
    .site-wrapper-inner {
      vertical-align: middle;
    }
    /* Handle the widths */
    .masthead,
    .mastfoot,
    .cover-container {
      width: 100%; /* Must be percentage or pixels for horizontal alignment */
    }
}

@media (min-width: 992px) {
    .masthead,
    .mastfoot,
    .cover-container {
      width: 700px;
    }
}





.btn-block {
    width: auto;
    display: inline-block;
}




#stats, #audio_card .answer, #start_screen {
    display: none;
}

.card {
    background: #ffffff;

    min-height: 300px;
    border-radius: 5px;

    color: #000000;
    text-shadow: none;
    position: relative;
    padding: 29px 20px 29px 20px;
    min-height: 350px;
}

.card a, .card a:focus, .card a:hover {
    color: #333;
}



.card .digit {
    font-size: 63pt;
}
.card .word, .input_letter_by_letter .answer {
    font-size: 22pt;
}
.card .audio {
    background: url('/files/audio.png');
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 22px;
    left: 29px;
    cursor: pointer;
}

.card .btn {
    border: 2px solid #DADADA;
    margin-top: 30px;
}
.card .btn:hover {
    background: #F7F7F7;
}
.card .lead .btn {
    margin-top: 19px;
    margin-right: 15px;
}


    







.login form {
    max-width: 307px;
    margin: 0 auto;
}
.login form input {
    margin-bottom: 12px;
}
.login form .btn {
    margin-left: 0px;
    margin-top: 15px;
}

.login .btn.facebook-login {
    margin-bottom: 20px;
    background: #3B5998;
    color: #ffffff;
    max-width: 308px;
    width: 100%;
    border: none;
    margin-right: 0px;
}

.login form button.login {
    max-width: 308px;
    width: 100%;
}

.langs_list {
    text-align: left;
}

.langs_list .lang {
    border-top: 1px dashed #333;
    padding: 23px 0;
    display: inline-block;
    width: 100%;
}
.langs_list .lang:first-of-type {
    border-top: none;
    padding-top: 26px;
}

.langs_list .title {
    font-size: 26px;
}

.card.langs_list .btn {
    margin-top: 0px;
}
.langs_list div.lang .btn {
    float: right;
}

.langs_list .flag {
    width: 100px;
    height: 100px;
    background-size: auto 100px;
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    /*border: 1px solid #CAC9C9;*/
    float: left;
}

.lead .btn .flag {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
    float: left;
    background-size: auto 30px !important;
    background-position: 50% !important;
}


.langs_list .data {
    margin-left: 130px;
}



    
.training input {
    border-radius: 3px;
    border: 1px solid grey;
    text-align: center;
}




.training .wrong, .training .right {
    font-size: 22pt;
}
.training .wrong {
    color: #CF0404;
    text-decoration: line-through;
}
.training .right {
    color: #0D9A0D;
}





/* audio question */

.training .audio_question {
    background: url('/files/audio.png');
    background-size: 60px 60px;
    width: 60px;
    height: 60px;
    margin: 0 auto 20px auto;
    cursor: pointer;
}


/* text question */

.training .text_question {
    font-size: 21pt;
    margin-bottom: 20px;
}


/* input_the_whole */

.training .input_the_whole {
    /*width: 300px;  there is a dublicate of the number in main.js */
    height: 40px;
    font-size: 23.5px;
    margin: 0 auto;
}

@media all and (min-width:401px) {
    .training .input_the_whole .check_number {
        width: 95px;
    }
    .training .input_the_whole .check_language {
        width: 300px;
    }
}
/* tested on iphone 5 */
@media all and (min-width:0px) and (max-width: 400px) {
    .training .input_the_whole .check_number {
        width: 110px;
    }
    .training .input_the_whole .check_language {
        width: 100%;
    }
}


/* controls */

.controls .btn {
    margin-right: 15px;
}

.backspace {
    /* background: url('/files/backspace.png') no-repeat 50% !important; */

    background: 
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAqCAYAAAD4Uag9AAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAA6ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDUuNC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iPgogICAgICAgICA8eG1wOk1vZGlmeURhdGU+MjAxNi0wNi0xMFQxOTowNjo5NTwveG1wOk1vZGlmeURhdGU+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciAzLjU8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPHRpZmY6Q29tcHJlc3Npb24+NTwvdGlmZjpDb21wcmVzc2lvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPHRpZmY6WVJlc29sdXRpb24+NzI8L3RpZmY6WVJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOlhSZXNvbHV0aW9uPjcyPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+NTQ8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpDb2xvclNwYWNlPjE8L2V4aWY6Q29sb3JTcGFjZT4K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)
        no-repeat 50% !important;

    display: inline-block;
    background-size: 27px !important;
    margin-left: 1px;
    cursor: pointer;
    display: none;
}

.btn.repeat {
    /*background: url('/files/repeat.png') no-repeat 11px 50%;*/
    background: 
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAsCAMAAADy4QARAAAC5VBMVEUAAAAAAAD///8AAACAgIBVVVVAQECAgIBmZmZVVVVJSUltbW1gYGBVVVVmZmZdXV1iYmJbW1tVVVVmZmZgYGBaWlppaWljY2NhYWFZWVlgYGBcXFxiYmJeXl5YWFheXl5aWlpgYGBdXV1aWlpiYmJcXFxgYGBeXl5cXFxdXV1hYWFfX19gYGBeXl5eXl5cXFxhYWFfX19dXV1gYGBeXl5gYGBhYWFeXl5gYGBdXV1gYGBeXl5eXl5gYGBfX19dXV1cXFxgYGBiYmJdXV1fX19eXl5fX19eXl5eXl5dXV1fX19eXl5dXV1cXFxeXl5hYWFfX19eXl5gYGBfX19hYWFgYGBcXFxfX19eXl5gYGBfX19eXl5gYGBeXl5gYGBfX19fX19eXl5fX19gYGBfX19fX19eXl5eXl5eXl5gYGBfX19fX19fX19gYGBfX19fX19hYWFeXl5eXl5gYGBfX19eXl5fX19eXl5gYGBeXl5fX19fX19eXl5gYGBfX19eXl5fX19eXl5fX19fX19gYGBgYGBfX19fX19gYGBeXl5gYGBeXl5eXl5fX19gYGBeXl5fX19fX19fX19gYGBfX19gYGBfX19hYWFgYGBeXl5gYGBfX19gYGBeXl5fX19fX19gYGBfX19gYGBgYGBgYGBfX19fX19gYGBgYGBgYGBgYGBeXl5fX19fX19fX19gYGBfX19fX19gYGBfX19fX19eXl5fX19fX19fX19fX19iYmJgYGBeXl5hYWFfX19hYWFeXl5fX19gYGBgYGBfX19fX19gYGBfX19fX19fX19gYGBeXl5fX19fX19hYWFgYGBhYWFfX19gYGBfX19gYGBhYWFfX19gYGBhYWFfX19gYGBgYGBhYWFfX19gYGBhYWFfX19gYGBhYWFfX19gYGBhYWFfX19hYWFfX19gYGBhYWFgYGBfX19gYGBhYWFfX19gYGBhYWFiYmJjY2NkZGRlZWVmZmbpt9yLAAAA73RSTlMAAQECAgMEBAUGBwcICQoLDQ4PDxARERIVFxgZGhsdHh8gISIiJCUmJykqKy0uMTIyMzQ1Njg6PD0/QEFERUZHSEhJSktMTk9RUlNUVVZXV1laWltcXV5eX2BhYmJkZWZrbXFyc3Z3eHp6e3yBgoOEhIeNjY+QkZKSk5OUlZWXmJmam5ycnZ6fn6CgoqOjpKWmqaqqrKyurq+wsLGys7O0tbe3ub2+w8TFyMnLzM3S0tTV1dbX2Nna293d4OPj5OTm5+fo6erq6+zt7e7u7+/w8PHx8vLy9fX19vb39/j4+Pn5+fr6+vv7/Pz8/f7+/srFySoAAAMYSURBVHgBldJ5dJxTGMfxX0hom0QSTQ2tJa1a0tZCEUVrIVTVvoSqFqV2sahW7IJYVEtrr9prUYtGLWpvaiEkFMXUQjWIpr/neW75233Pm3Mymcz7Tubzz3vOnPud595zL9Ktt+2hV76wtK158axJOxajd0ac92yLqpAUteTi6XttiKxG3bPCBUknUbdmwZF9EGvrW1Zb55RAmJs+sRtiHPGOE1LMlr/6+O3XNsx/8VO1ILRvzyhAhIKL2pUUt/yBmsp+4S9Dx838KPyjm0qQUd8bTEhbcfkwpBp8QbORtIfKMk6qcyTtyZFIN2yeCelm90VPZxkpemkReupzfkeQ1aKHMUmhtE9BZqf+LZTfq5FmQKOROhVRpippi8rR3YVGWn0eouTNMtKdjW4qPhbqKwlEG7REqe9u1n2UI9vHIs4kI+00pCh9Q2lP5SNOyctKXZD6Ig8UUscj3pmO8tNwdLnEUd/sj3iVPwhtMhBI5AH5zyvtVkSpuP/pfYO7Xqh09fDya9+auwkGLRXaRES56j9rPRjAzS48/PqXmf47Ebv+KvynClEuXkf9uho4x6ivFaNgmon8XIV9lNKyPaIkHnPU1kNwilHe3yh/uv/8cjJwmP82bYlI5Y/47JsDxqpfNmCaUX6bAODwoNoC0TZ+1KjNd5Gy7A71k06Ct79SvtgGMcrnG0XoiY9qENjjL7Jtd8Qp85sM6cowwpDPhXY0YvWfZwzIyuMRKmxU2jWIV/agC6LksegU3J8uKkG8Up/pjylbOs7Ijv2QLZtjrUehy8AmoT2MbAr3rkSqekdZPRo52ikp1IWlyFGDI+0K5Ghwk1LWno4cnbhWKH9OQY7qHClal+FseQWIVHS3z2jPjUGa4fc1FCFS2dwg07Z7R6e8kg1GXv2Vs9tisqIZHUrS5KUZ43fZatPE5iMOqn1mlRNy3exiRKt5L1hDNVu17O0lH3ynZvTcl+f2Q4wh138fdJ6IitAT98ecHZDFztd9aE7DkqJmn8zcE70w8JgbGz9bYx5bXr9zQgV6q3BoVfUJk8eN2q4Ykf4HOGP99jNfs5EAAAAASUVORK5CYII=)
        no-repeat 11px 50% !important;

    display: inline-block;
    background-size: 23px !important;
    margin-left: 1px;
    cursor: pointer;
    padding-left: 40px;
}





/* input_letter_by_letter */

.input_letter_by_letter .answer, .card .hint {
    display: inline-block;
    margin-top: 23px;
}
.input_letter_by_letter input, .input_letter_by_letter .answer div, .input_letter_by_letter .hint div, 
.virtual_keyboard .hint div
{
    width: 40px;
    height: 40px;
    border-radius: 3px;
    border: 1px solid grey;
    float: left;
    margin-right: 8px;
    margin-bottom: 8px;
    font-size: 23.5px;
}
.input_letter_by_letter .answer div.correct {
    background: #8CE858;
    border: 1px solid #8CE858;
}
.input_letter_by_letter .hint, .input_letter_by_letter .answer, .text_question {
    margin-top: 20px;
}

.input_letter_by_letter .hint div, .virtual_keyboard .hint div {
    background: #96D9F5;
    border-color: #96D9f5;
    cursor: pointer;
    border: 0px;
}
.input_letter_by_letter input.text_to_number {
    width: 177px;
    padding-left: 7px;
}

/* virtual keyboard */
.virtual_keyboard {
    max-width: 432px;
    display: inline-block;
}






.streak {
    margin-top: 11px;
}
.streak > div, .streak div.days > div {
    float: left;
}
.streak .days {
    float: none;
    margin-left: 41px;
}
.streak .day {
    width: 30px;
    height: 30px;
    background: #F7F7F7;
    border: 1px solid #DADADA;
    border-radius: 50%;
    margin-right: 6px;

    /* for checkmark */
    font-size: 20px;
    line-height: 29px;
    text-align: center;
    color: #ffffff;
}
.streak .day.active {
    background: #3EBD3E;
}

.streak .total {
    font-size: 19px;
    line-height: 15px;
    width: 37px;
    text-align: center;
}
.streak .total div {
    font-size: 9px;
    line-height: 12px;
}



@media all and (max-width: 610px) {

    .card.langs_list .btn {
        margin-top: 20px;
    }

}

/* tested on iphone 5 */


@media all and (min-width:0px) and (max-width: 450px) {

    .streak .day {
        width: 20px;
        height: 20px;
        font-size: 13px;
        line-height: 20px;
        margin-right: 1px;
        margin-top: 6px;
    }

}



ul.keypoints {
    list-style: none;
    display: inline-block;
    margin-top: 10px;
    text-align: left;
}

ul.keypoints li {
    position: relative;
    padding-left: 1.5em;
    font-size: 17px;
    margin-bottom: 15px;
}

ul.keypoints li:before {
    position: absolute;
    display: block;
    content: '\2022'; /* bullet point, for screen readers */
    text-indent: -999999px; /* move the bullet point out of sight */
    left: -.75em;
    width: 1.5em; /* desired width of the image */
    height: 1.5em; /* unrelated to image height; this is so it gets snipped */
    background-repeat: no-repeat;
    background-image: url('/files/success.png');
    background-size: 1.5em;
    background-position: 0;
}



#save_progress {
    border: 2px solid #3fc380;
    color: #3fc380;
}

.save_progress_warning {
    padding-top: 27px;
    max-width: 300px;
    margin: 0 auto;
}