* {
    -webkit-font-variant-ligatures: no-common-ligatures;
    font-variant-ligatures: no-common-ligatures;
}
div:not(.export),a,span,img,button,br,svg {cursor:default !important;-webkit-touch-callout: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;user-drag: none;user-select: none;-moz-user-select: none;-webkit-user-drag: none;-webkit-user-select: none;-ms-user-select: none;}

.fill{cursor:default;}
svg{overflow:visible;}

html,
body {
	font-family: 'Stag Sans Web';
	position:relative;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	-webkit-font-variant-ligatures: no-common-ligatures;
	font-variant-ligatures: no-common-ligatures;
}

body{z-index: 2;overflow:hidden;}

.IWB{width: 1280px;height: 960px;/*overflow: hidden;box shadow problem*/transform-origin:top left;position:absolute;
background:#0a73b4;
/* background: rgb(178,254,252);
background: -moz-linear-gradient(top, rgba(178,254,252,1) 0%, rgba(178,216,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(178,254,252,1) 0%,rgba(178,216,255,1) 100%);
background: linear-gradient(to bottom, rgba(178,254,252,1) 0%,rgba(178,216,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2fefc', endColorstr='#b2d8ff',GradientType=0 ); */}


[data-disabled]{opacity:0.3}
.alwaysDisabled{opacity:0.3}

.fill {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

}
.fillTxt{
	z-index: 100 !important;
}

.introR{position:absolute;
bottom:20px;
left:20px;
font-weight:bold;
font-size:20px;}

img{user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;}

.interactive{    position: absolute;
    border: 3px solid black;
    z-index: 9001;
    color: black;
    background: white;
    text-align: center;
    border-radius: 15px;
	font-size:30px;
	line-height: 34px;
	}

[data-secondtarget="VW"]{font-size:26px !important;}


.dragTransparent{display:none;}

.dropInteractive  .dragInteractive {position:relative;
top:0px !important;
left:0px !important;
width:100% !important;
height:100% !important;
border:none !important;
border-radius:0px !important;
background:#ef9a2d;
}

