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: 'CFAsty Primary Book';position:relative;width:100%;height:100%;margin:0;padding:0;}

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

.IWB{width: 1280px;height: 960px;overflow: hidden;transform-origin:top left;position:absolute;background: #64a023;}


[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:33px;
	line-height: 44px;
	font-family:'CFAsty Primary Bold';
	}
	
.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;}

.interactivePanel{
	background: #dae0e0;
    position: absolute;
    top: 742px;
    left: 25px;
    z-index: 9001;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    /* padding: 5px; */
    font-size: 37px;
    color: white;
    padding-left: 10px;
	height: 42px;
}

.interactiveCorrect svg,
.interactiveWrong svg{
	width:40px;
	height:40px;	
	margin-left: 30px;
}

.interactiveShow,
.interactiveReset{
	width: 60px;
	height:40px;
}

.interactiveReset{margin-right: 10px;}

.interactiveCheck{
	opacity:0.3;
	width: 100px;
	display: inline-block;
	font-size: 29px;
	text-align: center;
	background: #ff3c50;
	color: white;
	border-radius: 35px;
	font-family: 'Comic Sans Bold';
	height: 40px;
	line-height: 55px;
}


.interactiveCheck.interactiveEnabled{opacity:1}

.interactiveCorrect span{color:#61e164;margin-right:2px;font-family: 'Comic Sans';position: absolute; top: -7px;}

.interactiveWrong span{color:#ff0000;margin-right:2px;font-family: 'Comic Sans';position: absolute; top: -7px;}
	
.interactivePanel>svg{/* margin: 0px 0px 0px 10px; */display:inline-block;}
.interactivePanel>span{margin-right: 20px;display:none;}

.interactiveShow.pressed rect{fill:#00a4ae !important;}
.interactiveShow.pressed path:not(:last-child){fill:#ffffff !important;}
.interactiveShow.pressed path:last-child{fill:#00a4ae !important;}

.interactiveReset.pressed rect{fill:#ff007d !important;}
.interactiveReset.pressed path{fill:#ffffff !important;}

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

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

.mainFrames{top:26px !important;}

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

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


.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: 19px;
    color:white;
    float:left;
    width: 80px;
    margin-left: 15px;
    font-family: 'Comic Sans Bold';
    margin-top: 20px;
    }

.videoTimer{
	margin-left: -5px;
}

.soundBar,.videoBar{width: 313px;height: 53px;background: url('../Images/Main/bar.png') no-repeat top left;position:relative;float:left;margin-top: 6px;}

.wlScroll{}

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

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

.soundBarWrapper,.videoBarWrapper{height: 75px;width: 425px;/* padding: 18px 0px 10px 7px; */box-sizing:border-box;}

.videobarRedW,
.barRedW{
    width: 289px;
    height: 26px;
    position: absolute;
    margin: 12px 14px;
}

.barRed,.videobarRed{background:#ff007d;width:0%;height: 26px;border-radius: 102%;/* border-top-left-radius: 100%; *//* border-bottom-left-radius: 100%; */margin: 0px 12px;position: absolute;top: 50%;transform: translateY(-50%);}

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

.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{/* background:#737373; */height: 52px;position:relative;width: 61px;margin-left: -18px;}


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


.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: 9870;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;left: -28px;}



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

.mainOptions{height: 90px;line-height:50px;width: 1280px;display: inline-block;/* z-index: 9000; */bottom:0px;left:0px;position: absolute;/* background: #2e213d; *//* 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: 90px;line-height:50px;/*width: 300px;*/width: 492px;display: inline-block;z-index: 9001;bottom:0px;left:0px;position: absolute;background: #64a023;}

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


.mainFrame .mainBack{display:none}



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

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



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


.toolsWrapper>svg.pressed g path{fill: #FF007D;}

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

.mainBg{}






[data-frame]{
    width: 57px;
    height: 57px;
    position: absolute;
    bottom: 16px;
    background: #2D3C50;
    border: 4px solid #ffffff;
    border-radius: 40px;
    margin-right: 5px;
    box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);
    -moz-box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);
    -webkit-box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);
}

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

[data-frame="next"]{left: 645px;}

[data-frame].pressed{
	background:#FF0064;
	border-width: 2px;
	width: 61px;
	height: 61px;
}

[data-frame].pressed path{
	transform: scale(0.8) translate(-4px, -5px) !important;
	transform-origin:center;
}



.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: Comic Sans Bold;font-weight:300;position:absolute;top:5px;left:75px;font-size: 25px;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";margin-left: -9px;}
.moduleInfos.AbcBook>div:nth-child(2):after{content: ""!important;margin-left: 0px;}
.moduleInfos.SpDays>div:nth-child(2):after{content: ""!important;margin-left: 0px;}
.moduleInfos.ModuleTests>div:nth-child(2):after{content: ""!important;margin-left: 0px;}
.moduleInfos.GrammarTest>div:nth-child(2):after{content: ""!important;margin-left: 0px;}

.mainSvgs .mType:not(.AbcBook):after{content: "\00a0/\00a0";}

.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: 0;top: 60px;width: 88px;text-align: center;}
.rightCorrelation{position:absolute;left: 1192px;top: 60px;text-align: center;width: 88px;}

.leftCorrelation [data-correlation]{
	width: 57px;
	height: 57px;
	color: #ffffff;
	letter-spacing:0.5px;
	font-size: 16px;
	position: relative;
	margin-top: 11px;
	margin-left: 11px;
	background: #2D3C50;
	border-radius: 60px;
	font-family:'Comic Sans';
	border: 4px solid #ffffff;
	box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);
	-moz-box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);
	-webkit-box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);
	}



/* .justRemovePhrases+.justificationWrapper [data-phrase]{display:none !important;}
 */
.rightCorrelation [data-correlation]{width: 57px;height: 57px;color: #ffffff;letter-spacing: 0.5px;font-size: 16px;position: relative;margin-top: 11px;margin-left: 11px;background: #2D3C50;font-family: 'Comic Sans';border: 4px solid #ffffff;border-radius: 60px;box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);-moz-box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);-webkit-box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);}

[data-correlation].pressed:not(.vocabularyBtn ){background: #ff0064;border-width: 2px;width: 61px;height: 61px;}

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

[data-correlation].pressed svg{transform: scale(0.8);transform-origin:center;top: 2px;left: 2px;}

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

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

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


.leftCorrelation span{display: inline-block;top: 63px;text-align: center;font-family: 'Comic Sans Bold';font-size: 16px;color: #ffffff;width: 100%;margin-top: 6px;}

.leftCorrelation  svg{fill:#e4e4e4;position: absolute;left: -3px;top: -3px;display: inline-block;vertical-align: middle;margin-right: 23px;}
  
.rightCorrelation span{display: none;display: inline-block;top: 63px;text-align: center;font-family: 'Comic Sans Bold';font-size: 16px;color: #ffffff;width: 100%;margin-top: 6px;}

.rightCorrelation  svg{fill:#e4e4e4;position: absolute;left: -3px;top: -3px;display: inline-block;vertical-align: middle;margin-right: 3px;}
  
.leftReference{
position:absolute;
left:108px;
top:802px;}

.rightReference{position:absolute;left: 654px;top: 815px;width: 500px;}

.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:CFAsty Primary Book;
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: 33px;color: white;letter-spacing:1px;font-size: 21px;position: relative;background: #1A1A1A;font-family: Comic Sans Bold;padding: 6px 36px 1px 16px;text-align:center;float:right;margin-left: 40px;line-height: 25px;box-shadow: 12px 14px 8px -8px rgba(0,0,0,0.75);-webkit-box-shadow: 12px 14px 8px -8px rgba(0,0,0,0.75);}



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

.mainOptionsSpread div:not(.blockPanel),
.mainGroupLeft div:not(.blockPanel),
.mainGroupRight div:not(.blockPanel){
	width: 57px;
	height: 57px;
	position: absolute;
	bottom: 16px;
	background: #2D3C50;
	border: 4px solid #ffffff;
	border-radius: 40px;
	box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);
	-moz-box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);
	-webkit-box-shadow: -3px 3px 2px 0px rgba(45,35,35,0.46);
}

.mainOptionsSpread div svg,
.mainGroupLeft div svg,
.mainGroupRight div svg{
	position:absolute;
	left: -3px;
	top: -3px;
}

.mainOptionsSpread div.pressed svg,
.mainGroupLeft div.pressed svg,
.mainGroupRight div.pressed svg{
	transform-origin: center;
	transform: scale(0.8);
	left: -2px;
	top: -2px;
}

.mainOptionsSpread div.pressed,
.mainGroupLeft div.pressed,
.mainGroupRight div.pressed{
	border-width:2px;
	background: #ff0064;
	width: 61px;
	height: 61px;
}
/* 
.mainOptionsSpread .activated{
	border-width:2px;
	background: #ffffff;
	width: 61px;
	height: 61px;
}

.mainOptionsSpread .activated svg{
	transform-origin: center;
	transform: scale(0.8);
	left: -2px;
	top: -2px;
}

.mainOptionsSpread .activated svg path,
.mainOptionsSpread .activated svg line{
	stroke: #ff0064; 
}
.mainOptionsSpread .activated svg circle{
	fill: #ff0064;
} */


.homeBtn svg path {
	fill:#ffffff;
}

.mainOptionsSpread .homeBtn{
    left: 171px;
}

.mainBack {
    left: 251px;
} 

.zoomSpread {
    left: 331px;
}

.drop-Curtain
{
    left: 91px;
    z-index: 9860;
}

.mainGroupLeft .drop-Curtain {
    width: 70px;
    float: left;
    height: 70px;
    margin-right: 15px;
}
.mainBack svg {
   position: absolute;
   left: -2px;
   top: -2px;
}

.mainBack.pressed svg {
   position: absolute;
   left: -1px !important;
   top: -2px !important;
   transform: scale(0.8) translate(-3px, -3px) !important;
}

.returnSallon{
	left: 251px;
}

.showAnswers{
	left: 331px;
}

.videoBtn{
	left: 411px;
}

.txtmcBtn{
	left: 80px;
}

.referenceBtn{
	left: 160px;
}

.secondBackbtn.pressed circle{fill: gray;}

.secondBackbtn.pressed path{/* fill: #ff0064; */}
.secondBackbtn2 path{fill:white;}
.secondBackbtn2 rect{fill: #ffffff;}
.secondBackbtn2.pressed path{fill: #ff007d;stroke: #ff007d;}
.secondBackbtn2.pressed rect{fill: white;}

.zoomSpreadbtn path{fill:white;}
.zoomSpreadbtn path:not(:first-child){}
.zoomSpreadbtn.pressed path:first-child{fill: #ff007d;stroke: #ff007d;}
.zoomSpreadbtn.pressed path:not(:first-child){fill: white;}


.drop-Curtainbtn path{fill: none;stroke: #FFFFFF;stroke-width: 3;stroke-miterlimit: 10;}
.drop-Curtainbtn line:nth-child(2) {fill: none;stroke: #FFFFFF;stroke-width: 4;stroke-linecap: round;stroke-miterlimit: 10;}
.drop-Curtainbtn line:nth-child(3) {fill: none;stroke: #FFFFFF;stroke-width: 3;stroke-linecap: round;stroke-miterlimit: 10;}
.drop-Curtainbtn circle{fill: #FFFFFF;}
.drop-Curtainbtn.pressed path:first-child{/* fill: #ff0064; */}
.drop-Curtainbtn.pressed path:not(:first-child){fill: white;}

.zoomOutSpreadbtn path:first-child{fill:white;}
.zoomOutSpreadbtn path:not(:first-child){fill:gray;}
.zoomOutSpreadbtn.pressed path:first-child{fill: #ff007d;stroke: #ff007d;}
.zoomOutSpreadbtn.pressed path:not(:first-child){fill: white;}

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

.extraInfo,.extraInfoVideo{position:absolute;bottom: 115px;left: 260px;/* width:100%; */text-align:center;height: 50px;z-index:500;display:none;z-index: 9700;}
.extraInfoVideo{bottom: 16px;}
.extraInfoVideo{display:block;}

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

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

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

.playBtnWrapper:first-child svg{vertical-align:middle;left: -1px;position: absolute;top: -10px;height: 70px;width: 70px;}

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

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


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


.videostopBtn svg{vertical-align: middle;left: 1px;position: absolute;top: 6px;height: 60px;width: 60px;}


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

.videostopBtn{
    margin-top: -11px;
    margin-left: 15px;
}

.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: 35px;
    width: 27px;
    background: black;
    top: -21px;
    position: absolute;
    color: white;
    text-align:center;
    font-size: 27px;
    font-family: 'VAG Rounded Std Light';
 }
[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 black;
    position:absolute;
    left: 9px;
    }


/* .mainFrame .mLeft:before,.mainFrame .mRight:after{content:"\00a0/\00a0";opacity:0.5}
 */
 
.mainFrame .lessons {font-family:'CFAsty Primary Book';color: white;font-size: 42px;line-height: 53px;background: black;}
.mainGroupLeft{position:absolute;bottom: 0;/* right: 1180px; */}

.moduleInfos>div{float:left;}

.extraInfo .stopBtn svg {
    vertical-align: middle;
    right: -16px;
    position: absolute;
    top: -6px;
    width: 60px;
    height: 60px;
}
.extraInfo .stopBtn{
    width: 60px;
    height: 60px;
    }
	
.mainSvgs span{font-size:30px;}	
	
.mainSvgs span{
    height: 72px;
    display: block;
    float: left;
    padding-top: 3px;
    z-index: 1;
    position: relative;
    border-radius: 11px;
}	
	
	.mainSvgs{display:none;position:absolute;right: 40px;/* background: black; */font-size: 30px;font-family: 'Comic Sans Bold';color: white;top: 7px;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: 0;left: 816px;}

.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 path{fill: #f6f6f6;}

.playBtnWrapper svg .gPlayCircle path:first-child,
.playBtnWrapper svg .gStopCircle path:first-child
{fill: url(#playCircle);}

.playBtnWrapper svg .gPlayCircle path,
.playBtnWrapper svg .gStopCircle path
{fill: url(#playStroke);}

.videoPlayBtn svg .gPlayCircle path:first-child,
.videostopBtn svg .gStopCircle path:first-child,
.closeVideo .gCloseCircle path:first-child,
.subsOn svg .gSubCircle path:first-child
{fill: url(#playCircleV);}

.videoPlayBtn svg .gPlayCircle path,
.videostopBtn svg .gStopCircle path,
.closeVideo .gCloseCircle path,
.subsOn svg .gSubCircle path
{fill: url(#playStrokeV);}

.playBtnWrapper svg.pressed .gPlayCircle path:first-child,
.playBtnWrapper svg.pressed .gStopCircle path:first-child
{fill: url(#playCircleP);}

.playBtnWrapper svg.pressed .gPlayCircle path,
.playBtnWrapper svg.pressed .gStopCircle path
{fill: url(#playStrokeP);}

.videoPlayBtn svg.pressed .gPlayCircle path:first-child,
.videostopBtn svg.pressed .gStopCircle path:first-child,
.closeVideo.pressed .gCloseCircle path:first-child
{fill: url(#playCircleVP);}

.videoPlayBtn svg.pressed .gPlayCircle path,
.videostopBtn svg.pressed .gStopCircle path,
.closeVideo.pressed .gCloseCircle path
{fill: url(#playStrokeVP);}

.stopBtn.pressed path{fill:#737373}

.closeVideo{}

.closeVideo.pressed path{fill:#f6f6f6}



.mainImg{display:none;position:absolute;top: 1px;left: 32px;}

.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 Primary Book';font-weight:300;display:none;}

.tSvg{font-size: 30px;font-family: 'Comic Sans Bold';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: 830px;position: relative;margin:0px auto;padding-top:40px;background: #64a023;overflow: hidden;}

.mainWrapper.zoomedWr{height: 860px;}

.mainFrame .mainWrapper{
	background: url('../Images/Main/frameBG.png') no-repeat top center;
}

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

.export {}

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