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





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

#stage {
	width: 990px;
	height: 700px;
	margin: 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;}}

.purpleLoader {
	background-color: #e4efdb;
}

.blueLoader {
	background-color: #e4efdb;
}

.magentaLoader {
	background-color: #e4efdb;
}

.greenLoader {
	background-color: #e4efdb;
}

.purple {
	background: rgba(82, 82, 158, 1);
	background: -moz-linear-gradient(top, rgba(82, 82, 158, 1) 0%,
		rgba(82, 82, 158, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(82, 82, 158,
		1)), color-stop(40%, rgba(82, 82, 158, 1)),
		color-stop(95%, rgba(255, 255, 255, 0)));
	background: -webkit-linear-gradient(top, rgba(82, 82, 158, 1) 0%,
		rgba(82, 82, 158, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: -o-linear-gradient(top, rgba(82, 82, 158, 1) 0%,
		rgba(82, 82, 158, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: -ms-linear-gradient(top, rgba(82, 82, 158, 1) 0%,
		rgba(82, 82, 158, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: linear-gradient(to bottom, rgba(82, 82, 158, 1) 0%,
		rgba(82, 82, 158, 1) 40%, rgba(255, 255, 255, 0) 95%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52529E',
		endColorstr='#ffffff', GradientType=0);
}

.blue {
	background: rgba(0, 122, 166, 1);
	background: -moz-linear-gradient(top, rgba(0, 122, 166, 1) 0%,
		rgba(0, 122, 166, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 122, 166,
		1)), color-stop(40%, rgba(0, 122, 166, 1)),
		color-stop(95%, rgba(255, 255, 255, 0)));
	background: -webkit-linear-gradient(top, rgba(0, 122, 166, 1) 0%,
		rgba(0, 122, 166, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: -o-linear-gradient(top, rgba(0, 122, 166, 1) 0%,
		rgba(0, 122, 166, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: -ms-linear-gradient(top, rgba(0, 122, 166, 1) 0%,
		rgba(0, 122, 166, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: linear-gradient(to bottom, rgba(0, 122, 166, 1) 0%,
		rgba(0, 122, 166, 1) 40%, rgba(255, 255, 255, 0) 95%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007AA6',
		endColorstr='#ffffff', GradientType=0);
}

.magenta {
	background: rgba(178, 0, 95, 1);
	background: -moz-linear-gradient(top, rgba(178, 0, 95, 1) 0%,
		rgba(178, 0, 95, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(178, 0, 95,
		1)), color-stop(40%, rgba(178, 0, 95, 1)),
		color-stop(95%, rgba(255, 255, 255, 0)));
	background: -webkit-linear-gradient(top, rgba(178, 0, 95, 1) 0%,
		rgba(178, 0, 95, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: -o-linear-gradient(top, rgba(178, 0, 95, 1) 0%,
		rgba(178, 0, 95, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: -ms-linear-gradient(top, rgba(178, 0, 95, 1) 0%,
		rgba(178, 0, 95, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: linear-gradient(to bottom, rgba(178, 0, 95, 1) 0%,
		rgba(178, 0, 95, 1) 40%, rgba(255, 255, 255, 0) 95%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B2005F',
		endColorstr='#ffffff', GradientType=0);
}

.green {
	/*background: rgba(0, 166, 86, 1);
	background: -moz-linear-gradient(top, rgba(0, 166, 86, 1) 0%,
		rgba(0, 166, 86, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 166, 86,
		1)), color-stop(40%, rgba(0, 166, 86, 1)),
		color-stop(95%, rgba(255, 255, 255, 0)));
	background: -webkit-linear-gradient(top, rgba(0, 166, 86, 1) 0%,
		rgba(0, 166, 86, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: -o-linear-gradient(top, rgba(0, 166, 86, 1) 0%,
		rgba(0, 166, 86, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: -ms-linear-gradient(top, rgba(0, 166, 86, 1) 0%,
		rgba(0, 166, 86, 1) 40%, rgba(255, 255, 255, 0) 95%);
	background: linear-gradient(to bottom, rgba(0, 166, 86, 1) 0%,
		rgba(0, 166, 86, 1) 40%, rgba(255, 255, 255, 0) 95%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00A656',
		endColorstr='#ffffff', GradientType=0);*/
	background-color:#e4efdb;	
}

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

#mainSec {
	width: 896px;
	height: 474px;
	/*background-color: #ffffff;*/
	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;
}

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

#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;
	color:#ffffff;
	background-color: #afd195;
	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;}

.lozengeBlue {
  background: #6eb4cd;
  background-image: -webkit-linear-gradient(top, #6eb4cd, #cfe6ee);
  background-image: -moz-linear-gradient(top, #6eb4cd, #cfe6ee);
  background-image: -ms-linear-gradient(top, #6eb4cd, #cfe6ee);
  background-image: -o-linear-gradient(top, #6eb4cd, #cfe6ee);
  background-image: linear-gradient(to bottom, #6eb4cd, #cfe6ee);
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  border: solid #007aa6 3px;
}


.lozengePurple {
  background: #9696c3;
  background-image: -webkit-linear-gradient(top, #9696c3, #cfcfe4);
  background-image: -moz-linear-gradient(top, #9696c3, #cfcfe4);
  background-image: -ms-linear-gradient(top, #9696c3, #cfcfe4);
  background-image: -o-linear-gradient(top, #9696c3, #cfcfe4);
  background-image: linear-gradient(to bottom, #9696c3, #cfcfe4);
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  border: solid #52529e 3px;
}


.lozengeGreen {
  background-color: #afd195;
  /*background-image: -webkit-linear-gradient(top, #e4efdb, #bee8d4);
  background-image: -moz-linear-gradient(top, #e4efdb, #bee8d4);
  background-image: -ms-linear-gradient(top, #e4efdb, #bee8d4);
  background-image: -o-linear-gradient(top, #e4efdb, #bee8d4);
  background-image: linear-gradient(to bottom, #e4efdb, #bee8d4);
  border: solid #00a656 3px;
  */
  border-radius: 10px;  -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px;
  
  
}

.lozengePink {
  background: #d87faf;
  background-image: -webkit-linear-gradient(top, #d87faf, #f3d8e7);
  background-image: -moz-linear-gradient(top, #d87faf, #f3d8e7);
  background-image: -ms-linear-gradient(top, #d87faf, #f3d8e7);
  background-image: -o-linear-gradient(top, #d87faf, #f3d8e7);
  background-image: linear-gradient(to bottom, #d87faf, #f3d8e7);
  -webkit-border-radius: 15;
  -moz-border-radius: 15;
  border-radius: 15px;
  border: solid #b2005f 3px;
}

/*---------- Header Logo :: Starts ----------*/

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

/*---------- Header Logo Movement Animation Starts ----------*/
/*Monkey / Horse Animation*/

#objSprite{
	position:absolute;
	top: -10px;
  	left: 277px;
	width: 326px;
	height:411px;
	background: url('../images/animSprite.png') no-repeat;
	/*background-position: 0px 0px;*/
}


.spriteAnim {
  animation: play 2s steps(36) 1;
  -o-animation: play 2s steps(36) 1;
  -ms-animation: play 2s steps(36) 1;
  -moz-animation: play 2s steps(36) 1;
  -webkit-animation: play 2s steps(36) 1;
}

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

/*Monkey Animation*/

.finalAnimContainer{ width: 990px; height: 700px; position: absolute; top:0px; left:0px; z-index: 1010; overflow: hidden; pointer-events: none; visibility:visible;}


/*.finalAnimBg{
	width: 100px;
	height: 100px;
	position: absolute;
	left: 47px;
	top: 13px;
	background: url('../images/logoBg.png') no-repeat;
}*/

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

/*.spriteFinalAnim1 {
  animation: playFinalAnim1 .6s steps(49) forwards;
  -o-animation: playFinalAnim1 .6s steps(49) forwards;
  -ms-animation: playFinalAnim1 .6s steps(49) forwards;
  -moz-animation: playFinalAnim1 .6s steps(49) forwards;
  -webkit-animation: playFinalAnim1 .6s steps(49) forwards;
}*/




#finalAnimSprite2{
	width: 140px;
	height: 187px;
	position: absolute;
	left: 24px;
  	top: 420px;
	background: url('../images/finalAnim2.png') no-repeat;
	visibility: hidden;
}

.spriteFinalAnim2 {
  animation: playFinalAnim2 .2s steps(5) forwards;
  -o-animation: playFinalAnim2 .2s steps(5) forwards;
  -ms-animation: playFinalAnim2 .2s steps(5) forwards;
  -moz-animation: playFinalAnim2 .2s steps(5) forwards;
  -webkit-animation: playFinalAnim2 .2s steps(5) forwards;
}

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

.moveFinalAnim1{
	animation: playSlideAnim .5s forwards;
	-o-animation: playSlideAnim .5s forwards;
	-ms-animation: playSlideAnim .5s forwards;
	-moz-animation: playSlideAnim .5s forwards;
	-webkit-animation: playSlideAnim .5s forwards;
}

@keyframes playSlideAnim {
	100% {
		top: 430px;
	}
}
@-o-keyframes playSlideAnim {
	100% {
		top: 430px;
	}
}
@-ms-keyframes playSlideAnim {
	100% {
		top: 430px;
	}
}
@-moz-keyframes playSlideAnim {
	100% {
		top: 430px;
	}
}
@-webkit-keyframes playSlideAnim {
	100% {
		top: 430px;
	}
}


#finalAnimSprite3{
	width: 164px;
	height: 270px;
	position: absolute;
	left: 5px;
  	top: 340px;
	background: url('../images/finalAnim3.png') no-repeat;
	visibility: hidden;
}

.spriteFinalAnim3 {
  animation: playFinalAnim3 2.3s steps(55) infinite;
  -o-animation: playFinalAnim3 2.3s steps(55) infinite;
  -ms-animation: playFinalAnim3 2.3s steps(55) infinite;
  -moz-animation: playFinalAnim3 2.3s steps(55) infinite;
  -webkit-animation: playFinalAnim3 2.3s steps(55) infinite;
}

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

.moveFinalAnim2{
	-webkit-transition: -webkit-transform 5s;
  	-moz-transition: -moz-transform 5s;
  	transition: transform 5s;
	-webkit-transform: translateX(1000px);
  	-moz-transform: translateX(1000px);
  	transform: translateX(1000px);
  	transition-timing-function: linear;
}

/* Final Animation Ends Here ************************** */
/*------------------------------------------------------------ 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 ------------------------------------------------------------*/