/*
Gradient builder online
https://mycolor.space/gradient3?ori=to+right&hex=%230593E2&hex2=%2365C1FE&hex3=%230593E2&submit=submit

Box-shadow builder
http://css3studio.com/page-css3/css-box-shadow.php

Html symbols codes tables
https://www.toptal.com/designers/htmlarrows/symbols/

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops }
@media (min-width:1281px) { /* hi-res laptops and desktops }
*/

html.wait, html.wait * { cursor: wait !important; }
.unclickable { pointer-events:none!important; }

:root {
    /* Colors: */
    --background-gradient-light: linear-gradient(to right, #a4d8f6, #bcdefa, #d1e4fc, #e3ebfd, #f1f3fe, #f1f3fe, #f1f3fe, #f1f3fe, #e3ebfd, #d1e4fc, #bcdefa, #a4d8f6);
    --background-gradient-dark: linear-gradient(to right, #0593e2, #259be7, #37a4ed, #46acf2, #54b5f7, #54b5f7, #54b5f7, #54b5f7, #46acf2, #37a4ed, #259be7, #0593e2);
    --top-divider-color: #88AF3C;
    --bottom-divider-color: #A0778E;
    --customerArea-font-color: #15789B;
    --gameArea-font-color: #14779A;
    --buttons-color: #15789B;
    --lang-buttons-color: #AD85AF;
    --menu-buttons-text-color: white;
    /* Font-sizes */
    --page-font-small: 0.9em;
    --page-font-regular: 1em;
    --page-font-medium: 1.2em;
    --page-font-big: 1.3em;
    --page-font-large: 2em;
    /* Width grid */
    --w30: 30%;
    --w50: 50%;
    --w60: 60%;
    --w100: 100%;
}


/* ------ Character Styles ------ */


/* Assistant */
@font-face {
    font-family: Assistant-Bold;
    src: url('../fonts/Assistant/Assistant-Bold.ttf') format('truetype');
}
@font-face {
    font-family: Assistant-ExtraBold;
    src: url('../fonts/Assistant/Assistant-ExtraBold.ttf') format('truetype');
}
@font-face {
    font-family: Assistant-ExtraLight;
    src: url('../fonts/Assistant/Assistant-ExtraLight.ttf') format('truetype');
}
@font-face {
    font-family: Assistant-Light;
    src: url('../fonts/Assistant/Assistant-Light.ttf') format('truetype');
}
@font-face {
    font-family: Assistant-Medium;
    src: url('../fonts/Assistant/Assistant-Medium.ttf') format('truetype');
}
@font-face {
    font-family: Assistant-Regular;
    src: url('../fonts/Assistant/Assistant-Regular.ttf') format('truetype');
}
@font-face {
    font-family: Assistant-SemiBold;
    src: url('../fonts/Assistant/Assistant-SemiBold.ttf') format('truetype');
}

/* Heebo */
@font-face {
    font-family: Heebo;
    src: url('../fonts/Heebo/Heebo-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: Heebo-Black;
    src: url('../fonts/Heebo/static/Heebo-Black.ttf') format('truetype');
}
@font-face {
    font-family: Heebo-Bold;
    src: url('../fonts/Heebo/static/Heebo-Bold.ttf') format('truetype');
}
@font-face {
    font-family: Heebo-ExtraBold;
    src: url('../fonts/Heebo/static/Heebo-ExtraBold.ttf') format('truetype');
}
@font-face {
    font-family: Heebo-ExtraLight;
    src: url('../fonts/Heebo/static/Heebo-ExtraLight.ttf') format('truetype');
}
@font-face {
    font-family: Heebo-Light;
    src: url('../fonts/Heebo/static/Heebo-Light.ttf') format('truetype');
}
@font-face {
    font-family: Heebo-Medium;
    src: url('../fonts/Heebo/static/Heebo-Medium.ttf') format('truetype');
}
@font-face {
    font-family: Heebo-Regular;
    src: url('../fonts/Heebo/static/Heebo-Regular.ttf') format('truetype');
}
@font-face {
    font-family: Heebo-SemiBold;
    src: url('../fonts/Heebo/static/Heebo-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: Heebo-Thin;
    src: url('../fonts/Heebo/static/Heebo-Thin.ttf') format('truetype');
}

/* Yiddishkeit */
@font-face {
    font-family: Yiddishkeit;
    src: url('../fonts/yiddishkeit-bold-web/yiddishkeit-bold-fm.ttf') format('truetype');
}

h1, h2, h3, h4, h5, h6 {
    direction: rtl;
}
h4 {
    line-height: inherit;
}

.bold {
    font-family: 'Assistant-Bold'!important;
}


.words .words-table {
    width: 70%;
    margin: 0 auto;
    direction: rtl;
    font-family: Assistant-Medium;
}
.words .words-table tr th {
    text-align: center;
    padding-bottom: 20px;
}
.words .words-table tr th span {
    font-size: 1.8em;
    line-height: 1.4;
    font-weight: bold;
    font-family: Assistant-Bold;
}
.words .words-table tr td {
    text-align: right;
    vertical-align: top;
    font-size: 1.8em;
    line-height: 1.4;
    font-weight: bold;
    border: 1px solid #55603D;
    padding: 10px 15px;
}
.words .words-table tr td:nth-child(2) {
    text-align: left;
}
.words .words-table tr td .meaning {
    color: #7B8F66;
}
.words .words-table b, .words .words-table strong {
    font-weight: bold;
    font-family: Assistant-Bold;
}



/* ------ Color Scheme 1 ------ */

.colorScheme1.lettersAndVowels .gameHeading>h1,
.colorScheme1 .gameContainer .buttonsContainer .gameChoiceBtn.finished {
    background-color: #F4B17B;
}

.colorScheme1 .noFrameGameVerticalBlock {
    background-color: #F4DFCE;
    box-shadow: 0px 6px 0px 0px rgb(187 120 59);
    min-height: 385px;
}
@media (max-width: 524px) {
    .colorScheme1 .noFrameGameVerticalBlock {
        min-height: unset;
    }
}
.colorScheme1 .innerGameContainer.withFrame .gameField {
    background-color: #824314;
}

.colorScheme1 .innerGameContainer.withFrame .gameField .lightBg {
    background-color: #F4DFCE;
}

#fullsvg {
    left: 0px;
    top: 0px;
    position: fixed;
    margin: 0;
    pointer-events: none;
}

.lettersAndVowels.colorScheme1 .gameHeading>h1,
.colorScheme1 .noFrameBlockLetter,
.colorScheme1 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.letterBtn,
.colorScheme1 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.wordBtn,
.colorScheme1 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn,
.colorScheme1 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter,
.colorScheme1 .gameContainer .buttonsContainer .gameChoiceBtn.active,
.colorScheme1 .gameContainer .gamesCategory{
    color: #824314;
}

.colorScheme1 .gameContainer .buttonsContainer .gameChoiceBtn {
    box-shadow: 0px 4px 0px 0px rgb(142 77 35);
    background-color: #E89037;
}


/* ------ Color Scheme 2 ------ */

.colorScheme2.lettersAndVowels .gameHeading>h1,
.colorScheme2 .gameContainer .buttonsContainer .gameChoiceBtn.finished {
    /* background-color: #F4B17B; */
    background-color: #C9E082;
}

.colorScheme2 .noFrameGameVerticalBlock {
    /* background-color: #F4DFCE; */
    background-color: #E8EFD0;
    /* box-shadow: 0px 6px 0px 0px rgb(187 120 59); */
    box-shadow: 0px 4px 0px 0px #55603D;
}

.colorScheme2 .innerGameContainer.withFrame .gameField {
    /* background-color: #824314; */
    background-color: #55603D;
}

.colorScheme2 .innerGameContainer.withFrame .gameField .lightBg {
    /* background-color: #F4DFCE; */
    background-color: #E8EFD0;
}

.lettersAndVowels.colorScheme2 .gameHeading>h1,
.colorScheme2 .noFrameBlockLetter,
.colorScheme2 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.letterBtn,
.colorScheme2 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.wordBtn,
.colorScheme2 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn,
.colorScheme2 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter,
.colorScheme2 .gameContainer .buttonsContainer .gameChoiceBtn.active,
.colorScheme2 .gameContainer .gamesCategory{
    /* color: #824314; */
    color: #55603D;
}

.colorScheme2 .gameContainer .buttonsContainer .gameChoiceBtn {
    /* box-shadow: 0px 4px 0px 0px rgb(142 77 35); */
    box-shadow: 0px 4px 0px 0px #55603D;
    /* background-color: #E89037; */
    background-color: #99B73E;
}


/* ------ Color Scheme 3 ------ */

.colorScheme3.lettersAndVowels .gameHeading>h1,
.colorScheme3 .gameContainer .buttonsContainer .gameChoiceBtn.finished {
    background-color: #C5D1B8;
}

.colorScheme3 .noFrameGameVerticalBlock {
    background-color: #E8EFD0;
    box-shadow: 0px 4px 0px 0px #55603D;
}

.colorScheme3 .innerGameContainer.withFrame .gameField {
    background-color: #55603D;
}

.colorScheme3 .innerGameContainer.withFrame .gameField .lightBg {
    background-color: #E8EFD0;
}

.lettersAndVowels.colorScheme3 .gameHeading>h1,
.colorScheme3 .noFrameBlockLetter,
.colorScheme3 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.letterBtn,
.colorScheme3 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.wordBtn,
.colorScheme3 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn,
.colorScheme3 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter,
.colorScheme3 .gameContainer .buttonsContainer .gameChoiceBtn.active,
.colorScheme3 .gameContainer .gamesCategory {
    color: #55603D;
}

.colorScheme3 .gameContainer .buttonsContainer .gameChoiceBtn {
    box-shadow: 0px 4px 0px 0px #55603D;
    background-color: #7B8F66;
}


/* ------ Color Scheme 4 ------ */

.colorScheme4.lettersAndVowels .gameHeading>h1,
.colorScheme4 .gameContainer .buttonsContainer .gameChoiceBtn.finished {
    /* background-color: #F4B17B; */
    background-color: #EAC38B;
}

.colorScheme4 .noFrameGameVerticalBlock {
    /* background-color: #F4DFCE; */
    background-color: #F9DFAF;
    /* box-shadow: 0px 6px 0px 0px rgb(187 120 59); */
    box-shadow: 0px 4px 0px 0px #966A11;
}

.colorScheme4 .innerGameContainer.withFrame .gameField {
    /* background-color: #824314; */
    background-color: #845C03;
}

.colorScheme4 .innerGameContainer.withFrame .gameField .lightBg {
    /* background-color: #F4DFCE; */
    background-color: #F9DFAF;
}

.lettersAndVowels.colorScheme4 .gameHeading>h1,
.colorScheme4 .noFrameBlockLetter,
.colorScheme4 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.letterBtn,
.colorScheme4 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.wordBtn,
.colorScheme4 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn,
.colorScheme4 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter,
.colorScheme4 .gameContainer .buttonsContainer .gameChoiceBtn.active,
.colorScheme4 .gameContainer .gamesCategory{
    /* color: #824314; */
    color: #845C03;
}

.colorScheme4 .gameContainer .buttonsContainer .gameChoiceBtn {
    /* box-shadow: 0px 4px 0px 0px rgb(142 77 35); */
    box-shadow: 0px 4px 0px 0px #845C03;
    /* background-color: #E89037; */
    background-color: #e9a647;
}


/* ------ Color Scheme 5 ------ */

.colorScheme5.lettersAndVowels .gameHeading>h1,
.colorScheme5 .gameContainer .buttonsContainer .gameChoiceBtn.finished {
    /* background-color: #F4B17B; */
    background-color: #C9B8CC;
}

.colorScheme5 .noFrameGameVerticalBlock {
    /* background-color: #F4DFCE; */
    background-color: #EEE4EF;
    /* box-shadow: 0px 6px 0px 0px rgb(187 120 59); */
    box-shadow: 0px 4px 0px 0px #66516B;
}

.colorScheme5 .innerGameContainer.withFrame .gameField {
    /* background-color: #824314; */
    background-color: #66516B;
}

.colorScheme5 .innerGameContainer.withFrame .gameField .lightBg {
    /* background-color: #F4DFCE; */
    background-color: #EEE4EF;
}

.lettersAndVowels.colorScheme5 .gameHeading>h1,
.colorScheme5 .noFrameBlockLetter,
.colorScheme5 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.wordBtn,
.colorScheme5 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn,
.colorScheme5 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter,
.colorScheme5 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.letterBtn,
.colorScheme5 .gameContainer .buttonsContainer .gameChoiceBtn.active,
.colorScheme5 .gameContainer .gamesCategory{
    /* color: #824314; */
    color: #66516B;
}

.colorScheme5 .gameContainer .buttonsContainer .gameChoiceBtn {
    /* box-shadow: 0px 4px 0px 0px rgb(142 77 35); */
    box-shadow: 0px 4px 0px 0px #66516B;
    /* background-color: #E89037; */
    background-color: #a770b1;
    background-color: #AD85AF;
}


/* ------ General ------- */

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    line-height: 1.5;
}

body,
body * {
    box-sizing: border-box;
    font-family: Assistant-Regular;
}

.clear {
    clear: both;
    width: 100%!important;
    height: 0;
    display: block!important;
}

.rtl {
    direction: rtl;
}

.hidden {
    display: none;
}

h1 {
    font-size: 1.4em;
    margin: 0;
    font-family: Assistant-Medium;
    color: var(--customerArea-font-color);
}

h2 {
    font-size: var(--page-font-big);
    margin: 0;
    font-family: Assistant-Light;
    color: var(--customerArea-font-color);
}

a {
    text-decoration: none;
}

ul {
    display: block;
    list-style-type: none;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
}

.contentContainer {
    max-width: 1280px;
    margin: auto;
    padding: 0.8em;
}

.contentContainer.wide {
    max-width: 100%;
}

.w30 {
    width: 30%;
}

.alignCenter {
    text-align: center;
}
.alignRight {
    text-align: right;
}

.inline-block {
    display: inline-block;
    vertical-align: middle;
}

@media (max-width:960px) {
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        border: 0;
    }
}


/* ------ Header ------ */

.headerContainer {
    width: 100%;
    height: 95px;
    border-bottom: 4px solid var(--top-divider-color);
}

@media (max-width: 960px) {
    .headerContainer {
        /*height: 110px;*/
    }
    .headerContainer.opened>.contentContainer {
        position: fixed;
        background-color: white;
        top: 0;
        width: 100%;
        z-index: 10;
    }
}
@media (max-width: 429px) {
    .headerContainer {
        /*height: 100px;*/
    }
}
.logoContainer {
    float: right;
}

.logoContainer svg {
    width: 130px;
}

@media (max-width: 960px) {
    .logoContainer svg {
        width: 105px;
    }
}

.navigationContainer {
    float: left;
}

@media (max-width: 960px) {
    .navigationContainer {
        margin-top: 1em;
    }
}


/* ------ Top Menu ------- */


/* Mobile menu toggle Btn*/

.mobileMenuBtn {
    cursor: pointer;
    vertical-align: middle;
    padding-inline-start: 0;
    display: none;
}

@media (max-width: 960px) {
    .mobileMenuBtn {
        display: inline-block;
    }
}

.bar1,
.bar2,
.bar3 {
    width: 55px;
    height: 8px;
    background-color: var(--buttons-color);
    margin: 10px 0;
    transition: 0.4s;
}

@media (max-width: 429px) {
    .bar1,
    .bar2,
    .bar3 {
        width: 45px;
    }
}

.bar1 {
    margin-top: 0;
}

.bar3 {
    margin-bottom: 0;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-14px, 14px);
    -moz-transform: rotate(-45deg) translate(-14px, 14px);
    -ms-transform: rotate(-45deg) translate(-14px, 14px);
    -o-transform: rotate(-45deg) translate(-14px, 14px);
    transform: rotate(-45deg) translate(-14px, 14px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-11px, -12px);
    -moz-transform: rotate(45deg) translate(-11px, -12px);
    -ms-transform: rotate(45deg) translate(-11px, -12px);
    -o-transform: rotate(45deg) translate(-11px, -12px);
    transform: rotate(45deg) translate(-11px, -12px);
}