.selected,.dragging{background:#ef9a2d !important;}

.intCorrect{background:#61e164 !important;}

.intWrong{background:#ff0000 !important;}

.dropInteractive{overflow:hidden;}

[data-secondtarget="VW"]{font-size:26px !important;}


.interactivePanel{
	background: #00052d;
	position: absolute;
	top: 750px;
	left: 0px;
	z-index: 9001;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	padding: 10px;
	font-size:40px;
	color:white;
	padding-left: 35px;
}

/* .interactiveCorrect svg,.interactiveWrong svg{width:40px;height:40px;} */

.interactiveShow,.interactiveReset{width:70px;height:70px;}

.interactiveCheck{
	opacity:0.3;
width: 140px;
display: inline-block;
font-size: 30px;
text-align: center;
color: #FFFF00;
border-radius: 35px;
font-family: CFAsty Book;
height: 70px;
/* font-weight: bold; */
line-height: 72px;}


.interactiveCheck.interactiveEnabled{opacity:1}

.interactiveCorrect span{color:#61e164;margin-right:2px;}

.interactiveWrong span{color:#ff0000;margin-right:2px;}

.interactivePanel>svg{
	margin:0px 15px;
	vertical-align:middle;
	display:inline-block
}
.interactivePanel>span{margin:0px 15px;vertical-align:middle;display:none;}

.preLoad{display:none !important;

}


/* [data-second]:not([data-second='ABC']){overflow:hidden;} */
/* .leftCorrelation  .portalCor{ */
	/* height:130px !important; */
	/* border-top-left-radius: 75px !important; */
	/* border-bottom-left-radius: 75px !important; */
	/* font-size:14px !important; */
	/* }  */
.rightCorrelation  .portalCor span{/* display:none; */}

/* [data-video="Portal-to-Grammar-2c-B"] span,[data-video="Portal-to-Grammar-2c-A"] span{width:98px !important;;} */

/*[data-video="PTCNoSub4"] span{font-size:13px !important;}*/

.leftCorrelation .portalCor span{
	display:block !important;
	position:relative !important;
	float:none !important;
	width: 94px !important;
    letter-spacing: -0.5px;
    /* left: 0px; */
    left: -7px;
}
.loadingGif{position:absolute;top:0px;left:0px;width:100%;height:100%;background: rgba(0,0,0,0.9);z-index: 10000;display:none;}

.loading .loadingGif{display:block;}
.loading .helpBtn{display:none;}

#tmp_canvas {
position: absolute;
left: 0; right: 0;
bottom: 0; top: 0;
display:block;}

#sketch{box-sizing:border-box;display:none;overflow:hidden;}

#sketch.enabled{display:block;}

.blockPanel{width:100%;height:100%;z-index:9002;position:absolute;top:0;left:0;display:none;}

[data-sticker] {
z-index: 11;
position:absolute;
cursor:pointer;
}

.txtAreaInput{overflow: hidden;}

.line{position:absolute;z-index:10;}


[data-phrase] {z-index:10;position:absolute;cursor:pointer;z-index: 20;
background: rgb(235, 255, 0);opacity:0;


}

.txtAreaDrag{height:30px;width: 100%;background: rgb(247,242,155);background: -moz-linear-gradient(left,  rgba(247,242,155,1) 0%, rgba(251,226,54,1) 100%);background: -webkit-linear-gradient(left,  rgba(247,242,155,1) 0%,rgba(251,226,54,1) 100%);background: linear-gradient(to right,  rgba(247,242,155,1) 0%,rgba(251,226,54,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f29b', endColorstr='#fbe236',GradientType=1 );}

.txtAreaInput{
    height: 170px;
    width: 200px;
    background: rgb(251,226,54);
    background: -moz-linear-gradient(top,  rgba(251,226,54,1) 0%, rgba(247,242,155,1) 99%);
    background: -webkit-linear-gradient(top,  rgba(251,226,54,1) 0%,rgba(247,242,155,1) 99%);
    background: linear-gradient(to bottom,  rgba(251,226,54,1) 0%,rgba(247,242,155,1) 99%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbe236', endColorstr='#f7f29b',GradientType=0 );
    box-sizing: border-box;
    padding: 10px;
    font-size: 22px;
    font-family: calibri;
	border:0px;
	outline: 0px solid transparent;
}

[data-phrase]{z-index:50;}

.textTool{position:absolute;background:white;box-sizing:border-box;width: 200px;height: 200px;-webkit-box-shadow: -1px 1px 5px 0px rgba(176,138,74,1);-moz-box-shadow: -1px 1px 5px 0px rgba(176,138,74,1);box-shadow: -1px 1px 5px 0px rgba(176,138,74,1);}

.textTool textarea{width: 100%;height: 100%;resize: none;padding: 0;margin: 0;border: 0;background: transparent;font-family: inherit;font-size: inherit;outline: none;-webkit-box-shadow: none;-moz-box-shadow: none;box-shadow: none;}

.textTool img:first-child{position:absolute;top: 3px;cursor: move;left: 5px;}

.textTool img:last-child{position:absolute;bottom: -1px;right: -1px;}

.toolX{position:absolute;top: 3px;cursor: move;right: 5px;}

.textTool img:hover{cursor:nw-resize;}

.textTool span{display:block;width: 100%;height: 30px;}

.outer{margin-left:60px;overflow:hidden;}

.hide{width:100%;height:100%;top: 285px;left: 440px;background:white;position:absolute;width: 400px;height: 400px;border: 3px solid #939598;}

.main{background:white;width:1085px;position:relative;height:762px;border-radius:12px;/*box-shadow: 0px 0px 12px #919191;*/overflow:hidden;left:104px;top:0px;}

.mainFrame .main{width:1230px;height:740px;left:25px;top:25px}

.mainFrames{top:26px !important;}


#sketch{position:absolute;width: 1230px;height:740px;top:0;left:0;z-index:9600;}
.sketchCurtain{
    width:1200px!important;
    height:870px!important;
}


.fill  p{margin:10px;}


.container{width:1085px;height:762px;position:absolute;overflow:hidden;background: white;}

.zoomedCont{width: 1216px;height: 854px;}

.staticImg{z-index:-1;}

.staticImgActive{z-index:2;}

.backgroundImage{position:absolute;top:0px;left:0px;z-index:1;}

.unzoomedBI{/* width: 100%; */height: 100%;}
.unzoomedBI2{height: 100%;}

/* .zoomedCont .half{left:619px !important;} */

.stickerZoom{transform: scale(1.1);}

.justification svg {
    width: 35px;
    height: 35px;
}

.justificationWrapper{font-size:33px;}

.mainGroupLeft svg.pressed .svgCircle,.mainGroupRight svg.pressed .svgCircle{fill:#FF007D;stroke:#FF007D;}

.mainGroupLeft svg.pressed .svgInvert,.mainGroupRight svg.pressed .svgInvert{fill:white;}



.phraseActive{
    opacity:0.5;
    mix-blend-mode: multiply;
    -moz-box-shadow: 1px 2px 10px rgba(255, 255, 0, 0.5);
    -webkit-box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
    box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
}

.phraseActive {}
/*video-audio bug */
.soundTimer,
.videoTimer {
    font-size: 22px;
    color: #00052d;
    float: left;
    margin-right: -6px;
    width: 93px;
    margin-left: -10px;
    font-family: 'CFAsty';
}

.soundBar,
.videoBar {
    width: 280px;
    height: 16px;
    background: #777a8d;
    position: relative;
    float: left;
    margin-top: 6px;
    border-radius: 10px;
}

/*video-audio bug --end*/
.wlScroll{}

.justActive svg>circle,.justification.pressed svg>circle{fill: black;}

.justActive .gMain,.justification.pressed .gMain{fill:#C8C8C8}
/*video-audio bug */

.soundBarWrapper,
.videoBarWrapper {
    /* height: 65px; */
    width: 358px;
    padding: 6px 0px 6px 0px;
    box-sizing: border-box;
}

.barRed,
.videobarRed {
    background: #00052d;
    width: 0%;
    height: 100%;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.barRedBall {
    display: none;
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: white;
    left: -7px;
    top: -8px;
}

/*video-audio bug --end*/
.fill{position:absolute;z-index:60;opacity: 0;position:absolute;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;text-align:center;font-family: 'Stag Sans Web SemiBold';}

.hovered[data-sticker]:not(.stickerInter):not(.stickerAnimation),.pressed[data-sticker]:not(.stickerInter):not(.stickerAnimation){
    background: rgba(235, 255, 0, 0.5);
    mix-blend-mode: multiply;
    -moz-box-shadow: 1px 2px 10px rgba(255, 255, 0, 0.5);
    -webkit-box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
    box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
}

/* [data-txtmc{z-index:40;}] */

.line{position:absolute;z-index:10;}

.keyMask{background:white;padding:40px 50px 40px 30px;box-sizing:border-box;color:green;font-family:Stag Sans Web SemiBold;}

.keyMaskBig{height:auto;padding:0px;}

.line line,.line path{opacity:0}

.justificationMaskHighlights .fill{opacity:1 !important;}

.lineVisible svg{overflow:visible}

.lineVisible line,.lineVisible path{opacity:1}

.fillVisible{opacity:1;}

[data-fill]:not(.fill){position:absolute;z-index: 51;}

[data-fill]{position:absolute;z-index: 15;}

.line circle{cursor:pointer;}

.resizeDiag{width:45px;height:45px;position:absolute;right:0px;bottom:0px;}

.portalCor span:nth-child(3){font-style:italic}

.justification{position:absolute;z-index:80;}

.audioL{position:absolute;z-index:100;}

.justificationWrapper{width:410px;height: 740px;position:absolute;left: 825px;overflow:hidden;display:none;}

.justScrollTop{position:relative;width:410px;height:740px;overflow:hidden;}

.reverseTools{margin-left:14px !important;margin-top:6px;display:block;margin-bottom:4px;}

.justHide{width:410px;height: 800px;position:absolute;left: 825px;display:none;background: url('Images/pattern-mm.png'),#dcdcdc;z-index:600;}

.justHide:after,.justMask:after,.keyMask:after{position:absolute;top:0px;left:0px;width:20px;height:100%;content:'';
background: -moz-linear-gradient(left,  rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%);
background: -webkit-linear-gradient(left,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(to right,  rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4d000000', endColorstr='#00000000',GradientType=1 );
}

.subsOn{height: 52px;position:relative;width: 61px;}


.clVideo{/* background:#737373; */height: 52px;position:relative;width: 64px;border-radius: 100px;}


.mainFrame .justHide{display:block;}

.justDisabled{display:none !important;}

/* .split .container{width:658px !important;}
 */
.mainFrame .justificationWrapper{display:block !important;}

.justMask,.keyMask{position:absolute;top:0px;left:0px;}

.justMask img ,.keyMask img{vertical-align:top;}

.referenceImg{position:absolute;right: 366px;z-index: 700;display:none;}

.hideCenter{position:absolute;top:0;left:0;right:0;bottom:0;margin: auto;}

.hideRight{right:0px;bottom:0px;position:absolute;}

.mainFrame .referenceImg{display:block;}

.justMask{z-index:10}

.justificationWrapper [data-phrase]{z-index:120;}

.keyMask{z-index:9;display:none;}

.highlight{position:absolute;background: rgb(235, 255, 0);mix-blend-mode: multiply;opacity:0;z-index:110;-moz-box-shadow: 1px 2px 10px rgba(255, 255, 0, 0.5);-webkit-box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);}

.videoContainer{position:relative;display: block;overflow: hidden;height: 780px;text-align: center;line-height:780px;}

.videoContainer {}

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

.highlightActive{opacity: 0.5 !important;}

.videoWrapper{position:absolute;top:0px;left:0px;background: rgba(48,48,48,1);width: 100%;height: 100%;z-index: 9800;display:none;overflow: hidden;}

.justmaskClose{ position: absolute;z-index:100;top:-15px;right:-15px;
  }

.txt,.txtmc{line-height: 30px;}

.justificationMask{position:absolute;width:100%;height:100%;top:0px;left:0px; display:none;background:rgba(0,0,0,0.8);z-index:9800;justify-content: center;
    align-items: center;}

.justificationMaskWrapper{position:relative;}

.check {line-height:20px;}

.justificationText{    background: white;
    max-width: 500px;
    text-align: center;
    padding: 30px;
    position:relative;}

.justificationMaskHighlights{position:relative;}


.subtitleToggle{position:absolute;
bottom:45px;
top:500px;
background:white;
width:100%;
height:70px;
z-index:100;
display:none;}



.justSound{position:absolute;top:0px;left: 334px;width:20px;height:100%;z-index:20;}

.justSound svg,.audioL svg{display:block;position:absolute;left: -2px;padding: 8px 6px;width: 30px;height: 30px;}
.audioL svg{padding: 8px 6px;}



.scroll{position:absolute;
bottom:20px;
width:6px;
height:135px;
right:433px;
z-index:500;
background: rgb(200,200,200);
background: -moz-linear-gradient(left,  rgba(200,200,200,1) 0%, rgba(240,240,240,1) 50%, rgba(200,200,200,1) 100%);
background: -webkit-linear-gradient(left,  rgba(200,200,200,1) 0%,rgba(240,240,240,1) 50%,rgba(200,200,200,1) 100%);
background: linear-gradient(to right,  rgba(200,200,200,1) 0%,rgba(240,240,240,1) 50%,rgba(200,200,200,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#c8c8c8',GradientType=1 );
display:none;
border-radius:3px;}

.justScroll{position:absolute;
bottom:20px;
width:6px;
height:135px;
right:23px;
display:none;
z-index:500;
background: rgb(200,200,200);
background: -moz-linear-gradient(left,  rgba(200,200,200,1) 0%, rgba(240,240,240,1) 50%, rgba(200,200,200,1) 100%);
background: -webkit-linear-gradient(left,  rgba(200,200,200,1) 0%,rgba(240,240,240,1) 50%,rgba(200,200,200,1) 100%);
background: linear-gradient(to right,  rgba(200,200,200,1) 0%,rgba(240,240,240,1) 50%,rgba(200,200,200,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c8c8c8', endColorstr='#c8c8c8',GradientType=1 );
border-radius:3px;

}

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

.scrollHandle,.justScrollHandle{position:absolute;
width:20px;
height:20px;
border-radius:100%;
background:#ff0037;
left:-7px;
top:0px;
}

.justiActive .justPlayBtn,.justiActive,.soundSelected svg,.soundSelected .justPlayBtn{fill:yellow;background:#231F20;border-radius:100%;}
.justiActive{background:#231F20;border-radius:100%;padding:10px;}

.saveTool{position:absolute;
right:25px;
top:4px;
color:#505050;
border:1px solid #505050;
width:45px !important;
height:18px !important;
border-radius:9px;
text-align:center;
font-size:15px;
}

.saveTool.pressed{background:#505050;color:rgb(251,226,54)}

html{background: #0a73b4;}

.mainOptions{height:105px;line-height:50px;width: 1280px;display: inline-block;bottom:0px;left:0px;position: absolute;
background:#0a73b4;
/* background: rgb(171,220,251);
background: -moz-linear-gradient(top, rgb(172, 221, 252) 0%,rgb(171, 215, 252) 100%);
background: -webkit-linear-gradient(top, rgb(172, 221, 252) 0%,rgb(171, 215, 252) 100%);
background: linear-gradient(to bottom, rgb(172, 221, 252) 0%,rgb(171, 215, 252) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abdcfb', endColorstr='#b2fefc',GradientType=0 ); */
}

.mainOptionsSpread{height:105px;line-height:50px;/*width: 300px;*/width: 490px;display: inline-block;z-index: 1;/*9699*/;bottom:0px;left:0px;position: absolute;
background:#0a73b4;}

.modulesMore{position:relative;display:inline-block;width: 330px;margin-right:16px;/*z-index: 100;*/z-index: 9002;}

.rightFloated{position: absolute;
    right: 0px;
    bottom: 30px;
}


.mainFrame .mainBack{display:none}



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


.mainBg{}








[data-frame].pressed .svgInvert{
fill:#FF007D;
}



.bInactive{opacity:0.2}

.salonShadow{height: 800px;width:120px;background: -moz-linear-gradient(left,  rgba(0,0,0,0) 25%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 75%);background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 25%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0) 75%);background: linear-gradient(to right,  rgba(0,0,0,0) 25%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0) 75%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08000000', endColorstr='#08000000',GradientType=1 );position:absolute;top: 0px;left: 492px;z-index:10;}

.zoomedShadow{height: 870px;left: 559px;}

.moduleInfos{font-family:CFAsty Book;font-weight:300;position:absolute;top:5px;left:105px;font-size: 24px;color: rgba(255,255,255,1);font-weight: 400;line-height:22px;letter-spacing:1px;}


.moduleInfos:not(.Reader)>div:nth-child(2):after{    content: "\00a0/\00a0";}
.moduleInfos.AbcBook>div:nth-child(2):after{    content: "";}
.moduleInfos.SpDays>div:nth-child(2):after{    content: "";}
.moduleInfos.ModuleTests>div:nth-child(2):after{    content: "";}
.moduleInfos.GrammarTest>div:nth-child(2):after{content: "";}


.mainFrame span.mType{display:none;}
.IWB:not(.mainFrame)  .moduleInfos{z-index: 500;line-height:32px;}

.lessonsHeader,.lessons{}

.wrapper{width:100%;height:100%;}

.leftCorrelation{position:absolute;
left:1px;
top:110px;
}
.rightCorrelation{position:absolute;
left:1190px;
top:110px;
}

.leftCorrelation [data-correlation]{
	width: 100px;
	height: auto;
	color:#ffffff;
	letter-spacing:1px;
	font-size: 14px;
	position: relative;
	margin-bottom:20px;
	font-family:CFAstyStd Bold;
/* background: rgba(0,0,0,0.7); */
/* border-top-left-radius:60px; */
/* border-bottom-left-radius:60px; */

/* border:3px solid rgba(0,0,0,0.7); */
/* border-right:none; */
}



/* .justRemovePhrases+.justificationWrapper [data-phrase]{display:none !important;}
 */
.rightCorrelation [data-correlation]{
	width: 100px;
	height: auto;
	color:#ffffff;
	letter-spacing:1px;
	font-size: 14px;
	position: relative;
	margin-bottom:20px;
	font-family:CFAstyStd Bold;
/* background: rgba(0,0,0,0.7); */
/* border-top-left-radius:60px; */
/* border-bottom-left-radius:60px; */

/* border:3px solid rgba(0,0,0,0.7); */
/* border-right:none; */
}

/* [data-correlation].pressed:not(.vocabularyBtn ){ */
/* background: #ffffff; */
/* color:black; */
/* } */

[data-correlation].pressed svg path{
fill:#FF007D;
}

[data-correlation].pressed svg circle{
fill:#ffffff;
opacity:1;
}

/* [data-correlation].pressed .sBlack { */
/* fill:black; */
/* } */

/* [data-correlation] svg path{ */
/* fill:#ffffff; */
/* } */

/* .rightCorrelation  [data-correlation].pressed{
background: white;
color:black;
} */

/* [data-video="PTCNoSub4"] span{ */
	/* padding-left: 0px!important; */
/* } */

.leftCorrelation span{
	display: inline-block;
	text-align: center;
	/* width: 98px; */
	width: 86px;
	letter-spacing: -0.3px;
	padding-left: 7px;
	/* vertical-align: middle; */
    /* left: 4px; */
    /* position: absolute; */
    /* top: 55px; */
}

/*.leftCorrelation  svg{
	position: absolute;
	right: 20px;*/
	/*top: 14px;*/
	/*display: inline-block;
	vertical-align: middle;
	}*/

/* .leftCorrelation  svg{padding-left: 30px;} */
.leftCorrelation  svg{padding-left: 25px;}

.rightCorrelation span{
	/* vertical-align: middle; */
    /* right: 4px; */
    /* position: absolute; */
    /* top: 55px; */
	display: inline-block;
    width: 90px;
    text-align: center;
	letter-spacing: -0.3px;
}
.rightCorrelation  svg{padding-left: 20px;}
/*.rightCorrelation  svg{
	fill:#e4e4e4;
	position: absolute;
	left: 20px;*/
	/*top: 19px;*/
	/*display: inline-block;
	vertical-align: middle;
	margin-right: 3px;
}*/

.leftReference{
position:absolute;
left:120px;
top:802px;}

.rightReference{
position:absolute;
left:698px;
top:802px;
width:480px;}

.leftReference [data-game]{max-width: 175px;height: 27px;color:#ff0000;letter-spacing:1px;font-size: 17px;position: relative;
background: #e4e4e4;
border-bottom-right-radius:30px;
border-bottom-left-radius:30px;
font-family:Stag Sans Web;
padding:6px 16px 1px 16px;
text-align:center;
border: 3px solid #ff0000;
border-top: none;
font-weight:bold;
margin-right:10px;}

.rightReference [data-game]{max-width: 175px;height: 27px;color:#ff0000;letter-spacing:1px;font-size: 17px;position: relative;
background:  #e4e4e4;
border-bottom-right-radius:30px;
border-bottom-left-radius:30px;
font-family:Stag Sans Web;
padding:6px 16px 1px 16px;
text-align:center;
float:right;
border: 3px solid #ff0000;
border-top: none;
font-weight:bold;
margin-left:10px;}



[data-type="RE"].pressed,.reference [data-sticker].pressed{
background: #ff0000;
color:#e4e4e4;
}

.mainOptionsSpread .drop-Curtain{
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 16px;
	left: 100px;
    z-index: 9860;

}


.extraInfo,.extraInfoVideo{position:absolute;bottom: 95px;left:0px;width:100%;text-align:center;height: 50px;z-index:500;display:none;z-index: 9700;}
.extraInfoVideo{bottom: 20px;}
.extraInfoVideo{display:block;}

.extraInfoCenter,.extraInfoCenterVideo{display:inline-block;background: #ededed;border-radius: 60px;padding-top: 1px;box-sizing: border-box;}

.extraInfoCenter>div,.extraInfoCenterVideo>div{float:left;}

.playBtnWrapper{width: 61px; height: 40px; position:relative;line-height: 35px;box-sizing:border-box;}

.playBtnWrapper:first-child svg{vertical-align:middle;top:4px;position: absolute;}

.subsOn svg,.clVideo svg{vertical-align:middle;left: 1px;position: absolute;top:6px;height: 50px;width: 65px;}

.subsOn.pressed svg circle{fill:white;}
.subsOn.pressed svg g{fill:#737373;}


.subsOn:not(.subsOff) line{display:none}


.videostopBtn svg{vertical-align: middle;right: 28px;position: absolute;top: 7px;}


.playBtnWrapper:first-child{border-top-left-radius: 100%;border-bottom-left-radius: 100%;}

.videostopBtn{}

.worksheetSelect>div:not(.videoExtra){display:none !important;}

.worksheetSelect{text-align:center;
    box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.4);
    background-image: url(../Images/Main/BGW.jpg);

}

.videoExtra{    margin-top: 210px;
    overflow: hidden;
    display: inline-block;
	font-family: 'CFAstyStd Bold';
	padding-bottom: 30px;
}

.videoExtra>div:not(.IconImg){
    /*border: 5px solid white;*/
    color: white;
    font-size: 33px;
    text-align: center;
    float: left;
    width: 500px;
    height: 180px;
    background-color: #000A46;
    border-radius: 35px;
    line-height: 170px;
    margin: 0px 22px;
    font-family: 'CFAstyStd Bold';
	-webkit-box-shadow: 10px 10px 11px -1px rgba(0,0,0,0.75);
	-moz-box-shadow: 10px 10px 11px -1px rgba(0,0,0,0.75);
	box-shadow: 10px 10px 11px -1px rgba(0,0,0,0.75);
}

.IconImg{
    margin-bottom: 25px;
}

.videoExtra>div.pressed{background:white;color:#000A46;}

.videoExtra>span{    display: block;
    color: white;
    font-size: 41px;
    margin-bottom: 99px;
    text-align: center;
    margin-top: 20px;
 }

.mainFrame .container{width: 825px;height: 740px;background: white;}

.mainFrame .moduleInfos{display: none;}

.mainFrame .moduleInfos>div{float:left;}

.mainFrame .moduleInfos:not(.Reader)>div:first-child,.mainFrame .lessonsHeader{display:none;}


[data-videopart]{height: 25px;
    width: 25px;
    background: gray;
    top: -25px;
    position: absolute;
    color: white;
	text-align:center;
	font-size:22px;
	}
[data-videopart].pressed{color:black;}

[data-videopart]:after{	content:"";
    width:0;
    height:0;
    border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  bottom:-10px;
  border-top: 10px solid gray;
  position:absolute;
  left:7px;}


/* .mainFrame .mLeft:before,.mainFrame .mRight:after{content:"\00a0/\00a0";opacity:0.5}
 */

.mainFrame .lessons {font-family:'CFAsty Book';color: white;font-size: 42px;line-height: 53px;background: black;}
.mainGroupLeft{position:absolute;bottom: 21px;right: 760px;z-index: 0;}

.moduleInfos>div{float:left;}

.extraInfo .stopBtn svg {
    vertical-align: middle;
    position: absolute;
    top: 7px;
	right: 28px;
}
.extraInfo .stopBtn{
    }

.mainSvgs span{font-size:30px;font-weight: 400;}

.mainSvgs span{
    height: 72px;
    display: block;
    float: left;
    padding-top: 8px;
    padding-right: 12px;
    background: black;
    margin-left: -55px;
    z-index: 1;
    position: relative;
    padding-left: 57px;
    border-radius: 11px;
}

.mainSvgs{display:none;position:absolute;right: 59px;/* background: black; */font-size: 24px;font-family: 'CFAsty Book';font-weight: 300;color: white;top: 15px;height: 50px;overflow: hidden;}
.mainFrame .mainSvgs{display:block;}
.mainGroupLeft svg{float:left;width: 70px;height: 70px;}

.mainGroupLeft svg:not(:last-child){margin-right:15px;}

.mainGroupRight{position:absolute;bottom: 21px;left: 760px;}

.mainGroupRight svg{float:left;width: 70px;height: 70px;}

.mainGroupRight svg:not(:last-child){margin-right:15px;}

.audioPause .gPlay,.gPause,.videoPause .gPlay,.gPause{opacity:0;}

.audioPause .gPause,.videoPause .gPause{opacity:1;}

.playBtnWrapper  svg.pressed circle,.stopBtn.pressed circle{fill:white}

.playBtnWrapper  svg.pressed path,.playBtnWrapper  svg.pressed rect,.stopBtn.pressed path{fill:#ff007d}

.closeVideo{}





.mainImg{display:none;position:absolute;top: 5px;left: 52px;}

.buildTxt{position:absolute;text-align:center;top:10px;width:100%; text-align:center;left:0px;z-index:10000;}

.buildTxt input{width:100%;}

.fill{font-size:33px;color: #197319;}

.fill text{fill:#0000ff}

.txtmc{color:black;}



.toolsWrapper{position:absolute;
bottom: 25px;
left:22px;
/* background: black; */
z-index: 9701;
/* width: 50px;
height: 50px; */
border-radius: 30px;}

.righttoolBox{left:1209px;}

/* .toolFrame{bottom:90px !important;} */

.justmaskClose.pressed circle{fill:black}

.justmaskClose{cursor:pointer;}

.justmaskClose.pressed path{fill:white}

.gr{width:0px;height:0px;}

.toolBox{

width:50px;

box-sizing:border-box;

padding: 10px 0px;

}



.verticalSVG{display:none;}

.mainFrame .mBook{display:none;}



.mainFrame span.mModule{}


.horizontalSVG svg{display:block;margin-left:6px;margin-bottom:3px;}

.verticalSVG  svg {display:inline-block;margin-left:6px;margin-top: -191px;}

.toolBoxVertical{width: 525px !important;height:50px;}

.toolBoxVertical .reverseTools{margin-top:0px;
margin-bottom: 8px;display:inline-block;}

.toolBoxVertical .verticalSVG{display:inline-block !important;}

.toolBoxVertical .horizontalSVG{display:none !important;}

.fill>div{width:100%;height:100%;}

.toolActive .toolCircle,.pressed .toolCircle{fill:#9F9F9F;z-index: 100;}

.toolActive .toolCircleReverse,.pressed .toolCircleReverse{fill:white;
}

.mainFrame .lessons{margin-right:50px;margin-top: -11px;display: block;}

.mSvg{margin-top:-10px;font-size:24px;font-family:'CFAsty Book';font-weight:300;display:none;}

.tSvg{font-size: 30px;font-family:'CFAsty Book';font-weight: 400;display:none;float: left;z-index: 2;position: relative;margin-top: -1px;}

.mainFrame .mSvg,.mainFrame .tSvg{display: block;}

.toolExpand{display:none;}

.toolActive .toolExpand{display:block}

.toolSelected .toolExpand{display:none !important}

.toolBox{display:none;}

.toolBox.enabled{display:block;}

.mainWrapper{width: 100%;height: 810px;position: relative;margin:0px auto;padding-top:40px;background:#0a73b4;overflow: hidden;}

.white-curtain {position: absolute; top: 0px; left: 0px;width: 100%;height: 0%;background: white;z-index:9701;display: block;transition: height 0.5s ease-in;}

.white-curtain .MM-logo{position: absolute;right:25px;display: none;top:35px;}

.white-curtain .exitbtn{position: absolute;right:40px;display: none;bottom:80px;}

.mainWrapper.zoomedWr{height: 860px;}

.mainFrame .mainWrapper{background:transparent;}

.export{width:100%;background:white;position:absolute;bottom:0px;left:0px;height:20px;overflow: hidden;}

.export {}

.subs{
	color: black;
	letter-spacing:-0.5px;
	text-align: center;
	font-size: 48px;
	height: 70px;
	line-height: 67px;
	width: 100%;
	font-family:'CFAstyPro';
	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;
	}

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

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

/* .primary .leftCorrelation [data-type=WB],.primary .rightCorrelation [data-type=WB]{height: 70px;} */


#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 10s infinite;
}

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


.bounceCurtainDown
{
    animation: bounceDown 0.3s ease-in;

}

@keyframes bounceDown{
0%{
    -webkit-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
    transform:translateY(0);
  }

57%
{
    -webkit-transform:translateY(-10%);
    -ms-transform:translateY(-10%);
    -o-transform:translateY(-10%);
    transform:translateY(-10%);
}

100%
{

    -webkit-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
    transform:translateY(0);

  }
}

.bounceCurtainUp
{
    animation: bounceUp 0.3s ease-in;

}


@keyframes bounceUp{
0%{
    -webkit-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
    transform:translateY(0);
  }

57%
{
    -webkit-transform:translateY(-95%);
    -ms-transform:translateY(-95%);
    -o-transform:translateY(-95%);
    transform:translateY(-95%);
}

100%
{

    -webkit-transform:translateY(0);
    -ms-transform:translateY(0);
    -o-transform:translateY(0);
    transform:translateY(0);

  }
}




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

.scrollHandle:before,.justScrollHandle:before{
    position:absolute;
    content:'';
    top:0px;
    right:-20px;
    left:-20px;
    bottom:0px;
}

.soundBar:before,.videoBar:before{
    position:absolute;
    content:'';
    top:-10px;
    right:0px;
    left:0px;
    bottom:-10px;
}

.justScroll:before,.scroll:before{position:absolute;
    content:'';
    position:absolute;
    top:0px;
    right:-20px;
    left:-20px;
    bottom:0px;}

.containerExpanded{}

.pencil{stroke-linejoin:round;fill:none;position:absolute;}

.rectangle,.ellipse{position:absolute;}
.inverse{position:absolute;
box-shadow: 0 0 0 1280px rgba(255,255,255,0.5);
}

.containerExpanded .container{width:1237px !important;}

.containerExpanded .justHide,.containerExpanded .justificationWrapper,.containerExpanded .referenceImg{display:none !important;}

.containerExpanded .scroll{right:42px !important;}

/* .secondButton,.demoModuleButton{margin-top:40px;position:relative;}

[data-secondmodule] .secondModuleButton{border:10px solid #ffcd2e;}
.demoModuleButton .secondModuleButton{border:5px solid #ffcd2e;}

[data-secondmodule] .secondTitle{padding-top: 21px !important;}
.demoModuleButton .secondTitle{padding-top: 21px !important;}
[data-secondmodule="Hello"] .secondTitle{padding-top: 55px !important;}

[data-secondmodule] .secondModuleButton:before,.demoModuleButton:before{content:url('Images/demo.png');position: absolute;
width: 100%;
text-align: center;
top: -48px;
left: 0px;}

.demoModuleButton:before{top: -40px;}

.demoGrammar{position:relative;}

.demoGrammar:before{content:url('Images/demo-portal-to-grammar.png');position: absolute;
width: 100%;
text-align: center;
top: -42px;
left: 0px;}

.secondCustomHeader{overflow:visible}

.secondCustomTiles{padding-top:7px;} */
.stickerIcons{position:absolute;z-index:5;}
.mBook img{height:30px;margin: 0px 15px;}

.modulesMore{position: absolute !important;
    top: 27px;
    right: 150px;
    z-index: 9001;
}

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

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

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

}

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

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

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

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

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


/*Readers*/
.Reader>div:first-child:after{    content: "\00a0/\00a0";}

.mainFrame .Reader .mBook{display:block;line-height: 35px;margin-left: 5px;}

.mainFrame .Reader.moduleInfos{display: block;}

.mainFrame .ReaderLvl {display: block!important;margin-left: 30px;border-radius: 17px;background: #ffffff;color: #ee7d00;width: 95px;height: 30px;font-size: 20px;text-align: center;font-family:'mmAsap Bold';line-height: 30px;}


.mainFrame .Reader .mModule.mLeft {display:none;}

.mainFrame .Reader>div:first-child:after {display:none;}

.mainFrame .Reader  {left: 23px!important;top: 26px;font-family: 'mmAsap Bold';}

.mainSvgs .ReaderLesson {display: block!important;border-radius: 17px;background: #ee7d00;padding: 5px 15px;color: #ffffff;width: max-content;height: 25px;min-width:73px;text-align: center;line-height: 24px;font-size: 20px;font-family:'mmAsap Bold';}

.mainSvgs.ReaderMain {top:21px;right:45px;height: auto;}

/*Interactive Activities*/

[data-sticker] {

z-index: 11;

position:absolute;

cursor:pointer;

}

.hovered[data-sticker]:not(.stickerInter):not(.stickerAnimation),.pressed[data-sticker]:not(.stickerInter):not(.stickerAnimation){
    background: rgba(235, 255, 0, 0.5);
    mix-blend-mode: multiply;
    -moz-box-shadow: 1px 2px 10px rgba(255, 255, 0, 0.5);
    -webkit-box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
    box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
}

.leftReference [data-sticker]{
max-width: 175px;
height: 38px;
color:#ff0000;
letter-spacing:1px;
font-size: 17px;
position: relative;
background: #e4e4e4;
border-bottom-right-radius:30px;
border-bottom-left-radius:30px;
font-family:Stag Sans Web;
padding:6px 16px 1px 16px;
text-align:center;
border: 3px solid #ff0000;
border-top: none;
font-weight:bold;
margin-right:10px;
line-height: 18px;
}

.rightReference [data-sticker]{
max-width: 175px;
height: 38px;
color:#ff0000;
letter-spacing:1px;
font-size: 17px;
position: relative;
background:  #e4e4e4;
border-bottom-right-radius:30px;
border-bottom-left-radius:30px;
font-family:Stag Sans Web;
padding:6px 16px 1px 16px;
text-align:center;
float:right;
border: 3px solid #ff0000;
border-top: none;
font-weight:bold;
margin-left:10px;
line-height: 18px;
}


[data-type="RE"].pressed,.reference [data-sticker].pressed{
background: #ff0000;
color:#e4e4e4;
}




/*Spread - frames Buttons*/
.mainOptionsSpread .drop-Curtain{
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 21px;
	left: 110px;

}

.spreadHomeBtn {
	width: 70px;
	height: 70px;
	position: absolute;
	bottom: 21px;
	left: 195px;
}

.mainBack {
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 21px;
    left: 280px;
}

 .zoomSpread {
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 21px;
	left: 365px;
}

.mainGroupLeft .drop-Curtain {
    width: 70px;
    float: left;
    height: 70px;
    margin-right: 15px;
}




.zoomed{/* transform: scale(1.1); */
width: 1216px;
height: 854px;
top:-40px;
left:22px;
border-radius: 30px;
z-index: 9000;}

.exitBtn{vertical-align:middle;margin-right: 50px;margin-top: -3px;}
.homeBtn{vertical-align:middle;width: 70px;height: 70px;    position: absolute;
    top: 15px;
    left: 50px;}


.homeBtn.pressed path:not(:first-child){fill: #FF007D;}
.homeBtn.pressed path:first-child{fill: #FFFFFF;}

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

.mainOptionsSpread svg.pressed path:not(:first-child) {fill: #ff007d}
.mainOptionsSpread svg.pressed path:first-child {fill: #FFFFFF}

.activated path:not(:first-child) {fill: #FFFFFF;}
.activated path:first-child {fill: #ff007d;}


.mainGroupLeft svg.pressed path:not(:first-child) {fill: #ff007d}
.mainGroupLeft svg.pressed path:first-child {fill: #FFFFFF}
.secondBackbtn2.pressed rect{fill: #ff007d;}
.alwaysDisabled.pressed path:first-child{fill: #00052d!important;}
.alwaysDisabled.pressed path:not(:first-child){fill: #FFFFFF!important;}


.mainGroupRight svg.pressed path:not(:first-child) {fill: #ff007d}
.mainGroupRight svg.pressed path:first-child {fill: #FFFFFF}
.mainGroupRight svg.pressed circle {fill: #ff007d}

.enabledTool {
	background-color: #00052d;
	margin-bottom: 3px;
    height: 480px;
}


.rightTool path:first-child,.leftTool path:first-child {fill:#00052d}
.rightTool.pressed path:not(:first-child),.leftTool.pressed path:not(:first-child) {fill:#ff007d}

.horizontalSVG svg > circle{fill:#00052d; stroke:#00052d;}


.mainOptions a{position: absolute;z-index: 400;height: 31px;display: inline-block;bottom: 50px;right: 100px;width: 100px;vertical-align: top;text-align: center;}


.modulesTrigger{font-family: 'CFAsty Book';font-size: 30px;letter-spacing:1px;color: #e4e4e4;cursor: pointer;}
.mainOptionsSpread{height:105px;line-height:50px;/*width: 300px;*/width: 490px;display: inline-block;z-index: 9001;bottom:0px;left:0px;position: absolute;
background:#0a73b4;}

[data-frame]{position:absolute;bottom: 27px;}

/* [data-frame="previous"]{right: 640px;} */

/* [data-frame="next"]{left: 640px;} */


[data-frame="previous"]{left: 570px;}

[data-frame="next"]{right: 570px;}


/*Interactive panel*/

.interactivePanel svg.pressed path:not(:first-child) {fill: #ff007d}
.interactivePanel svg.pressed path:first-child {fill: #FFFFFF}

/*Video player*/
.clVideo,.subsOn,.subsOff {display:inline-block;}

.closeVideo.pressed circle{fill:#00052d}
.closeVideo.pressed path:first-child{fill:#00052d;}
.closeVideo.pressed path:last-child{fill:white;}


/*Spread Stickers*/
[data-icon="sugAns"],[data-icon="modelAns"],[data-icon="extraAct"],[data-icon="extraInt"]{
	width:60px;
	height:60px;
}

[data-icon="wWatch"] {
	background-image: url('Images/WW_Interactive_icon.png');
	background-position: 52500px 0;
	width:210px;
	height:50px;
}

[data-icon="sugAns"] {
	background-image: url('Images/suggestive-sprite.png');

}

[data-icon="modelAns"] {
	background-image: url('Images/model-sprite.png');
}


[data-icon="extraAct"] {
	background-image: url('Images/extra-sprite.png');
}

[data-icon="extraInt"] {
	background-image: url('Images/interactive-sprite.png');
}

[data-icon="grRef"] {
	background-image: url('Images/grammar-sprite.png');
	width:70px;
	height:70px;
}

.zoomedCont [data-icon="sugAns"],.zoomedCont [data-icon="modelAns"],.zoomedCont [data-icon="extraAct"],.zoomedCont [data-icon="grRef"],.zoomedCont [data-icon="extraInt"]{
	transform:scale(1.15);
}


@keyframes stickerMoveWW {
    0%      { background-position-x: 52500px;}
    100%    { background-position-x: 0px; }
}
.stickerAnimation[data-icon="wWatch"] {
	-webkit-animation: stickerMoveWW 24s steps(250) infinite;
    -moz-animation: stickerMoveWW 12s steps(250) infinite;
    -o-animation: stickerMoveWW 12s steps(250) infinite;
    animation: stickerMoveWW 12s steps(250) infinite;
}

@keyframes stickerMove {
    0%      { background-position: left center;}
    30%     { background-position: center center; }
    70%    	{ background-position: right center; }
    100%    { background-position: left center; }
}

.stickerAnimation {
	-webkit-animation: stickerMove 1.1s steps(1) infinite;
    -moz-animation: stickerMove 1.1s steps(1) infinite;
    -o-animation: stickerMove 1.1s steps(1) infinite;
    animation: stickerMove 1.1s steps(1) infinite;
}


/* .hovered[data-sticker].stickerAnimation,.pressed[data-sticker].stickerAnimation{ */
    /* background-color: rgba(235, 255, 0, 0.5); */
    /* mix-blend-mode: multiply; */
    /* -moz-box-shadow: 1px 2px 10px rgba(255, 255, 0, 0.5); */
    /* -webkit-box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5); */
    /* box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5); */
/* } */

.hovered[data-sticker].stickerAnimation:not(.disabled-icon),.pressed[data-sticker].stickerAnimation:not(.disabled-icon){
    background-color: rgba(235, 255, 0, 0.5);
    mix-blend-mode: multiply;
    -moz-box-shadow: 1px 2px 10px rgba(255, 255, 0, 0.5);
    -webkit-box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
    box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
}

/* teacher's key button */
.pressed.justKeyT circle{
	fill: #ff0080;
}

.circle svg ellipse,
.line svg circle,
.line svg path,
.gr svg path {
	stroke-width:4 !important;
}