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

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}

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

}

.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]{overflow:hidden;}
.leftCorrelation  .portalCor{height:142px !important;border-top-left-radius: 75px !important;
border-bottom-left-radius: 75px !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;;}


.leftCorrelation .portalCor span{display:block !important;position:relative !important;float:none !important;
}
.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;}

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

[data-sticker] {

z-index: 11;

position:absolute;

cursor:pointer;

}

.txtAreaInput{overflow: hidden;}

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


[data-phrase] {position:absolute;cursor:pointer;
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:150;}

.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:1050px;position:relative;height:710px;border-radius:12px;box-shadow: 0px 0px 12px #919191;overflow:hidden;left:147px;top:20px;}

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


#sketch{position:absolute;width: 100%;height: 100%;top:0px;left:0px;z-index:9600;}

.fill  p{margin:10px;}


.container{width:1050px;height:710px;position:absolute;overflow:hidden;background: white;}




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

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

.justificationWrapper{font-size:30px;}

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

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

.wlScroll{}

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

.justActive .gMain,.justification.pressed .gMain{fill:#C8C8C8}

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

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

.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],.pressed[data-sticker]{
    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;height:100%;padding:40px 20px 0px 30px;width:100%;box-sizing:border-box;color:green;}

.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: 750px;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: 465px;z-index:10;}

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


.moduleInfos>div:nth-child(2):after,.moduleInfos>div:nth-child(2):before{    content: "\00a0/\00a0";}
.mainFrame span.mType{display:none;}
.IWB:not(.mainFrame)  .moduleInfos{z-index: 500;}

.lessonsHeader,.lessons{}

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

.leftCorrelation{position:absolute;
left:15px;
top:110px;
}
.rightCorrelation{position:absolute;
left:1197px;
top:110px;
}

.leftCorrelation [data-correlation]{width: 130px;height: 108px;color:white;letter-spacing:1px;font-size: 17px;position: relative;margin-bottom:11px;padding-left: 2px;
background: rgba(0,0,0,0.7);

border-top-left-radius:60px;
border-bottom-left-radius:60px;
font-family:CFAsty;}


.leftCorrelation [data-type="WB"] {height: 91px;}

/* .justRemovePhrases+.justificationWrapper [data-phrase]{display:none !important;}
 */
.rightCorrelation [data-correlation]{width:73px;height: 80px;color:white;
letter-spacing:1px;margin-bottom:13px;
background: rgba(0,0,0,0.7);
border-top-right-radius:40px;
border-bottom-right-radius:40px;
}

[data-correlation].pressed:not(.vocabularyBtn ){
background: white;
color:black;
}

[data-correlation].pressed .sCircle path{
fill:white;
stroke:black;
}

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


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


.leftCorrelation span{vertical-align: middle;
    left: 12px;
    position: absolute;
    display: inline-block;
    top: 63px;
    width: 115px;
    text-align: center;
}

.leftCorrelation  svg{fill:#00ffff;position: absolute;left: 45px;top: 8px;display: inline-block;vertical-align: middle;margin-right: 3px;}

.rightCorrelation span{display: none;}

.rightCorrelation  svg{fill:#00ffff;
margin-left:12px;
margin-top:14px;
display: inline-block;
  vertical-align: middle;}

 .mainBack {
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 16px;
left: 40px;}

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

.secondBackbtn.pressed circle{fill: gray;}

.secondBackbtn.pressed path{fill: white;}


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

.videoExtra{    margin-top: 260px;
    overflow: hidden;
    display: inline-block;}

.videoExtra>div{    border: 5px solid white;
    color: white;
    font-size: 30px;
    text-align: center;
    float: left;
    width: 430px;
    height: 150px;
    line-height: 150px;
    margin: 0px 30px;}

.videoExtra>div.pressed{background:white;color:black;}

.videoExtra>span{    display: block;
    color: white;
    font-size: 30px;
    margin-bottom: 78px;
    text-align: center;
 }

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

.mainFrame .moduleInfos{display: none;}

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

.mainFrame .moduleInfos>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';color: white;font-size: 42px;line-height: 53px;background: black;}
.mainGroupLeft{position:absolute;bottom: 21px;right: 800px;}

.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: 50px;
    background: black;
    margin-left: -52px;
    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: 800px;}

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

.closeVideo.pressed circle{fill:white}

.closeVideo.pressed path{fill:#737373}



.mainImg{display:none;position:absolute;top: 12px;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:30px;color: #197319;}

.fill text{fill:#0000ff}

.txtmc{color:black;}

.toolsWrapper{position:absolute;top: 40px;40px: 90pxz-index:10000;background: black;z-index: 9700;padding-left: 10px;padding-top: 6px;padding-bottom: 2px;padding-right: 4px;border-top-right-radius: 30px;border-bottom-right-radius: 30px;}

.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';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: 780px;position: relative;margin:0px auto;padding-top:65px;background:blue;overflow: hidden;}

.mainFrame .mainWrapper{background:transparent;}

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

.export {}

.subs{
	color: black;
	text-align: center;
	font-size: 48px;
	height: 70px;
	line-height: 69px;
	width: 100%;
	font-family: 'CFAsty Pro';
	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]{}

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

.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:1230px !important;}

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

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

.fill{opacity: 1 !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: 16px;
	left: 100px;

}

.spreadHomeBtn {
	width: 70px;
	height: 70px;
	position: absolute;
	bottom: 16px;
	left: 200px;
}

.mainBack {
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 16px;
    left: 300px;
}

 .zoomSpread {
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 16px;
	left: 400px;
}

.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"]{
	width:60px;
	height:60px;
}


[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/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"]{
	transform:scale(1.15);
}





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