/*------------------------------------------------------------ Font Embedding : Starts ------------------------------------------------------------*/
@font-face {
	font-family: 'aronuibold';
	src: url('../fonts/Aronui-Bold-webfont.eot');
	src: url('../fonts/Aronui-Bold-webfont.eot?#iefix')
		format('embedded-opentype'), url('../fonts/Aronui-Bold-webfont.woff2')
		format('woff2'), url('../fonts/Aronui-Bold-webfont.woff')
		format('woff'), url('../fonts/Aronui-Bold-webfont.ttf')
		format('truetype'), url('../fonts/Aronui-Bold-webfont.svg#aronuibold')
		format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'aronuiregular';
	src: url('../fonts/Aronui-Regular-webfont.eot');
	src: url('../fonts/Aronui-Regular-webfont.eot?#iefix')
		format('embedded-opentype'),
		url('../fonts/Aronui-Regular-webfont.woff2') format('woff2'),
		url('../fonts/Aronui-Regular-webfont.woff') format('woff'),
		url('../fonts/Aronui-Regular-webfont.ttf') format('truetype'),
		url('../fonts/Aronui-Regular-webfont.svg#aronuiregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CenturyGothic';
	src: url('../fonts/CenturyGothic.eot');
	src: url('../fonts/CenturyGothic.eot?#iefix')
		format('embedded-opentype'),		
		url('../fonts/CenturyGothic.woff') format('woff'),
		url('../fonts/CenturyGothic.ttf') format('truetype'),
		url('../fonts/CenturyGothic.svg#CenturyGothic')
		format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CenturyGothic-Bold';
	src: url('../fonts/CenturyGothic-Bold.eot');
	src: url('../fonts/CenturyGothic-Bold.eot?#iefix')
		format('embedded-opentype'),		
		url('../fonts/CenturyGothic-Bold.woff') format('woff'),
		url('../fonts/CenturyGothic-Bold.ttf') format('truetype'),
		url('../fonts/CenturyGothic-Bold.svg#CenturyGothic-Bold')
		format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CenturyGothic-BoldItalic';
	src: url('../fonts/CenturyGothic-BoldItalic.eot');
	src: url('../fonts/CenturyGothic-BoldItalic.eot?#iefix')
		format('embedded-opentype'),		
		url('../fonts/CenturyGothic-BoldItalic.woff') format('woff'),
		url('../fonts/CenturyGothic-BoldItalic.ttf') format('truetype'),
		url('../fonts/CenturyGothic-BoldItalic.svg#CenturyGothic-BoldItalic')
		format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'CenturyGothic-Italic';
	src: url('../fonts/CenturyGothic-Italic.eot');
	src: url('../fonts/CenturyGothic-Italic.eot?#iefix')
		format('embedded-opentype'),		
		url('../fonts/CenturyGothic-Italic.woff') format('woff'),
		url('../fonts/CenturyGothic-Italic.ttf') format('truetype'),
		url('../fonts/CenturyGothic-Italic.svg#CenturyGothic-Italic')
		format('svg');
	font-weight: normal;
	font-style: normal;
}
/*------------------------------------------------------------ Font Embedding : Ends ------------------------------------------------------------*/

/*------------------------------------------------------------ Header : Starts ------------------------------------------------------------*/
#headerSection { height: 113px; position: relative;}
#headerTitle {	font-family: 'CenturyGothic-Bold'; text-align: left; color: #f5852f; font-size: 40px; line-height: 110px; padding-left:45px;}
div#DvHeaderLogo { width: 247px; height: 62px; 	position: absolute; right: 33px; top: 25px;	background: url('../images/headerLogo.png') no-repeat;}
#headerLogo { width: 101px; height: 108px; position: absolute; left: -113px; top: 13px;	background: url('../images/logoSprite.png') no-repeat;}

.spriteLogoAnim {
  animation: playLogoAnim 1.2s steps(29) 1;
  -o-animation: playLogoAnim 1.2s steps(29) 1;
  -ms-animation: playLogoAnim 1.2s steps(29) 1;
  -moz-animation: playLogoAnim 1.2s steps(29) 1;
  -webkit-animation: playLogoAnim 1.2s steps(29) 1;
}

@keyframes playLogoAnim { 100% { background-position: -2900px 0px;} }
@-o-keyframes playLogoAnim { 100% { background-position: -2900px 0px;} }
@-ms-keyframes playLogoAnim { 100% { background-position: -2900px 0px;} }
@-moz-keyframes playLogoAnim { 100% { background-position: -2900px 0px; } }
@-webkit-keyframes playLogoAnim { 100% { background-position: -2900px 0px; } }

/*------------------------------------------------------------ Header : Ends ------------------------------------------------------------*/


/*------------------------------------------------------------ Body : Starts ------------------------------------------------------------*/
body{
 	 -webkit-user-select: none; /* Chrome all / Safari all */
 	 -moz-user-select: none; /* Firefox all */
  	-ms-user-select: none; /* IE 10+ */
  	/* No support for these yet, use at own risk */
 	 -o-user-select: none;
 	 user-select: none;
  	overflow:auto;
}
.preloaderHolder { position: absolute; width: 990px; height: 700px; margin: auto; left: 0px; right: 0px;}
.preloaderImage { width: 318px; height: 93px; background-image: url('../images/loader.png'); background-repeat: no-repeat; margin-right: auto; margin-left: auto; margin-top: 300px; 
				animation: playLoading 1s steps(7) infinite;
			 -o-animation: playLoading 1s steps(7) infinite;
	        -ms-animation: playLoading 1s steps(7) infinite;
	       -moz-animation: playLoading 1s steps(7) infinite;
	    -webkit-animation: playLoading 1s steps(7) infinite;
}

@keyframes playLoading { 100% { background-position: -2226px 0px; }}
@-o-keyframes playLoading { 100% { background-position: -2226px 0px; }}
@-ms-keyframes playLoading { 100% {	background-position: -2226px 0px;}}
@-moz-keyframes playLoading { 100% {	background-position: -2226px 0px;}}
@-webkit-keyframes playLoading { 100% {	background-position: -2226px 0px;}}


#stage { width: 990px; height: 700px; margin: auto;}

#mainSec { width: 896px; height: 474px;	margin: auto; position: relative;
			-webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
			-moz-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
			box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
			border-radius: 30px; -webkit-border-radius:30px;-ms-border-radius:30px;-o-border-radius:30px;
			font-family: "aronuiregular"; overflow:hidden;
}