/* Menu */

.custAreaBlock {
    position: absolute;
    top: 116px;
}

@media (max-width:960px) {
    .custAreaBlock {
        width: 52px;
        height: 52px;
        display: inline-block;
        margin-left: 1.4em;
        top: 21px;
    }
}
@media (max-width:429px) {
    .custAreaBlock {
        margin-left: 1em;
    }
}

.custLoginBtn {
    background-color: var(--buttons-color);
    color: var(--menu-buttons-text-color);
    padding: 22px 20px;
    border: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    font-size: var(--page-font-medium);
    line-height: 52px;
}

.custLoginBtn:visited,
.custLoginBtn:hover {
    color: var(--menu-buttons-text-color);
    text-decoration: none;
}

.custLoginBtn:hover {
    /* color: #d1e4fc; */
    background-color: var(--lang-buttons-color);
}

@media (max-width:960px) {
    .custLoginBtn {
        color: inherit;
        padding: 0;
        border: none;
        background-color: transparent;
    }
    .custLoginBtn:hover {
        background-color: transparent;
    }
}

.custLoginBtn>span {
    display: inline;
    vertical-align: bottom;
    font-family: Assistant-Medium;
}

@media screen and (max-width: 960px) {
    .custLoginBtn > span:last-of-type {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
    }
}
.custLoginBtn .custImg {
    margin-right: 10px;
}

