.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;
}

/*hELP DIV*/

.helpBtn{position:absolute;top:-840px;left:22px;}

.helpBtn.firstLevel.pressed .redH{fill: #ec2024 !important}
.helpBtn.firstLevel.pressed .redH2{fill: #ec2024 !important; opacity: 0.44}
.helpBtn.firstLevel.pressed .whiteH{fill: #ffffff !important}



.helpExit{
	position: absolute;
	width: 57px;
    height: 57px;
    bottom: 16px;
    left: 48px;
	background: #2D3C50;
	border: 4px solid #ffffff;
	border-radius: 40px;
	box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);
	-moz-box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);
	-webkit-box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);
}

.helpExit svg{
	position: absolute;
	transform: translate(-4px, -4px);
}

.helpExit.pressed{
	border-width:2px;
	background: #ff0064;
	width: 61px;
	height: 61px;
}

.helpExit.pressed svg{
	transform-origin: center;
	transform: scale(0.8);
	left: -2px;
	top: -2px;
}

.instr-Btn.pressed svg path:nth-child(2)  {fill:#ff007d!important}
.instr-Btn.pressed svg path:nth-child(3)  {fill:#ff007d!important}

.help{
	display:none;
	z-index: 10000;
	width: 1280px;
	height: 960px;
	overflow: hidden;
	position: absolute;
	background: #64a023;
}

.helpCont{
	position: absolute;
	left: 0;
	right:0;
	margin:0 auto;
	width:1237px;
	height: 779px;
	/*margin-top:82px;*/
}
.helpImg{
	position: absolute;
	left: 0;
	right:0;
	margin:0 auto;
	width:1237px;
	height: 779px;
	margin-top:82px;
}

.helpTxt{
	position: absolute;
	left: 55px;
	color: #ffffff;
	font-size: 61px;
	font-family: 'CFAstyPro Book';
	margin-top: 15px;
}

.helpRightCont{
	position: absolute;
	right: 0;
	bottom: 12px;
}


.svg-cont{
    width: 37px;
    height: 30px;
    float: right;
    margin-right: 110px;
    margin-top: 15px;
}
.instr-Btn{
	bottom: 25px;
    float: right;

}
.Instr-txt{

    font-family: 'CFAsty Primary Semibold';
    font-size: 21px;
    float: right;
    color: #ffffff;
    margin-right: 25px;
    margin-top: 20px;
	margin-left: 15px;
}

.pressed .Instr-txt{
	color: #ff007d;
}

/*eND OF hELP DIV*/
.IntroActive .intro{display:block !important;}

.IntroActive .main,.IntroActive .mainOptions{display:none !important;}

#main{width:100%;height: 960px;/* background-color:white; */left:0px;top:0px;border-radius:0px;box-shadow: none;}

.modulesTrigger svg{}

.secondLevelHeader svg{width:70px;height:70px;margin-right: 15px;vertical-align: middle;margin-top: -12px;}

[data-second="Reader"] .secondLevelHeader svg{margin-right: 0px;}
[data-second="Reader"] .secondLevelHeader{width: 120px !important;margin-top: 40px !important;margin-left: 268px !important;}

.secondLevelHeader svg path,
.secondLevelHeader svg circle,
.secondLevelHeader svg rect
{fill: black;}

.secondBack {width:70px;height:70px;position:absolute;bottom: 140px;left:40px;}

.secondBackReader{left: -494px ;}

.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;}

.mainBgEx{position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;}

.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);
}



.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:1279px;
	height:960px;
	position:relative;
}

.logoImg{position:absolute;
top:23px;
left:758px;}

.logoImg img{position:absolute; opacity:1;transition:opacity linear;}

.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: 130px;}



.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{
	font-family: 'Comic Sans';
	display:inline-block;
	width: 325px;
	margin-right:16px;
	z-index: 100;
	position: absolute !important;
	top: 27px;
	right: 150px;
	background: #efff00;
	box-shadow: 10px 10px;
	-webkit-box-shadow: 10px 10px;
	line-height: 45px;
}

.modulesMore:after{
	content:'';
	background: black;
	width: 10px;
	height: 20px;
	position: absolute;
	top: 0px;
	right: -10px;
}