#homeArea {	width: 100%; height: 100%; background-image: url('../images/homebg.png'); }
#titleArea { width: 320px; height: 75px; left: 288px; bottom: 40px; position: absolute; text-align: center; font-family: "CenturyGothic"; font-size: 24px; padding-top: 15px; 	
				    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);
			-webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);
			   -moz-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);
			     -o-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);
			    -ms-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.3);
border-radius: 10px;  -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px;
}

#titleArea #DvHomeLevel{font-size: 18px; position:absolute; top:10px; left:0px; width:100%; text-align:center;}
#titleArea #DvHomeTitle{font-size: 23px; position:absolute; top:35px; left:0px; width:100%; text-align:center;}

/*------------------------------------------------------------ Body : Ends ------------------------------------------------------------*/


/*------------------------------------------------------------ Footer : Starts ------------------------------------------------------------*/
#footerSection { height: 113px; padding-left: 200px; padding-top: 7px; position: relative;}
.btns {	width: 100px; height: 100px; float: left; margin-right: 70px; font-family: 'CenturyGothic-Bold'; color: #67ad3c; text-align: center; font-size: 20px; line-height: 15px; background-image: url('../images/navbut.png'); cursor: pointer; /*background-color:#cccccc;*/}

.unselectable {	user-select: none; 	-o-user-select: none; 	-ms-user-select: none; 	-moz-user-select: none; 	-webkit-user-select: none; }
/*------------------------------------------------------------ Footer : Ends ------------------------------------------------------------*/

/*------------------------------------------------------------ Color Theme Classes : Starts ------------------------------------------------------------*/

/*---- Loader : Loader Background color, changes with theme color change----*/
.greenLoader {	background-color: #e4efdb;}
.blueLoader {	background-color: #dce3f2;}
.orangeLoader {	background-color: #fcd5b7;}

/*Background - Color : eBook Theme color change*/
.green { background-color:#e4efdb; }
.blue {	background-color:#dce3f2; }
.orange { background-color:#fcd5b7; }

/*Title Area Background Color : change from home.html*/
#titleArea.ClsThemeGreen{color:#ffffff; background-color: #afd195;} /*green*/
#titleArea.ClsThemeBlue{ color:#ffffff; background-color: #b2c1e3;} /*Blue*/
#titleArea.ClsThemeOrange{color:#ffffff; background-color: #f8a464;} /*Orange*/

/*Header Title : Color : change from header.html*/
#headerTitle.ClsTextThemeGreen{ color:#f5852f} /*Orange Text*/
#headerTitle.ClsTextThemeBlue{ color: #67ad3c;} /*Green Text*/
#headerTitle.ClsTextThemeOrange{ color:#67ad3c;}  /*Green Text*/

/*Fredge : Color : change from header.html*/
#DvFinalAnimTitle.ClsTextThemeGreen{ color:#f5852f} /*Orange Text*/
#DvFinalAnimTitle.ClsTextThemeBlue{ color: #67ad3c;} /*Green Text*/
#DvFinalAnimTitle.ClsTextThemeOrange{ color:#67ad3c;}  /*Green Text*/

/*Activity Header Lozenges : change from activity.html*/
.lozengeGreen { background-color: #afd195; border-radius: 10px;  -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px;}
.lozengeBlue { background-color: #b2c1e3; border-radius: 10px;  -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px;}
.lozengeOrange { background-color: #f8a464; border-radius: 10px;  -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px;}


/*------------------------------------------------------------ Color Theme Classes : Ends ------------------------------------------------------------*/
/*------------------------------------------------------------ Final Animation : Starts : Fredge Animation ------------------------------------------------------------*/
.finalAnimContainer{ width: 990px; height: 700px; position: absolute; top:0px; left:0px; z-index: 1010; overflow: hidden; pointer-events: none; visibility:visible;}

div#DvFinalAnimTitle{height:50px; position:absolute; top:585px; left:15px; font-family: 'CenturyGothic-Bold'; text-align: center; color: #f5852f; font-size: 40px; line-height: 50px; pointer-events: none;}

/*div#finalAnimSprite1{ width: 160px; height: 354px; position: absolute; left: 6px; top: 232px; background-image: url('../images/spFinalAnim.png'); pointer-events: none;}
.ClsFinalAnim0{background-position: 0px 0px;}
.ClsFinalAnim1 { background-position: -1120px 0px;
	            
				 animation: FrameFinalAnim1 3s steps(42) infinite; 
              -o-animation: FrameFinalAnim1 3s steps(42) infinite;
             -ms-animation: FrameFinalAnim1 3s steps(42) infinite;
            -moz-animation: FrameFinalAnim1 3s steps(42) infinite;
         -webkit-animation: FrameFinalAnim1 3s steps(42) infinite;
}
@keyframes FrameFinalAnim1         {100% { background-position: -7840px 0px;} }
@-o-keyframes FrameFinalAnim1      {100% { background-position: -7840px 0px;} }
@-ms-keyframes FrameFinalAnim1     {100% { background-position: -7840px 0px;} }
@-moz-keyframes FrameFinalAnim1    {100% { background-position: -7840px 0px;} }
@-webkit-keyframes FrameFinalAnim1 {100% { background-position: -7840px 0px;} }*/

div#finalAnimSprite1{ width: 273px; height: 354px; position: absolute; left: 6px; top: 232px; background-image: url('../images/spFinalAnim.png'); pointer-events: none;}
.ClsFinalAnim0{background-position: 0px 0px;}
.ClsFinalAnim1 { background-position: -273px 0px;
	            
				 animation: FrameFinalAnim1 1.3s steps(12) infinite; 
              -o-animation: FrameFinalAnim1 1.3s steps(12) infinite;
             -ms-animation: FrameFinalAnim1 1.3s steps(12) infinite;
            -moz-animation: FrameFinalAnim1 1.3s steps(12) infinite;
         -webkit-animation: FrameFinalAnim1 1.3s steps(12) infinite;
}
@keyframes FrameFinalAnim1         {100% { background-position: -3549px 0px;} }
@-o-keyframes FrameFinalAnim1      {100% { background-position: -3549px 0px;} }
@-ms-keyframes FrameFinalAnim1     {100% { background-position: -3549px 0px;} }
@-moz-keyframes FrameFinalAnim1    {100% { background-position: -3549px 0px;} }
@-webkit-keyframes FrameFinalAnim1 {100% { background-position: -3549px 0px;} }

/*------------------------------------------------------------ Final Animation : Ends : Fredge Animation ------------------------------------------------------------*/

/*------------------------------------------------------------ Home Page Character Animation Starts ------------------------------------------------------------*/
/*Charcter 1*/
div#DvCharSprite1{	position:absolute; top:27px; left:328px; width: 295px; height:254px;	background: url('../images/charAnimSprite1.png') no-repeat; }
.ClsAnimChar1 {  animation: FrameCharAnim1 2.0s steps(10) infinite; 
              -o-animation: FrameCharAnim1 2.0s steps(10) infinite;
             -ms-animation: FrameCharAnim1 2.0s steps(10) infinite;
            -moz-animation: FrameCharAnim1 2.0s steps(10) infinite;
         -webkit-animation: FrameCharAnim1 2.0s steps(10) infinite;
}

@keyframes FrameCharAnim1         {100% { background-position: -2950px 0px;} }
@-o-keyframes FrameCharAnim1      {100% { background-position: -2950px 0px;} }
@-ms-keyframes FrameCharAnim1     {100% { background-position: -2950px 0px;} }
@-moz-keyframes FrameCharAnim1    {100% { background-position: -2950px 0px;} }
@-webkit-keyframes FrameCharAnim1 {100% { background-position: -2950px 0px;} }

/*------------------------------------------------------------ Home Page Character Animation Ends ------------------------------------------------------------*/