*,
*:before,
*:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

button:active,
button:focus,
input:focus,
textarea:focus,
img:focus,
details > summary:focus {
    outline: none;
}

html {
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    color: #3c3c3c;
}

body {
    display: flex;
    width: 100vw;
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    font-size: 1.6rem;
}

.container {
    width: 96%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.flex-block {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

input,
textarea,
select,
button {
    border: 1px solid #cfd3db;
}

input[type='checkbox'],
input[type='radio'] {
    width: 1.2em;
    height: 1.2em;
    margin-right: .8em;
    position: relative;
    top: .2em;
}

input[type='submit'],
input[type='button'],
button {
    margin-top: 30px;
}

input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
    border: 1px solid #e9ecf3;
}

.btn {
    display: block;
    width: 100%;
    height: 40px;
    margin: 10px 0 0;
    font-size: 1.6rem;
    text-align: center;
    line-height: 40px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    border: 2px solid #f8af22;
    background: #ffffff;
    color: #f8af22;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

.btn:hover,
.btn:active {
    background: rgba(248, 175, 34, .5);
    color: #000;
}

.hidden-block {
    display: none;
}

.orange-bg-light {
    background: #f7bd4d;
    color: #3c3c3c;
}

.orange-text-light {
    color: #f7bd4d;
}

.orange-text-dark {
    color: #a87637;
}

summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;}
summary {
    display:inline-block;
    cursor: pointer;
    position: relative;
}

summary:before {
    right: -2em;
    top: .3em;
    color: transparent;
    background: url("data:image/svg+xml,%3Csvg height='34' viewBox='0 0 24 24' width='34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z'/%3E%3C/svg%3E") no-repeat 50% 50% / 1em 1em;
    width: 1em;
    height: 1em;
    content: "";
    position: absolute;
    transition: transform .5s;
}

details[open] > summary:before {
    transform: rotateZ(90deg);
}

details[open] summary ~ *{
    animation: sweep .5s ease-in-out;
}

@keyframes sweep {
    0%    {opacity: 0;}
    100%  {opacity: 1;}
}

summary:focus {
    outline:0;
    box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}

details{
    display:block;
    margin-bottom: .5rem;
}

h1 {
    font-size: 3.2rem;
}

h2 {
    font-size: 2.4rem;
}

h3 {
    font-size: 2rem;
}

h4 {
    font-size: 1.8rem;
}

h1, h2, h3, h4 {
    font-weight: 700;
    margin-bottom: 1em;
}

input,
textarea,
select,
label,
button {
    font-size: 1.6rem;
    color: #3c3c3c;
}

.field-group {
    margin-bottom: 10px;
    position: relative;
}

.field-group-text input {
    width: 100%;
    padding: 10px;
}

.pagination {
    list-style-type: none;
}

.pagination li {
    display: inline-block;
    margin-right: 1px;
}

.pagination li a {
    padding: 0 3px;
    text-decoration: none;
    line-height: 2rem;
    color: inherit;
}

.pagination li a:hover,
.pagination li a:active {
    background: rgba(248, 175, 34, .5);
}

.pagination li.active a {
    font-weight: 600;
    background: #f5af28;
    color: #ffffff;
}

header.header-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 3%;
    background: #f5f5f5;
    z-index: 100;
}

header .btn {
    width: 150px;
    height: 28px;
    margin: 15px auto 0;
    line-height: 25px;
    text-transform: none;
}

header .lang-form {
    text-align: center;
}

header .lang-form select {
    width: 150px;
    height: 28px;
    margin: 15px 0 0;
    padding: 0 5px;
    border: 1px solid #343a40;
    background: #343a40;
    color: #ffffff;
}

header .lang-form select:focus {
    border-radius: 0;
}

header.header-training {
    height: 35px;
    padding: 7px;
    background: #f5f5f5;
}

header.header-training a {
    font-size: 1.6rem;
    cursor: pointer;
    color: #3c3c3c;
}

