.playIntroSound{position:absolute;text-align:center;line-height:70px;background:white;bottom:55px;left:500px;width:286px;height:72px;border-radius:40px;font-size:37px;font-family:CFAsty Primary Book;border:4px solid #db1c23;color:#db1c23}
.playIntroSound:hover{background:#db1c23;color:white}


.slideshow{width: 100%;
height:100%;
border: 1px solid black;
white-space:nowrap;
overflow:hidden;
font-size: 0;}






.intro{width:1280px;
height:960px;
display:none;
}

.IntroActive .intro{display:block !important;}

.IntroActive .main,.IntroActive .mainOptions{display:none !important;}

#main{width:100%;
height:100%;
background-color:white;
left:0px;
top:0px;
border-radius:0px;
box-shadow: none;
}

.modulesTrigger svg{}

.loading .f11Txt {
    display: none;
}
.f11Txt {
    top: 31px;
    width: 290px;
    height: 124px;
    left: 920px;
    text-align: left;
    border-width: 0 7px;
    padding: 10px 15px;
    position: absolute;
    color: #593172;
    font-family: 'CFAsty Primary Bold';
    font-size: 26px;
    border: 5px solid #593172;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.6);
    box-sizing: content-box;
}
.secondLevelHeader svg{width:70px;height:70px;margin-right: 15px;vertical-align: middle;margin-top: -12px;}
[data-second=GA] .secondLevelHeader svg{margin-top: -22px;}

.secondLevelHeader svg path {
    fill: #ffffff
}
.secondLevelHeader span span {font-family: 'CFAsty';font-weight: bold;}


.secondBack {
    width: 70px;
height:70px;
position:absolute;
bottom:120px;
    left: 40px;
}

.secondBack svg {
    width: 70px;
    height: 70px;
}

.secondLevelHeader span {
    vertical-align: middle;
    letter-spacing: 1px;
}

.mainCol {
    float: left;
    width: 50%;
}

.mainOptions {
    height: 100px !important;
}

.slideshow img {
    display: inline-block;
transition:margin-left 0.6s ease-in-out;
    -webkit-transition: margin-left 0.6s ease-in-out;
}

.slideshow div {
    display: inline-block;
}

.trigger {
    cursor: pointer;
    display: inline-block;
}

.trigger:hover .dim {
    -webkit-transform: rotateX(90deg) translateZ(0);
transform: rotateX(90deg) translateZ(0);
    bottom: 10px;
}

.dim {
    width: 200px;
height:100px;
position:relative;
-webkit-transition: -webkit-transform .4s ease-in-out, opacity 1.5s ease-in-out;
-webkit-transition: opacity 1.5s ease-in-out, -webkit-transform .4s ease-in-out;
transition: opacity 1.5s ease-in-out, -webkit-transform .4s ease-in-out;
transition: transform .4s ease-in-out, opacity 1.5s ease-in-out;
transition: transform .4s ease-in-out, opacity 1.5s ease-in-out, -webkit-transform .4s ease-in-out;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
margin-top:40px;
-webkit-transform: rotateX(0deg) translateZ(0);
transform: rotateX(0deg) translateZ(0);
}

.secondMore>.secondModuleButton {
    display: none
}

[data-second="GA"] .secondMore>.secondModuleButton {
    display: block;
    margin-bottom:90px;
}

[data-second="GA"] .secondMore {
    margin-left: 24px;
    z-index: 10;
    margin-top: -10px;
    padding-left: 3px;
}

.yellow,.rgba(0,165,255,1){width:100%;
height:100%;
position:absolute;
top:0px;
left:0px;}


.yellow{background:yellow;
-webkit-transform: rotateX(0deg) translateZ(50px);
transform: rotateX(0deg) translateZ(50px);}

.rgba(0,165,255,1){background:url('https://www.google.gr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png') no-repeat;
-webkit-transform: rotateX(-90deg) translateZ(50px);
transform: rotateX(-90deg) translateZ(50px);}

.mainLessons{display:none;}


.levelWrapper{width:1280px;height:100%;position:relative;}

.logoImg {
    position: absolute;
    top: 16px;
    left:380px;
    }

.slideshowButtonWrapper{
height:20px;
border-radius:10px;
background:rgba(0,0,0,0.7);
position:absolute;
bottom:204px;
left:600px;
text-align: justify;
padding:0px 9px;
z-index:100;}

.slideshowButtonWrapper span{display:inline-block;
width:9px;
height:9px;
background:rgba(255,255,255,0.4);
border-radius:100%;
margin:0px 5px;
cursor:pointer;
margin-top:5px
}

.slideshowButtonActive{background:rgba(255,255,255,1) !important;}

.bookLevel{position:absolute;
right:40px;
bottom:170px;
border:4px solid white;
font-family: 'Stag Sans Web';
font-size:96px;
border-radius:100%;
width:120px;
height:120px;
line-height:120px;
text-align:center;
color:white;;}

.secondary .mainBtn{width:128px;height:128px;float:left;position:relative;cursor:pointer;margin-bottom:10px;margin-right:8px;font-family: 'Stag Sans Web';}

.secondary .mainNormal,.secondary .mainInv{width: 140px;height:140px;position:relative;box-sizing:border-box;}


.primary .mainNormal,.primary .mainInv{position:relative;box-sizing:border-box;border-radius: 100%;float: left;text-align: center;height: 172px;margin: 0px 10px;width: 140px;}



.secondary .mainNormal{background:#00ffff;color:#0000ff;border:4px solid #00ffff;}

.mainInv{
background: #ffed33;
color: #005321;
}



.secondary .mainTitle{

font-size:20px;
height:104px;
width:80px;
padding:10px 0px 0px 10px;
font-family:'Stag Sans Web';
}

.primary .mainTitle{

font-size: 23px;

margin-top: 20px;
}


.modulesMore{position:relative;display:inline-block;width:260px;margin-right:16px;position: absolute !important;top: 27px;right: 150px;}



.modulesExtra{position:absolute;left:0px;bottom:50px;display:none;width: 316px;font-family: 'Stag Sans Web';font-weight: 400;}

.modulesExtra>div{line-height: 50px;min-height: 50px;-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);background:transparent;}

.modulesExtraExp{
-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0) !important;
-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0) !important;
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0) !important;

}

