/* *,
*::before,
*::after{
    box-sizing:border-box;
} */



.playIntroSound{
	position:absolute;
	text-align:center;
	line-height:70px;
	bottom:108px;
	left:50%;
	transform: translateX(-50%);
	width:268px;
	height:82px;
	border-radius:14px;
	font-size:36px;
	font-family: 'CFAsty Book';
	color:white;
	box-sizing: border-box;
	box-shadow: 0 10px 10px #00000040;
}

.playIntroSound.pressed{
	background:white;
}


.slideshow{
	width: 100%;
	height:100%;
	overflow:hidden;
	font-size: 0;
}

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

/*hELP DIV*/
.helpBtn.firstLevel{
	width: 70px;
	height: 70px;
	background-color: #E4E4E4;
	border: 5px solid #593172;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}
.helpBtn.firstLevel svg {
	transform: scale(1);
	transition: transform 150ms ease;
}
.helpBtn.firstLevel.pressed svg{
	transform: scale(.7);

}

.helpBtn{
	position:absolute;
	top:-840px;
	right: 40px;
}

.helpExit,
.secondBack{
	position: absolute;
	width: 63px;
    height: 63px;
    bottom: 25px;
    left: 64px;
	background: #2D3C50;
	border: 5px solid #ffffff;
	border-radius: 50%;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
    box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25);
}
.secondBack{
	z-index: 9100;
}

.helpExit svg,
.secondBack svg{
	transition: transform 150ms ease;
}


.helpExit.pressed svg,
.secondBack.pressed svg{
	transform: scale(.8);
}

.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{
	width: 1240px;
	height: 762px;
	margin-inline: auto;
	border-radius: 13px;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(121, 213, 169, 1) 70%, rgba(121, 213, 169, 1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(121, 213, 169, 1) 70%, rgba(121, 213, 169, 1) 100%);
	background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(121, 213, 169, 1) 70%, rgba(121, 213, 169, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#b4d5eb",GradientType=1);
}
.helpCont img{
	position: absolute;
	inset: 50% auto auto 50%;
	transform: translate(-50%,-50%);
}

.helpTxt{
	color: #ffffff;
	font-size: 61px;
	font-family: 'mmAsap Bold';
	margin-block: 9px 13px;
	margin-inline-start: 50px;
}

.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;}


.intro-main{
	background-image: linear-gradient(270deg, rgba(0, 0, 0,0) 80%, rgba(0, 0, 0, 0.7) 100%);
	background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0,0) 80%, rgba(0, 0, 0, 0.7) 100%);
}

.intro img{position: absolute; z-index: -1;}
.demoIntro .intro{display:block !important;}
.IntroActive .main,.IntroActive .mainOptions{display:none !important;}
.demoIntro .main,.demoIntro .mainOptions{display:none !important;}

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

[data-second="Reader"] .secondLevelHeader svg{margin-right: 0px;}
[data-second="Reader"] .secondLevelHeader{width: 120px !important;margin-top: 40px !important;margin-left: 268px !important;}

.secondBackReader{left: -494px !important; bottom: 140px !important;}

.secondLevelHeader span{vertical-align: middle;letter-spacing: 1px;line-height: 1.2;}
.mainCol{float:left;width:50%;}

.slideshow img{
	display:inline-block;
	font-size: 0;
}

.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);
}

.mainLessons{display:none;}

.levelWrapper{width:100%;height:100%;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;}


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

.primaryGroup{
	display: flex;
	justify-content: space-between;
	min-width: 691px;
	margin-inline-end: 96px;
}
.primary .mainNormal{
	display: flex;
	align-items: center;
	justify-content: start;
	flex-direction: column;
	min-width: 120px;
	box-sizing: border-box;
}

.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: 21px;
margin-top: 20px;
}

.svgTriggered > svg{
	transform: rotate(180deg) !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;}

.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;}

.mainNormal > .mainTitle{
	color: white;
	position: relative;
	line-height: 0.95;
}
.primaryFirst.pressed svg >g,
.primarySecond.pressed svg >g,
.primaryThird.pressed svg >g,
.primaryFourth.pressed svg >g,
.primaryFifth.pressed svg >g,
.primarySixth.pressed svg >g{
	fill:white;
}