.modulesTrigger{
	font-family: 'Comic Sans Bold';
	font-size: 30px;
	letter-spacing:1px;
	color: #000000;
	cursor: pointer;
}

.svgTriggered{
	transform: scale(1.3) rotate(180deg) !important;
}

.modulesExtra{
	position:absolute;
	left:0px;
	bottom:50px;
	display:none;
	width: 325px;
	font-family: 'Comic Sans';
	box-shadow: 10px 0px;
	-webkit-box-shadow: 10px 0px;
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 850px;
	background: black;
}

.modulesExtra>div{line-height: 50px;min-height: 50px;border-bottom: 7px solid black;}

.modulesExtraExp,
.modulesExtraExpL2{
-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,
[data-extraL2]>span.pressed,
.modulesExtraSubL2>span.pressed{
background:#505050;
color:#ffffff;
font-weight:600;
}

.modulesExtra>div>span{padding-left:16px;font-size: 30px;color:black;display:block;cursor:pointer;background:#ededed;}

.modulesExtraSub,
.modulesExtraSubL2
{display:none;
overflow:hidden;
transition:max-height 0.3s ease-in-out;
-webkit-transition:max-height 0.3s ease-in-out;}

.modulesExtraSub>span,
[data-extraL2]>span
{display:block;height: 45px;line-height: 43px;/* margin-left:18px; */padding-left:16px;background:#dcdcdc;color:black;font-size: 30px;cursor:pointer;/* -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4); *//* box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.4); */border-left: 15px solid black;border-top: 7px solid black;}

.modulesExtraSubL2>span{
	display:block;
	height: 45px;
	line-height: 43px;
	padding-left:20px;
	background:#8c8c8c;
	color:white;
	font-size: 30px;
	cursor:pointer;
	border-left: 15px solid black;
	border-top: 7px solid black;
}

.modulesExtraExp>span,
.modulesExtraExpL2>span{background:#505050 !important;
color:#ffffff !important;
font-weight:600 !important;}

.modulesExtra::-webkit-scrollbar {
  width: 10px;
}

.modulesExtra::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.modulesExtra::-webkit-scrollbar-thumb {
  background: #888;
}

.modulesExtra::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Module & more END */



.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;}

.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;}
.primaryFourth.pressed  .mainTitle{text-align: center;color: #2ee100;}

.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;}
.primaryFifth.pressed  .mainTitle{text-align: center;color: #00d2ff;}



.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: #64a023; */
	background-image: url(../Images/Main/main.jpg);
    background-size: cover;
	width:100%;
	height: 100%;
}

.primary .mainSecondLevel:not(.readerMenu){
	/* max-height: 683px; */
}

.readerMenu{width:785px;height:100%;left:495px !important;opacity: 0.9;}


.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:#3e3889;}

.primaryReader.pressed .primaryBg{fill:#ffffff;}
.primaryReader.pressed .primaryInner{fill:#008C96;}

.primaryCompanion.pressed .primaryBg{fill:#ffffff;}
.primaryCompanion.pressed .primaryInner{fill:#FFA000;}

.primaryTests.pressed .primaryBg{fill:#ffffff;}
.primaryTests.pressed .primaryInner{fill:#2EE000;}

.primaryPlays.pressed .primaryBg{fill:#ffffff;}
.primaryPlays.pressed .primaryInner{fill:#3e3889;}


.primary .slideshowButtonWrapper {display:none !important;}

.secondBackbtn{margin-left: 38px;margin-bottom: 5px;margin-top: 10px;}

.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: 480px;
	padding-bottom: 110px;
	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 .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: 17px;position: relative;margin-right:3px;margin-bottom: 40px;margin-top: 30px;}

.secondButtonWrapper{
	overflow:hidden;
	min-height:200px;
	margin: 0 auto;
}
.secondButtonWrapperReader{padding-left: 0px;
    padding-top: 0px;
    width: 782px;}

.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: 168px 0px 20px 0px;padding-left: 60px;height:60px;line-height:60px;font-weight:300;font-size:37px;color: black;font-family: SoupofJustice;width: 700px;}

.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;}

.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;box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);-webkit-box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);-moz-box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);}

.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: 4px 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: 6px;top: 34px;font-size: 25px;width:120px;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:10px;
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: 17px;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: 23px;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: 35px;text-align: center;position:absolute;top: 52px;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 .secondButton:nth-child(1) .secondModuleButton{background:#ff5824;color:#ffffff;border:4px solid transparent;}
.primary [data-second="Reader"] .secondButton:nth-child(1) .secondModuleButton.pressed,.primary [data-secondtargetmodule="Hello"] .secondModuleButton, .secondButton:nth-child(1).pressed .secondModuleButton{background:#ffffff !important;color:#ff5824 !important;border:4px solid #ff5824 !important;}

.primary .secondButton:nth-child(2) .secondModuleButton{background:#2ee100;color:white;border:4px solid transparent;}
.primary [data-second="Reader"] .secondButton:nth-child(2) .secondModuleButton.pressed,.primary [data-secondtargetmodule="1"] .secondModuleButton,.primary .secondButton:nth-child(2).pressed .secondModuleButton{background:white;color:#2ee100;border:4px solid #2ee100;}

.primary .secondButton:nth-child(3) .secondModuleButton{background:#901252;color:#ffffff;border:4px solid transparent;}
.primary [data-second="Reader"] .secondButton:nth-child(3) .secondModuleButton.pressed,.primary [data-secondtargetmodule="2"] .secondModuleButton,.primary .secondButton:nth-child(3).pressed .secondModuleButton{background:#ffffff !important;color:#901252 !important;border:4px solid #901252 !important;}

.primary .secondButton:nth-child(4) .secondModuleButton{background:#ffa000;color:white;border:4px solid transparent;}
.primary [data-second="Reader"] .secondButton:nth-child(4) .secondModuleButton.pressed,.primary [data-secondtargetmodule="3"] .secondModuleButton,.primary .secondButton:nth-child(4).pressed .secondModuleButton{background:white;color:#ffa000;border:4px solid #ffa000;}

.primary .secondButton:nth-child(5) .secondModuleButton{background:#008c96;color:#ffffff;border:4px solid transparent;}
.primary [data-second="Reader"] .secondButton:nth-child(5) .secondModuleButton.pressed,.primary [data-secondtargetmodule="4"] .secondModuleButton,.primary .secondButton:nth-child(5).pressed .secondModuleButton{background:#ffffff !important;color:#008c96 !important;border:4px solid #008c96 !important;}

.primary .secondButton:nth-child(6) .secondModuleButton{background:#da0000;color:#ffffff;border:4px solid transparent;}
.primary [data-second="Reader"] .secondButton:nth-child(6) .secondModuleButton.pressed,.primary [data-secondtargetmodule="5"] .secondModuleButton,.primary .secondButton:nth-child(6).pressed .secondModuleButton{background:#ffffff !important;color:#da0000 !important;border:4px solid #da0000 !important;}

.primary .secondButton:nth-child(7) .secondModuleButton{background:#fe4bc6;color:#ffffff;border:4px solid transparent;}
.primary [data-second="Reader"] .secondButton:nth-child(7) .secondModuleButton.pressed,.primary [data-secondtargetmodule="6"] .secondModuleButton,.primary .secondButton:nth-child(7).pressed .secondModuleButton{background:#ffffff !important;color:#fe4bc6 !important;border:4px solid #fe4bc6 !important;}

.primary .secondButton:nth-child(8) .secondModuleButton{background:#f7e500;color:#ffffff;border:4px solid transparent;}
.primary [data-second="Reader"] .secondButton:nth-child(8) .secondModuleButton.pressed,.primary [data-secondtargetmodule="7"] .secondModuleButton,.primary .secondButton:nth-child(8).pressed .secondModuleButton{background:white !important;color:#f7e500 !important;border:4px solid #f7e500 !important;}

.primary .secondButton:nth-child(9) .secondModuleButton{background:#00ffff;color:#ffffff;border:4px solid transparent;}
.primary [data-second="Reader"] .secondButton:nth-child(9) .secondModuleButton.pressed,.primary [data-secondtargetmodule="8"] .secondModuleButton,.primary .secondButton:nth-child(9).pressed .secondModuleButton{background:white !important;color:#00ffff !important;border:4px solid #00ffff !important;}

.primary .secondButton:nth-child(10) .secondModuleButton{background:#8ba8b1;color:#ffffff;border:4px solid transparent;}
.primary .secondButton:nth-child(10).pressed .secondModuleButton{background:white !important;color:#8ba8b1 !important;border:4px solid #8ba8b1 !important;}

.primary .secondButton:nth-child(11) .secondModuleButton{background:#d91c5c;color:#ffffff;border:4px solid transparent;}
.primary .secondButton:nth-child(11).pressed .secondModuleButton{background:white;color:#d91c5c;border:4px solid #d91c5c;}

.primary .secondButton:nth-child(12) .secondModuleButton{background:#ffa000;color:#ffffff;border:4px solid transparent;}
.primary .secondButton:nth-child(12).pressed .secondModuleButton{background:white !important;color:#ffa000 !important;border:4px solid #ffa000 !important;}

.primary .secondButton:nth-child(13) .secondModuleButton{background:#00ffff;color:#ffffff;border:4px solid transparent;}
.primary .secondButton:nth-child(13).pressed .secondModuleButton{background:white !important;color:#00ffff !important;border:4px solid #00ffff !important;}

.primary .secondButton:nth-child(14) .secondModuleButton{background:#ffa000;color:#ffffff;border:4px solid transparent;}
.primary .secondButton:nth-child(14).pressed .secondModuleButton{background:white;color:#ffa000;border:4px solid #ffa000;}

.primary .secondButton:nth-child(15) .secondModuleButton{background:#ff0000;color:#ffffff;border:4px solid transparent;}
.primary .secondButton:nth-child(15).pressed .secondModuleButton{background:white !important;color:#ff0000 !important;border:4px solid #ff0000 !important;}

.primary .secondButton:nth-child(16) .secondModuleButton{background:#2c8c98;color:#ffffff;border:4px solid transparent;}
.primary .secondButton:nth-child(16).pressed .secondModuleButton{background:white !important;color:#2c8c98 !important;border:4px solid #2c8c98 !important;}

.primary .secondButton:nth-child(17) .secondModuleButton{background:#f5e400;color:#ffffff;border:4px solid transparent;}
.primary .secondButton:nth-child(17).pressed .secondModuleButton{background:white !important;color:#f5e400 !important;border:4px solid #f5e400 !important;}

.primary .secondButton:nth-child(18) .secondModuleButton{background:#8ba8b0;color:#ffffff;border:4px solid transparent;}
.primary .secondButton:nth-child(18).pressed .secondModuleButton{background:white !important;color:#8ba8b0 !important;border:4px solid #8ba8b0 !important;}

.primary .secondButton:nth-child(19) .secondModuleButton{background:#fe4bc6;color:#ffffff;border:4px solid transparent;}
.primary .secondButton:nth-child(19).pressed .secondModuleButton{background:white !important;color:#fe4bc6 !important;border:4px solid #fe4bc6 !important;}

.primary .secondButton:nth-child(20) .secondModuleButton{background:#8ba8b0;color:#ffffff;border:4px solid transparent;}
.primary .secondButton:nth-child(20).pressed .secondModuleButton{background:white !important;color:#8ba8b0 !important;border:4px solid #8ba8b0 !important;}

.primary .secondButton:nth-child(21) .secondModuleButton{background:#d91c5c;color:#ffffff;border:4px solid transparent;}
.primary .secondButton:nth-child(21).pressed .secondModuleButton{background:white !important;color:#d91c5c !important;border:4px solid #d91c5c !important;}

.primary .secondButton:nth-child(22) .secondModuleButton{background:#8ba8b0;color:#ffffff;border:4px solid transparent;}

/* .primary [data-secondtargetmodule="Hello"] .secondModuleButton{background:white !important;color:#d91c5c !important;border:4px solid #d91c5c !important;} */
.primary [data-secondtargetmodule="9"] .secondModuleButton,
.primary [data-secondtargetmodule="10"] .secondModuleButton,
.primary [data-secondtargetmodule="11"] .secondModuleButton,
.primary [data-secondtargetmodule="12"] .secondModuleButton,
.primary [data-secondtargetmodule="13"] .secondModuleButton,
.primary [data-secondtargetmodule="14"] .secondModuleButton,
.primary [data-secondtargetmodule="15"] .secondModuleButton,
.primary [data-secondtargetmodule="16"] .secondModuleButton,
.primary [data-secondtargetmodule="17"] .secondModuleButton,
.primary [data-secondtargetmodule="18"] .secondModuleButton,
.primary [data-secondtargetmodule="19"] .secondModuleButton,
.primary [data-secondtargetmodule="20"] .secondModuleButton,
.primary [data-secondtargetmodule="21"] .secondModuleButton,
.primary [data-secondtargetmodule="22"] .secondModuleButton,
.primary [data-secondtargetmodule="23"] .secondModuleButton,
.primary [data-secondtargetmodule="24"] .secondModuleButton,
.primary [data-secondtargetmodule="25"] .secondModuleButton,
.primary [data-secondtargetmodule="26"] .secondModuleButton
{background:white !important;color:#000000 !important;border:4px solid #000000 !important;}
.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;}
/*End of Module Colors */

[data-second="Reader"] .secondButton:nth-child(1) svg path:nth-child(1),[data-second="Reader"] .secondButton:nth-child(2) svg path:nth-child(1),[data-second="Reader"] .secondButton:nth-child(3) svg path:nth-child(1),[data-second="Reader"] .secondButton:nth-child(4) svg path:nth-child(1),[data-second="Reader"] .secondButton:nth-child(5) svg path:nth-child(1),[data-second="Reader"] .secondButton:nth-child(6) svg path:nth-child(1),[data-second="Reader"] .secondButton:nth-child(7) svg path:nth-child(1),[data-second="Reader"] .secondButton:nth-child(8) svg path:nth-child(1),[data-second="Reader"] .secondButton:nth-child(9) svg path:nth-child(1)
{fill:#FFFFFF}
[data-second="Reader"] .secondButton:nth-child(1) svg path:nth-child(2){fill:#F55612}
[data-second="Reader"] .secondButton:nth-child(2) svg path:nth-child(2){fill:#2ee100}
[data-second="Reader"] .secondButton:nth-child(3) svg path:nth-child(2){fill:#901252}
[data-second="Reader"] .secondButton:nth-child(4) svg path:nth-child(2){fill:#37a0e6}
[data-second="Reader"] .secondButton:nth-child(5) svg path:nth-child(2){fill:#37a0e6}
[data-second="Reader"] .secondButton:nth-child(6) svg path:nth-child(2){fill:#da0000}
[data-second="Reader"] .secondButton:nth-child(7) svg path:nth-child(2){fill:#da0000}
[data-second="Reader"] .secondButton:nth-child(8) svg path:nth-child(2){fill:#fe4bc6}
[data-second="Reader"] .secondButton:nth-child(9) svg path:nth-child(2){fill:#000000}


[data-second="Reader"] .secondButton:nth-child(1) svg.pressed path:nth-child(1){fill:#F55612}
[data-second="Reader"] .secondButton:nth-child(2) svg.pressed path:nth-child(1){fill:#2ee100}
[data-second="Reader"] .secondButton:nth-child(3) svg.pressed path:nth-child(1){fill:#901252}
[data-second="Reader"] .secondButton:nth-child(4) svg.pressed path:nth-child(1){fill:#37a0e6}
[data-second="Reader"] .secondButton:nth-child(5) svg.pressed path:nth-child(1){fill:#37a0e6}
[data-second="Reader"] .secondButton:nth-child(6) svg.pressed path:nth-child(1){fill:#da0000}
[data-second="Reader"] .secondButton:nth-child(7) svg.pressed path:nth-child(1){fill:#da0000}
[data-second="Reader"] .secondButton:nth-child(8) svg.pressed path:nth-child(1){fill:#fe4bc6}
[data-second="Reader"] .secondButton:nth-child(9) svg.pressed path:nth-child(1){fill:#000000}
[data-second="Reader"] .secondButton:nth-child(1) svg.pressed path:nth-child(2),[data-second="Reader"] .secondButton:nth-child(2) svg.pressed path:nth-child(2),[data-second="Reader"] .secondButton:nth-child(3) svg.pressed path:nth-child(2),[data-second="Reader"] .secondButton:nth-child(4) svg.pressed path:nth-child(2),[data-second="Reader"] .secondButton:nth-child(5) svg.pressed path:nth-child(2),[data-second="Reader"] .secondButton:nth-child(6) svg.pressed path:nth-child(2),[data-second="Reader"] .secondButton:nth-child(7) svg.pressed path:nth-child(2),[data-second="Reader"] .secondButton:nth-child(8) svg.pressed path:nth-child(2),[data-second="Reader"] .secondButton:nth-child(9) svg.pressed path:nth-child(2)
{fill:#FFFFFF}

.secondMore{margin-left:24px;overflow: hidden;display:none;height: 543px;z-index: 10;margin-top: -10px;padding-left: 3px;}

.secondMoreABC{
	margin-left:150px;
	/* overflow:auto;  */
	display:none;
	height:543px;
	margin-top: -10px;
}

.subs{color: black;text-align: center;font-size: 48px;height: 70px;line-height: 66px;width: 100%;font-family: 'CFAsty Primary Medium';background: rgb(150,150,150);background: -moz-linear-gradient(top,  rgba(150,150,150,1) 0%, rgba(255,255,255,1) 15%, rgba(255,255,255,1) 85%, rgba(150,150,150,1) 100%);background: -webkit-linear-gradient(top,  rgba(150,150,150,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 85%,rgba(150,150,150,1) 100%);background: linear-gradient(to bottom,  rgba(150,150,150,1) 0%,rgba(255,255,255,1) 15%,rgba(255,255,255,1) 85%,rgba(150,150,150,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#969696', endColorstr='#969696',GradientType=0 );margin-top: 30px;}

.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 Primary Book';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 Primary Book;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;}



.secondImagesGA{margin-top: 70px;width: 1060px!important;}

.secondMore .secondImages{float:left;}
.secondMoreABC .secondImages{float:left;}

.secondImages{margin-left: 22px;width: 870px;}

.secondImages:not(.secondImagesGA){
	height: 523px;
	overflow: scroll;
	/* padding: 30px 21px 30px 30px; */
	background: #2d3c50;
	border-radius: 20px;
	border: 20px solid #2d3c50;
	border-right-width: 11px;
	border-bottom-width: 0px;
}

/* Disable scrollbars */
.secondImages::-webkit-scrollbar { width: 0 !important }
.secondImages { -ms-overflow-style: none; }
.secondImages { overflow: -moz-scrollbars-none; scrollbar-width: none;}

.secondImages:not(.secondImagesGA) div{
	float:left;
	margin-right: 9px;
	background: black;
	padding: 13px 10px 7px 10px;
	border-radius: 9px;
	font-size: 30px;
	font-family: 'Comic Sans';
	margin-bottom: 5px;
	font-weight: 300;
	}



.gameLesson{
    width: 190px;
    font-family: SoupofJustice;
    color: black;
    float:left;
    }

.secondImages img{height: 180px;width: auto;display:block;margin-bottom:6px;}



.secondImages>div>span{color:rgba(255,255,255,0.8);display: inline-block;float: left;}

.secondImages>div>span:nth-child(3){float:right}

.secondary .secondImages>div.pressed img{
outline: 4px solid #00A5FF;
outline-offset: -4px;
}

.primary .secondImages>div.pressed img{
outline: 4px solid #d90001;
outline-offset: -4px;
}

.secondary .secondImages>div.pressed span{
color:#00A5FF;
}

.primary .secondImages>div.pressed span{
color:#d90001;
}

.secondOpacity{opacity:0.5;
outline: 2px solid #ffffff;
outline-offset: -2px;}

[data-second]:not([data-second="GA"]){
	display:none;
	text-align: center;
	/* margin-top: 180px; */
	/* height: 100%; */
	bottom: 101px;
	position: absolute;
	/* z-index: 10; */
}

[data-second]{overflow:hidden;}

[data-second="GA"]{

bottom: 110px;

position: absolute;
}

.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],.primary [data-game]:nth-child(2) {background:#2ee100 ;color:white;border:4px solid transparent;}
.primary [data-game],.primary [data-game]:nth-child(3) {background:#901252 ;color:white;border:4px solid transparent;}
.primary [data-game],.primary [data-game]:nth-child(4) {background:#ffa000 ;color:white;border:4px solid transparent;}
.primary [data-game],.primary [data-game]:nth-child(6) {background:#37a0e6 ;color:white;border:4px solid transparent;}
.primary [data-game],.primary [data-game]:nth-child(7) {background:#da0000 ;color:white;border:4px solid transparent;}
.primary [data-game],.primary [data-game]:nth-child(8) {background:#fe4bc6 ;color:white;border:4px solid transparent;}
.primary [data-game],.primary [data-game]:nth-child(9) {background:#57BF82 ;color:white;border:4px solid transparent;}
.primary [data-game],.primary [data-game]:nth-child(10) {background:#008c96 ;color:white;border:4px solid transparent;}
.primary [data-game],.primary [data-game]:nth-child(11) {background:#9100ff ;color:white;border:4px solid transparent;}
.primary [data-game]:nth-child(1).pressed {background:white;color:#ff5824;border:4px solid #ff5824;}
.primary [data-game]:nth-child(2).pressed {background:white;color:#2ee100;border:4px solid #2ee100;}
.primary [data-game]:nth-child(3).pressed {background:white;color:#901252;border:4px solid #901252;}
.primary [data-game]:nth-child(4).pressed {background:white;color:#ffa000;border:4px solid #ffa000;}
.primary [data-game]:nth-child(6).pressed {background:white;color:#37a0e6;border:4px solid #37a0e6;}
.primary [data-game]:nth-child(7).pressed {background:white;color:#da0000;border:4px solid #da0000;}
.primary [data-game]:nth-child(8).pressed {background:white;color:#fe4bc6;border:4px solid #fe4bc6;}
.primary [data-game]:nth-child(9).pressed {background:white;color:#57BF82;border:4px solid #57BF82;}
.primary [data-game]:nth-child(10).pressed {background:white;color:#008c96;border:4px solid #008c96;}
.primary [data-game]:nth-child(11).pressed {background:white;color:#9100ff;border:4px solid #9100ff;}

.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;}

.mainOptions a{top:30px !important;right: 85px !important;}

.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;}

[data-secondtarget=GA].mainInv svg ellipse{fill: #005321;}

.secondLevelHeader svg ellipse{fill: black;}
.secondButton.pressed .secondExtraButton,[data-second=Reader] .secondButton .secondExtraButton.pressed{color:#000000;background:white;}

.primarySixth .primaryBg {
    fill: #ffffff;
    stroke: #90A4AE;
}




.primarySixth.pressed .primaryBg {
    fill: #90A4AE;
}



.primarySixth .primaryInner2,.primarySixth .primaryInner{
    fill: #90A4AE;
}

.primarySixth.pressed .primaryInner {

   fill:#ffffff;
}

.IWBVersion {position: absolute;right: 25px;bottom: 18px;font-family: 'mmAsap';color:white;font-size:14px;line-height: 1;}
.primarySixth .mainTitle {

    color: white;
}

.primarySixth.pressed .mainTitle {
    color: #90A4AE;
}

.preLoadLogo{display:none !important;

}

.hidden{opacity:0 !important;}

.zippy{
	position:absolute;
	top: 9px;
	left: 1040px;
	z-index:1;
	height: 290px;
	display:none;
	transform-origin:left top;
	/* transform:scale(1.5); */
}

.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;}


/* main menu animated zippy */
.zippy_main{
	position:absolute;
	top:263px;
	left:866px;
	background: url('../Images/Main/zippy_sprite_main.png') left center;
	width:400px; /*to width upologizetai: (width tou sprite)/(frames tou sprite) */
	height:400px;
	z-index:1;
}

.zippy_play{
	animation: zippy_play 5s steps(53) infinite; /*ta steps na einai osa ta frames tou sprite*/
}

@keyframes zippy_play {
	100% { background-position: -21200px; } /*sunoliko width tou sprite*/
}

.topBar{
	display: inline-block;
	opacity:0;
	width: 80px;
	height: 45px;
	background: #FF0064;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	margin: 0px 0px 0px -30px;
	z-index: 801;
	position: relative;
}

.topBar svg,.bottomBar svg{
	/* margin-top: 8px; */
	fill:#ffffff;
	top: 8px;
	position: relative;
}

.bottomBar{
	display: inline-block;
	opacity:0;
	width: 80px;
	height: 45px;
	background: #FF0064;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	margin: -10px 0px 0px -30px;
	z-index: 801;
	position: relative;
}

.topBar.pressed,.bottomBar.pressed{background: #ffffff;}
.topBar.pressed svg,.bottomBar.pressed svg{fill: #FF0064;}

.bubbleMain{
	width: 180px;
	height: 185px;
	position: absolute;
	top: 290px;
	left: 689px;
	z-index: 1;
	text-align: center;
}

.bubbleMainL2{
	top: 10px;
	left: 785px;
}

.bubbleMain svg{
	fill:#ffffff;
}

.bubbleMain span{
	color:#5a9600;
	font-family:CFAsty Primary Medium;
	font-size:24px;
	position: absolute;
	top: 35px;
	left: 16px;
	width: 202px;
}

.GrTables .secondModuleButton{
background: rgba(0,0,0,0.3)!important;
 color: #ffffff!important;
 border: 2px solid white!important}

.primary .GrTables.secondButton.pressed .secondModuleButton	{color: #000000!important;background:white!important;border:2px solid black !important;}

/*Interactive Activities Button*/

.primaryIntAct.pressed g path:first-child{fill:#ffffff;}
.primaryIntAct.pressed g text{fill:#FE0070;}
.primaryIntAct.pressed g path{fill:#FE0070;}




[data-second="GT"] .secondLevelHeader{padding-left: 30px;}


/* New menu */
[data-second]{
	width: 100%;
}

[data-second="SB"] .extrabtn .secondTitle{
	top:40px;
}

[data-second="SB"] .secondButtonWrapper {
	width:930px;
	padding-top: 10px;
}

[data-second="SB"] .secondButton{
	margin-bottom: 12px;
	margin-top: 0;
	margin-left: 22px;
	margin-right: 0px;
}

[data-second="SB"] .secondModuleButton .secondTitle,
[data-second="WB"] .secondModuleButton .secondTitle{
	left:3px;
	font-size: 23px;
}

[data-second="SB"] .secondModuleButton .secondSub,
[data-second="WB"] .secondModuleButton .secondSub{
	left:12px;
	font-size: 52px;
}

[data-second="SB"] .secondModuleButton,
[data-second="WB"] .secondModuleButton{
	width:130px;
	height:130px;
}

[data-second="WB"] .secondButton {
	margin-bottom: 12px;
	margin-top: 0;
	margin-left: 10px;
	margin-right: 0px;
}

[data-second="WB"] .secondButtonWrapper {
	width: 1130px;
	padding-top:10px;
}

[data-second="VW"] .secondButtonWrapper {
	width: 360px;
	padding-bottom:50px;
}

[data-second="IA"] .secondButtonWrapper,
[data-second="GA"] .secondButtonWrapper,
[data-second="TS"] .secondButtonWrapper,
[data-second="BV"] .secondButtonWrapper,
[data-second="TE"] .secondButtonWrapper{
	width: 650px;
}
[data-second="TE"] .secondButtonWrapper{
	width: 812px;;
}
.extraTitle {
	top: 25px;
	font-size: 23px;
	position: absolute;
    left: 2px;
    width: 120px;
    line-height: 20px;
    transition: top 0.3s ease-in-out;
    -webkit-transition: top 0.3s ease-in-out;
}
.extraSub{
	top: 75px;
    width: 100px;
	font-size: 23px;
	position: absolute;
    left: 13px;
    line-height: 20px;
    transition: top 0.3s ease-in-out;
    -webkit-transition: top 0.3s ease-in-out;
}

.secondBack{
	bottom: 40px;
	z-index: 1;
	left:0;
}

.primary .extrabtn.secondButton.pressed .secondModuleButton	{
	color: #000000!important;
	background:white!important;
	border:2px solid black !important;
}

.extrabtn .secondModuleButton{
	 background: rgba(0,0,0,0.3)!important;
	 color: #ffffff!important;
	 border: 2px solid white!important;
 }

[data-second="GA"] .secondButtonWrapper{
	width:812px;
	margin-top: 60px;
}
/* [data-gamemodule="4"]:before, */
.demoVW:before { width: 100%;
    text-align: center;
    position: absolute;
    top: -10px;
    content: url(../css/Images/demo.png);
    left: 0px;
    z-index: 2;
}
.demo:before { width: 100%;
    text-align: center;
    position: absolute;
    top: -10px;
    content: url(../css/Images/demo.png);
    left: 0px;
    z-index: 2;
}