.modulesExtra>div>span.pressed,.modulesExtraSub>span.pressed{
background:#505050;
color:#ffffff;
font-weight:600;
}

.modulesExtra>div>span{padding-left:20px;font-size: 30px;color:black;display:block;cursor:pointer;background:white;}

.modulesExtraSub{display:none;
overflow:hidden;
transition:max-height 0.3s ease-in-out;
-webkit-transition:max-height 0.3s ease-in-out;}

.modulesExtraSub>span{display:block;height: 45px;line-height: 43px;margin-left:18px;padding-left:20px;background:#dcdcdc;color:black;font-size: 30px;cursor:pointer;-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4);}

.modulesExtraExp>span {background:#505050 !important;
color:#ffffff !important;
font-weight:600 !important;}

.secondary .pressed.mainNormal{background:#ffff64;color:#00A5FF;}

.pressed.mainInv{background: -moz-linear-gradient(left,  rgba(255,255,255,1) 70%, rgba(0,255,255,0) 100%);
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 70%,rgba(0,255,255,0) 100%);
background: linear-gradient(to right,  rgba(255,255,255,1) 70%,rgba(0,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff64', endColorstr='#00ffff64',GradientType=1 );color:rgba(0,165,255,1);}

.logoSmall{vertical-align:middle;margin-top: -5px;}

.modulesTrigger{font-family: 'CFAsty';font-size: 30px;letter-spacing:1px;color: #737373;cursor: pointer;}

.exitBtn{vertical-align:middle;margin-right: 35px;margin-top: -3px;}
.homeBtn{vertical-align:middle;margin-top: -3px;}

.mainInactive path{fill:#DCDCDC}

.mainActive path{fill:#000000}

.exitBtn.pressed rect,.homeBtn.pressed rect{fill:rgba(0,0,0,0.4)}

.exitBtn.pressed path,.homeBtn.pressed path{fill:rgba(255,255,255,1)}

.scondary .mainBtn svg{position:absolute;
left:12px;
top:73px;}

.mainInv svg path,.mainInv svg polygon{fill:white;}

.secondary .mainNormal svg path,.secondary .mainNormal svg polygon,.secondary .mainInv ellipse{fill:#ffff64;}

.secondary .mainInv.pressed svg path,.secondary .mainInv.pressed svg polygon,.secondary .mainInv.pressed ellipse{fill:rgba(0,165,255,1);}

.secondary .mainNormal.pressed svg path,.secondary .mainNormal.pressed svg polygon{fill:#00A5FF;}

.primary  .mainTitle{font-family: 'SoupofJustice';text-align: center;}

.primaryFirst .primaryBg{fill:#ffffff;stroke:#FF003C;}
.primaryFirst .primaryBg circle{stroke:#FF003C;}
.primaryFirst .primaryInner{fill:#FF003C;}
.primaryFirst  .mainTitle{color: white;}
.primaryFirst.pressed .primaryBg{fill:#FF003C;}
.primaryFirst.pressed .primaryInner{fill:#ffffff;}
.primaryFirst.pressed  .mainTitle{color: #FF003C;}

.primarySecond .primaryBg{fill:#ffffff;stroke:#fe4bc6;}
.primarySecond .primaryBg circle{stroke:#fe4bc6;}
.primarySecond .primaryInner{fill:#fe4bc6;}
.primarySecond  .mainTitle{color: white;}
.primarySecond.pressed .primaryBg{fill:#fe4bc6;}
.primarySecond.pressed .primaryInner{fill:#ffffff;}
.primarySecond.pressed  .mainTitle{color: #fe4bc6;}

.primaryThird .primaryBg{fill: #ffffff;stroke:#ffa000;}
.primaryThird .primaryBg circle{stroke:#ffa000;}
.primaryThird .primaryInner{fill:#ffa000;}
.primaryThird  .mainTitle{color: white;}
.primaryThird.pressed .primaryBg{fill:#ffa000;}
.primaryThird.pressed .primaryInner{fill:#ffffff;}
.primaryThird.pressed  .mainTitle{text-align: center;color: #ffa000;}

.primaryFourth .primaryBg{fill:#ffffff;stroke:#2ee100;}
.primaryFourth .primaryBg circle{stroke:#2ee100;}
.primaryFourth .primaryInner{fill:#2ee100;}
.primaryFourth  .mainTitle{color: white;}
.primaryFourth.pressed .primaryBg{fill:#2ee100;}
.primaryFourth.pressed .primaryInner{fill:#ffffff;}

.primaryFifth .primaryBg{fill:#ffffff;stroke:#00d2ff;}
.primaryFifth .primaryBg circle{stroke:#00d2ff;}
.primaryFifth .primaryInner{fill:#00d2ff;}
.primaryFifth  .mainTitle{color: white;}
.primaryFifth.pressed .primaryBg{fill:#00d2ff;}
.primaryFifth.pressed .primaryInner{fill:#ffffff;}
















.primaryGroup svg{overflow:visible;}

.firstLevel{display:block;}
/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 */

.secondary .mainSecondLevel{display:none;
overflow:hidden;
position:absolute;
bottom:0px;
left:0px;
background:#006487;
width:100%;
}

.primary .mainSecondLevel {
    display: none;
    overflow: hidden;
    position: absolute;
    bottom: 0px;
    left: 0px;
    background: rgba(47, 44, 133, 0.93);
    width: 100%;
    min-height: 200px;
}

.primary .color-1 .secondModuleButton {
    background: #ff5824;
    color: #ffffff;
    border: 4px solid transparent;
}

.color-1.pressed .secondModuleButton {
    background: #ffffff !important;
    color: #ff5824 !important;
    border: 4px solid #ff5824 !important;
}

.primary .color-2 .secondModuleButton {
    background: #2ee100;
    color: white;
    border: 4px solid transparent;
}

.primary .color-2.pressed .secondModuleButton {
    background: white;
    color: #2ee100;
    border: 4px solid #2ee100;
}

.primary .color-3 .secondModuleButton {
    background: #901252;
    color: #ffffff;
    border: 4px solid transparent;
}

.primary .color-3.pressed .secondModuleButton {
    background: #ffffff !important;
    color: #901252 !important;
    border: 4px solid #901252 !important;
}

.primary .color-4 .secondModuleButton {
    background: #ffa000;
    color: white;
    border: 4px solid transparent;
}

.primary .color-4.pressed .secondModuleButton {
    background: white;
    color: #ffa000;
    border: 4px solid #ffa000;
}

.primary .color-5 .secondModuleButton {
    background: #008c96;
    color: #ffffff;
    border: 4px solid transparent;
}

.primary .color-5.pressed .secondModuleButton {
    background: #ffffff !important;
    color: #008c96 !important;
    border: 4px solid #008c96 !important;
}

.primary .color-6 .secondModuleButton {
    background: #da0000;
    color: #ffffff;
    border: 4px solid transparent;
}

.primary .color-6.pressed .secondModuleButton {
    background: #ffffff !important;
    color: #da0000 !important;
    border: 4px solid #da0000 !important;
}

.primary .color-7 .secondModuleButton {
    background: #fe4bc6;
    color: #ffffff;
    border: 4px solid transparent;
}

.primary .color-7.pressed .secondModuleButton {
    background: #ffffff !important;
    color: #fe4bc6 !important;
    border: 4px solid #fe4bc6 !important;
}

.primary .color-8 .secondModuleButton {
    background: #f7e500;
    color: white;
    border: 4px solid transparent;
}

.primary .color-8.pressed .secondModuleButton {
    background: white !important;
    color: #f7e500 !important;
    border: 4px solid #f7e500 !important;
}

.primary .color-9 .secondModuleButton {
    background: #00A5FF;
    color: white;
    border: 4px solid transparent;
}

.primary .color-9.pressed .secondModuleButton {
    background: white !important;
    color: #00A5FF !important;
    border: 4px solid #00A5FF !important;
}

.primary .color-10 .secondModuleButton {
    background: #bee530;
    color: white;
    border: 4px solid transparent;
}

.primary .color-10.pressed .secondModuleButton {
    background: white !important;
    color: #bee530 !important;
    border: 4px solid #bee530 !important;
}

.primaryStudents.pressed .primaryBg {
    fill: #FFFFFF;
}

.primaryStudents.pressed .primaryInner {
    fill: #FF5824;
}

.primaryWorkbook.pressed .primaryBg {
    fill: #FFFFFF;
}
.primaryWorkbook.pressed .primaryInner {
    fill: #00D2FF;
}

.primaryGrammar.pressed .primaryBg {
    fill: #FFFFFF;
}
.primaryGrammar.pressed .primaryInner {
    fill: #2EE100;
}

.primaryAlphabet.pressed .primaryBg {
    fill: #ffffff;
}
.primaryAlphabet.pressed .primaryInner {
    fill: #901252;
}

.primaryReader.pressed .primaryBg {
    fill: #ffffff;
}
.primaryReader.pressed .primaryInner {
    fill: #008C96;
}

.primary .slideshowButtonWrapper {
    display: none !important;
}
.secondBackbtn{margin-left: 20px;margin-bottom: 5px;margin-top: 30px;}

.secondBackbtn.pressed circle {
    fill: white
}

.secondBackbtn.pressed path:nth-child(2){fill: #ff0064 !important;transform: scale(1)!important;}
.secondBackbtn.pressed path:nth-child(3){transform: scale(0.8)!important;}

.secondary .mainButtons {overflow:hidden;position:absolute;bottom:0px;left:0px;padding-left: 24px;padding-bottom:10px;background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(30,30,40,0.9) 35%);background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(30,30,40,0.9) 35%);background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(30,30,40,0.9) 35%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc1e1e28',GradientType=0 );padding-top:100px;width:100%;}

.secondary .mainSecondLevel{overflow:hidden;position:absolute;bottom:0px;left:0px;padding-bottom:10px;background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(30,30,40,0.9) 35%);background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(30,30,40,0.9) 35%);background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(30,30,40,0.9) 35%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc1e1e28',GradientType=0 );padding-top:100px;width:100%;}

.primary .mainButtons {overflow:hidden;position:absolute;bottom:0px;left:0px;padding-left: 530px;padding-bottom:100px;background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(30,30,40,0.9) 90%);background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(30,30,40,0.9) 90%);background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(30,30,40,0.9) 90%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc1e1e28',GradientType=0 );padding-top:100px;width:100%;}


.secondary .secondButton{float:left;margin-left:7px;
margin-right:3px;
margin-bottom:13px;}

.secondary .mainBtn svg{position:absolute;bottom:10px;left:10px;}




.primary .secondButton{
float:left;
margin-left:10px;
position: relative;
margin-right:10px;
margin-bottom: 30px;
}

.secondButtonWrapper{margin-left:245px;overflow:hidden;min-height:200px;}
[data-second="GA"] .secondButtonWrapper{margin-left:325px;}
.secondary .secondLevelHeader {
    margin: 0px 0px 10px 24px;
padding-left:17px;
height:60px;
line-height:60px;
color:black;
font-weight:300;
font-size:45px;
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.98) 1%, rgba(255,255,255,0) 70%);
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0.98) 1%,rgba(255,255,255,0) 70%);
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0.98) 1%,rgba(255,255,255,0) 70%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}

[data-second="PG"] .secondLevelHeader,[data-second="PM"] .secondLevelHeader,[data-second="PR"] .secondLevelHeader,[data-second="PV"] .secondLevelHeader{
background: -moz-linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.98) 1%,rgba(0,0,0,0.5) 51%,rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.98) 1%,rgba(0,0,0,0.5) 51%,rgba(0,0,0,0) 100%);
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.98) 1%,rgba(0,0,0,0.5) 51%,rgba(0,0,0,0) 100%);
color:#ffec00;
font-family: 'Stag Sans Medium';
border-top-left-radius:30px;
border-bottom-left-radius:30px;
line-height: 66px;
}

[data-second="PG"] .secondLevelHeader span,[data-second="PM"] .secondLevelHeader span,[data-second="PR"] .secondLevelHeader span,[data-second="PV"] .secondLevelHeader span{
font-size:24px;
margin-left:4px;
}

.secondLevelHeader img{margin-right:15px;
margin-top: -11px;
vertical-align: middle;
margin-left:-5px;}

.primary .secondLevelHeader{
margin: 65px 0px 45px 0px;
height:60px;
line-height:60px;
font-weight:300;
font-size:37px;
color:#ffffff;
font-family: SoupofJustice;
}

.secondModuleButton,.secondExtraButton{

box-sizing:border-box;
transition:height 0.3s ease-in-out;
-webkit-transition:height 0.3s ease-in-out;
font-family: 'Stag Sans Medium';
position:relative;
}

.primaryBtns{
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: block;
    z-index: 500;
    }

.secondButtonsMinified .secondModuleButton,.secondButtonsMinified  .secondExtraButton{height:64px}

.secondButtonsMinified .secondModuleButton .secondTitle{top:0px;}

.secondButtonsMinified .secondExtraButton .secondTitle{left:46px;font-size:14px;height: 38px;
    overflow: hidden;}


.secondImages .secondTitle{top:55px !important}


.secondButtonsMinified .secondModuleButton .secondSub{top:15px;}

.secondButton.pressed .secondModuleButton,.secondMore .secondModuleButton{background:#ffffff;

color:#00ffff;}

.secondButton.pressed .secondExtraButton,.secondMore .secondExtraButton{background:#ffffff;

color:#2f2c85;}

.secondButton.pressed .secondSub svg g,.secondMore .secondSub svg g{fill:#2f2c85;}

.secondButtonsMinified  .secondExtraButton .secondSub{left:10px;}


.secondary.secondModuleButton{background:#00ffff;
border:4px solid #00ffff;
color:#0000ff;
position:relative;
width:128px;
height:128px;}

.primary .secondModuleButton{background:#00ffff;border:4px solid #00ffff;color:#0000ff;position:relative;width: 140px;height: 140px;border-radius: 100%;font-family: SoupofJustice;text-align: center;box-sizing: border-box;}

.secondExtraButton{background: rgba(0,0,0,0.3);color:white;font-weight:300;position:relative;width: 140px;height: 140px;border-radius: 100%;font-family: SoupofJustice;text-align: center;border: 2px solid white;box-sizing: border-box;}

.secondary .secondModuleButton .secondTitle{
position:absolute;
left:21px;
top:34px;
font-size:25px;
width:90px;
line-height:20px;
transition:top 0.3s ease-in-out;
-webkit-transition:top 0.3s ease-in-out;
}



.primary .secondModuleButton .secondTitle{position:absolute;left: 0px;top: 34px;font-size: 25px;width:130px;line-height:20px;transition:top 0.3s ease-in-out;-webkit-transition:top 0.3s ease-in-out;}

.secondary .secondExtraButton .secondTitle{
font-weight:300;
font-family:'Stag Sans Web';
position:absolute;
left:15px;
top:45px;
font-size:18px;
width:70px;
line-height:20px;
transition:left 0.3s ease-in-out,font-size 0.3s ease-in-out;
-webkit-transition:left 0.3s ease-in-out,font-size 0.3s ease-in-out;
}

.primary .secondExtraButton .secondTitle{font-weight:300;font-family:'SoupofJustice';position:absolute;top: 22px;font-size:18px;width: 100%;line-height:20px;transition:left 0.3s ease-in-out,font-size 0.3s ease-in-out;-webkit-transition:left 0.3s ease-in-out,font-size 0.3s ease-in-out;font-size: 25px;text-align: center;}

.secondary .secondModuleButton .secondSub{
font-size:55px;
position:absolute;
left:46px;
top:60px;
transition:top 0.3s ease-in-out;
-webkit-transition:top 0.3s ease-in-out;
}

.primary .secondModuleButton .secondSub{font-size: 55px;text-align: center;position:absolute;left: 17px;top: 60px;width: 100px;transition:top 0.3s ease-in-out;-webkit-transition:top 0.3s ease-in-out;}

.primary .secondExtraButton .secondSub{font-size: 55px;text-align: center;position:absolute;top: 70px;width: 100%;text-align: center;}

.secondExtraButton .secondSub{width:35px;height:35px;position:absolute;bottom:12px;transition:top 0.3s ease-in-out,left 0.3s ease-in-out;-webkit-transition:top 0.3s ease-in-out,left 0.3s ease-in-out;line-height:40px;}

.secondButtonHidden{visibility:hidden;}


.primary .mainSecondLevel{display:none;overflow:hidden;position:absolute;bottom:0px;left:0px;background: transparent;width:100%;min-height:200px;
/* border-top:20px solid #ffdd00; */}

.primary .secondButton[data-secondmodule="Module 1"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="1"] .secondModuleButton,
.secondImages .secondButton:nth-child(1) .secondModuleButton {
    background: #ff5824;
    color: #ffffff;
    border: 4px solid transparent;
}

.primary .secondButton[data-secondmodule="Module 1"].pressed .secondModuleButton,
.primary [data-secondtargetmodule="1"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="1"].pressed .secondModuleButton,
.secondImages .secondButton:nth-child(1).pressed .secondModuleButton {
    background: white;
    color: #ff5824;
    border: 4px solid #ff5824;
}

.primary .secondButton[data-secondmodule="Module 2"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="2"] .secondModuleButton,
.secondImages .secondButton:nth-child(2) .secondModuleButton {
    background: #03A9F4;
    color: white;
    border: 4px solid transparent;
}

.primary .secondButton[data-secondmodule="Module 2"].pressed .secondModuleButton,
.primary [data-secondtargetmodule="2"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="2"].pressed .secondModuleButton,
.secondImages .secondButton:nth-child(2).pressed .secondModuleButton {
    background: white;
    color: #03A9F4;
    border: 4px solid #03A9F4;
}

.primary .secondButton[data-secondmodule="Module 3"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="3"] .secondModuleButton,
.secondImages .secondButton:nth-child(3) .secondModuleButton {
    background: #901252;
    color: #ffffff;
    border: 4px solid transparent;
}

.primary .secondButton[data-secondmodule="Module 3"].pressed .secondModuleButton,
.primary [data-secondtargetmodule="3"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="3"].pressed .secondModuleButton,
.secondImages .secondButton:nth-child(3).pressed .secondModuleButton {
    background: white;
    color: #901252;
    border: 4px solid #901252;
}

.primary .secondButton[data-secondmodule="Module 4"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="4"] .secondModuleButton,
.secondImages .secondButton:nth-child(4) .secondModuleButton {
    background: #ffa000;
    color: white;
    border: 4px solid transparent;
}

.primary .secondButton[data-secondmodule="Module 4"].pressed .secondModuleButton,
.primary [data-secondtargetmodule="4"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="4"].pressed .secondModuleButton,
.secondImages .secondButton:nth-child(4).pressed .secondModuleButton {
    background: white;
    color: #ffa000;
    border: 4px solid #ffa000;
}

.primary .secondButton[data-secondmodule="Module 5"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="5"] .secondModuleButton,
.secondImages .secondButton:nth-child(5) .secondModuleButton {
    background: #008c96;
    color: #ffffff;
    border: 4px solid transparent;
}

.primary .secondButton[data-secondmodule="Module 5"].pressed .secondModuleButton,
.primary [data-secondtargetmodule="5"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="5"].pressed .secondModuleButton,
.secondImages .secondButton:nth-child(5).pressed .secondModuleButton {
    background: white;
    color: #008c96;
    border: 4px solid #008c96;
}

.primary .secondButton[data-secondmodule="Module 6"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="6"] .secondModuleButton,
.secondImages .secondButton:nth-child(6) .secondModuleButton {
    background: #9100ff;
    color: #ffffff;
    border: 4px solid transparent;
}

.primary .secondButton[data-secondmodule="Module 6"].pressed .secondModuleButton,
.primary [data-secondtargetmodule="6"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="6"].pressed .secondModuleButton,
.secondImages .secondButton:nth-child(6).pressed .secondModuleButton {
    background: white;
    color: #9100ff;
    border: 4px solid #9100ff;
}

.primary .secondButton[data-secondmodule="Module 7"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="7"] .secondModuleButton,
.secondImages .secondButton:nth-child(7) .secondModuleButton {
    background: #fe4bc6;
    color: #ffffff;
    border: 4px solid transparent;
}

.primary .secondButton[data-secondmodule="Module 7"].pressed .secondModuleButton,
.primary [data-secondtargetmodule="7"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="7"].pressed .secondModuleButton,
.secondImages .secondButton:nth-child(7).pressed .secondModuleButton {
    background: white;
    color: #fe4bc6;
    border: 4px solid #fe4bc6;
}

.primary .secondButton[data-secondmodule="Module 8"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="8"] .secondModuleButton,
.secondImages .secondButton:nth-child(8) .secondModuleButton {
    background: #f7e500;
    color: #ffffff;
    border: 4px solid transparent;
}

.primary .secondButton[data-secondmodule="Module 8"].pressed .secondModuleButton,
.primary [data-secondtargetmodule="8"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="8"].pressed .secondModuleButton,
.secondImages .secondButton:nth-child(8).pressed .secondModuleButton {
    background: white;
    color: #f7e500;
    border: 4px solid #f7e500;
}

.primary .secondButton[data-secondmodule="Module 9"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="9"] .secondModuleButton,
.secondImages .secondButton:nth-child(9) .secondModuleButton {
    background: #00ffff;
    color: #ffffff;
    border: 4px solid transparent;
}

.primary .secondButton[data-secondmodule="Module 9"].pressed .secondModuleButton,
.primary [data-secondtargetmodule="9"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="9"].pressed .secondModuleButton,
.secondImages .secondButton:nth-child(9).pressed .secondModuleButton {
    background: white;
    color: #00ffff;
    border: 4px solid #00ffff;
}

.primary .secondButton[data-secondmodule="Module 10"] .secondModuleButton,
[data-second="GA"] .secondButton[data-secondmodule="10"] .secondModuleButton,
.secondImages .secondButton:nth-child(10) .secondModuleButton {
    background: #FF003C;
    color: #ffffff;
    border: 4px solid transparent;
}

.primary .secondButton[data-secondmodule="Module 10"].pressed .secondModuleButton,
.primary [data-secondtargetmodule="10"] .secondModuleButton,
[data-second="GA"] [data-secondmodule="10"].pressed .secondModuleButton,
.secondImages .secondButton:nth-child(10).pressed .secondModuleButton {
    background: white;
    color: #FF003C;
    border: 4px solid #FF003C;
}

.primary .secondButton[data-secondmodule="ABC"] .secondModuleButton {
    background: #8ba8b1;
    color: #ffffff;
    border: 4px solid transparent;
}

.primary .secondButton[data-secondmodule="ABC"].pressed .secondModuleButton,
.primary [data-secondtargetmodule="ABC"] .secondModuleButton {
    background: white;
    color: #8ba8b1;
    border: 4px solid #8ba8b1;
}

.primaryStudents.pressed .primaryBg {
    fill: #FFFFFF;
}

.primaryStudents.pressed .primaryInner {
    fill: #FF5824;
}

.primaryWorkbook.pressed .primaryBg {
    fill: #FFFFFF;
}

.primaryWorkbook.pressed .primaryInner {
    fill: #00D2FF;
}

.primaryGrammar.pressed .primaryBg {
    fill: #FFFFFF;
}

.primaryGrammar.pressed .primaryInner {
    fill: #2EE100;
}

.primaryAlphabet.pressed .primaryBg {
    fill: #ffffff;
}

.primaryAlphabet.pressed .primaryInner {
    fill: #901252;
}

.primaryReader.pressed .primaryBg {
    fill: #ffffff;
}

.primaryReader.pressed .primaryInner {
    fill: #008C96;
}

.secondMore{
/* margin-bottom:80px; */
overflow:hidden;
display:none;
}

.demoGrammar svg:not([data-video]):not([data-gotoframe]) {
    opacity: 0.3
}

.demoGrammar svg.pressed rect {
    fill: #008100
}

.demoButton svg.pressed circle {
    fill: #ffff64
}

.demo [data-secondmodule],
.demo [data-gamemodule]>div,
.demo [data-goto] {
    position: relative;
}

.demo [data-goto] .secondExtraButton,
.demo [data-secondmodule] .secondModuleButton,
.demo [data-game],
.demo [data-gamemodule] [data-gotoframe],
.demoButton .secondModuleButton {
    position: relative;
    border: 4px solid white !important;
    box-sizing: border-box;
}

.demoButton .secondModuleButton {
    background: #00A5FF !important;
    color: #ffff64 !important;
}

.demo [data-secondmodule] .secondModuleButton .secondTitle {
    top: 10px;
    left: 13px;
}

.demo .secondButton,
.secondCustomTiles svg {
    position: relative;
    margin: 0px 1px;
}

.secondCustomTiles div {
    position: relative;
    background: black;
    border-radius: 15px;
    /* margin: 0px 3px; */
}

.demo [data-game] {
    padding-left: 8px;
    padding-top: 6px;
    position: relative;
}

.demo [data-game]:after,
.demo [data-gamemodule] [data-gotoframe]:after,
.demoButton:after {
    content: url('Images/demo-triangle-2.png');
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 40px;
    width: 40px;
    z-index: 100;
}

.demo .secondButton:not([data-goto]):not([data-secondmodule]):not([data-secondtarget]):not(.demoButton):after,
.demo [data-gamemodule]>div:not([data-game]):not([data-gotoframe]):after,
.secondCustomTiles svg:after {
    content: '';
    position: relative;
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 100%;
    width: 100%;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5)
}

.demo [data-secondmodule]:after,
.demo [data-goto]:after {
    content: url('Images/demo-triangle.png');
    position: absolute;
    right: 0px;
    bottom: 0px;
    height: 83px;
    width: 83px;
    z-index: 100;
}

.secondButtonWrapper .secondImages {
    display: none;
}

.secondCustomHeader {
    font-family: 'CFAsty';
    font-size: 22px;
    overflow: hidden;
    color: black;
    line-height: 40px;
    margin-bottom: 10px;
    padding: 0px 11px;
    background: none;
    font-weight: 300;
}

.secondCustomTiles {
    margin-bottom: 133px;
    padding: 0px 11px;
    overflow: hidden;
}

.secondCustomHeader>div {
    box-sizing: border-box;
    background: none !important;
    font-size: 60px;
}

[data-second="GA"] .secondCustomHeader>div,
[data-second="GA"] .secondCustomTiles>div>div {
    margin-right: 10px;
}
.secondCustomHeader span{font-size: 22px;display: block;}

.secondCustomHeader>div,.secondCustomTiles>div{padding-bottom: 8px;float:left;background: black;border-radius: 15px;margin: 0px 5px;width: 147px;}

.secondCustomTiles>div>div{color:white;box-sizing:border-box;background: -moz-linear-gradient(left, rgba(0,165,255,1) 70%, rgba(0,0,255,0) 100%);background: -webkit-linear-gradient(left, rgba(0,165,255,1) 70%,rgba(0,0,255,0) 100%);background: linear-gradient(to right, rgba(0,165,255,1) 70%,rgba(0,0,255,0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff64', endColorstr='#00ffff64',GradientType=1 );color: white;margin-bottom: 5px;padding-top:10px;font-family: CFAsty;line-height:20px;}

.secondCustomTiles>div>div>div{width: 100%;text-align: center;font-size: 30px;margin-bottom: 6px;}

[data-second="PG"] .secondCustomTiles>div>div{padding: 6px 7px 0px 7px;background:transparent;margin-top: 13px;}

.secondCustomTiles>div>div.pressed{color:rgba(0,165,255,1);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 70%, rgba(0,0,255,0) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 70%,rgba(0,0,255,0) 100%);
background: linear-gradient(to right, rgba(255,255,255,1) 70%,rgba(0,0,255,0) 100%);}

.secondMore .secondModuleButton{float:left;}

.secondMore .secondImages{
    display: inline-block;}

.secondImages{margin-left: 22px;}



.secondImages img{height: 181px;width:auto;display:block;margin-bottom:6px;}
.gameLesson {
    width: 190px;
    font-family: SoupofJustice;
    color: black;
    float: left;
}
.secondImages>div>span{color:rgba(255,255,255,0.8);display: inline-block;float: left;}

.secondImages>div>span:nth-child(3){float:right}







.secondOpacity{opacity:0.5;
outline: 2px solid #ffffff;
outline-offset: -2px;}

[data-second]{
display:none;
text-align: center;
padding-bottom:130px;
background:#333399;
}
[data-second="GA"]{
    width: 100%;
}


.loader{
  width: 200px;
  height: 200px;
  border-radius: 100%;
  margin: 0px auto;
  margin-top: 260px;
  color:white;
  position: relative;
}

[data-second="PM"] .secondModuleButton,[data-second="VW"] .secondModuleButton,[data-second="PR"] .secondModuleButton,[data-second="PV"] .secondModuleButton{background:black;color:white}

[data-second="VW"] .secondButton.pressed .secondModuleButton,[data-second="PV"] .secondButton.pressed .secondModuleButton{color:black;background:white;}

[data-second="PM"] .secondModuleButton circle,[data-second="PR"] .secondModuleButton circle{fill:#01ffff;opacity:1;}

[data-second="PM"] .secondModuleButton g,[data-second="PR"] .secondModuleButton g{fill:black;}

.loadingText{position:absolute;bottom: -100px;width: 100%;text-align: center;font-size: 42px;}

#loader-1:before, #loader-1:after{
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 10px solid transparent;
  border-top-color: #ff3333;
}

#loader-1:before{
  z-index: 100;
  animation: spin 1s infinite;
}

#loader-1:after{
  border: 10px solid #fff;
}



@keyframes spin{
  0%{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100%{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.secondCustomTiles svg path,.secondCustomTiles svg ellipse{fill:black}

.secondCustomTiles svg.pressed path,.secondCustomTiles svg.pressed ellipse{fill:#01ffff}


[data-video].pressed g,[data-secondmodule][data-gotoframe].pressed g{fill:#01ffff;}

[data-video].pressed circle,[data-secondmodule][data-gotoframe].pressed circle{fill:blue;}


.secondCustomTiles svg circle{opacity:1}

[data-game] {
	float:left;
    font-family: 'SoupofJustice';
	font-weight: 300;
    margin-bottom: 20px;
    margin-left: 15px;
    margin-right: 15px;
    width: 140px;
    height: 140px;
    border-radius: 100% !important;
}

.primary [data-game],
.primary [data-game]:nth-child(1) {
    background: #ff5824;
    color: white;
    border: 4px solid transparent;
}

.primary [data-game]:nth-child(1).pressed {
    background: white;
    color: #ff5824;
    border: 4px solid #ff5824;
}
.primary [data-game],
.primary [data-game]:nth-child(2) {
    background: #0341fc;
    color: white;
    border: 4px solid transparent;
}
.primary [data-game]:nth-child(2).pressed {
    background: white;
    color: #0341fc;
    border: 4px solid #0341fc;
}
.primary [data-game],
.primary [data-game]:nth-child(3) {
    background: #901252;
    color: white;
    border: 4px solid transparent;
}
.primary [data-game]:nth-child(3).pressed {
    background: white;
    color: #901252;
    border: 4px solid #901252;
}
.primary [data-game],
.primary [data-game]:nth-child(4) {
    background: #ffa000;
    color: white;
    border: 4px solid transparent;
}
.primary [data-game]:nth-child(4).pressed {
    background: white;
    color: #ffa000;
    border: 4px solid #ffa000;
}
.primary [data-game],
.primary [data-game]:nth-child(5) {
    background: #008c96;
    color: white;
    border: 4px solid transparent;
}
.primary [data-game]:nth-child(5).pressed {
    background: white;
    color: #008c96;
    border: 4px solid #008c96;
}
.primary [data-game],
.primary [data-game]:nth-child(6) {
    background: #9100ff;
    color: white;
    border: 4px solid transparent;
}
.primary [data-game]:nth-child(6).pressed {
    background: white;
    color: #9100ff;
    border: 4px solid #9100ff;
}

.primary [data-game],
.primary [data-game]:nth-child(7) {
    background: #fe4bc6;
    color: white;
    border: 4px solid transparent;
}

.primary [data-game]:nth-child(7).pressed {
    background: white;
    color: #fe4bc6;
    border: 4px solid #fe4bc6;
}

.primary [data-game],
.primary [data-game]:nth-child(8) {
    background: #f7e500;
    color: white;
    border: 4px solid transparent;
}

.primary [data-game]:nth-child(8).pressed {
    background: white;
    color: #f7e500;
    border: 4px solid #f7e500;
}

.primary [data-game],
.primary [data-game]:nth-child(9) {
    background: #00ffff;
    color: white;
    border: 4px solid transparent;
}

.primary [data-game]:nth-child(9).pressed {
    background: white;
    color: #00ffff;
    border: 4px solid #00ffff;
}


.primary [data-game]:nth-child(10) {
    background: #ed1a1a;
    color: white;
    border: 4px solid transparent;
}

.primary [data-game]:nth-child(10).pressed {
    background: white;
    color: #ed1a1a;
    border: 4px solid #ed1a1a;
}
.primary [data-game],
.primary [data-game]:nth-child(11) {
    background: #8ba8b1;
    color: white;
    border: 4px solid transparent;
}
.primary [data-game]:nth-child(11).pressed {
    background: white;
    color: #8ba8b1;
    border: 4px solid #8ba8b1;
}
.gameCircles {
    display: inline-block;
}

[data-game].pressed {
    background: white;
    color: #f7e500;
    border: 4px solid #f7e500;
}

.gamesHeader {
    font-family: 'CFAsty Primary Book' !important;
    text-align: center;
    margin-top: -28px;
    height: 30px;
}

.gameLessonHeader {
    margin: 64px 60px 128px 50px;
    font-size: 28px;
}

.gamesHeader span {
    font-size: 22px;
    display: block;
}

.gamesBody{
    overflow: hidden;
    text-align: center;
}

.gamesBody>div {
    height: 60px;
    font-size: 24px;
    border-radius: 30px;
    box-sizing: border-box;
    display: inline-block;
    white-space: pre;
    margin-top: 57px;
}

.gamesTiles {
    overflow: hidden;
    min-height: 200px;
    display: inline-block;
}

.gamesTiles>div {
    float: left;
    font-family: 'CFAsty Primary Book';
    font-weight: 300;
    margin-bottom: 42px;
    height: 205px;
    margin-left: 10px;
    margin-right: 10px;
}

[data-gamemodule] {
    position: relative;
}


[data-second="GA"] .secondMore .secondImagesGA:not([data-gamemodule="ABC"]) {
    float: none;
    margin-left: -120px;
}
[data-second="GA"] .secondLevelHeader {
    width: 100%;
    text-align: center;
}

.secondMore .secondImages:not([data-gamemodule="ABC"]) {
    text-align: center;
}


.secondLevelHeader svg ellipse{fill:#ffffff;}
.secondButton.pressed .secondExtraButton{color:blue;background:white;}

.preLoadLogo{
	display:none !important;
}

.IWBVersion {position: absolute;right: 25px;bottom: 18px;font-family: 'mmAsap';color:white;font-size:14px;line-height: 1;}
.loading .f11Txt {
    display: none;
}