.primaryFirst.pressed svg >g{
	stroke: #54a6a0;
}
.primarySecond.pressed svg >g{
	stroke: #54a6a0;
}
.primaryThird.pressed svg >g{
	stroke: #a65454;
}
.primaryFourth.pressed svg >g{
	stroke: #54a6a0;
}
.primaryFifth.pressed svg >g{
	stroke: #a69e54;
}
.primarySixth.pressed svg >g{
	stroke: #a654a1;
}

.primaryFirst.pressed svg >path{
	fill: #54a6a0;
}
.primarySecond.pressed svg >path{
	fill: #54a6a0;
}
/* 3rd */
.primaryThird.pressed svg #_1 {
	fill: white;
}
.primaryThird.pressed svg #_3,
.primaryThird.pressed svg #_2 {
	fill: #a65454;
}
.primaryThird.pressed #Group_2202 >*{
	stroke:transparent;
}
/* 3rd END*/

.primaryFourth.pressed svg >path{
	fill: #54a6a0;
}

/* 5th */
.primaryFifth.pressed #Group_2063 > path{
	fill: #a69e54;
}
.primaryFifth.pressed #Group_2063 > g path:nth-of-type(odd){
	fill: #a69e54;
}
.primaryFifth.pressed #Group_2063 > g path:nth-of-type(even){
	fill: white;

}
/* 5th END*/
.primarySixth.pressed svg >path{
	fill: #a654a1;
}

.mainBtn .mainTitle:after{
	content:'';
	width: 126px;
	height: 4px;
	position: absolute;
	bottom: 0;
    left: 50%;
	transform: translate(-50%, 200%) scaleX(0);
	transform-origin: center;
	transition: transform 250ms ease;
}
.mainBtn.pressed .mainTitle:after{
	transform: translate(-50%, 200%) scaleX(1);
}

.mainBtn:nth-child(1) .mainTitle:after{
	background-color: #54a6a0;
}
.mainBtn:nth-child(2) .mainTitle:after{
	background-color: #a654a1;
}
.mainBtn:nth-child(3) .mainTitle:after{
	background-color: #a65454;
}
.mainBtn:nth-child(4) .mainTitle:after{
	background-color: #a69e54;
}

/* .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;width:100%;height: 100%;}


.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:#901252;}

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

.primaryCompanion.pressed .primaryBg{fill:#ffffff;}
.primaryCompanion.pressed .primaryInner{fill:#FFA000;}

.primary .slideshowButtonWrapper {display:none !important;}

.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;
	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 );
	width:100%;
	min-height: 274px;

	display: flex;
  	justify-content: flex-end;
}


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

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

.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;}

.secondModuleButton,.secondExtraButton{
	box-sizing: border-box;
	transition:height 0.3s ease-in-out;
	-webkit-transition:height 0.3s ease-in-out;
	font-family: 'SoupofJustice';
	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:130px;
	height:130px;
}

.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{
	font-size:25px;
	line-height:20px;
	transition:top 0.3s ease-in-out;
	-webkit-transition:top 0.3s ease-in-out;
}



.primary .secondModuleButton .secondTitle{
	font-size: 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;
	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;
}

.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: 48px;
}

.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;
}

/* BUTTON COLORS START */

