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

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

body {
    font-family: 'GEDinarOne-Medium'!important;
    margin:0px;
	padding:0px;
}

*{
	outline:0;
	border:none;
}
a {
   outline: 0;
}
 
 .overlay-how-to-play {
        position: fixed;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.98);
        z-index: 1001;
        top: 0;
    }
    
.how-toplay-txt {
        text-align: center;
        margin-top: 5%;
    }

.how-toplay-txt img {
    text-align: center;
    left: 0;
    right: 0;
    margin: 0 auto;
}


.wrap-images{
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 55%;
    background: #000;
    margin-top: 30px;   
    
}


.wrap-images div {
    float: left;
    width: 31%;
}



.wrap-images div:first-child{
    margin-right: 20px;
}
.wrap-images div:last-child{
    margin-left: 20px;
}

.wrap-images div img {
    max-width: 100%;
    display: inline-block;
    width: 100%;
}


.skip-btn-wrp {
    width: 98.5%;
    margin-top: 20px;
    float: left;
}

.skip-btn-wrp a {
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    background-image: url(../images/skip-ar.png);
    background-position: top center;
    background-repeat: no-repeat;
    width: 178px;
    height: 75px;
    background-size: 100%;
}

.skip-btn-wrp a:hover {
    background-image: url(../images/skip-hover-img-ar.png);
    background-position: top center;
    background-repeat: no-repeat;
}

.game_h1{ width:100%; padding:0px; margin:0px; margin:0 auto; height:50px;}
.game_h1 img{ width:auto; height:45px;}

.game_h1_5{ width:100%; padding:0px; margin:0px; margin:0 auto;height:50px;}
.game_h1_5 img{ width:auto; height:45px;}
.lang-en{display:inline-block;}
.lang-en a { display:inline-block; background-image:url(../images/lang-en.png); background-position: top center; background-repeat:no-repeat; width:128px; height:54px; background-size:100% }
.lang-en a:hover { background-image:url(../images/lang-en-hover.png); background-position:top center; background-repeat:no-repeat;}
.lang-ar{display:inline-block;}
.lang-ar a { display:inline-block; background-image:url(../images/lang-ar.png); background-position: top center; background-repeat:no-repeat; width:128px; height:54px; background-size:100% }
.lang-ar a:hover { background-image:url(../images/lang-ar-hover.png); background-position:top center; background-repeat:no-repeat;}



/*@media only screen and (orientation:portrait){
  body { 
    height: 100vw;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
   
  }
}
@media only screen and (orientation:landscape){
 body { 
     -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
  }
}
*/
/************* splash Screen*************/
.splash-pg-bg
{
	background-image:url(../images/splash-screenbg.jpg);
	background-position:center bottom;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
	
}