.loggedIn .custLoginBtn {
    /*padding: 18px 20px;*/
}

@media (min-width:961px) {
    .loggedIn .custLoginBtn {
        line-height: 45px;
    }
}

@media (max-width:960px) {
    .loggedIn .custLoginBtn {
        padding: initial;
    }
}

@media (min-width:961px) {
    .loggedIn .custLoginBtn>span.custImg {
        margin-right: 10px;
    }
    .loggedIn .custLoginBtn>span.custImg>img {
        width: 46px;
    }
}

.topMenu {
    display: inline-block;
    padding-inline-start: 0;
    padding-block-start: 1.1em;
}

.topMenu a:hover {
    text-decoration: none;
}

@media (max-width:960px) {
    .topMenu {
        display: none;
        position: absolute;
        position: fixed;
        width: 100%;
        left: 0;
        top: 78px;
        z-index: 5;
    }
}
@media (max-width:359px) {
    .topMenu {
        top: 68px;
    }
}
.headerContainer.opened .topMenu {
    display: block;
}

.topMenu>li.menuBtn {
    background-color: var(--buttons-color);
    color: var(--menu-buttons-text-color);
    list-style: none;
    padding: 5px 25px;
    border: none;
    float: left;
}

.topMenu>li.menuBtn.active,
.topMenu>li.menuBtn:hover {
    background-color: var(--lang-buttons-color);
}

@media (max-width:960px) {
    .topMenu>li.menuBtn,
    .topMenu>li.langBtn {
        float: none;
        background-color: white;
    }
}

@media (min-width:961px) {
    .topMenu>li.menuBtn:first-of-type {
        padding-left: 40px;
        -webkit-border-radius: 7px 0 0 7px;
        -moz-border-radius: 7px 0 0 7px;
        -ms-border-radius: 7px 0 0 7px;
        -o-border-radius: 7px 0 0 7px;
        border-radius: 7px 0 0 7px;
    }
    .topMenu>li.menuBtn:nth-of-type(4) {
        padding-right: 40px;
        -webkit-border-radius: 0 7px 7px 0;
        -moz-border-radius: 0 7px 7px 0;
        -ms-border-radius: 0 7px 7px 0;
        -o-border-radius: 0 7px 7px 0;
        border-radius: 0 7px 7px 0;
    }
    .topMenu>li.langBtn {
        background-color: var(--lang-buttons-color);
        padding: 5px 35px;
        display: inline-block;
        margin-left: 20px;
        border: none;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
    }
    .topMenu>li.langBtn:hover {
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        -ms-border-radius: 5px 5px 0 0;
        -o-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
    }
}

@media (min-width:961px) {
    .langBtn>a {
        font-size: var(--page-font-big);
        color: var(--menu-buttons-text-color);
    }
}

.topMenu>li a {
    color: var(--menu-buttons-text-color);
    font-size: var(--page-font-big);
}

@media (max-width:960px) {
    .topMenu>li a {
        color: var(--customerArea-font-color);
        font-size: var(--page-font-large);
    }
    .topMenu>li.menuBtn:first-of-type {
        padding-left: 25px;
    }
    .topMenu>li.menuBtn.active>a {
        color: white;
    }
    .topMenu>li.langBtn {
        /* text-align: center; */
        padding-bottom: 10px;
    }
    .topMenu>li.langBtn>a {
        color: var(--lang-buttons-color);
    }
}

.menuBtn.hasSubMenu .subMenu {
    padding-inline-start: 20px;
}

@media (min-width: 961px) {
    .menuBtn.hasSubMenu .subMenu {
        display: none;
        position: absolute;
        background-color: #f1f3fe;
        border: 1px solid var(--buttons-color);
        border-top: none;
        margin-top: 5px;
        margin-left: -25px;
        padding: 5px 0;
        -webkit-box-shadow: 0 0 10px rgba(176, 176, 176, 0.8);
        -moz-box-shadow: 0 0 10px rgba(176, 176, 176, 0.8);
        box-shadow: 0 0 10px rgba(176, 176, 176, 0.8);
        -webkit-border-radius: 0 0 5px 5px;
        -moz-border-radius: 0 0 5px 5px;
        -ms-border-radius: 0 0 5px 5px;
        -o-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
    }
    .menuBtn.hasSubMenu:hover .subMenu {
        display: block;
    }
    .langBtn.menuBtn.hasSubMenu .subMenu {
        margin-left: -35px;
    }
}

.subMenu li {
    list-style: none;
}

@media (min-width: 961px) {
    .subMenu li {
        list-style: none;
        line-height: 2.2em;
        padding: 0 44px;
    }
    .subMenu li:first-of-type {
        border-top: none;
    }
    .langBtn.menuBtn.hasSubMenu .subMenu li {
        padding: 0 25px;
    }
}

.subMenu li>a {
    color: var(--customerArea-font-color);
}