[data-secondmodule="1"] .secondModuleButton,
[data-game]:nth-child(1){
	background:#7D124B;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(1).pressed,
[data-secondtargetmodule="1"] .secondModuleButton,
[data-secondmodule="1"].pressed .secondModuleButton
{
	background:white;color:#7D124B;border:5px solid #7D124B;
}
[data-secondmodule="2"] .secondModuleButton,
[data-game]:nth-child(2){
	background:#A3B736;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(2).pressed,
[data-secondtargetmodule="2"] .secondModuleButton,
[data-secondmodule="2"].pressed .secondModuleButton
{
	background:white;color:#A3B736;border:5px solid #A3B736;
}
[data-secondmodule="3"] .secondModuleButton,
[data-game]:nth-child(3){
	background:#9E302C;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(3).pressed,
[data-secondtargetmodule="3"] .secondModuleButton,
[data-secondmodule="3"].pressed .secondModuleButton
{
	background:white;color:#9E302C;border:5px solid #9E302C;
}
[data-secondmodule="4"] .secondModuleButton,
[data-game]:nth-child(4){
	background:#326E48;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(4).pressed,
[data-secondtargetmodule="4"] .secondModuleButton,
[data-secondmodule="4"].pressed .secondModuleButton
{
	background:white;color:#326E48;border:5px solid #326E48;
}
[data-secondmodule="5"] .secondModuleButton,
[data-game]:nth-child(5){
	background:#8BB6E0;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(5).pressed,
[data-secondtargetmodule="5"] .secondModuleButton,
[data-secondmodule="5"].pressed .secondModuleButton
{
	background:white;color:#8BB6E0;border:5px solid #8BB6E0;
}
[data-secondmodule="6"] .secondModuleButton,
[data-game]:nth-child(6){
	background:#2F5872;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(6).pressed,
[data-secondtargetmodule="6"] .secondModuleButton,
[data-secondmodule="6"].pressed .secondModuleButton
{
	background:white;color:#2F5872;border:5px solid #2F5872;
}
[data-secondmodule="7"] .secondModuleButton,
[data-game]:nth-child(7){
	background:#8D696B;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(7).pressed,
[data-secondtargetmodule="7"] .secondModuleButton,
[data-secondmodule="7"].pressed .secondModuleButton
{
	background:white;color:#8D696B;border:5px solid #8D696B;
}
[data-secondmodule="8"] .secondModuleButton,
[data-game]:nth-child(8){
	background:#717E29;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(8).pressed,
[data-secondtargetmodule="8"] .secondModuleButton,
[data-secondmodule="8"].pressed .secondModuleButton
{
	background:white;color:#717E29;border:5px solid #717E29;
}
[data-secondmodule="9"] .secondModuleButton,
[data-game]:nth-child(9){
	background:#A4A79A;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(9).pressed,
[data-secondtargetmodule="9"] .secondModuleButton,
[data-secondmodule="9"].pressed .secondModuleButton
{
	background:#ffffff;color:#A4A79A;border:5px solid #A4A79A;
}
[data-secondmodule="10"] .secondModuleButton,
[data-game]:nth-child(10){
	background:#4C4E68;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(10).pressed,
[data-secondtargetmodule="10"] .secondModuleButton,
[data-secondmodule="10"].pressed .secondModuleButton
{
	background:#ffffff;color:#4C4E68;border:5px solid #4C4E68;
}
[data-secondmodule="11"] .secondModuleButton,
[data-game]:nth-child(11){
	background:#A654A1;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(11).pressed,
[data-secondtargetmodule="11"] .secondModuleButton,
[data-secondmodule="11"].pressed .secondModuleButton
{
	background:#ffffff;color:#A654A1;border:5px solid #A654A1;
}
[data-secondmodule="12"] .secondModuleButton,
[data-game]:nth-child(12){
	background:#54A6A0;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(12).pressed,
[data-secondtargetmodule="12"] .secondModuleButton,
[data-secondmodule="12"].pressed .secondModuleButton
{
	background:#ffffff;color:#54A6A0;border:5px solid #54A6A0;
}
[data-secondmodule="13"] .secondModuleButton,
[data-game]:nth-child(13){
	background:#A65454;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(13).pressed,
[data-secondtargetmodule="13"] .secondModuleButton,
[data-secondmodule="13"].pressed .secondModuleButton
{
	background:#ffffff;color:#A65454;border:5px solid #A65454;
}
[data-secondmodule="14"] .secondModuleButton,
[data-game]:nth-child(14){
	background:#A69E54;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(14).pressed,
[data-secondtargetmodule="14"] .secondModuleButton,
[data-secondmodule="14"].pressed .secondModuleButton
{
	background:#ffffff;color:#A69E54;border:5px solid #A69E54;
}
[data-secondmodule="15"] .secondModuleButton,
[data-game]:nth-child(15){
	background:#85C7B1;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(15).pressed,
[data-secondtargetmodule="15"] .secondModuleButton,
[data-secondmodule="15"].pressed .secondModuleButton
{
	background:#ffffff;color:#85C7B1;border:5px solid #85C7B1;
}
[data-secondmodule="16"] .secondModuleButton,
[data-game]:nth-child(16){
	background:#CDB880;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(16).pressed,
[data-secondtargetmodule="16"] .secondModuleButton,
[data-secondmodule="16"].pressed .secondModuleButton
{
	background:#ffffff;color:#CDB880;border:5px solid #CDB880;
}
[data-secondmodule="17"] .secondModuleButton,
[data-game]:nth-child(17){
	background:#B17A4E;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(17).pressed,
[data-secondtargetmodule="17"] .secondModuleButton,
[data-secondmodule="17"].pressed .secondModuleButton
{
	background:#ffffff;color:#B17A4E;border:5px solid #B17A4E;
}
[data-secondmodule="18"] .secondModuleButton,
[data-game]:nth-child(18){
	background:#48846E;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(18).pressed,
[data-secondtargetmodule="18"] .secondModuleButton,
[data-secondmodule="18"].pressed .secondModuleButton
{
	background:#ffffff;color:#48846E;border:5px solid #48846E;
}
[data-secondmodule="19"] .secondModuleButton,
[data-game]:nth-child(19){
	background:#E7A624;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(19).pressed,
[data-secondtargetmodule="19"] .secondModuleButton,
[data-secondmodule="19"].pressed .secondModuleButton
{
	background:#ffffff;color:#E7A624;border:5px solid #E7A624;
}
[data-secondmodule="20"] .secondModuleButton,
[data-game]:nth-child(20){
	background:#76170F;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(20).pressed,
[data-secondtargetmodule="20"] .secondModuleButton,
[data-secondmodule="20"].pressed .secondModuleButton
{
	background:#ffffff;color:#76170F;border:5px solid #76170F;
}
[data-secondmodule="21"] .secondModuleButton,
[data-game]:nth-child(21){
	background:#B58427;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(21).pressed,
[data-secondtargetmodule="21"] .secondModuleButton,
[data-secondmodule="21"].pressed .secondModuleButton
{
	background:#ffffff;color:#B58427;border:5px solid #B58427;
}
[data-secondmodule="22"] .secondModuleButton,
[data-game]:nth-child(22){
	background:#902F5F;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(22).pressed,
[data-secondtargetmodule="22"] .secondModuleButton,
[data-secondmodule="22"].pressed .secondModuleButton
{
	background:#ffffff;color:#902F5F;border:5px solid #902F5F;
}
[data-secondmodule="23"] .secondModuleButton,
[data-game]:nth-child(23){
	background:#732F90;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(23).pressed,
[data-secondtargetmodule="23"] .secondModuleButton,
[data-secondmodule="23"].pressed .secondModuleButton
{
	background:#ffffff;color:#732F90;border:5px solid #732F90;
}
[data-secondmodule="24"] .secondModuleButton,
[data-game]:nth-child(24){
	background:#2F9032;color:#ffffff;border:5px solid transparent;
}
[data-game]:nth-child(24).pressed,
[data-secondtargetmodule="24"] .secondModuleButton,
[data-secondmodule="24"].pressed .secondModuleButton
{
	background:#ffffff;color:#2F9032;border:5px solid #2F9032;
}
/* BUTTON COLORS END */

.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;} */

.primaryTests.pressed .primaryBg{fill:#ffffff;}
.primaryTests.pressed .primaryInner{fill:#8ba8b1;}

.primaryPlays.pressed .primaryBg{fill:#ffffff;}
.primaryPlays.pressed .primaryInner{fill:#3e3889;}

.secondMore{
	overflow: hidden;
	display:none;
	height: 543px;
	z-index: 10;
	align-self: flex-start;
	margin-inline-start: 16px;
}

.secondMoreABC{
	margin-left:150px;
	display:none;
	height:477px;
}

.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;box-sizing: border-box;}

.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;}

.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{background: none !important;font-size: 60px;box-sizing: border-box;}

[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;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;box-sizing: border-box;}

.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: 15px;
	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: 7px;
	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-offset: -4px;
}

.secondary .secondImages>div.pressed span{
	color:#00A5FF;
}


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

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

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

[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;
}

[data-secondtargetmodule="ABC"] [data-game]{
	display: flex;
	align-items: center;
	justify-content: center;
}
[data-secondtargetmodule="ABC"] [data-game] .gamesBody>div {
    margin: 0;
	white-space: initial;
	font-size:40px;
	height: initial;
}

.gameCircles{display:inline-block;}

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

.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: 68px;
	bottom: 6px;
	font-family: 'CFAsty Book';
	color: white;
	font-size: 14px;
	line-height: 1;
	text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.45);
}

.preLoadLogo{
	display:none !important;
}

.hidden{opacity:0 !important;}

.zippy{position:absolute;top: 9px;left: 860px;z-index:1;height: 290px;display:none;transform-origin:left top;transform:scale(1.3);}

.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;
}

.zippy_main{position:absolute;top:340px;left:823px;background: url('../Images/Main/zippy_sprite_main.png') left center;width:287px;height:280px;z-index:1;}
.zippy_play{animation: zippy_play 5s steps(51) infinite;}

@keyframes zippy_play {
	100% { background-position: -14637px; }
}

.topBar{display: none;opacity:0;width: 80px;height: 45px;background: #FF0064;border-top-left-radius: 10px;border-top-right-radius: 10px;margin: 0;z-index: 801;position: relative;}

.topBar svg,.bottomBar svg{/* margin-top: 8px; */fill:#ffffff;top: 8px;position: relative;}

.bottomBar{display: none;opacity:0;width: 80px;height: 45px;background: #FF0064;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;z-index: 801;position: relative;}

.topBar.pressed,.bottomBar.pressed{background: #ffffff;}
.topBar.pressed svg,.bottomBar.pressed svg{fill: #FF0064;}

.bubbleMain{width: 255px;height: 185px;position: absolute;top: 290px;left: 625px;z-index: 1;text-align: center;}

.bubbleMainL2{top: 0px;left: 580px;}

.bubbleMain svg{fill:#ffffff;}

.bubbleMain span{color:#5a9600; font-family:CFAsty Primary Medium; font-size:24px;position: absolute;top: 40px;left: 28px;}

.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;}


/*DEMO*/
/* [data-secondmodule="4"]:not([data-gotoframe]):before,.dempWP:before,[data-goto="IA/Module4"].secondButton:before{
    width: 100%;
    text-align: center;
    position: absolute;
    top: -30px;
    content: url(../css/Images/demo.png);
    left: 0px;
    z-index: 2;
} */

/* New menu */


.secondMore .secondImages:not([data-gamemodule="ABC"]){
	    text-align: center;
}
.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;
}

.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;
 }

 .secondModuleButton{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
 }

.firstLevel.primaryBtns {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-block-end: 90px;
}

.primaryBtns [data-secondtarget] {
	font-size: 30px;
	font-family: 'SoupofJustice';
	color: white;
	height: 82px;
	border-top-right-radius: 17px;
	border-bottom-right-radius: 17px;
	padding: 25px;
	box-sizing: border-box;
	line-height: initial !important;
	display: flex;
	align-items: center;
	border-width: 7px;
	border-inline-start-width: 0;
	border-style: solid;
	margin-block-end: 10px;
	transition: padding 250ms ease;
}

.primaryBtns [data-secondtarget] svg {
	margin-inline-start: 24px;
}

[data-secondtarget="SB"] {
	background-color: #326E48;
	border-color: #326E48;
}

[data-secondtarget="SB"].pressed {
	color: #326E48;
	border-color: #326E48;
}

[data-secondtarget="SB"].pressed svg>* {
	fill: #326E48;
}

[data-secondtarget="WB"] {
	background-color: #5472A6;
	border-color: #5472A6;
}

[data-secondtarget="WB"].pressed {
	color: #5472A6;
	border-color: #5472A6;
}

[data-secondtarget="WB"].pressed svg>* {
	fill: #5472A6;
}

[data-secondtarget="SB"].pressed,
[data-secondtarget="WB"].pressed {
	background-color: white;
	padding-inline-start: 80px;
}
[data-second] {
	overflow: hidden;
	display: none;
	text-align: center;
	width: 100%;
	min-height: 514px;
	position: absolute;
	bottom: 90px;
	flex-direction: column;
  	align-items: center;
	padding-block-end: 30px;
}

.primary .secondLevelHeader{
	font-family: 'SoupofJustice';
	font-size: 43px;
	color: white;
	line-height: initial;
	width: initial;
	display: flex;
	align-items: center;
	margin: 0;
	margin-block-end: 30px;
}
.primary .secondLevelHeader.headerSmall{
	transform: scale(.75);
	margin-block-end: 0;
}

.secondLevelHeader svg {
	height: unset;
	max-height: 100%;
	margin-right: 18px;
}

.secondLevelHeader svg>*{
	fill: white;

}

.secondButtonWrapper{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 970px;
}

[data-second="RS"] .secondButtonWrapper{
	max-width: 780px;
}

.primary .secondButton{
	position: relative;
	margin-inline: 15px;
	margin-block-end: 40px;

}

.secondModuleButton{
	width: 164px;
	min-height: 120px;
	border-radius: 15px;
	padding: 10px;
	box-shadow: 0 10px 10px rgba(0, 0, 0, 0.25);
}

.domainArea{
	display: flex;
	position: absolute;
	left: 209px;
	bottom: 11px;
	opacity: 0;
	padding: 15px 55px;
	background-image:url('../Images/Main/Rectangle_864.png');
	background-size: 100% 100%;
	background-repeat:no-repeat;
}

.dom-icon{
	width: 63px;
	height:63px;
}
.dom-icon:not(:last-child){
	margin-inline-end:23px;
}

.topBar{
	transform:translateY(10px);
}
.bottomBar{
	transform:translateY(-10px);
}
.topBar,
.bottomBar{
	width: 70px;
  	height: 45px;
}
.topBar svg,
.bottomBar svg{
	top: 10px;
}

.topBar.pressed svg,
.bottomBar.pressed svg{
	fill:white;
}
.f11{
	font-family: 'CFAsty';
    font-size: 18px;
    position: absolute;
    z-index: 20;
    inset: 0 0 auto 0;
    height: 30px;
    /* background: rgb(255,255,255);
    background: -moz-linear-gradient(270deg, rgba(255,255,255,0.6) 0%, rgba(0,0,0,0.6) 15%, rgba(8,18,84,0.6) 33%, rgba(8,18,84,0.6) 50%, rgba(8,18,84,0.6) 66%, rgba(0,0,0,0.6) 85%, rgba(255,255,255,0.6) 100%);
    background: -webkit-linear-gradient(270deg, rgba(255,255,255,0.6) 0%, rgba(0,0,0,0.6) 15%, rgba(8,18,84,0.6) 33%, rgba(8,18,84,0.6) 50%, rgba(8,18,84,0.6) 66%, rgba(0,0,0,0.67) 85%, rgba(255,255,255,0.6) 100%);
    background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.6) 15%, rgba(8,18,84,0.6) 33%, rgba(8,18,84,0.6) 50%, rgba(8,18,84,0.6) 66%, rgba(0,0,0,0.6) 85%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#ffffff",GradientType=1); */
	background-image: url('../Images/Main/f11.png');
    color: white;
    text-align: center;
    line-height: 1.6;
}
.logoImg {
	position: absolute;
	top: 60px;
	left: 0;
}

.mainBgEx >img {
	position: absolute;
	opacity: 0;
}
#copyRights{
	display: flex;
	flex-direction: column;
	position: absolute;
	inset: auto 0 10px 0;
	margin-inline: auto;
	max-width: 400px;
	color: white;
	font-size: 14px;
	font-family: 'CFAsty';
	text-align: center;
}
#copyRights span:nth-child(2){
	font-family:"CFAsty-Light";
}

/* __________________ submenus-animations __________________ _start */

.animation-pose1, .animation-pose2, .animation-pose3, .animation-pose4{
	display: none;
	position: absolute;
	scale: 0.75;

}
#spriteContainer-l1, #spriteContainer-l2,#spriteContainer-l3,#spriteContainer-l4{
	width: 100%;
    height: 100%;
	position: relative;
	background-position: 100% 100%; 
}

.animation-pose1{
	width: 309px;
    height: 383px;
    right: -90px;
    bottom: 170px;
}
.flip-dir .animation-pose1{
	right: 1066px;
	top: 560px;
}
.animation-pose2{
	width: 198px;
    height: 343px;
    left: 304px;
    bottom: -47px;
    transform: rotate(356deg);
}
.animation-pose2.worksheets{
	left: -20px;
    bottom: 83px;
    transform: rotate(19deg);
}  
.animation-pose3{
	width: 298px;
    height: 373px;
    right: -84px;
    top: 100px;
} 
.animation-pose3.rs{
	transform: rotate(25deg);
    right: 126px;
    top: -20px;
}
.flip-dir .animation-pose3{
	left: -74px;
    top: 121px;
}    
.animation-pose4{
	width: 219px;
    height: 396px;
    left: 1073px;
    bottom: 17px;
    transform: rotate(347deg);
}
.flip-dir .animation-pose4{
	left: -36px;
    top: 133px;
    transform: rotate(32deg);
}

#spriteContainer-l1 {
	background-image: url("../Images/Main/pose-1.png");
	-webkit-animation: playvertical1 4s steps(8)  infinite, playh1 .5s steps(9)  infinite; 
	animation: playvertical1 4s steps(8)  infinite, playh1 .5s steps(9)  infinite; 
	background-size: 900% 800%;
}
#spriteContainer-l2 {
	background-image: url("../Images/Main/pose-2.png");
	-webkit-animation:  playvertical2 3s steps(6)  infinite, playh2 .5s steps(10)  infinite; 
	animation: playvertical2 3s steps(6)  infinite, playh2 .5s steps(10)  infinite;
	background-size: 1000% 600%;
}
#spriteContainer-l3 {
	background-image: url("../Images/Main/pose-3.png");
	-webkit-animation: playvertical3 6s steps(6)  infinite, playh3 1s steps(10)  infinite; 
	animation: playvertical3 6s steps(6)  infinite, playh3 1s steps(10)  infinite; 
	background-size: 1000% 600%;
}
#spriteContainer-l4 {
	background-image: url("../Images/Main/pose-4.png");
	-webkit-animation: playvertical3 3s steps(6)  infinite, playh3 .5s steps(10)  infinite; 
	animation: playvertical3 3s steps(6)  infinite, playh3 .5s steps(10)  infinite; 
	background-size: 1000% 600%;
}    

@keyframes playvertical1 {
	0% {
	  background-position-y: 0%;
	}
	100% {
	  background-position-y: -800%;
	}
} 
@keyframes playh1 {
	0% {
	  background-position-x: 0%;
	}
	100% {
	  background-position-x: -900%;
	}
} 
@keyframes playvertical2 {
	0% {
	  background-position-y: 0%;
	}
	100% {
	  background-position-y: -600%;
	}
}  
@keyframes playh2 {
	0% {
	  background-position-x: 0%;
	}
	100% {
	  background-position-x: -1000%;
	}
}
@keyframes playvertical3 {
	0% {
	  background-position-y: 0%;
	}
	100% {
	  background-position-y: -600%;
	}
}  
@keyframes playh3 {
	0% {
	  background-position-x: 0%;
	}
	100% {
	  background-position-x: -1000%;
	}
}
/* @keyframes playh3 == @keyframes playh4 */


.flip-dir>div {
	-webkit-transform:scaleX(-1);
	    -ms-transform:scaleX(-1);
	        transform:scaleX(-1);
}

.anim {
	position:absolute;
	top:0;
	left:0;
}


.butterfly1 {
	background-image:url("../Images/Main/butterfly_front_sprite.png");
	/* background-image:url("../Images/Main/butterfly_front_sprite_test.png"); */
	background-size: 400%;
	background-repeat: no-repeat;
	width: 235px;
	padding-top: 233px;
	-webkit-animation: butterfly1V 0.2s steps(2) infinite, butterfly1H 0.1s steps(4) infinite;
	-moz-animation: butterfly1V 0.2s steps(2) infinite, butterfly1H 0.1s steps(4) infinite;
	-o-animation: butterfly1V 0.2s steps(2) infinite, butterfly1H 0.1s steps(4) infinite;
	animation: butterfly1V 0.2s steps(2) infinite, butterfly1H 0.1s steps(4) infinite;
}




.butterfly2 {
	background-image:url("../Images/Main/butterfly_sides_sprite.png");
	/* background-image:url("../Images/Main/butterfly_sides_sprite_test.png"); */
	background-size: 300%;
	background-repeat: no-repeat;
	width: 155px;
	padding-top: 95px;

	-webkit-animation: butterfly2V 0.24s steps(3) infinite, butterfly2H 0.08s steps(3) infinite;
	-moz-animation: butterfly2V 0.24s steps(3) infinite, butterfly2H 0.08s steps(3) infinite;
	-o-animation: butterfly2V 0.24s steps(3) infinite, butterfly2H 0.08s steps(3) infinite;
	animation: butterfly2V 0.24s steps(3) infinite, butterfly2H 0.08s steps(3) infinite; /*REPEATEDLY --- OK*/

	/*background-position-y: 99.7%;
	background-position-x: 100%;
	animation: butterfly2V 3s steps(3) backwards 1, butterfly2H 1s steps(3) backwards 3;*/  /*ONCE --- OK*/
}

.front-down-up {
	-webkit-transform:scale3d(28.8%, 28.8%, 28.8%) rotate3d(0, 0, 1, 105deg);
            transform:scale3d(28.8%, 28.8%, 28.8%) rotate3d(0, 0, 1, 105deg);
	top:-158px;
	left:180px;
}
.front-down-up.anim.go {
	-webkit-animation: front-down-up 3s linear 1;
	        animation: front-down-up 3s linear 1;
}


.front-round {
	-webkit-transform:scale3d(28.8%, 28.8%, 28.8%) rotate3d(0, 0, 1, 0deg);
			transform:scale3d(28.8%, 28.8%, 28.8%) rotate3d(0, 0, 1, 0deg);
	top:158px;
	left:-152px;
}
.front-round.anim.go {
	-webkit-animation: front-round 3s linear 1;
	        animation: front-round 3s linear 1;
}

.front-up-middle {
	-webkit-transform:scale3d(28.8%, 28.8%, 28.8%) rotate3d(0, 0, 1, 0deg);
			transform:scale3d(28.8%, 28.8%, 28.8%) rotate3d(0, 0, 1, 0deg);
	top:356px;
	left:-164px;
}
.front-up-middle.anim.go {
	-webkit-animation: front-up-middle 3s linear 1;
	        animation: front-up-middle 3s linear 1;
}


.sides-up-down {
	-webkit-transform:scale3d(99.8%, 99.8%, 99.8%) rotate3d(0, 0, 1, 7deg);
			transform:scale3d(99.8%, 99.8%, 99.8%) rotate3d(0, 0, 1, 7deg);
	top:-105px;
	left:-62px;
}
.sides-up-down.anim.go {
	-webkit-animation: sides-up-down 3s linear 1;
	        animation: sides-up-down 3s linear 1;
}


.sides-down-middle {
	-webkit-transform:scale3d(99.8%, 99.8%, 99.8%) rotate3d(0, 0, 1, 5deg);
			transform:scale3d(99.8%, 99.8%, 99.8%) rotate3d(0, 0, 1, 5deg);
	top:110px;
	left:-162px;

}
.sides-down-middle.anim.go {
	-webkit-animation: sides-down-middle 3s linear 1;
	        animation: sides-down-middle 3s linear 1;
}
/* __________________ submenus-animations _end __________________ */

/* __________________ theme color _start __________________ */
.playIntroSound{
	background:#95b422;
	border:7px solid #95b422;
}
.playIntroSound.pressed,
.primary .secondImages>div.pressed span{
	color:#95b422;
}
.helpExit.pressed,
.secondBack.pressed{
	background: #95b422;
}
.primary .secondImages>div.pressed img{
	outline: 4px solid #95b422;
}

/* __________________ theme color _end __________________ */
/* spread arrows change per project */
.topBar,
.bottomBar{
  	background: #5f7416;
}

.topBar.pressed,
.bottomBar.pressed{
	background: #95b422;
}