.logo_splash {
    left: 30%;
    position: absolute;
    top: 5%;
}
.splash-content{position:absolute; display:none; left:16%; width:60%; text-align:center;top:25%;left: 0;right: 0;margin: 0 auto; z-index:99999;}
.splash-content p{font-size:14px; width:auto; text-align:center; color:#16275c; padding:0 0%;}
.splash-content h1 img { width:60%; height:auto;}
.intro_content{ position:relative; width:100%;}
.intro_content img { width:80%; height:auto;}
.splash_sc1{
	position:absolute;
	top:0px;
	right:0px; 
	text-align:right;
	
 	}


.splash_sc2{
	position:absolute;
	bottom:0px;
	right:0px;
	text-align:right;

	}
	
.splash_sc3{position:absolute;bottom:0px;right:25%; text-align:right; }
.splash_sc4{position:absolute;bottom:0px;left:21%;  text-align:left;}
.splash_sc5{position:absolute;bottom:0px;left:0%;  text-align:left;}

.splash_sc6{position:absolute;top:0px;left:0%; }
.splash_sc1 img{ width:70%; height:auto;}

.splash_sc2 img{ width:100%; height:auto;}
.splash_sc3 img{ width:100%; height:auto;}
.splash_sc4 img{ width:100%; height:auto;}
.splash_sc5 img{ width:100%; height:auto;}
.splash_sc6 img{ width:100%; height:auto;}
.close-page{ display:none;}
/*********** Paint Screen ************************/
.game-pg-bg
{
	background-image:url(../images/game_page_bg.jpg);
	background-position:center bottom;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
	
}

#wrapper{display:block;}
h1{   font-family: 'GESSTextBold-Bold'; font-size:30px; color:#5fb3eb; margin:0px; /*padding-bottom:5px; padding-top:15px;*/  padding-top:8px; text-align:center;}
h2{   font-family: 'GEDinarOne-Medium'!important; font-size:16px; color:#636363; margin:0px; text-align:center; font-weight:normal}

.game-stroy-area
{
	width:950px;
	margin:0 auto;
	position:relative;
	margin-top:20px;
	
}
.story-bg { float:left; width:850px;  height:620px; background-image:url(../images/game_page_bg_1.png); background-size:cover; background-repeat:no-repeat; background-position:top center;}
.story-bg > img
{
	width:100%;
	height:auto;
}
.color-pallete{ float:left; width:100px; position:relative;left:-18px;margin-top:60px;}
.color-pallete-pos{ position:absolute;top:10%; left:25%;}
.clear{clear:both}
.story_game_pos{ position:absolute; width:850px; top:13%; left:25px;}
.story_game_l{ float:left;width:70%; position:relative;}
.story_game_r{ float:left; width:27%;}
.right_head{  font-family: 'GEDinarOne-Medium'!important; color:#f6005a; font-size:18px; padding-bottom:15px; background-image:
url(../images/other_story_line.png); background-position:bottom center; background-repeat:no-repeat; text-align:center;background-size:37%; padding-top:10%;
}
.other_stories_thumb { padding-top:25px;}
.other_stories_thumb ul { margin:0px; padding:0px;}
.other_stories_thumb ul li{  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin:0px; margin-bottom:15px; margin-right:15px; border-radius:5px; border:1px solid #e5e6e4; list-style:none; width:40%; float:left; opacity:0.5; position:relative;}
.other_stories_thumb ul li img{ width:100%; height:auto; display:block; }
.other_stories_thumb ul li.active{ opacity:1;border:1px solid #e5e6e4;} 
.other_stories_thumb ul li.current{ opacity:1;border:1px solid #37b1de;} 
.next-thumb
{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 15;
  top: 0%;
  left:0%;
  display:block;
  vertical-align:middle;
  
  background-color: rgba(255,255,255, 0.6);
  line-height:60px;
  font-size:12px;
  font-family:Arial, Helvetica, sans-serif;
  text-align:center;
  color:#000;
  font-weight:bold;
  background-image:url(../images/lock.png);
  background-position:50% 50%;
  background-repeat:no-repeat;
  background-size:28%;
  
  
}
.next-thumb img { width:90px!important; height:auto!important; display:table-cell;}
.brush-holder
{
	background-image:url(../images/color/brush_open.png); width:60px; height:44px; background-position:top center; background-repeat:no-repeat;
	margin-left:15px;
}
.razor-holder
{
	background-image:url(../images/color/razor-holder.png); width:60px; height:51px; background-position:top center; background-repeat:no-repeat;
	margin-left:15px; margin-top:8px;
}

.brush-holder-1
{
	background-image:url(../images/color/brush_open.png); width:60px; height:44px; background-position:top center; background-repeat:no-repeat;
	margin-left:5px;
	background-size:80%;
}
.razor-holder-1
{
	background-image:url(../images/color/razor-holder.png); width:60px; height:51px; background-position:top center; background-repeat:no-repeat;
	margin-left:5px; margin-top:8px;
	background-size:80%;
}


.color_options
{
	padding-top:5px; width:105px;
}
.color_options ul
{
	margin:0px;
	padding:0px;
}
.color_options ul li
{
	list-style:none;
	width:50%;
	text-align:center;
	float:left;
	margin-bottom:-10px;
}
.hideDesktop{ display:none;}
.fill-area{ padding-top:2%}

.drawing_map{ /* width:500px;height:auto; padding-top:15px;*/}
.game-canvas{width:95%; height:385px;text-align:center;}
.page_number{ display:none;}
.color-pallet-open{ display:none;}
.color-pallete-mobile{ display:none;}
.play-now a { display:block; background-image:url(../images/play_btn_normal-ar.png); background-position: top center; background-repeat:no-repeat; width:180px; height:58px; background-size:100% }
.play-now a:hover { background-image:url(../images/play_btn_hover-ar.png); background-position:top center; background-repeat:no-repeat;}
.paint-mfclogo {
    left: 67px;
    position: absolute;
    top: 11px;
    width: 100px;
}
.paint-mfclogo > img {
    height: auto;
    width: 100%;
}
.jnr_logo
{
	text-align:center;
}
#svgarea{ min-height:400px;    margin-top: 100px;}
.game-save{width:auto; text-align: center; padding-top:12px;}
.other-game-no{float:right; width:auto; text-align:left; display:none;}
.share-button{ width:auto;padding-top:15px;}

.save-img a { display:block; background-image:url(../images/save-img-ar.png); background-position: top center; background-repeat:no-repeat; width:140px; height:46px; background-size:100% }
.save-img a:hover { background-image:url(../images/save-img-hover-ar.png); background-position:top center; background-repeat:no-repeat;}


.share-img a { display:block; background-image:url(../images/share_btn-ar.png); background-position: top center; background-repeat:no-repeat; width:140px; height:48px; background-size:100%; margin-top:10px;}
.share-img a:hover { background-image:url(../images/share-btn-hover-ar.png); background-position:top center; background-repeat:no-repeat;}

.clear-img a { display:block; background-image:url(../images/clear_image_btn-ar.png); background-position: top center; background-repeat:no-repeat; width:140px; height:46px; background-size:100%; margin-top:10px;}
.clear-img a:hover { background-image:url(../images/clear_btn_hover-ar.png); background-position:top center; background-repeat:no-repeat;}

.fb-img{ float:left; }
.fb-img a {display:inline-block; background-image:url(../images/fb_btn_normal.png); background-position: top center; background-repeat:no-repeat; width:55px; height:46px; background-size:100%; margin-top:10px;}
.fb-img a:hover { background-image:url(../images/fb_btn_hover.png); background-position:top center; background-repeat:no-repeat;}
.twitter-img{  float:left;  }
.twitter-img a { display:inline-block; background-image:url(../images/twitter_btn_normal.png); background-position: top center; background-repeat:no-repeat; width:55px; height:46px; background-size:100%; margin-top:10px;}
.twitter-img a:hover { background-image:url(../images/twitter_btn_hover.png); background-position:top center; background-repeat:no-repeat;}


.game_h2{ padding-bottom:15px; margin-top:5px;}
.game_h2 img{ width:70%; height:auto} 
.share-with { width:120px; margin:0 auto;}
.share-with p{ font-size:13px; text-align:center; text-transform:uppercase; color:#494949; margin:0px; padding-top:10px;}
#mainsharebtn{  font-size:14px; color:#666;}
.div_save_btn{  font-size:14px; color:#666;}
.sound-option{ position:absolute; right:-5px; top:-50px;}
.sound-option img{ width:120px; height:auto}
@media (min-width: 320px) and  (max-width: 767px){
	.game-pg-bg
{
	background-image:url(../images/game_page_bg_1_mob.jpg);
	background-position:center bottom;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
	
}	
.hideMob{display:none}
.game-stroy-area{ margin:0px; width:100%;}
.story-bg{ float:none; width:100%; text-align:center; height:auto;}
.color-pallete{ display:none}
.color-pallete-mobile{ background-image:url(../images/coller-pallete_desktop_mob.png); background-repeat:no-repeat;
 background-position:right; width:60px; height:223px; position:fixed; top:20%; right:0px; text-align:right; z-index:9999; display:block;}
 .color_pallete_icons{ padding-top:15px; text-align:center; width:100%;display:block;}
 .color_pallete_icons img {
    height: auto;
    padding-bottom: 10px;
	padding-left:0px;
    width: 75%;
}
.story_game_l {
    float: none;
    position: relative;
    width: 100%;
}

.right_head {
    font-size: 18px;
    padding-bottom: 10px;
    padding-top: 6%;
    text-align: center;
	width:20%;
	background-size:50%;
	 float:left;
}
.story_game_r {
    bottom: -200px;
    float: none;
    position: fixed;
    width: 100%;
	background-image:url(../images/story_pages_bg_mob.png);
	background-position:top center;
	background-repeat:no-repeat;
	z-index:99999!important;
}
.other_stories_thumb{ float:left; width:80%;}
.story_game_pos{ width:100%; left:0px;top:0px;padding-bottom:50px;}
.other_stories_thumb ul li{ width:14%; margin-right:10px;}
.story_game_l h2{ width:50%; margin:0 auto;}
.drawing_map{ width:100%;}
.page_number{ display:inline;font-size:20px; padding-top:0px; text-align:right; color:#9c9c9c; 


}

#svgarea{ /*min-height:150px;*/}
.banner-btn-1{top:40px!important;}
.page_number strong{color:#051244; font-weight:normal; opacity:0.4 }
.color-pallet-open{ display:block; background-image:url(../images/coller-pallete_desktop_mobOpen.png); background-size:95%; background-position:right; background-repeat:no-repeat;
position:fixed; bottom:7%; right:-800px; width:100%; height:auto; z-index:999999; padding-top:10px; padding-right:10px;}
.color-pallet-open ul{ padding:0px; margin:0px;}
.color-pallet-open ul li{ list-style:none; display:inline-block; width:7%;}
.color-pallet-open ul li img{ width:100%; height:auto;}
.splash_sc1 img{ width:30%; height:auto;}

.splash_sc2 img{ width:40%; height:auto;}
.splash_sc3 img{ width:40%; height:auto;}
.splash_sc4 img{ width:40%; height:auto;}
.splash_sc5 img{ width:40%; height:auto;}
.splash_sc6 img{ width:40%; height:auto;}
/*.splash-content p { display:none;}*/

.play-now img { width:40%; height:auto;}


.logo_splash { position:relative; padding-top:15px; left:auto; top:auto; width:auto; text-align:center;}
.logo_splash img{ width:100px; height:auto;}
.splash-content {
    left: auto;
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 5%;
    width: 65%;
}
.close-page {
    position: absolute;
    right: 13px;
    top: 45px;
	display:block;
}
.next-thumb
{
	line-height:45px;
}

	

}

@media (min-width: 320px) and  (max-width: 480px){
	
	.game-save{ position:absolute; bottom:0%;left:10px; }
	.other-game-no{ position:absolute; bottom:0%; right:20px; display:block;}
	.mob_logo{ position:absolute; top:10px; text-align:center; width:100%;}
	
	.color-pallete-mobile{ z-index:999999!important;}
	.color-pallet-open{ top:40%; z-index:9999!important; bottom:auto;}
	
	.color-pallet-open ul{ margin-left:6%;}
	.color-pallet-open ul li{ width:6%;}
	.story_game_r{ z-index:999999!important; height:120px;}
	.story_game_pos{ padding-bottom:0px;}
	.game-controls{ padding-top:15%;}
	.story-bg{ text-align:left;}
	.drawing_map{ width:90%; height:240px;}
	.fill-area{ padding-top:2%;}
	
	.right_head{ width:100%; padding-top:15px;}
	.other_stories_thumb{ text-align:center; width:90%; padding-left:10%;}
	.close-page{ top:25px;}
	.game-canvas{ width:100%; height:auto;}
	.game_h2 img{ width:70%; height:auto; margin:0 auto;} 
}

@media (min-width: 481px) and  (max-width: 667px){
	.drawing_map{ height:225px;}
	.game-controls{ position:relative;}
	.game-save{ position:absolute; bottom:30px;left:10px;}
	.other-game-no{ position:absolute; bottom:20px; right:10px; display:block;}
	.mob_logo{ position:absolute; top:10px; left:20px;}
	.paint_a7{ display:none;}
	.color-pallete-mobile{ z-index:999999!important;}
	.color-pallet-open{ top:50%; z-index:9999!important; bottom:auto;}
	
	.color-pallet-open ul{ margin-left:10%;}
	.story_game_r{ z-index:999999!important}
	.story_game_pos{ padding-bottom:0px;}
	h1
	{
		margin:0px;
		padding:0px;
		height:auto;
	}
	.fill-area{ padding-top:1%;}
	.hide-mobile{ display:none;}
	.game_h2{ padding:0px; font-size:15px;}
	.game-canvas{ width:100%; height:235px;}
	.play-now{ margin-top:0%;}
	.game_h2 img{ width:75%; height:auto; margin:0 auto;} 
	.splash-content p{ margin-top:10%;}
}
@media (min-width: 668px) and  (max-width: 767px){
	.drawing_map{ height:280px; margin-top:5px;}
	.game-controls{ position:relative;}
	.game-save{ position:absolute; bottom:30px;left:10px;}
	.other-game-no{ position:absolute; bottom:30px; right:10px; display:block;}
	.mob_logo{ position:absolute; top:10px; left:20px;}
	.paint_a7{ display:none;}
	.color-pallete-mobile{ z-index:999999!important;}
	.color-pallet-open{ top:46%; z-index:9999!important; bottom:auto;}
	
	.color-pallet-open ul{ margin-left:10%;}
	.story_game_r{ z-index:999999!important}
	.story_game_pos{ padding-bottom:0px;}
	h1
	{
		margin:0px;
		padding:0px;
		height:auto;
	}
	.fill-area{ padding-top:1%;}
	.hide-mobile{ display:none;}
	.game_h2{ padding:0px; font-size:15px;}
	.game-canvas{ width:100%; height:270px;}
	.play-now{ margin-top:0%;}
	.game_h2 img{ width:75%; height:auto; margin:0 auto;} 
}
@media (min-width: 300px) and  (max-width: 390px){
	
	.fill-area
	{
		padding-top:1%;
	}
	.page_number
	{
		bottom:-35px;
	}
}
@media (min-width: 768px) {
.mob_logo{ display:none}
}
@media (min-width: 1400px) {
.game-stroy-area
{
	/*width:950px;*/
	width:90%;
	max-width:90%;
	
}
.story-bg {width:90%; min-height:800px;}
.story_game_pos{ width:100%; left:0px;}
.story_game_l{ width:60%;}
.story_game_pos{ top:16%;}
.game-canvas #mysvg2
{
	width:100%;
	height:500px;
}
.paint-mfclogo
{
	left:160px;
	top:30px;
}
.color-pallete
{
	top:150px;
}

.game_h1 svg
{
	width:40%;
	height:auto;
}
h2{ font-size:22px;}
.right_head
{
	font-size:30px;
}
/*.save-img{ display:inline-block; margin-right:15px; float:left;}

.share-img{ display:block; clear:both;}
.clear-img{ display:inline-block; float:left; }*/

.clear-img a{ padding:0px; margin:0px; }
.game-save{ width:100%; margin:0 auto; margin-bottom:10px;}
.save-img, .clear-img, .share-img{ display:block; float:none;}
.save-img a{ width:200px; height:66px;}
.clear-img a{ width:200px; height:66px;}
.share-img a{ width:200px; height:66px;}
.next-thumb
{
	
}
}

@media (min-width: 2000px) {
.game-stroy-area
{
	/*width:950px;*/
	width:80%;
	
	
}
.story-bg {width:90%;height:1150px;}
.game-canvas #mysvg2
{
	width:100%;
	height:750px;
}
.save-img img{ width:180px; height:59px;}
.clear-img img{ width:180px; height:59px;}
.large-color_pallete{ width:216px; height:800px;}
.color_options{ padding-top:25px; width:135px;}
.color_options img{ width:90%; height:auto;}
.color_options ul li{ margin-bottom:5px;}
.color-pallete-pos{ top:10%; left:45%;}
.right_head { font-size:44px; padding-top:7%;}
.brush-holder
{
	width:90px;
	height:66px;
	background-size:90px;
}
.brush-holder img
{
	width:90px;
	height:66px;
}
.razor-holder
{
	width:90px;
	height:77px;
	background-size:90px;
}
.razor-holder img
{
	width:90px;
	height:77px;
}
}

@media only screen and (orientation:portrait){
  #wrapper, #overlay { 
    
  -webkit-transform: rotate(90deg);
    -webkit-transform-origin: left top;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: left top;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: left top;
    -o-transform: rotate(90deg);
    -o-transform-origin: left top;
    transform: rotate(90deg);
    transform-origin: left top;
height:100vw;
width:100vh;
    position: absolute;
    top: 0;
    left: 100%;
    white-space: nowrap;    
 
  }

    
}
@media screen and (orientation:landscape) {
  #wrapper, #overlay {
   -webkit-transform: rotate(0deg);
     -moz-transform: rotate(0deg);
     -o-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     transform: rotate(0deg);
	 display:inline;
	 height:100vh;
width:100vw;
	 }
}

.story_game_r{
  top: 70px;
  position: relative;
}