@media (min-width: 961px) {
    .subMenu li:hover>a {
        color: var(--lang-buttons-color);
    }
}


/* ------ Main ------ */

.topTextContainer {
    width: 100%;
    height: 106px;
    background-color: #A4D8F6;
    background-image: var(--background-gradient-light);
    padding-block-start: 1.1em;
}

@media (max-width: 960px) {
    .topTextContainer {
        background-color: #0593e2;
        background-image: var(--background-gradient-dark);
        height: auto;
        display: none;
    }
    .topTextContainer * {
        color: white;
    }
    /*.lettersAndVowels .topTextContainer {*/
    /*    display: none;*/
    /*}*/
}

.gameAreaContainer {
    width: 100%;
    min-height: calc(100vh - 143px);
    background-color: #0593e2;
    background-image: var(--background-gradient-dark);
    border-bottom: 6px solid var(--bottom-divider-color);
    text-align: center;
    padding-top: 0px;
    padding-bottom: 0;
}

.gameChoiceBtn {
    display: inline-block;
    margin-top: 15px;
    margin-bottom: 30px;
    width: 100%;
    /*min-width: 305px;*/
    text-align: center;
}

.homePage .gameChoiceBtn {
    width: 30%;
    min-width: 260px;
    max-width: 320px;
    margin-left: 20px;
    margin-right: 20px;
}


.homePage .gameChoiceBtn > a > img {
    width: 100%;
}


.gameChoiceBtn img.item {
    display: inline-block;
    vertical-align: top;
    height: 40px;
    border: none;
}

.soundAndLetter img.item {
    display: inline-block;
    vertical-align: top;
    /*margin-top: 6px;*/
    margin-top: -1px;
    height: 45px;
    border: none;
}

@media (max-width: 1200px) {
    .gameChoiceBtn img.item {
        height: 28px;
        vertical-align: middle;
    }

    /*.soundAndLetter img.item {*/
    /*    height: 20px;*/
    /*}*/
}

.gameAreaContainer .backForwardNavigation {
    width: 100%;
    height: 2em;
    margin-bottom: 0;
}

/*@media (max-width: 960px) {*/
/*    .gameAreaContainer .backForwardNavigation {*/
/*        margin-bottom: 1em;*/
/*    }*/
/*}*/

.gameAreaContainer .backForwardNavigation .backBtn {
    float: right;
    color: white;
    font-family: 'Assistant-Medium';
    font-size: var(--page-font-big);
}
.gameAreaContainer .backForwardNavigation .backBtn.button {
    border: 1px solid #fff;
    padding: 0 10px;
    margin: 0;
    margin-left: 20px;
}
.gameAreaContainer .backForwardNavigation .backBtn.button:hover {
    text-decoration: none;
    background-color: #A4D8F6;
}

.gameHeading.withFrame {
    z-index: 3;
    position: relative;
    width: inherit;
    /*margin-right: 12px;*/
}

@media (max-width: 1200px) {
    .gameHeading.withFrame {
        width: 100%;
        margin-right: auto;
    }
}

.gameHeading>h1 {
    margin: auto;
    width: max-content;
    min-width: calc(350px - 4em);
    border: none;
    padding: 0.3em 1em;
    font-size: 1.6em;
    line-height: 1.2;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -o-border-radius: 9px;
    border-radius: 9px;
}

.gameContainer {
    display: inline-block;
    margin-bottom: 30px;
    /*margin-top: -5px;*/
    width: 100%;
    text-align: center;
}


/* --- letters&vowels page ---*/

.lettersAndVowels .lettersBar {
    width: 100%;
    background-color: #A4D8F6;
    line-height: 1;
    padding: 3px 10px 8px 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    color: white;
    font-size: 2em;
    margin-top: 0.5em;
    margin-bottom: 2em;
    background-image: url('../../images/Sound.png');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: auto 25px;
}

@media (max-width: 960px) {
    .lettersAndVowels .lettersBar {
        display: none;
    }
}

.lettersBar span {
    padding: 0 10px;
    font-family: Assistant-Bold;
    /*cursor: url('../../images/speaker.ico?xx'), default;*/
    cursor: pointer;
}
.lettersBar a, .lettersBar .letter {
    font-family: Assistant-Bold;
    text-decoration: none;
    color: #fff;
}
.lettersBar .letter:hover {
    color: #15789B;
}

.innerGameContainer.noFrameGameField {
    margin-top: 1.7em;
}

.noFrameGameVerticalBlock {
    display: inline-block;
    filter: opacity(0.5);
    -webkit-filter: opacity(0.5);
    padding: 0.5em;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    position: relative;
    vertical-align: top;
}

@media (max-width: 524px) {
    .noFrameGameVerticalBlock {
        display: block;
        margin-bottom: 1.2em;
    }
}

.noFrameGameVerticalBlock.active {
    filter: opacity(1);
    -webkit-filter: opacity(1);
}

.noFrameGameVerticalBlockDivider {
    display: inline-block;
    color: white;
    filter: opacity(0.5);
    -webkit-filter: opacity(0.5);
    margin-top: 3.2em;
}

@media (max-width: 524px) {
    .noFrameGameVerticalBlockDivider {
        display: none;
    }
}

.noFrameGameVerticalBlockDivider.active {
    filter: opacity(1);
    -webkit-filter: opacity(1);
}

.noFrameBlockLetter {
    background-color: #FFFFFF99;
    padding: 0 10px;
    display: block;
    cursor: pointer;
    font-family: Assistant-Bold;
    font-size: 2.2em;
    margin-bottom: 10px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}

.noFrameBlockLetter:last-of-type {
    margin-bottom: 0;
}

@media (max-width: 524px) {
    .noFrameBlockLetter {
        display: inline;
        margin-left: 4px;
    }
}

.innerGameContainer.withFrame {
    display: contents;
    width: 75%;
}

.innerGameContainer.withFrame .gameField {
    margin-top: -2.3em;
    display: inline-block;
    width: 74%;
    z-index: 1;
    padding: 0.5em;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    vertical-align: top;
}

@media (max-width: 1200px) {
    .innerGameContainer.withFrame .gameField {
        display: block;
        width: 100%;
    }
}

    .colorScheme4 .innerGameContainer.withFrame .gameField .questionItemsWrapper.game {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }

.innerGameContainer.withFrame .gameField .letters .questionItemsWrapper.game{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.innerGameContainer.withFrame .gameField .lightBg {
    padding-top: 2.5em;
    padding-bottom: 1em;
    min-height: 520px;
    text-align: center;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.innerGameContainer .gameField .lightBg .taskNameWrapper {
    color: #14779A;
    text-align: center;
    margin: auto auto 40px;
    direction: ltr;
}

.innerGameContainer .gameField .lightBg .taskNameWrapper>div {
    color: #14779A;
    display: inline-block;
    padding: 5px;
}

.innerGameContainer .gameField .lightBg .taskNameWrapper>div>div {
    font-family: Assistant-Bold;
    font-size: 1.3em;
    line-height: 1.3em;
}

.innerGameContainer .gameField .lightBg .taskNameWrapper .sound-button {
    cursor: pointer;
    margin-top: -30px;
    margin-right: 10px;
}

.innerGameContainer .gameField .lightBg .soundBtnWrapper,
.innerGameContainer .gameField .lightBg .checkBtnWrapper {
    margin-top: 20px;
    display: block;
}
.innerGameContainer .gameField .lightBg .soundBtnWrapper {
    margin-bottom: 20px;
}

.soundBtnWrapper #Sound {
    cursor: pointer;
}

#Sound {
    width: 100px;
    height: 100px;
}