.index-top-logo a {
    display: block;
    width: 178px;
    height: 48px;
    background: url('../i/logo.svg') no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

input[type='checkbox'].top-menu-checkbox {
    display: none;
}

label.label-top-menu-checkbox {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 459 459'%3E%3Cpath d='M0 383h459v-51H0v51zm0-128h459v-51H0v51zM0 77v51h459V77H0z' fill='%237a7a7a'/%3E%3C/svg%3E");
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    -webkit-transition: .6s;
    -moz-transition: .6s;
    -ms-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
}

.top-menu-body {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: .6s;
    -moz-transition: .6s;
    -ms-transition: .6s;
    -o-transition: .6s;
    transition: .6s;
}

.top-menu-body ul {
    margin-top: 20px;
    list-style-type: none;
    text-align: center;
    flex-direction: column;
}

.top-menu-body ul li a {
    display: block;
    padding: 8px 0;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: none;
    color: rgba(0, 0, 0, .5);
}

.top-menu-body ul:last-child li a {
    padding: 0;
    font-size: 1.4rem;
    font-weight: 400;
}

.top-menu-checkbox:checked + label {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 459 459'%3E%3Cpath d='M0 383h459v-51H0v51zm0-128h459v-51H0v51zM0 77v51h459V77H0z' fill='%23f8af22'/%3E%3C/svg%3E");
}

.top-menu-checkbox:checked ~ .top-menu-body {
    max-height: 500px;
}

main {
    height: calc(100vh - 148px);
    margin-top: 78px;
}

main.login-page {
    background: url("../i/bg-1.png") no-repeat center;
    background-size: 100% auto;
}

main.faq-page {
    background: url("../i/bg-numbers.png");
    background-size: 100%;
}

main.practice-index,
main.training-page {
    height: calc(100vh - 35px);
    margin: 0;
}

.btn-body {
    width: 100%;
    height: 160px;
    padding: 0 3%;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
}

.btn-body a {
    width: 200px;
    line-height: 40px;
}

.index-bg {
    width: 100%;
    height: calc(100% - 160px);
    background: url('../i/bg-logo-600.png') no-repeat center;
    background-size: contain;
}

.btn-body a {
    text-decoration: none;
}

.form-login,
.form-guest {
    width: 300px;
    margin: auto;
    position: relative;
}

.error-info {
    position: absolute;
    top: -4.4rem;
    padding: 5px;
    font-size: smaller;
    text-align: center;
    color: #a52a2a;
    background: #f2dfdf;
    z-index: 150;
}

.no-fixed-page.faq-page {
    height: auto;
    padding-top: 50px;
}

.no-fixed-page.faq-page .container > a:first-child {
    position: relative;
    color: #5a43aa;
}

main.job-level,
main.practice-page {
    padding: 30px 0;
}

main.no-fixed-page {
    /* height: auto; */
    min-height: calc(100vh - 35px);
}

.job-level .btn,
.training-page .btn,
.practice-page .btn {
    width: 250px;
    margin: auto;
}

.job-level > .container > .flex-block {
    height: 100%;
    align-content: center;
}

.job-level .btn,
.practice-index .btn {
    margin-bottom: 25px;
}

.training-page .training-index .btn {
    margin-bottom: 15px;
    letter-spacing: normal;
    text-transform: none;
}

.practice-index .btn {
    width: 140px;
    height: 140px;
    padding-top: 120px;
    position: relative;
    font-size: 1.3rem;
    line-height: 1em;
    text-transform: none;
    letter-spacing: normal;
}

.practice-index .btn::before {
    content: '';
    display: block;
    width: 110px;
    height: 110px;
    position: absolute;
    top: 7px;
    left: 13px;
}

.practice-index .btn.schulte::before,
.training-page .container.flex-block > .training-index ul li.schulte::before {
    background: url("../i/schulte.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.search-letter::before,
.training-page .container.flex-block > .training-index ul li.letter-search::before {
    background: url("../i/letter-search.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.search-digit::before,
.training-page .container.flex-block > .training-index ul li.digital-search::before{
    background: url("../i/digital-search.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.even-odd::before,
.training-page .container.flex-block > .training-index ul li.even-odd::before{
    background: url("../i/even-odd.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.remember-number::before,
.training-page .container.flex-block > .training-index ul li.remember-number::before{
    background: url("../i/remember-number.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.running-words::before,
.training-page .container.flex-block > .training-index ul li.running-words::before {
    background: url("../i/running-words.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.word-search::before,
.training-page .container.flex-block > .training-index ul li.word-search::before {
    background: url("../i/word-search.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.words-twins::before,
.training-page .container.flex-block > .training-index ul li.words-twins::before {
    background: url("../i/words-twins.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.field-view::before,
.training-page .container.flex-block > .training-index ul li.field-view::before {
    background: url("../i/field-view.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.central-point::before,
.training-page .container.flex-block > .training-index ul li.central-point::before {
    background: url("../i/central-point.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.chain-words::before,
.training-page .container.flex-block > .training-index ul li.chain-words::before {
    background: url("../i/chain-words.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.reading-grade::before,
.training-page .container.flex-block > .training-index ul li.reading-grade::before {
    background: url("../i/reading-grade.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.reading-accelerator::before,
.training-page .container.flex-block > .training-index ul li.reading-accelerator::before {
    background: url("../i/reading-accelerator.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.text-search::before,
.training-page .container.flex-block > .training-index ul li.text-search::before {
    background: url("../i/text-search.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.stroop::before,
.training-page .container.flex-block > .training-index ul li.stroop-search::before {
    background: url("../i/stroop.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.practice-index .btn.remember-words::before,
.training-page .container.flex-block > .training-index ul li.remember-words::before {
    background: url("../i/remember-words.png"), rgba( 255, 255, 255, .4) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

.training-basic,
.training-basic.practice-page,
.training-basic.training-page {
    height: calc(100vh - 35px);
    margin: 0;
    padding: 0 0 15px;
    overflow: hidden;
    background: white;
}

.training-basic.practice-page > .container {
    height: calc(100% - 45px);
}

.training-basic.practice-page.remember-words > .container {
    height: 100%;
}

.training-basic.practice-page.center-point > .container {
    height: 100%;
}

.training-basic .setting-wrapper {
    height: 50px;
    padding: 15px 0 10px;
    text-align: center;
    background: #f5f5f5;
}

.training-basic .setting-wrapper select {
    font-size: 1.6rem;
    border: 0;
    background: none;
}

.training-basic .setting-wrapper select.setting-title {
    width: 180px;
    font-size: 1.8rem;
}

.training-basic .setting-wrapper select.setting-speed {
    width: 40px;
}

.training-basic .setting-wrapper .lbl-setting {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
}

.training-basic .setting-wrapper .lbl-setting-time {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 47' fill='%23a87637'%3E%3Cpath d='M46.01 19.55h-2.93A21.76 21.76 0 0021.73 1.77 21.75 21.75 0 000 23.5a21.75 21.75 0 0021.73 21.73 21.8 21.8 0 0018.81-10.86c1.27-2.76-2.15-4.03-3.42-1.98A17.8 17.8 0 013.95 23.5 17.8 17.8 0 0121.73 5.73a17.8 17.8 0 0117.31 13.82h-2.9c-.89.09-1.24 1.02-.76 1.62l4.94 5.93c.43.46 1.14.43 1.51 0l4.94-5.93c.5-.74.01-1.6-.76-1.62z'/%3E%3Cpath d='M19.75 8.69v11.98a3.45 3.45 0 003.43 5.96l6.87 3.96c2.58 1.1 4.09-2.12 1.98-3.42l-6.88-3.97a3.44 3.44 0 00-1.45-2.53V8.7c-.03-2.83-3.96-2.9-3.95 0zm1.98 16.3a1.48 1.48 0 110-2.97 1.48 1.48 0 010 2.96z'/%3E%3C/svg%3E") no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
}

.training-basic .setting-wrapper .lbl-setting-level {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 293.7 293.7'%3E%3Cpath d='M26.9 240c-7 0-12.5 5.6-12.5 12.5v28.7a12.5 12.5 0 0025 0v-28.7c0-6.9-5.6-12.5-12.5-12.5zM86.8 180c-6.9 0-12.5 5.6-12.5 12.5v88.7a12.5 12.5 0 0025 0v-88.7c0-6.9-5.5-12.5-12.5-12.5zM146.8 120c-6.9 0-12.5 5.6-12.5 12.5v148.7a12.5 12.5 0 0025 0V132.5c0-6.9-5.5-12.5-12.5-12.5zM206.8 60c-6.9 0-12.5 5.6-12.5 12.5v208.7a12.5 12.5 0 0025 0V72.5c0-6.9-5.5-12.5-12.5-12.5zM266.9 0c-7 0-12.5 5.6-12.5 12.5v268.7a12.5 12.5 0 0025 0V12.5c0-6.9-5.6-12.5-12.5-12.5z' fill='%23a87637'/%3E%3C/svg%3E") no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
}

.training-basic .setting-wrapper .lbl-setting-symbol {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: text-bottom;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 198.8 198.8'%3E%3Cpath d='M25.6 142.1a17.7 17.7 0 100 35.4 17.7 17.7 0 000-35.4zM165.9 2a33 33 0 100 66 33 33 0 000-66zM182 98.5l-15.5.2c3 58.1-13.9 57.1-57.7 60.8v-23l-37.6 32.4 37.6 29.3v-23c55.3-1.8 76.6-14 73.3-76.7zM73.6 39.3v23L111.2 30 73.6.6v23C16.9 25.2-2.7 40 .3 100.4l15.6-.1c-1.6-52.2 6.8-57.7 57.7-61z' fill='%23a87637'/%3E%3C/svg%3E") no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
}

.training-basic .setting-wrapper .lbl-setting.speed {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 950 950' fill='%23a87637'%3E%3Cpath d='M949.9 741.3l-.2-6.2-.3-6.3v-2.5l-.1-1.8v-.4l-.2-2.6-.8-10.5-.2-2.6-.4-3.5-.6-6.8-.7-6.8-.3-3.4-.4-3c-1.2-8.3-2.2-16.4-3.6-24.2l-2-11.5-2.3-10.9c-1.4-7-3.2-13.7-4.7-19.8L932 614l-1.2-4.3-2.2-7.9-2-6.8-1.9-5.9-2-6.4a5 5 0 00-6-3.2L756 625.2a5 5 0 00-3.5 5.7c5.7 56.3 7.2 112-4.6 156.4h196.4a5 5 0 005-4.7c0-3.7.3-7.4.4-11.3l.3-11.7v-12.1l-.1-6.2zM898.8 535.1a5 5 0 002.6-6.7c-28.6-71.6-89.3-144.6-156.4-196.1a5 5 0 00-6.8.7L652 437.4a5 5 0 00.3 6.6c42.4 40.7 70.6 92.4 90.5 148.2a5 5 0 006.5 3zM480.4 352.3L534.8 241c-24.2-4.1-48.4-6-73-6.2a5 5 0 00-5 4.7l-5 103.6a5 5 0 004.3 5.1c8.2 1 16.9 2.6 24.3 4.1zM621.3 417a5 5 0 007-1.3l71-108.2a5 5 0 00-1.6-7 485.2 485.2 0 00-71.1-34.4l-30.7 133a402 402 0 0125.4 17.8zM413.4 345.2a5 5 0 005-5.2l-6.5-97.6a5 5 0 00-5.5-4.6C321.7 249.1 257 275 186.5 325.1a5 5 0 00-1.1 6.8l40.5 59.5a5 5 0 006.5 1.6c53.5-31.9 123.9-50 181-47.8zM23.7 551.7a5 5 0 002.9 6.2l37.7 14.4a5 5 0 006.2-2.4A394 394 0 01195 417.4a5 5 0 00.7-7.2L152.8 360a5 5 0 00-7.2-.3 472.8 472.8 0 00-122 192.1zM10.2 601.6c-12.7 65.3-13.5 123.8-2.6 181 .6 2.6 2.8 4.7 5 4.7h13.2a5 5 0 005-5.2c-5.5-49.7 4-119 22.2-169.1a5 5 0 00-3.4-6.3l-33.3-8.9a5 5 0 00-6.1 3.8zM495.8 722.6l125.4-544.4c.6-16.4-17.5-20.4-23.7-8.4L352 671.7c-43.3 99.7 108.1 165 143.7 50.9zm-72-56.8a37.6 37.6 0 110 75.2 37.6 37.6 0 010-75.2z'/%3E%3C/svg%3E") no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
}

.training-basic .setting-wrapper .practice-info {
    width: 20px;
    height: 20px;
    margin-top: 0;
    border: none;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.6 23.6'%3E%3Cpath d='M11.8 0a11.8 11.8 0 100 23.6 11.8 11.8 0 000-23.6zm2.5 18.3c-2.1.8-4.8 1.4-5-1.2l.1-1.4.8-2.7c0-.6.5-1.6 0-2-.6-.4-1.3-.2-2 0l.3-.8c1.8-1 4.9-1.2 5 1.2 0 .4 0 1-.2 1.4l-1 3.4c-.4 2 1.1 1.7 2.2 1.3zM12.9 8c-1 0-1.8-.7-1.9-1.7.1-1 1-1.6 1.9-1.7 1 .1 1.8.8 1.8 1.7-.1 1-1 1.7-1.8 1.7z' fill='%23a87637'/%3E%3C/svg%3E") no-repeat;
    -webkit-background-size: 100%;
    background-size: 100%;
}

.training-basic .timeline {
    position: relative;
    height: 3px;
    left: 100%;
    background-color: #f5af28;
    -webkit-transition-property: left;
       -moz-transition-property: left;
        -ms-transition-property: left;
         -o-transition-property: left;
            transition-property: left;
    -webkit-transition-timing-function: linear;
       -moz-transition-timing-function: linear;
        -ms-transition-timing-function: linear;
         -o-transition-timing-function: linear;
            transition-timing-function: linear;
}

.training-basic .timeline.active {
    left: 0;
}

.training-basic .container > .flex-block {
    height: 100%;
    position: relative;
}

.training-basic.remember-words .container > .flex-block {
    overflow-y: auto;
}

.training-basic .container > .flex-block > div {
    display: none;
}

.training-basic .container > .flex-block > div.active {
    display: flex;
    flex-direction: column;
}

.training-basic .container > .flex-block .start-btn-wrapper {
    width: 100%;
}

.training-basic .container > .flex-block .start-btn-wrapper button {
    margin: auto;
}

.training-basic .container > .flex-block .practice-wrapper {
    width: 100%;
}

.training-basic .container > .flex-block .practice-wrapper.remember-words {
    flex-direction: row;
}

.training-basic .container > .flex-block .practice-wrapper > div:first-child {
    width: 100%;
    padding: 5px 0 0;
    position: relative;
    text-align: center;
}

.training-basic .container > .flex-block .practice-wrapper > div:first-child::before {
    content: "";
    display: block;
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: calc(-1 * (100vw - 100%) / 2);
    border-bottom: 1px solid #a87637;
    background: rgba(168, 118, 55, 0.12);
}

.training-basic .container > .flex-block .practice-wrapper > div:first-child {
    max-width: 600px;
    max-height: 240px;
    margin: 0 auto;
}

.training-basic .container > .flex-block .practice-wrapper.remember-words > div:first-child {
    max-height: 100%;
}

.training-basic .container > .flex-block .practice-wrapper.remember-words.control > div:first-child {
    order: 2;
    width: 50%;
    padding: 0;
}

.training-basic.center-point .container > .flex-block .practice-wrapper > div:first-child {
    max-width: 800px;
}

.training-basic.center-point .container > .flex-block .practice-wrapper > div.baby-central-point {
    max-width: 330px;
}

.training-basic .container > .flex-block .practice-wrapper.running-words > div:first-child::before,
.training-basic .container > .flex-block .practice-wrapper.field-view > div:first-child::before,
.training-basic .container > .flex-block .practice-wrapper.reading-grade > div:first-child::before,
.training-basic .container > .flex-block .practice-wrapper.remember-words > div:first-child::before,
.training-basic .container > .flex-block .practice-wrapper.accelerator > div:first-child::before {
    content: none;
}

.training-basic .container > .flex-block .practice-wrapper.field-view > div:first-child {
    height: calc(100% - 75px);
    max-height: calc(100% - 75px);
}

.training-basic .container > .flex-block .practice-wrapper.central-point > div:first-child {
    height: calc(100% - 10px);
    max-height: calc(100% - 10px);
    margin: auto;
    padding-top: 0;
    overflow: hidden;
    text-align: justify;
    background-color: #ffffff;
}

.training-basic .container > .flex-block .practice-wrapper.field-view table.info-block {
    width: 100%;
    margin: auto;
}

.training-basic .container > .flex-block .practice-wrapper.field-view table.info-block td {
    width: calc(100% / 11);
    font-size: 2rem;
    text-transform: uppercase;
}

.training-basic .container > .flex-block .practice-wrapper.field-view table.info-block td.active {
    background: rgba(168, 118, 55, 0.2);
    color: #a87637;
}

.training-basic .container > .flex-block .practice-wrapper.field-view table.info-block tr:nth-child(6) td:nth-child(6) {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Ccircle cx='254.9' cy='255.5' r='256' fill='%23a87637'/%3E%3C/svg%3E") no-repeat center center;
    background-size: 60% 60%;
}

.training-basic .container > .flex-block .practice-wrapper > div:first-child h3 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1em;
    color: #a87637;
}

.training-basic .container > .flex-block .practice-wrapper > div:first-child p {
    display: inline-block;
    width: 100%;
    height: 1.6em;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.6em;
    color: #a87637;
}

.training-basic .container > .flex-block .practice-wrapper.central-point > div:first-child p {
    height: auto;
    font-size: initial;
    font-weight: initial;
    line-height: normal;
    color: inherit;
}

.training-basic .container > .flex-block .word-search > div:first-child p {
    font-size: 2rem;
}

.training-basic .container > .flex-block .reading-grade > div:first-child p,
.training-basic .container > .flex-block .accelerator > div:first-child p {
    height: auto;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.4em;
    text-indent: 40px;
    text-align: justify;
    color: #3c3c3c;
}

.training-basic .container > .flex-block .accelerator > div:first-child div {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.training-basic .container > .flex-block .accelerator > div:first-child .curtain p {
    display: block;
    width: 1000px;
    left: -600px;
    line-height: 1.4em;
    position: relative;
    background: -moz-linear-gradient(left, rgba(255,255,255, .8) 0%, rgba(249,252,247,0) 40%, rgba(249,252,247,0) 60%, rgba(245,249,240,1) 100%);
    background: -webkit-linear-gradient(left, rgba(249,252,247,1) 0%,rgba(249,252,247,0) 40%,rgba(249,252,247,0) 60%,rgba(245,249,240,1) 100%);
    background: linear-gradient(to right, rgba(255,255,255, .8) 0, rgba(255,255,255, .8) 400px, rgba(255,255,255, 0) 425px,rgba(255,255,255, 0) 575px,rgba(255,255,255, .8) 600px, rgba(255,255,255, .8) 1000px);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9fcf7', endColorstr='#f5f9f0',GradientType=1 );

    -webkit-transition-property: left;
    -moz-transition-property: left;
    -ms-transition-property: left;
    -o-transition-property: left;
    transition-property: left;

    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
}

.training-basic .container > .flex-block .practice-wrapper.remember-number > div:first-child::before,
.training-basic .container > .flex-block .practice-wrapper.chain-words > div:first-child::before {
    content: none;
}

.training-basic .container > .flex-block .practice-wrapper.remember-number > div:first-child ul,
.training-basic .container > .flex-block .practice-wrapper.chain-words > div:first-child ul {
    margin: auto;
    list-style: none;
}

.training-basic .container > .flex-block .practice-wrapper.remember-number > div:first-child ul li,
.training-basic .container > .flex-block .practice-wrapper.chain-words > div:first-child ul li {
    display: inline-block;
    width: .64em;
    font-size: 3rem;
    font-weight: 600;
    line-height: 1em;
}

.training-basic .container > .flex-block .practice-wrapper.chain-words > div:first-child ul li {
    font-size: 2rem;
}

.training-basic .container > .flex-block .practice-wrapper.chain-words > div:first-child ul li {
    width: auto;
}

.training-basic .container > .flex-block .practice-wrapper.chain-words > div:first-child ul li::after {
    content: '\00A0';
}

.training-basic .container > .flex-block .practice-wrapper.remember-number > div:first-child ul li.success,
.training-basic .container > .flex-block .practice-wrapper.running-words > div:first-child p span.success,
.training-basic .container > .flex-block .practice-wrapper.chain-words > div:first-child ul li.success,
.training-basic .container > .flex-block .finish-practice .result-reading p.success,
.practice-wrapper.remember-words .control-block li.success {
    color: #28a745;
}

.training-basic .container > .flex-block .practice-wrapper.remember-number > div:first-child ul li.error,
.training-basic .container > .flex-block .practice-wrapper.running-words > div:first-child p span.error,
.training-basic .container > .flex-block .practice-wrapper.chain-words > div:first-child ul li.error,
.training-basic .container > .flex-block .finish-practice .result-reading p.error,
.practice-wrapper.remember-words .control-block li.error {
    color: #800000;
}

.training-basic .container > .flex-block .practice-wrapper.running-words > div:first-child {
    height: 220px;
    margin-top: 30px;
    padding-bottom: 15px;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    text-align: justify;
    color: #3c3c3c;
    background: repeating-linear-gradient(
            to bottom,
            transparent,
            transparent 40px,
            #3c3c3c 40px,
            #3c3c3c) repeat;
    background-size: 100% 41px;
}

.training-basic .container > .flex-block .practice-wrapper.running-words > div:first-child p span {
    font-size: 1.6rem;
    font-weight: 400;
    color: #3c3c3c;
    opacity: 0;
}

.training-basic .container > .flex-block .practice-wrapper.running-words > div:first-child p span::after {
    content: '\00A0';
}

.training-basic .container > .flex-block .practice-wrapper.central-point > div:first-child::before {
    display: block;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -7px 0 0 -7px;
    -webkit-border-radius: 7px;
       -moz-border-radius: 7px;
            border-radius: 7px;
    background: #800000;
}

.training-basic .container > .flex-block .tbl-wrapper {
    width: 100%;
    max-width: 400px;
    margin: auto;
    position: relative;
    opacity: 0;
    background-color: #ffffff;
    -webkit-transition: .3s;
       -moz-transition: .3s;
        -ms-transition: .3s;
         -o-transition: .3s;
            transition: .3s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    z-index: 1;
}

.training-basic .container > .flex-block .practice-wrapper.running-words .tbl-wrapper,
.training-basic .container > .flex-block .practice-wrapper.chain-words .tbl-wrapper,
.training-basic .container > .flex-block .practice-wrapper.chain-words .info-block li {
    opacity: 0;
}

.training-basic .container > .flex-block .practice-wrapper.chain-words .tbl-wrapper {
    -webkit-transition: 0s;
       -moz-transition: 0s;
        -ms-transition: 0s;
         -o-transition: 0s;
            transition: 0s;
}

.training-basic .container > .flex-block .practice-wrapper.remember-words .tbl-wrapper {
    position: relative;
    order: 1;
    z-index: 1;
    display: none;
    width: 50%;
    height: 100%;
    margin-top: 0;
    padding: 10px 0 10px 5px;
    color: #a87637;
}

.training-basic .container > .flex-block .practice-wrapper.remember-words .tbl-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(168, 118, 55, 0.12);
    z-index: -1;
}

.training-basic .container > .flex-block .tbl-wrapper.center-point::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #afafaf;
    z-index: -1;
}

.training-basic .container > .flex-block .tbl-wrapper td {
    font-weight: 400;
    line-height: 1.5em;
    text-align: center;
    cursor: pointer;
}

.training-basic .container > .flex-block .remember-number .tbl-wrapper,
.training-basic .container > .flex-block .field-view .tbl-wrapper {
    opacity: 1;
    margin-top: 0;
    border-spacing: 6px;
}

.training-basic .container > .flex-block .chain-words .tbl-wrapper {
    opacity: 1;
    border-spacing: 6px;
}

.training-basic .container > .flex-block .words-twins .tbl-wrapper {
    border-spacing: 5px 15px;
}

.training-basic .container > .flex-block .field-view .tbl-wrapper {
    margin-bottom: 10px;
}

.training-basic .container > .flex-block .tbl-wrapper.col-2 td {
    width: 50%;
}

.training-basic .container > .flex-block .tbl-wrapper.col-3 td {
    width: 30%;
}

.training-basic .container > .flex-block .tbl-wrapper.col-4 td {
    width: 25%;
}

.training-basic .container > .flex-block .tbl-wrapper.col-5 td {
    width: 20%;
}

.training-basic .container > .flex-block .tbl-wrapper.col-6 td,
.training-basic .container > .flex-block .practice-wrapper.stroop > ul li table.col-6 td {
    width: calc(100% / 6);
}

.training-basic .container > .flex-block .tbl-wrapper.col-7 td {
    width: calc(100% / 7);
}

.training-basic .container > .flex-block .tbl-wrapper.col-8 td,
.training-basic .container > .flex-block .practice-wrapper.stroop > ul li table.col-8 td{
    width: calc(100% / 8);
}

.training-basic .container > .flex-block .tbl-wrapper.col-9 td {
    width: calc(100% / 9);
}

.training-basic .container > .flex-block .tbl-wrapper.col-10 td,
.training-basic .container > .flex-block .practice-wrapper.stroop > ul li table.col-10 td{
    width: calc(100% / 10);
}

.training-basic .container > .flex-block .tbl-wrapper td.color-1 {
    color: #f44336;
}

.training-basic .container > .flex-block .tbl-wrapper td.color-2 {
    color: #0097a7;
}

.training-basic .container > .flex-block .remember-number .tbl-wrapper td,
.training-basic .container > .flex-block .field-view .tbl-wrapper td ,
.training-basic .container > .flex-block .chain-words .tbl-wrapper td {
    height: 60px;
    font-size: 2rem;
    border: 1px solid #a87637;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}

.training-basic .container > .flex-block .chain-words .tbl-wrapper td {
    width: 50%;
}

.training-basic .container > .flex-block .field-view .tbl-wrapper td {
    height: 50px;
    font-size: 1.7rem;
}

.training-basic .container > .flex-block .remember-number .tbl-wrapper tr:last-of-type td:last-of-type {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320.8 320.8' fill='%233c3c3c'%3E%3Cpath d='M96 46L0 160.4l96 114.4h224.8V46H95.9zm209.8 213.8H102.9l-83.3-99.4L102.9 61h202.9v198.8z'/%3E%3Cpath d='M159.1 213l42-42 42.1 42 10.6-10.6-42-42 42-42-10.6-10.7-42 42-42-42-10.7 10.6 42 42-42 42.1z'/%3E%3C/svg%3E") no-repeat center center;
    background-size: 20px 20px;
}

.training-basic .container > .flex-block .tbl-wrapper td:active {
    background: #f7bd4d;
}

.training-basic .container > .flex-block .running-words .tbl-wrapper td {
    width: 50%;
    height: 60px;
    font-size: 2rem;
    border: 1px solid #a87637;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    -webkit-transition: .3s;
       -moz-transition: .3s;
        -ms-transition: .3s;
         -o-transition: .3s;
            transition: .3s;
}

.training-basic .container > .flex-block .remember-words .tbl-wrapper td {
    height: 45px;
}

.training-basic .container > .flex-block .words-twins .tbl-wrapper td {
    line-height: 1em;
}

.training-basic .container > .flex-block .finish-practice {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.training-basic .container > .flex-block .finish-practice h3 {
    color: #a87637;
}

.training-basic .container > .flex-block .finish-practice h4 {
    margin-bottom: 5px;
    font-weight: 600;
    text-align: center;
}

.training-basic .container > .flex-block .finish-practice h4 + p {
    font-size: 2.4rem;
    font-weight: 600;
    color: #a87637;
}

.training-basic.stroop .container > .flex-block .finish-practice h3 + div {
    text-align: left;
}

.training-basic.stroop .container > .flex-block .finish-practice h3 + div h5 {
    display: inline-block;
    margin-bottom: 4px;
    padding: 0 5px;
    background: rgba(209, 121, 5, 0.3);
    border-bottom: 2px solid #a87637;
}

.training-basic.stroop .container > .flex-block .finish-practice h3 + div .result-practice {
    margin: 0 0 10px 30px;
}

.training-basic.stroop .container > .flex-block .finish-practice h3 + div + div {
    margin-top: 20px;
}

.training-basic .container > .flex-block .finish-practice .chart-wrapper {
    width: 300px;
    margin: 15px auto 0;
}

.training-basic .container > .flex-block .finish-practice .btn {
    display: inline-block;
    width: 190px;
    margin: 20px auto;
    padding-left: 50px;
    position: relative;
}

.training-basic .container > .flex-block .finish-practice .btn.remember-homework {
    margin-top: 0;
}

.training-basic .container > .flex-block .finish-practice .btn.repeat::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M19 25h9a2 2 0 000-4h-9a11 11 0 000 22h4.2l-1.6 1.6a2 2 0 102.8 2.8l5-5c.8-.8.8-2 0-2.8l-5-5a2 2 0 10-2.8 2.8l1.6 1.6H19a7 7 0 010-14zM45 21h-4.2l1.6-1.6a2 2 0 10-2.8-2.8l-5 5a2 2 0 000 2.8l5 5a2 2 0 002.8 0c.8-.8.8-2 0-2.8L40.8 25H45a7 7 0 010 14h-9a2 2 0 000 4h9a11 11 0 000-22z' fill='%23333'/%3E%3C/svg%3E") no-repeat;
    background-size: 100%;
}

.training-basic .container > .flex-block .finish-practice .btn.remember-homework::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 3px;
    left: 13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23f7bd4d'%3E%3Cpath d='M506 353L405 252l77-77c39-43 40-109 0-145S375-7 337 30l-77 77L158 6c-8-8-21-7-28 0L6 131c-8 8-8 21 0 29l101 100-56 56c-3 3-4 6-5 9L1 487c-3 16 11 28 24 24l162-46c15-6 19-23 9-33L94 330 331 93l88 88-181 181c-8 8-7 21 0 28l117 116c8 8 20 7 28 0l123-124c8-8 8-21 0-29zm-363 83l-94 27 26-95zm-8-204l-87-87 96-97 32 32-39 40c-18 22 13 43 28 28l39-40 28 27zM359 64c28-27 64-35 95-6 30 30 18 71-6 95zm10 400l-89-88 96-96 27 27-38 39c-18 22 12 43 28 28l39-39 32 33z'/%3E%3C/svg%3E") no-repeat;
    background-size: 100%;
}

.training-basic .container > .flex-block .finish-practice .training-next {
    margin-top: 20px;
}

.training-basic .container > .flex-block .finish-practice a {
    display: block;
    font-weight: 600;
    text-decoration: none;
    color: #a87637;
}

.training-basic .container > .flex-block .finish-practice a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 18px;
    margin-right: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 49.8 49.8'%3E%3Cpath d='M45 41.3c0 4.7-3.9 8.5-8.6 8.5h-23a8.5 8.5 0 01-8.5-8.5 3.5 3.5 0 117 0c0 .9.7 1.5 1.5 1.5h23c.9 0 1.5-.6 1.5-1.5a3.5 3.5 0 117 0zm-28-25l4.4-4.4v20a3.5 3.5 0 107 0v-20l4.4 4.4a3.5 3.5 0 005 0 3.5 3.5 0 000-5L27.3 1a3.5 3.5 0 00-5 0L12.1 11.4a3.5 3.5 0 105 5z' fill='%23a87637'/%3E%3C/svg%3E") no-repeat;
    background-size: auto 100%;
}

.training-basic .container > .flex-block .finish-practice a.next-arrow::before {
    content: none;
}

.training-basic .container > .flex-block .finish-practice a.next-arrow::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 1em;
    margin-left: 10px;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='335' height='335' fill='%23a87637'%3E%3Cpath d='M4 90.7a13.4 13.4 0 010-19.2 14.1 14.1 0 0119.7 0l98.3 96-98.3 96a14.1 14.1 0 01-19.6 0 13.4 13.4 0 010-19.2l78.6-76.8z' id='a' stroke-width='1'/%3E%3Cuse xlink:href='%23a' transform='translate(106.5)' width='100%25' height='100%25'/%3E%3Cuse xlink:href='%23a' transform='translate(213)' width='100%25' height='100%25'/%3E%3C/svg%3E") no-repeat;
    background-size: auto 100%;
}

.training-basic .container .counter-start {
    margin: auto;
    font-size: 7rem;
    font-weight: 600;
    color: #a87637;
    opacity: 0;
    -webkit-transition: .3s;
       -moz-transition: .3s;
        -ms-transition: .3s;
         -o-transition: .3s;
            transition: .3s;
}

.training-basic .container > .flex-block .practice-wrapper.reading-grade,
.training-basic .container > .flex-block .practice-wrapper.running-words,
.training-basic .container > .flex-block .practice-wrapper.text-search,
.training-basic .container > .flex-block .practice-wrapper.accelerator {
    display: block;
    width: 100%;
    max-width: 400px;
    position: absolute;
    margin: auto;
    padding-top: 10px;
    z-index: -1;
}

.training-basic .container > .flex-block .practice-wrapper.accelerator,
.training-basic .container > .flex-block .practice-wrapper.reading-grade {
    max-width: 800px;
}

.training-basic .container > .flex-block .practice-wrapper.text-search {
    height: 100%;
    padding-top: 0;
    left: 50%;
}

.training-basic .container > .flex-block .practice-wrapper.reading-grade > div:first-child,
.training-basic .container > .flex-block .practice-wrapper.accelerator > div:first-child {
    max-width: 800px;
    max-height: none;
    overflow: hidden;
    padding-top: 0;
    background-color: #ffffff;
}

.training-basic .container > .flex-block .practice-wrapper.reading-grade > div:first-child > div,
.training-basic .container > .flex-block .practice-wrapper.accelerator > div:first-child > div {
    position: absolute;
    display: block;
    width: 100%;
}

.training-basic .container > .flex-block .practice-wrapper.reading-grade > div.btn-body,
.training-basic .container > .flex-block .practice-wrapper.accelerator > div.btn-body {
    height: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.training-basic .container > .flex-block .practice-wrapper.reading-grade > div.btn-body button {
    width: auto;
    height: 30px;
    margin: 15px auto 0;
    padding: 0 20px;
    line-height: 30px;
    text-transform: none;
}

.training-basic .container > .flex-block .practice-wrapper.reading-grade + .control-block {
    width: 100%;
    max-width: 400px;
    height: 100%;
    margin: auto;
}

.training-basic .container > .flex-block .practice-wrapper.reading-grade + .control-block > ul {
    position: relative;
    list-style: none;
}

.training-basic .container > .flex-block .practice-wrapper.reading-grade + .control-block > ul li {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: -2;
    width: 100%;
    -webkit-transition: .5s;
       -moz-transition: .5s;
        -ms-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
    opacity: 0;
}

.training-basic .container > .flex-block .practice-wrapper.reading-grade + .control-block > ul li .btn {
    width: 90%;
    margin-top: 20px;
    padding: 10px;
    height: auto;
    letter-spacing: normal;
    line-height: normal;
    text-transform: none;
    color: #3c3c3c;
}

.training-basic .container > .flex-block .finish-practice .result-reading h4 span {
    font-size: larger;
}

.training-basic .container > .flex-block .finish-practice .result-reading p:last-of-type {
    margin-bottom: 30px;
}

.training-basic .container > .flex-block .practice-wrapper.accelerator {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.training-basic .container > .flex-block .practice-wrapper.accelerator > div:first-child > div.curtain {
    height: auto;
}

.training-basic .container > .flex-block .practice-wrapper.text-search .text-wrapper {
    width: 286px;
    height: 286px;
    margin: auto;
    line-height: 1.4em;
    text-align: justify;
    overflow: hidden;
    cursor: pointer;
}

.training-basic .container > .flex-block .text-iso {
    display: block;
    position: absolute;
    top: 0;
    left: -9999px;
    width: 800px;
    text-align: justify;
    line-height: 1.4em;
}

.training-basic .container > .flex-block .practice-wrapper.text-search .text-wrapper p,
.training-basic .container > .flex-block .text-iso p {
    text-indent: 30px;
}

.training-page .container.flex-block > .training-index {
    width: 96%;
    max-width: 400px;
    margin: auto;
}

.training-page .container.flex-block > .training-index h4 {
    text-align: center;
}

.training-page .container.flex-block > .training-index ul {
    margin: 0 0 20px 100px;
    flex-direction: column;
    list-style: none;
}

.training-page .container.flex-block > .training-index ul li {
    height: 40px;
    line-height: 36px;
    position: relative;
}

.training-page .container.flex-block > .training-index ul li::before {
    content: '';
    display: block;
    width: 29px;
    height: 29px;
    position: absolute;
    top: 3px;
    left: -47px;
    z-index: 1;
}

.training-page .container.flex-block > .training-index ul li::after {
    content: '';
    display: block;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 0;
    left: -50px;
    border-radius: 4px;
    background: #f5af28;
}

.practice-info-wrapper {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba( 0, 0, 0, .6);
}

.practice-info-wrapper .container {
    max-width: 500px;
    height: auto;
    margin: auto;
    padding: 15px;
    text-align: center;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    background: white;
}

.practice-info-wrapper .container p {
    margin-bottom: 10px;
    text-indent: 30px;
    text-align: left;
}

.practice-info-wrapper .container button {
    border: none;
    margin-top: 15px;
    font-weight: 600;
    font-style: italic;
    background: none;
    color: #a87637;
}

.current-level {
    width: 0;
    height: 0;
    position: absolute;
    top: 65px;
    left: 50%;
    font-size: 2.6rem;
    font-style: italic;
    text-align: center;
    opacity: 0;
    z-index: -5;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}

.words-twins .current-level,
.remember-number .current-level,
.chain-words .current-level,
.field-view .current-level,
.running-words .current-level {
    top: 0;
}

.current-level.active {
    width: 290px;
    height: 3em;
    margin: 0 0 0 -145px;
    opacity: 1;
    z-index: 10;
}

/*.practice-wrapper.remember-words .tbl-wrapper li {*/
/*    display: inline-block;*/
/*    padding: 3px 10px;*/
/*    line-height: 1.2em;*/
/*    margin: 5px;*/
/*    border: 1px solid #a87637;*/
/*}*/

.practice-wrapper.remember-words .info-block {
    margin: auto;
    font-size: 3.2rem;
    -webkit-transition: .3s linear;
    -moz-transition:  .3s linear;
    -o-transition:  .3s linear;
    transition:  .3s linear;
}

.practice-wrapper.remember-words .control-block {
    display: none;
    width: 100%;
    padding: 10px 0;
    list-style: none;
    text-align: left;
}

.practice-wrapper.remember-words .control-block li {
    display: block;
    padding: 0 5px;
}

.practice-wrapper.remember-words .control-block li.active:last-child::after {
    content: none;
}

.faq-page .video-wrapper {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 50px;
}

.faq-page .video-wrapper > div {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
}

.faq-page .video-wrapper > div video {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

footer.footer-base {
    margin-top: auto;
    position: relative;
    background-color: #a87637;
    z-index: 1;
}

footer.footer-base .footer-bottom {
    padding: 20px 3%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

footer.footer-base .footer-bottom .ft-logo-wrap {
    width: 111px;
}

footer.footer-base .footer-bottom .ft-logo-wrap .ft-logo {
    width: 100%;
    height: 30px;
    background: url('../i/logo.svg') no-repeat center;
    -webkit-background-size: contain;
    background-size: contain;
}

footer.footer-base .footer-bottom .ft-tm-txt {
    width: 170px;
    padding: 0;
}

footer.footer-base .footer-bottom .ft-tm-txt p {
    margin-bottom: 0;
    font-weight: 700;
    text-align: right;
}

footer .admin-btn-body {
    margin: 10px 0 0 auto;
    text-align: right;
}

footer .admin-btn {
    width: 180px;
    height: 30px;
    font-size: 1.4rem;
    line-height: 26px;
    text-transform: none;
    border-color: #ffffff;
    color: #ffffff;
    background: none;
}

.header-admin {
    width: 100%;
    min-height: 36px;
    padding: 5px 0;
    position: fixed;
    top: 0;
    left: 0;
    background: #f5f5f5;
    z-index: 10;
}

.header-admin .container {
    width: 96%;
    max-width: 1300px;
}

.header-admin .container p {
    text-align: right;
}

.header-admin .container p a {
    margin-left: 15px;
}

main.main-admin {
    width: 100%;
    max-width: 1300px;
    height: auto;
    margin: 0 auto;
    position: relative;
}

main.main-admin >section {
    padding: 100px 0 50px;
}

.admin-index > aside {
    display: block;
    width: 250px;
    height: calc(100vh - 40px);
    padding: 10px;
    position: fixed;
    top: 0;
    left: 0;
    background: #f5f5f5;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    z-index: 15;
}

.admin-index > aside > input {
    display: none;
}

.admin-index > aside > label {
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 5px;
    right: -30px;
    background: #f5f5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cpath d='M224 153V48a16 16 0 00-28-11L4 245c-5 6-5 16 0 22l192 208a16 16 0 0018 4c6-2 10-8 10-15V359c0-4-2-8-4-11l-86-92 86-92c2-3 4-7 4-11zM508 245L316 37a16 16 0 00-28 11v105c0 4 2 8 4 11l86 92-86 92c-2 3-4 7-4 11v105a16 16 0 0028 11l192-208c5-6 5-16 0-22z' fill='%237a7a7a'/%3E%3C/svg%3E") no-repeat center center;
    -webkit-background-size: 24px 24px;
    background-size: 24px 24px;
    cursor: pointer;
}

.admin-index > aside .logo-wrapper {
    width: 100%;
}

.admin-index > aside .logo-wrapper a {
    display: block;
    width: 130px;
    height: 35px;
    margin: 10px auto 0;
}

.admin-index > aside .logo-wrapper a img {
    width: 100%;
    height: 100%;
}

.admin-index h2 + p {
    position: relative;
    top: -20px;
}

.admin-menu-body {
    margin-top: 50px;
}

.admin-menu-body li {
    margin-bottom: 10px;
    list-style-type: none;
}

.admin-menu-body li details details,
.admin-menu-body li details ul {
    margin-left: 25px;
}

.admin-menu-body li details ul li {
    position: relative;
}

.admin-menu-body li details ul li:before {
    content: "\00BB\00A0";
}

.admin-menu-body li a {
    text-decoration: none;
    color: #3f3f3f;
}

.admin-menu-body .ageCoach {
    margin-top: 30px;
}

.admin-menu-body .ageCoach div {
    margin-top: 15px;
    text-align: center;
}

.admin-menu-body .ageCoach div input {
    width: 40px;
    vertical-align: middle;
}

.admin-menu-body .ageCoach div label {
    vertical-align: middle;
}

.search-body {
    text-align: right;
}

.search-body input[type="text"] {
    width: 150px;
    height: 32px;
    padding: 0 10px;
    vertical-align: top;
    border: 1px solid #3c3c3c;
}

.search-body input[type="submit"] {
    width: 32px;
    height: 32px;
    margin: 0;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 57 57'%3E%3Cpath d='M55.1 51.9L41.6 37.8A23 23 0 0024 0a23 23 0 1013.2 41.8L50.8 56a3 3 0 004.3.1 3 3 0 000-4.2zM24 6a17 17 0 110 34 17 17 0 010-34z' fill='%233c3c3c'/%3E%3C/svg%3E") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}

.basic-info {
    margin: 30px 0 0;
}

.basic-info > .flex-block:first-of-type {
    margin-bottom: 30px;
    align-items: flex-end;
}

.basic-info > .flex-block:first-of-type > a {
    width: 150px;
    margin: 0;
}

.materials a.create-btn {
    width: 200px;
    margin-bottom: 30px;
}

.materials .words-columns {
    padding: 1em 0 1em 1em;
    border: 1px solid #cfd3db;
}

.materials .words-columns ul {
    list-style: none;
    height: 20em;
    overflow-y: scroll;
}

.materials .words-columns ul li {
    width: 100px;
    float: left;
    margin: 1em 30px 0 0;
}

.basic-info table {
    width: 100%;
}

.basic-info table tr th,
.basic-info table tr td {
    display: none;
    padding: 5px;
}

.basic-info table tr th {
    background: rgba( 245, 175, 40, .6 );
    border-bottom: 2px solid #a87637;
}

.basic-info table tr td {
    -webkit-box-shadow: 1px 1px #3c3c3c;
    -moz-box-shadow: 1px 1px #3c3c3c;
    box-shadow: 1px 1px #3c3c3c;
}

.basic-info table tr th:nth-child(2),
.basic-info table tr td:nth-child(2),
.basic-info table tr th:last-child,
.basic-info table tr td:last-child {
    display: table-cell;
}

.basic-info table tr th:last-child,
.basic-info table tr td:last-child {
    width: 100px;
}

.basic-info .tbl-info td:last-child a,
.basic-info .tbl-info td:last-child button {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 0;
    vertical-align: middle;
    border: none;
    cursor: pointer;
}

.basic-info .tbl-info td:last-child a.view-button {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' fill='%23ea5507'%3E%3Cpath d='M509 246c-5-6-114-153-253-153S8 240 3 246c-4 6-4 14 0 20 5 6 114 153 253 153s248-147 253-153c4-6 4-14 0-20zM256 385c-103 0-191-97-218-129 27-32 115-129 218-129s191 97 218 129c-27 32-115 129-218 129z'/%3E%3Cpath d='M256 155a101 101 0 100 203 101 101 0 000-203zm0 169a68 68 0 110-136 68 68 0 010 136z'/%3E%3C/svg%3E") no-repeat;
    background-size: contain;
}

.basic-info .tbl-info td:last-child a.edit-button {
    background: url(?) no-repeat;
    background-size: contain;
}

.basic-info .tbl-info td:last-child a.delete-button {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 497.9 497.9'%3E%3Cpath d='M498 93H373V31c0-17-14-31-31-31H156c-18 0-32 14-32 31v62H0v63h37l67 342h290l67-342h37V93zM171 437l-15-249 31-2 15 249zm156 0l-31-2 15-249 31 2zM187 62h124v31H187z' fill='%23ea5507'/%3E%3C/svg%3E") no-repeat;
    background-size: contain;
}

.basic-info .tbl-info td:last-child button.homework {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 47' fill='%23ea5507'%3E%3Cpath d='M6.12 38.52V5.14h26.96v28.03l5.14-4.24V2.57A2.57 2.57 0 0035.65 0H3.55A2.57 2.57 0 001 2.57v38.52a2.57 2.57 0 002.56 2.56h22.41l-3.63-5.13H6.12z'/%3E%3Cpath d='M45.61 27.6a1.28 1.28 0 00-1.7-.05L32.14 37.3l-7.85-4.71a1.28 1.28 0 00-1.71 1.84l8.5 12.04c.24.33.63.53 1.04.54h.01c.41 0 .8-.2 1.04-.53l12.6-17.17c.38-.52.31-1.25-.16-1.7zM27.3 8.99H11.9a2.57 2.57 0 000 5.13h15.4a2.57 2.57 0 000-5.13zM27.3 16.7H11.9a2.57 2.57 0 000 5.13h15.4a2.57 2.57 0 000-5.14zM27.3 24.4H11.9a2.57 2.57 0 000 5.13h15.4a2.57 2.57 0 000-5.14z'/%3E%3C/svg%3E") no-repeat;
    background-size: contain;
}

.general-info a.btn {
    width: 200px;
    height: 30px;
    margin: 10px auto 0;
    line-height: 29px;
}

.general-info .error-info {
    position: static;
    margin: 10px auto;
}

.general-info > h3 {
    margin: 30px 0 5px;
    color: #f5af28;
}
.general-info ul {
    list-style-type: none;
}

.general-info ul li {
    display: block;
    width: 200px;
    padding: 10px 15px;
    text-align: center;
    border: 2px solid #f8af22;
    background: #f5f5f5;
}

.general-info ul li > p:first-child {
    font-size: larger;
    font-weight: 600;
}

.user-info form {
    width: 90%;
    margin: auto;
}

.user-info form p {
    margin-bottom: 15px;
}

.user-info form p:last-of-type {
    text-align: center;
}

.user-info form p span {
    display: block;
    font-size: 1.8rem;
}

.user-info form p.inline-block span {
    display: inline-block;
    margin-right: 20px;
}

.user-info form p input[type="text"],
.user-info form p input[type="email"],
.user-info form p input[type="password"],
.user-info form p select {
    width: 90%;
    margin-left: 10%;
    padding: 5px 10px;
    font-size: 1.8rem;
    background: #ffffff;
}

.user-info form p input[type="text"]:focus,
.user-info form p input[type="email"]:focus,
.user-info form p input[type="password"]:focus,
.user-info form p select:focus {
    border: 1px solid #f5af28;
    outline: none;
}

.user-info form p input[type="password"]:disabled {
    background: #f5f5f5;
    opacity: .5;
}

.user-info form p input[type="checkbox"] {
    width: 25px;
    height: 25px;
}

.user-info form p input[type="submit"] {
    display: inline-block;
    width: 150px;
}

.frm-user-info {
    display: block;
    width: 90%;
    max-width: 500px;
    margin: auto;
    position: relative;
}

.frm-user-info p {
    margin-bottom: 15px;
}

.frm-user-info p > label {
    display: inline-block;
    width: 200px;
    vertical-align: bottom;
}

.frm-user-info p input[type="text"],
.frm-user-info p input[type="password"],
.frm-user-info p input[type="number"],
.frm-user-info p input[type="datetime-local"],
.frm-user-info p input[type="email"],
.frm-user-info p select {
    width: calc(100% - 205px);
    padding: 5px 10px;
    background: #ffffff;
}

.frm-user-info p input[type="submit"] {
    display: inline-block;
    width: 48%;
    max-width: 180px;
}

.frm-user-info .error-info {
    position: static;
}

.frm-user-info .error-info ul {
    list-style-type: none;
}

.view-user {
    padding-left: 15px;
    list-style-type: none;
}

.view-user-wrapper h1 + p > a.btn {
    width: 200px;
    margin-bottom: 30px;
}

.view-user li {
    margin: 10px 0 0;
    padding: 5px 10px;
}

.view-user li:nth-child(odd) {
    background-color: #f3f3f3;
}

.view-user li p:first-of-type {
    font-weight: 700;
}

.view-user li p:last-of-type {
    padding-left: 20px;
}

.materials .practice-text > div {
    margin-bottom: 20px;
}

.materials .practice-text label {
    display: block;
}

.materials .practice-text label span {
    font-size: smaller;
    font-style: italic;
    color: #800000;
}

.materials .practice-text input,
.materials .practice-text select,
.materials .practice-text textarea {
    margin-left: 50px;
    padding: 10px;
    font-size: 1.6rem;
    background: none;
}

.materials .practice-text input,
.materials .practice-text textarea {
    width: 800px;
}

.materials .practice-text textarea {
    min-height: 250px;
}

.materials .practice-text input[type='submit'] {
    display: inline-block;
    width: 150px;
    padding: 0;
}

.footer-admin {
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 20;
    text-align: center;
    line-height: 40px;
    font-weight: 700;
    background: #a87637;
}

.homework-info-wrapper {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 2000;
    -webkit-transition: .6s;
       -moz-transition: .6s;
        -ms-transition: .6s;
         -o-transition: .6s;
            transition: .6s;
}

.homework-info-body {
    width: 90%;
    max-width: 800px;
    max-height: calc(100% - 100px);
    margin: 80px auto 0;
    padding: 10px;
    -webkit-box-shadow: 0 0 15px #000000;
       -moz-box-shadow: 0 0 15px #000000;
            box-shadow: 0 0 15px #000000;
    background: #ffffff;
}

.homework-info-body .close-form {
    display: block;
    width: 2rem;
    height: 2rem;
    margin: 0 0 0 auto;
    font-size: 2rem;
    line-height: 2rem;
    border: none;
    background: none;
    cursor: pointer;
}

.homework-info-body .close-form:hover,
.homework-info-body .close-form:active {
    color: #f5af28;
}

.homework-info-body > div {
    max-height: calc(100vh - 180px);
    margin-top: 15px;
    overflow-y: auto;
}

.homework-info-body table {
    width: 100%;
    margin-top: 15px;
    border-spacing: 0;
    border-collapse: collapse;
}

.homework-info-body table th {
    padding: 3px 0;
    text-align: center;
    border: 1px solid #a87637;
    background: #f5af28;
    color: #ffffff;
}

.homework-info-body table tr:nth-child(even) {
    background: #e6e6e6;
}

.homework-info-body table td {
    padding: 3px 0;
    text-align: center;
    border: 1px solid #a87637;
}

.footer-admin .btn {
    width: 200px;
    height: 30px;
    margin: 5px 0 0;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: normal;
    text-transform: none;
    border: 1px solid #ffffff;
    background: none;
    color: #ffffff;
}

.result-registration {
    width: 100%;
    max-width: 600px;
    margin: auto;
}

.result-registration h3 {
    text-align: center;
    color: #316d31;
}

.result-registration p {
    margin-bottom: 15px;
}

.result-registration .btn-body {
    justify-content: center;
}

/*  ====================================================
                Media query
===================================================== */
@media screen and (min-width: 375px) {
    .training-basic .setting-wrapper select {
        margin-right: 10px;
    }

    .current-level.active {
        width: 350px;
        height: 1.6em;
        margin: 0 0 0 -175px;
    }

    .training-basic .container > .flex-block .practice-wrapper.chain-words > div:first-child ul li {
        font-size: 2.2rem;
    }

}

@media screen and (min-width: 420px) {

    .current-level.active {
        width: 400px;
        height: 1.6em;
        margin: 0 0 0 -200px;
    }

    .training-basic .container > .flex-block .finish-practice .chart-wrapper {
        width: 400px;
    }

    .training-basic .container > .flex-block .practice-wrapper.chain-words > div:first-child ul li {
        font-size: 2.4rem;
    }

}

@media screen and (min-width: 440px) {

    .training-basic .setting-wrapper select.setting-title {
        width: 220px;
    }

    .training-basic .setting-wrapper select.setting-speed {
        width: 115px;
    }

    .pagination li {
        margin-right: 5px;
    }

    .basic-info table tr th:first-child,
    .basic-info table tr td:first-child {
        display: table-cell;
        width: 105px;
    }

    .basic-info table tr th:first-child {
        padding: 5px 0;
    }

    .basic-info table tr td:first-child {
        text-align: center;
    }
    .training-basic .container > .flex-block .practice-wrapper.running-words {
        left: 50%;
        margin-left: -200px;
    }

    .training-basic .container > .flex-block .practice-wrapper.remember-words .tbl-wrapper.col li {
        display: inline-block;
        width: 50%;
    }

    .practice-wrapper.remember-words .control-block.str li {
        display: inline-block;
        padding: 0;
    }

    .practice-wrapper.remember-words .control-block.str li.active::after {
        content: '\2192';
        position: relative;
        top: -2px;
    }

    .practice-wrapper.remember-words .control-block.str li.active:last-of-type::after {
        content: none;
    }
}

@media screen and (min-width: 540px) {

    main.job-level,
    main.training-page,
    main.practice-page {
        background: url("../i/bg-numbers.png") #ffffff no-repeat;
        background-size: 100% 100%;
    }

    main.job-level {
        height: calc(100vh - 148px);
        padding: 0;
    }

    main.job-level .container .flex-block,
    main.training-page .container .flex-block,
    main.practice-page .container .flex-block {
        height: 100%;
        align-content: center;
    }

    main.practice-page.reading-grade .container .flex-block,
    main.practice-page.running-words .container .flex-block,
    main.practice-page.accelerator .container .flex-block {
        margin: auto;
        overflow: hidden;
    }

    .training-basic .container > .flex-block .practice-wrapper.remember-words.control > div:first-child {
        align-content: normal;
    }

    .training-basic .setting-wrapper select {
        margin-right: 30px;
    }

    .training-basic .setting-wrapper select.setting-title {
        font-size: 2rem;
    }

    .training-page .container.flex-block > .training-index.intense {
        max-width: none;
    }

    .training-page .container.flex-block > .training-index.intense ul {
        height: 480px;
        margin-left: 0;
    }

    .training-page .container.flex-block > .training-index.intense ul li {
        margin:  0 20px 0 50px;
    }

    .training-basic .container > .flex-block .practice-wrapper.chain-words > div:first-child ul li {
        font-size: 3rem;
    }

    footer.footer-base .footer-bottom .ft-tm-txt {
        margin-left: 10px;
    }

    footer .admin-btn-body {
        margin: 0 0 0 auto;
    }

    footer .admin-btn {
        margin: 0;
    }

    .user-info form {
        width: 450px;
    }

    .user-info form p span {
        display: inline-block;
        width: 170px;
    }

    .user-info form p input[type="text"],
    .user-info form p input[type="email"],
    .user-info form p input[type="password"],
    .user-info form p select {
        width: 270px;
        margin-left: 0;
    }

    .user-info form p.inline-block span {
        margin-right: 0;
    }

    .user-info form p input[type="submit"] {
        margin-right: 30px;
    }

    .view-user {
        display: table;
        width: 100%;
        border-collapse: collapse;
    }

    .view-user li {
        display: table-row;
    }

    .view-user li > p {
        display: table-cell;
        padding: 5px 10px;
        border: 1px solid #afafaf;
    }
}

@media screen and (min-width: 600px) {
    .training-basic .container > .flex-block .practice-wrapper.remember-words .tbl-wrapper.col li {
        width: 33.3%;
    }
}

@media screen and (min-width: 600px) AND (min-height: 600px) {
    .training-basic .container > .flex-block .practice-wrapper.remember-words.control > div:first-child {
        order: 1;
        width: 100%;
        max-width: 800px;
        height: 50%;
    }

    .training-basic .container > .flex-block .practice-wrapper.remember-words .tbl-wrapper {
        order: 2;
        width: 100%;
        max-width: 800px;
        height: 50%;
    }

    .training-basic .container > .flex-block .practice-wrapper.remember-words .tbl-wrapper.col li {
        width: 20%;
    }

}

@media screen and (min-width: 768px) {

    .basic-info table tr th:nth-child(3),
    .basic-info table tr td:nth-child(3) {
        display: table-cell;
    }

    .training-basic .setting-wrapper select.setting-title,
    .training-basic .setting-wrapper select.setting-speed {
        width: inherit;
        max-width: 400px;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop {
        height: 100%;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul {
        position: relative;
        margin: auto;
        width: 100%;
        max-width: 800px;
        height: 100%;
        list-style: none;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li:nth-of-type(2) {
        z-index: -2;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li:nth-of-type(3) {
        z-index: -2;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li table.stroop-card {
        width: 100%;
        border-spacing: 2px 20px;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li table.stroop-card.col-10 {
        border-spacing: 2px 15px;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li table td {
        text-align: center;
        height: 2em;
        line-height: 2em;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li table.stroop-card td.active {
        background: rgba(200, 200, 200, .15);
        -webkit-box-shadow: 0 0 0 1px #3f3f3f;
           -moz-box-shadow: 0 0 0 1px #3f3f3f;
             -o-box-shadow: 0 0 0 1px #3f3f3f;
                box-shadow: 0 0 0 1px #3f3f3f;
        -webkit-transform: scale(1.1);
           -moz-transform: scale(1.1);
            -ms-transform: scale(1.1);
             -o-transform: scale(1.1);
                transform: scale(1.1);
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li hr {
        margin: 15px 30px;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li table.tbl-wrapper {
        max-width: 560px;
        border-spacing: 10px 0;
        opacity: 1;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li table.tbl-wrapper td {
        width: 100px;
        border: 1px solid #a87637;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-1 table.tbl-wrapper td {
        border: none;
        text-indent: -9999px;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-2 table.stroop-card td[data-color="red"],
    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-1 table.tbl-wrapper td[data-color="red"] {
        background: #ff0000;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-2 table.stroop-card td[data-color="blue"],
    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-1 table.tbl-wrapper td[data-color="blue"] {
        background: #0000ff;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-2 table.stroop-card td[data-color="green"],
    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-1 table.tbl-wrapper td[data-color="green"] {
        background: #00ff00;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-2 table.stroop-card td[data-color="yellow"],
    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-1 table.tbl-wrapper td[data-color="yellow"] {
        background: #ffff00;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-2 table.stroop-card td[data-color="brawn"],
    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-1 table.tbl-wrapper td[data-color="brawn"] {
        background: #d77d31;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-2 table.stroop-card {
        border-spacing: 20px;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-2 table.stroop-card.col-10 {
        border-spacing: 15px;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-2 table.stroop-card td {
        text-indent: -9999px;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-3 table.stroop-card td.red {
        color: #ff0000;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-3 table.stroop-card td.blue {
        color: #0000ff;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-3 table.stroop-card td.green {
        color: #00ff00;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-3 table.stroop-card td.yellow {
        color: #ffff00;
    }

    .training-basic .container > .flex-block .practice-wrapper.stroop > ul li.card-3 table.stroop-card td.brawn {
        color: #d77d31;
    }

    footer.footer-base .footer-bottom {
        justify-content: flex-start;
    }
}

@media screen and (min-width: 800px) {

    header nav.flex-block {
        width: 100%;
        align-items: center;
    }

    .index-top-logo a {
        width: 140px;
        background-size: contain;
        background-position: center center;
    }

    label.label-top-menu-checkbox {
        display: none;
    }

    .top-menu-body {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: calc(100% - 140px);
        max-height: 100px;
        -webkit-align-items: center;
        justify-content: flex-end;
        align-items: center;
    }

    .top-menu-body ul {
        margin: 0;
    }

    .top-menu-body ul:first-of-type {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        width: calc(100% - 140px);
        justify-content: center;
    }

    .top-menu-body.shot-menu ul:first-of-type {
        justify-content: flex-end;
        margin-right: 20px;
    }

    .top-menu-body ul:first-of-type li {
        margin-right: 20px;
    }

    .top-menu-body ul:first-of-type li:last-of-type {
        margin-right: 0;
    }

    .top-menu-body ul:last-of-type {
        width: 140px;
    }

    .top-menu-body ul:last-of-type li a {
        line-height: 1.2em;
    }

    header .btn,
    header .lang-form select {
        margin: 0 15px 0 0;
    }

    .btn-body {
        height: 50px;
        margin-top: 40px;
        padding: 0;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row;
        justify-content: flex-end;
    }

    .btn-body a, .btn-body button {
        margin-left: 15px;
    }

    .index-bg {
        height: calc(100% - 90px);
    }

    main.practice-index .btn {
        width: 140px;
    }

    .training-basic .container > .flex-block .practice-wrapper.remember-words .tbl-wrapper::before {
        left: calc(-1 * (100vw - 800px) / 2);
        width: calc(100vw - 4%);
    }

    footer.footer-base .footer-bottom .ft-logo-wrap .ft-logo {
        background-position: left center;
    }
}

@media screen and (min-width: 960px) {
    .basic-info table tr th:nth-child(4),
    .basic-info table tr td:nth-child(4),
    .basic-info table tr th:nth-child(5),
    .basic-info table tr td:nth-child(5) {
        display: table-cell;
    }

    .basic-info table tr td:nth-child(5) {
        text-align: center;
    }

    .training-basic .container > .flex-block .practice-wrapper.accelerator,
    .training-basic .container > .flex-block .practice-wrapper.reading-grade {
        left: 50%;
        margin-left: -400px;
    }
}

@media screen and (min-width: 1200px) {
    header nav {
        width: 1200px;
        margin: 0 auto;
    }

    .btn-body {
        width: 1200px;
        margin: 40px auto 0;
    }

    .index-bg {
        background: url('../i/bg-logo-1360.png') no-repeat center;
    }

    .training-basic .container > .flex-block .practice-wrapper.reading-grade > div.btn-body {
        width: 300px;
        left: 50%;
        margin: 0 0 0 -150px;
    }

    .training-basic .container > .flex-block .practice-wrapper.remember-words .tbl-wrapper::before {
        left: -400px;
        width: 1200px;
    }

    .result-registration .btn-body {
        width: 100%;
    }

    footer.footer-base .footer-bottom {
        width: 1200px;
        margin: 0 auto;
    }

    .admin-index > aside {
        animation: none;
    }

    .admin-index > section {
        margin-left: 270px;
        -webkit-transition: .5s;
        -moz-transition: .5s;
        -ms-transition: .5s;
        -o-transition: .5s;
        transition: .5s;
    }
}

@media screen and (min-width: 1500px) {

    .index-bg {
        background: url('../i/bg-logo.png') no-repeat center;
    }
}

@media screen and (orientation: landscape) and (min-height: 320px) and (max-height: 480px) {

    .practice-info-wrapper {
        padding: 20px 0;
        overflow-y: scroll;
    }
}

@media screen and (orientation: landscape) and (min-width: 1024px) and (min-height: 768px) {
}

@media screen and (orientation: landscape) and (max-height: 767px) {

    header.header-main {
        padding: 10px 3%;
    }

    .index-top-logo a {
        width: 120px;
        height: 25px;
    }

    label.label-top-menu-checkbox {
        width: 25px;
        height: 25px;
    }

    main.no-fixed-page {
        height: auto;
        margin: 78px 0 30px;
        padding: 30px 0;
    }

}

@media screen and (orientation: portrait) and (min-width: 540px) and (min-height: 768px) {
}