@media (max-width: 640px) {
    .innerGameContainer .gameField .lightBg .soundBtnWrapper {
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .innerGameContainer .gameField .lightBg .soundBtnWrapper>svg,
    .innerGameContainer .gameField .lightBg .videoBtnWrapper>svg {
        width: 120px;
        height: 120px;
    }

    .innerGameContainer .gameField .lightBg .videoWrapper video {
        width: 100%;
        height: 120px;
    }
}

@media (max-width: 350px) {
    .innerGameContainer .gameField .lightBg .soundBtnWrapper>svg {
        width: 100px;
        height: 100px;
    }
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.letterBtn {
    width: 140px;
    height: 140px;
    margin: 10px;
    display: inline-block;
    font-family: 'Assistant-Bold';
    font-size: 4em;
    background-color: #FFFFFF99;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    border: 2px solid #FFFFFF99;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.letterBtn:hover {
    border: 2px solid #55603D;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.letterBtn img {
    width: 125px;
    height: 125px;
    margin: 5px auto auto 0;
    cursor: pointer;
}

.correct {
    border: 2px solid #88AF3C!important;
}
.wrong {
    border: 2px solid #ED1B23!important;
}

.leader-line {
    z-index: 1000;
}

@media (max-width: 350px) {
    .innerGameContainer .gameField .lightBg .questionItemsWrapper>.letterBtn {
        width: 110px;
        height: 110px;
        margin: 7px;
    }
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.wordBtn.wide {
    width: auto;
    min-width: 200px;
    padding: 0 40px;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.wordBtn.not-clickable {
    cursor: default!important;
    min-height: 100px;
    height: auto;
    line-height: 1.2;
    margin: 10px 20px;
    font-size: 1.8em;

    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.wordBtn.not-clickable:hover {
    border: 2px solid #FFFFFF99!important;
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.wordBtn {
    width: 250px; /* 220px */
    height: 100px;
    margin: 10px;
    display: inline-block;
    font-family: 'Assistant-Bold';
    font-size: 2.5em;
    line-height: 100px;
    background-color: #FFFFFF99;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    border: 2px solid #FFFFFF99;
    cursor: pointer;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.wordBtn:hover {
    border: 2px solid #55603D;
}

@media (max-width: 479px) {
    .innerGameContainer .gameField .lightBg .questionItemsWrapper>.wordBtn {
        width: 80%;
        min-width: 250px;
        margin: 7px;
    }
}

.wordBtn img {
    max-width: 200px;
    max-height: 80px;
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn {
    width: 280px;
    height: 120px;
    margin: 10px;
    font-family: 'Assistant-Bold';
    font-size: 1.8em;
    line-height: 1.2em;
    line-height: 1.4;
    background-color: #FFFFFF99;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    cursor: pointer;
    border: 2px solid #FFFFFF99;
    display: inline-grid;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    align-content: space-evenly;
}
.colorScheme4 .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn {
    font-size: 1.3em;
    width: calc(50% - 28px - 7%);
    height: initial;
    padding-top: 5px;
    padding-bottom: 5px;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn p {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    clear: both;
    font-family: 'Assistant-Bold';
    font-size: 1em;
    line-height: 1em;
    float: none;
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn img {
    max-height: 100px;
    max-width: 190px;
    display: inline-block;
    margin-top: -10px;
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.letterBtn.correct,
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.wordBtn.correct,
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn.correct {
    /*background-color: #88AF3C;*/
    color: #88AF3C;
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.letterBtn.wrong,
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.wordBtn.wrong,
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn.wrong {
    /*background-color: #ED1B23;*/
    color: #ED1B23;
}

.text-content {
    padding: 0 30px;
    text-align: center;
    font-size: 2em;
    line-height: normal;
    margin: 0 auto;
}
.text-content div {
    padding: 0;
    margin-bottom: 4px;
}
.text-content hr {
    margin: 15px 0;
    border-color: gray!important;
}

.wordBtn .hebrew, .matchWordBtn .hebrew, .text-content .hebrew {
    color: #845C03;
}
.wordBtn .english, .matchWordBtn .english, .text-content .english {
    color: #337ab7;
}
.wordBtn .transliteration, .matchWordBtn .transliteration, .text-content .transliteration {
    color: #000;
}
.wordBtn hr, .text-content hr {
    border-color: #15779A;
    border-style: dashed;
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn.used {
    border: 2px solid #000;
    color: #000;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn.answered {
    border: 2px solid #88AF3C;
    color: #88AF3C;
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn.eng {
    margin-right: 7%;
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn.heb {
    margin-left: 7%;
}

@media (max-width: 570px) {
    .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn {
        width: 150px;
        font-size: 1.3em;
        /*height: 150px;*/
    }
    .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn img {
        max-width: 140px;
    }


}

@media (max-width: 450px) {
    .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn {
        /*width: 110px;*/
        width: calc(50% - 12px - 6%);
        /*font-size: 1.1em;*/
        /*height: 75px;*/
    }
    .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn.eng {
        margin-right: 6%;
    }
    .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn.heb {
        margin-left: 6%;
    }
    .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn img {
        max-width: 100px;
    }


}

@media (min-width: 950px) {
    .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn.eng,
    .innerGameContainer .gameField .lightBg .questionItemsWrapper>.matchWordBtn.heb {
        margin: 10px 5%;
    }
}

.innerGameContainer .gameField .lightBg .videoContentContainer {
    height: 450px;
    width: 100%;
    display: table;
}

.innerGameContainer .gameField .lightBg .videoBtnWrapper {
    height: 450px;
    /*display: table-cell;*/
    display: none;
    vertical-align: middle;
    text-align: center;
}
.innerGameContainer .gameField .lightBg .videoWrapper {
    /*display: none;*/
}
.innerGameContainer .gameField .lightBg .videoWrapper video {
    width: 100%;
    height: 450px;
}

.innerGameContainer .gameField .lightBg .checkBtn {
    /*display: block;*/
    display: inline-block;
    border: none;
    text-align: center;
    background-color: #D6D6D6;
    color: #B5B5B5;
    width: fit-content;
    width: -moz-fit-content;
    /*margin: auto;*/
    margin: 0 5px 10px 5px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    /*padding: 15px 80px;*/
    padding: 5px 15px;
    min-width: 200px;
}
.checkBtn:hover {
    text-decoration: none;
}

.innerGameContainer .gameField .lightBg .checkBtn.active {
    background-color: #15779A;
    color: white;
    cursor: pointer;
}

.innerGameContainer .gameField .lightBg .checkBtn>div,
.innerGameContainer .gameField .lightBg .checkBtn>div>span {
    font-size: 20px;
    line-height: 25px;
    font-family: 'Assistant-Bold';
}

.innerGameContainer .gameField .lightBg .endGameScreen .checkBtn>div {
    width: 100px;
}

.innerGameContainer .gameField .lightBg .checkBtn>.arrow>img {
    width: 35px;
    max-height: 25px;
}
.flip-x {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

@media (max-width: 570px) {
    .innerGameContainer .gameField .lightBg .checkBtn {
        /*padding: 10px 70px;*/
        min-width: 320px;
        width: auto;
    }
    .innerGameContainer .gameField .lightBg .checkBtn>div {
        font-size: 1.3em;
    }
}

@media (max-width: 450px) {
    .innerGameContainer .gameField .lightBg .checkBtn {
        /*padding: 10px 50px;*/
        min-width: 260px;
        width: auto;
    }
    .innerGameContainer .gameField .lightBg .checkBtn>div {
        font-size: 1.1em;
    }
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter {
    width: 90%;
    min-width: 260px;
    min-height: 55px;
    margin: 15px auto;
    padding: 7px 5px;
    display: block;
    font-family: 'Assistant-Bold';
    font-size: 28px;
    line-height: 1.2;
    background-color: #FFFFFF99;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter.title {
    font-weight: bold;
    font-family: 'Assistant-Bold'!important;
    line-height: 37px;
    min-height: 90px;
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter:first-of-type {
    background-color: transparent;
    font-size: 25px;
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter>div {
    width: 50%;
    display: inline-block;
    text-align: center;
    font-family: 'Assistant-Bold';
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter>div.left {
    float: left;
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter>div.right {
    float: right;
}

.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter span.item {
    display: inline-block;
    font-weight: bold;
    font-size: 24px;
    line-height: 1.3;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter.title span.item {
    display: inline-block;
    font-weight: bold;
    font-size: 24px;
    font-family: 'Assistant-Bold'!important;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter span.item.w10p {
    width: 10%;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter span.item.w15p {
    width: 15%;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter span.item.w20p {
    width: 20%;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter span.item.w25p {
    width: 25%;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter span.item.w30p {
    width: 30%;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter span.item.w35p {
    width: 35%;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter span.item.w40p {
    width: 40%;
}
.innerGameContainer .gameField .lightBg .questionItemsWrapper>.soundAndLetter span.item.w50p {
    width: 50%;
}

span.item .play-sound {
    cursor: pointer;
    /*margin-top: -12px;*/
    /*margin-top: 3px;*/
}

.gameContainer .buttonsContainer {
    display: inline-block;
    margin-top: 1em;
    width: 26%;
    margin-right: -1%;
    position: relative;
    vertical-align: top;
}

@media (max-width: 1200px) {
    .gameContainer .buttonsContainer {
        display: block;
        margin-top: 0.5em;
        width: 100%;
        margin-right: 0;
    }
}

.gameContainer .buttonsContainer .gameChoiceBtn {
    color: white;
    display: block;
    cursor: pointer;
    padding: 11px 20px;
    height: 4em;
    margin: 0;
    margin-bottom: 13px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}

.gameContainer .buttonsContainer .gameChoiceBtn.double {
    padding: 5px 20px;
}


@media (max-width: 1200px) {
    .gameContainer .buttonsContainer .gameChoiceBtn {
        display: inline-block;
        height: 5em;
        height: auto;
        min-width: unset;
        padding: unset;
        padding: 5px 10px;
        /*min-width: 35px;*/
        width: calc((100% - 40px));
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
        margin: 5px;
    }
    /*.gameContainer .buttonsContainer.btnsQty1 .gameChoiceBtn {*/
    /*    width: calc(100% - 20px);*/
    /*}*/
    /*.gameContainer .buttonsContainer.btnsQty2 .gameChoiceBtn {*/
    /*    width: calc((100% - 30px) / 2);*/
    /*}*/
    /*.gameContainer .buttonsContainer.btnsQty3 .gameChoiceBtn {*/
    /*    width: calc((100% - 38px) / 3);*/
    /*}*/
    /*.gameContainer .buttonsContainer.btnsQty4 .gameChoiceBtn {*/
    /*    width: calc((100% - 46px) / 4);*/
    /*}*/
    /*.gameContainer .buttonsContainer.btnsQty5 .gameChoiceBtn {*/
    /*    width: calc((100% - 54px) / 5);*/
    /*}*/
    /*.gameContainer .buttonsContainer.btnsQty6 .gameChoiceBtn {*/
    /*    width: calc((100% - 60px) / 6);*/
    /*}*/
    .gameContainer .buttonsContainer .gameChoiceBtn.practiceBtn {
        /*height: 4.4em;*/
        /*line-height: 4.4em;*/
        /*display: block;*/
        /*margin: auto;*/
        /*width: auto;*/
        /*max-width: calc(100% - 20px);*/
        /*-webkit-border-radius: 6px;*/
        /*-moz-border-radius: 6px;*/
        /*-ms-border-radius: 6px;*/
        /*-o-border-radius: 6px;*/
        /*border-radius: 6px;*/
    }
}

@media (max-width: 350px) {
    .gameContainer .buttonsContainer .gameChoiceBtn {
        /*width: 42px;*/
    }
    .gameContainer .buttonsContainer .gameChoiceBtn.practiceBtn {
        /*max-width: 270px;*/
    }
}

.gameContainer .buttonsContainer .gameChoiceBtn.active {
    background-color: white;
}
.gameContainer .buttonsContainer .gameChoiceBtn.double {
    height: 5em;
}
@media (max-width: 1200px) {
    .gameContainer .buttonsContainer .gameChoiceBtn.double {
        /*height: 6em;*/
        height: auto;
    }
}
.gameContainer .buttonsContainer .gameChoiceBtn.triple {
    height: 7em;
}

.gameContainer .buttonsContainer .gameChoiceBtn>span {
    font-family: Assistant-Bold;
    font-size: 3rem;
    line-height: 2.9rem;
    line-height: 1.3;
}
.gameContainer .buttonsContainer .gameChoiceBtn.double>span {
    font-size: 2.2rem;
}

@media (max-width: 1200px) {
    .gameContainer .buttonsContainer .gameChoiceBtn>span {
        display: block;
        width: 100%;
        text-align: center;
    }
    .gameContainer .buttonsContainer .gameChoiceBtn>span:not(.gameContainer .buttonsContainer .gameChoiceBtn.practiceBtn>span) {
        font-size: 1.8rem;
    }
    .colorScheme1 .gameContainer .buttonsContainer .gameChoiceBtn>span:not(.gameContainer .buttonsContainer .gameChoiceBtn.practiceBtn>span):not(:first-of-type),
    .colorScheme2 .gameContainer .buttonsContainer .gameChoiceBtn>span:not(.gameContainer .buttonsContainer .gameChoiceBtn.practiceBtn>span):not(:first-of-type) {
        font-size: 2.8rem;
    }
}


@media (max-width: 560px) {
    .gameContainer .buttonsContainer .gameChoiceBtn>span:not(.gameContainer .buttonsContainer .gameChoiceBtn.practiceBtn>span) {
        /*font-size: 1.5rem;*/
    }
}
.gameContainer .buttonsContainer .gameChoiceBtn>span:last-of-type {
    float: left;
}
@media (min-width: 1200px) {
    .gameContainer .buttonsContainer .gameChoiceBtn>span:last-of-type {
        text-align: left;
    }
}
/*.gameContainer .buttonsContainer .gameChoiceBtn>span {*/
/*    float: left;*/
/*    width: 235px;*/
/*    line-height: 1.1em;*/
/*}*/

.gameContainer .buttonsContainer .gameChoiceBtn>span:first-of-type {
    /*visibility: hidden;*/
    display: none;
    float: right;
    color: #FBF167;
}
@media (min-width: 1200px) {
    .gameContainer .buttonsContainer .gameChoiceBtn.double>span:first-of-type {
        line-height: 2.7em;
        height: 2.7em;
    }
}
.gameContainer .buttonsContainer .gameChoiceBtn>span.visible {
    display: block !important;
    /*visibility: visible;*/
}

@media (max-width: 1200px) {
    .gameContainer .buttonsContainer .gameChoiceBtn>span:first-of-type {
        height: 1.5em;
        font-size: 1.5em;
        line-height: 1.5em;
    }
    .gameContainer .buttonsContainer .gameChoiceBtn.practiceBtn>span:first-of-type {
        display: none;
        font-size: 1.8rem;
    }
}


/* Font type choice buttons */

.fontStyleChoiceContainer {
    text-align: left;
    cursor: pointer;
}

.fontStyleBtn {
    font-size: 2em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    position: relative;
    bottom: 0;
    left: 0;
    width: 57px;
    height: 57px;
    line-height: 57px;
    text-align: center;
    display: inline-block;
}

.fontStyleBtn.typeface {
    background-color: #0F6381;
    color: #A4D8F6;
    font-family: Assistant-Bold;
}

.fontStyleBtn.writtenFont {
    background-color: #F4F4F4;
    color: #15779A;
    font-family: Assistant-Bold;
}


/* ------ Footer ------ */

footer .contentContainer {
    text-align: center;
}

footer .contentContainer>a {
    color: var(--gameArea-font-color);
    font-size: var(--page-font-medium);
}


/* ------ Pages ------ */

.topAbout {
    padding: 0;
}

.topAbout>.leftPic,
.topAbout>.rightText {
    width: calc(50% - 1.2em);
}

.topAbout>.leftPic {
    float: left;
    margin-left: 0.8em;
    margin-right: 0.4em;
}

.topAbout>.leftPic>img {
    width: 100%;
}

@media (max-width:985px) {}

.topAbout>.rightText {
    margin-top: 3.3rem;
    margin-left: 0.4em;
    margin-right: 0.8em;
    float: right;
    color: white;
    text-align: left;
}

@media (max-width:983px) {
    .topAbout>.leftPic {
        display: none;
    }
    .topAbout>.rightText {
        width: calc(100% - 0.8em);
        margin-top: 0;
        margin-left: 0.4em;
        margin-right: 0.4em;
        float: none;
        text-align: center;
        padding-top: 2em;
        padding-bottom: 0.5em;
    }
}

.topAbout>.rightText h1 {
    color: white;
    font-size: 2.2em;
}

.topAbout>.rightText h1+p {
    font-size: 1.9em;
    margin-top: 0.2em;
    margin-bottom: 0.5em;
}

.trialLessonBlock,
.offersBlock {
    background-color: #AD85AF;
    width: 100%;
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
    margin: auto;
}

html[lang=en] .trialLessonBlock {
    direction: ltr;
}

.trialLessonButton {
    background-color: #BE9EBF;
    color: var(--menu-buttons-text-color);
    padding: 10px 30px;
    border: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    font-size: 2em;
    line-height: 50px;
    display: inline-flex;
}
.trialLessonButton:hover {
    text-decoration: none;
}

.trialLessonButton>.btnText {
    font-family: Assistant-Bold;
}

.trialLessonButton>.btnImg {
    margin-left: 5px;
}

.offersBlock {
    background-color: white;
    color: var(--customerArea-font-color);
}

.offersBlock>.offerBlockTitle {
    background-color: white;
    color: var(--customerArea-font-color);
    font-size: var(--page-font-medium);
    font-family: Assistant-Bold;
}

.offerCard {
    width: 275px;
    min-height: 280px;
    vertical-align: top;
    background-color: var(--customerArea-font-color);
    padding: 1em;
    padding-top: 1.5em;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    color: white;
    display: inline-block;
    margin: 1em;
    direction: rtl;
}

.offerCard.groupOffer {
    background-color: #D1E6EE;
    color: var(--customerArea-font-color);
}

.offerCard>img {
    height: 3em;
    margin-bottom: 0.5em;
}

.offerName {
    color: white;
    font-family: Assistant-Bold;
    font-size: var(--page-font-medium);
}
.offerName .special {
    color: #89caf9;
}
.offerChoiceBtn {
    background-color: white;
    padding: 5px;
    font-family: Assistant-Bold;
    font-size: var(--page-font-medium);
    color: var(--customerArea-font-color);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    width: 100%;
}

.groupOffer .offerChoiceBtn {
    background-color: var(--customerArea-font-color);
    color: white;
}
.groupOffer .offerChoiceBtn a {
    color: white;
    text-decoration: none;
    width: 100%;
    display: inline-block!important;
    font-family: Assistant-Bold;
    font-size: var(--page-font-medium);
}

.offerPrice {
    padding-bottom: 1em;
    font-family: Assistant-Medium;
    font-size: var(--page-font-medium);
    color: #f9dfaf;
}

.offerPrice>div {
    line-height: 1.1;
}

.offerPrice .price {
    font-size: 40px;
    font-family: Assistant-Bold;
}

.offerDescription {
    font-size: var(--page-font-regular);
    margin-bottom: 1em;
    height: 20px;
}
.groupOffer .offerDescription {
    height: 33px;
}
.offerRemarks {
    font-size: var(--page-font-small);
    margin-bottom: 1em;
    line-height: 14px;
    height: 45px;
    opacity: 0.6;
}

.groupOffer .offerPrice .price {
    font-size: 26px;
    font-family: 'Assistant-Regular';
    line-height: 1.05;
}
.groupOffer .offerPrice {
    color: var(--customerArea-font-color);
    padding-top: 40px;
}


.bottomAbout {
    padding: 40px 0;
}

.bottomAbout>.leftPic,
.bottomAbout>.rightText {
    width: calc(50% - 1.2em);
}

.bottomAbout>.leftPic {
    float: left;
    margin-left: 0.8em;
    margin-right: 0.4em;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.bottomAbout>.leftPic>img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.bottomAbout>.rightText {
    margin-left: 0.4em;
    margin-right: 0.8em;
    float: right;
    color: white;
    text-align: left;
    /* padding-right: 10em; */
}

@media (max-width:640px) {
    .bottomAbout>.leftPic,
    .bottomAbout>.rightText {
        width: calc(100% - 0.8em);
        margin-left: 0.4em;
        margin-right: 0.4em;
        text-align: center;
    }
}

.bottomAbout>.rightText h2 {
    color: white;
    font-size: 2.2em;
}


/* Login / Register form */

#logInPopUpWrapper,
#signUpFormWrapper {
    display: none;
}

#logInPopUpBackground,
#signUpPopUpBackground {
    background-color: white;
    opacity: 0.3;
    margin: auto;
    position: fixed;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 99990;
    width: 100vw;
    height: 100vh;
}

#logInPopUp,
#signUpPopUp {
    margin: auto;
    position: fixed;
    z-index: 99990;
    top: calc(50% - 400px);
    left: calc(50% - 260px);
    text-align: center;
    width: 520px;
    padding: 25px;
    background-color: #AD85AF;
    font-family: Arial;
    font-size: 22px;
    line-height: 1.4;
    -webkit-box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 20px 10px rgba(0, 0, 0, 0.5);
    max-width: 90%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
#signUpPopUp {
    top: calc(50% - 400px);
    left: calc(50% - 260px);
}

@media (max-width: 579px) {
    #logInPopUp {
        left: 5%;
    }
}

@media (max-width: 960px) {
    #signUpPopUp {
        position: relative;
        z-index: 99990;
        top: -80px;
        left: auto;
        width: 100%;
    }
}

@media (min-width: 961px) {
    #signUpPopUp {
        width: 950px;
        left: calc(50% - 475px);
    }
}

.popUpCloseBtn {
    cursor: pointer;
    background-color: white;
    color: var( --buttons-color);
    padding: 5px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 20px;
    width: 37px;
    height: 37px;
    position: absolute;
    top: -15px;
    right: calc(50% - 30px);
    -webkit-box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 9px 3px rgba(0, 0, 0, 0.3);
}

.authPopUpContent {
    margin: auto;
}

.authPopUpContent>div {
    /* background-color: #008ff5; */
    color: white;
    text-align: center;
    padding: 20px 0;
    /* border: 1px solid #008ff5; */
}

.authPopUpContent h2 {
    color: var(--menu-buttons-text-color);
    font-size: 2em;
    font-family: Assistant-Bold;
}

.signUpLink,
.signInLink {
    text-decoration: underline;
}

.authPopUpContent a {
    cursor: pointer;
    color: var(--menu-buttons-text-color);
}

@media (min-width: 961px) {
    #signUpFormWrapper .accountImage,
    #signUpFormWrapper .signUpForm {
        display: inline-block;
        vertical-align: top;
    }
}

.logInForm,
.signUpForm {
    margin: 0 auto;
}

.signUpForm {
    width: calc(100% - 185px - 1%);
}
@media (max-width:960px) {
    .signUpForm {
        width: 100%;
    }
}

.logInForm input,
.signUpForm input {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: var(--page-font-regular);
    line-height: 1.5;
    padding-left: 60px;
    margin: 0.5%;
    border: none;
    border-radius: 5px;
    background-repeat: no-repeat;
    background-position: 10px center;
    margin-bottom: 0.6em;
}

.accountImage {
    margin-bottom: 1.5em;
}
@media (min-width:641px) {
    .signUpForm input {
        width: 48%;
        display: inline-block;
    }
}

input[name="parentName"] {
    background-image: url('/images/icoParentName.png');
}

input[name="childName"] {
    background-image: url('/images/icoChildName.png');
}

input[name="phone"] {
    background-image: url('/images/icoPhone.png');
}

input[name="email"] {
    background-image: url('/images/icoEmail.png');
}

input[name="password"],
input[name="passwordConfirm"] {
    background-image: url('/images/icoPassword.png');
}

.forgotPasswordLnk {
    margin-top: 0.8em;
    display: block;
    text-decoration: underline;
}

.logInButton {
    background-color: #BE9EBF;
    padding: 10px 30px;
    margin-top: 1.5em;
    border: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    font-size: 1.5em;
    line-height: 1.2;
    display: block;
}

.logInButton>.btnText {
    font-family: Assistant-Bold;
}

.paymentBtn {
    background-color: #BE9EBF;
    border: none;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    font-size: 1.5em;
    line-height: 1.2;
    display: inline-block;
    padding: 10px 30px;
    width: 48%;
    margin: 0.5%;
    margin-top: 1.5em;
    padding-right: 55px;
    background-repeat: no-repeat;
    padding-right: 170px;
}
.paymentBtn.creditCard {
    background-image: url('/images/icoPayBtnCreditCard.png');

    background-position: right 20px center;
}
.paymentBtn.payPal {
    background-image: url('/images/icoPayBtnPayPal.png');
    background-position: right 15px center;
}

.paymentBtn>.btnText {
    font-family: Assistant-Bold;
}

/* .authPopUpContent>div img {
    max-width: 100%;
} */

.logoContainer img {
    height: 70px;
}
@media (max-width: 960px) {
    .logoContainer img {
        height: 70px;
    }
}
@media (max-width: 429px) {
    .logoContainer img {
        height: 60px;
        margin-top: 3px;
    }
}
@media (max-width: 359px) {
    .logoContainer img {
        height: 50px;
        margin-top: 10px;
    }
}
/* Text default style */
.text {
    text-align: left;
    color: white;
    font-size: var(--page-font-medium);
}
.text:lang(he) {
    text-align: right;
    direction: rtl;
}
.text h2 {
    font-weight: bold;
    font-family: Assistant-Bold;
    margin-bottom: 1em;
    color: white;
}
.text strong {
    font-weight: bold;
    font-family: Assistant-Bold;
}
.text ul, .text ol {
    display: block;
    list-style: disc inside none;
    margin: 1em 0;
    padding: 0 20px 0 40px;
}
.text ol {
    list-style-type: decimal;
}
.text li {
    display: list-item;
}

.text ul ul, .text ol ul {
    list-style-type: circle;
    margin-left: 15px;
}
.text ol ol, .text ul ol {
    list-style-type: lower-latin;
    margin-left: 15px;
}
.text a {
    color: white!important;
    text-decoration: underline;
}

.faqContainer {
    display: block;
    margin-bottom: 20px;
    border: 1px solid #008ff5;
}
.faqContainer .faqQuestion {
    padding: 5px 10px;
    background-color: var(--customerArea-font-color);
    color: #ffffff;
}
.faqContainer .faqAnswer {
    padding: 5px 10px;
    background-color: white;
    color: #000000;
}

.gamesCategory {
    display: block;
    background-color: #ffffff99;
    margin: 30px 40px;
    padding: 25px 0;
    text-align: center;
    vertical-align: middle;
    font-size: 25px;
    line-height: 35px;
    font-family: 'Assistant-Bold';
    text-decoration: none;
    color: #15779A;
    cursor: pointer;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    border: 2px solid #FFFFFF99;
    text-underline-offset: 8px;
}

/* Modal */
.modal .modal-content {
    text-align: center!important;
    font-family: Assistant-Bold;
    font-size: 1.3em;
    line-height: 1.3em;
    direction: rtl;
}
.modal .modal-footer {
    text-align: center!important;
}
.modal .modal-dialog {
    -webkit-transform: translate(0,-40%);
    -o-transform: translate(0,-40%);
    transform: translate(0,-40%);
    top: 40%;
    margin: 0 auto;
}
.modal .btn {
    font-family: Assistant-Bold;
    font-size: 1.1em;
    line-height: 1.1em;
    direction: rtl;
}

/* Game progress */
.game-progress {
    display: block;
    margin: 20px 10px;
    text-align: center;
}
.game-progress a {
    display: inline-block;
    height: 40px;
    width: 40px;
    background-color: #C9E082;
    border-radius: 50%;
    margin: 5px 3px;
    text-decoration: none;
    line-height: 40px;
    color: #f0f0f0;
    cursor: pointer;
}
.game-progress a:hover {
    text-decoration: none;
    background-color: #99B73E;
}
.game-progress a.active {
    background-color: #15779A!important;
}

.colorScheme1 .game-progress a {
    background-color: #F4B17B;
}
.colorScheme1 .game-progress a:hover {
    background-color: #E89037;
}

#countdown {
    width: 100px;
    height: 100px;
    background-color: #15779A;
    color: white;
    margin: 0 auto;
    border-radius: 50px;
    text-align: center;
    line-height: 100px;
    font-family: Assistant-Bold;
    font-size: 1.5em;
}
.show_after_countdown {
    display: none;
}

.contact-form {
    color: white;
    text-align: center !important;
}
.contact-form h1, .contact-form h2 {
    color: white;
}
.contact-form .field, .contact-form .textarea {
    background-image: none!important;
    background-repeat: no-repeat;
    color: gray;
    background-color: white;
    display: inline-block;
    border: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 10px;
}
.contact-form .frmContact {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
    align-content: center;
}
.contact-form .frmContact input,
.contact-form .frmContact textarea
{
    width: 100%;
    padding: 8px;
    max-width: 600px;
}
:lang(he) .contact-form .frmContact input:not([type="submit"]),
:lang(he) .contact-form .frmContact textarea {
    text-align: right;
}
.contact-form input[type="submit"] {
    color: var(--menu-buttons-text-color);
    background-color: var(--lang-buttons-color);
    padding: 5px 35px;
    display: inline-block;
    border: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
.successMessage {
    color: green;
}
.errorMessage {
    color: darkred;
}