@charset "utf-8";
/**** By Mustafa Mahmoud Shaker ****/
@font-face {
  font-family: 'Droid Arabic Naskh';
  font-style: normal;
  font-weight: 400;
  src:url(font/DroidNaskh-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Droid Arabic Naskh';
  font-style: normal;
  font-weight: 700;
  src:url(font/DroidNaskh-Bold.ttf) format('truetype');
}

*:fullscreen
*:-ms-fullscreen,
*:-webkit-full-screen,
*:-moz-full-screen {
   overflow: auto !important;
}

	* {    
		margin: 0;
		padding: 0;
	}
          
    html, body {
		background-color: #6691f1; 
		height: 100%;
		width: 100%;
	}
	#js-box {
		position: absolute;
		width: 100%;
		background-color: #CC0606;
		font-size: 16pt;
		color:#fffbc4;
		text-align: center;
		padding: 10px 0 10px 0;
		z-index: +200;
		}
	.texteffect{
		color:#fffbc4;
		font-family: 'Droid Arabic Naskh', serif;
	} 
	
	#border_On_background_vertical {
		position:fixed ;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 1%, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 85%, rgba(0,0,0,0.95) 99%, rgba(0,0,0,1) 100%);
		background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.95) 1%,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,0.95) 99%,rgba(0,0,0,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.95) 1%,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,rgba(0,0,0,0.95) 99%,rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
		z-index: 3;
	}
	#border_On_background_horizontal {
		position:fixed ;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 1%, rgba(0,0,0,0) 7%, rgba(0,0,0,0) 93%, rgba(0,0,0,0.95) 99%, rgba(0,0,0,1) 100%);
		background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.95) 1%,rgba(0,0,0,0) 7%,rgba(0,0,0,0) 93%,rgba(0,0,0,0.95) 99%,rgba(0,0,0,1) 100%);
		background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.95) 1%,rgba(0,0,0,0) 7%,rgba(0,0,0,0) 93%,rgba(0,0,0,0.95) 99%,rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 );
		z-index: 3;
	}		
	#background_image {
		position:fixed ;
		background: url("../images/page/1.png") no-repeat fixed;
		-webkit-background-size:cover;
		-moz-background-size:cover;
		-o-background-size:cover;
		background-size:cover;
		top:0;
		bottom:0;
		left: 0;
		right: 0;
		z-index: 2;
		display: none;
	}

	#background_geadient{
		opacity: 0;
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 1;
		background: rgb(62,62,62);
		background: -moz-linear-gradient(top, rgba(62,62,62,1) 0%, rgba(102,145,241,1) 50%, rgba(255,255,255,1) 100%);
		background: -webkit-linear-gradient(top, rgba(62,62,62,1) 0%,rgba(102,145,241,1) 50%,rgba(255,255,255,1) 100%);
		background: linear-gradient(to bottom, rgba(62,62,62,1) 0%,rgba(102,145,241,1) 50%,rgba(255,255,255,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e3e3e', endColorstr='#ffffff',GradientType=0 );
	}

	#black_start{
		opacity: 1;
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 100;
		background-color: black;
	}
	
	/********************************************** Move ********************************************/
			
     div#move {
		position: fixed;
		z-index: 3;
	}
		/*----------------- text side hint-----------------*/


		#textside1 {

		position:absolute;
		top:24px;
		line-height: 30px !important;
		direction: rtl;
		font-size:12pt;
		z-index:+5;
		display: none; 
		}

		#textside2 {
		position:absolute;
		top:462px;
		direction: rtl;
		font-size:12pt;
		z-index:+5;
		display: none;  
		}
		#textside3 {
		position:absolute;
		top:462px;
		direction: rtl;
		font-size:12pt;
		z-index:+5;
		display: none;  
		}
		#textside4 {
		position:absolute;
		top:462px;
		direction: rtl;
		font-size:12pt;
		z-index:+5;
		display: none;  
		}
		#textside5 {
		position:absolute;
		top:462px;
		direction: rtl;
		font-size:12pt;
		z-index:+5;
		display: none;  
		}
		#textside6 {
		position:absolute;
		top:462px;
		direction: rtl;
		font-size:12pt;
		z-index:+5;
		display: none;  
		}
		#textside7 {
		position:absolute;
		top:462px;
		direction: rtl;
		font-size:12pt;
		z-index:+5;
		display: none;  
		}
		#textside8 {
		position:absolute;
		top:462px;
		direction: rtl;
		font-size:12pt;
		z-index:+5;
		display: none;  
		}
		#textside9 {
		position:absolute;
		top:462px;
		direction: rtl;
		font-size:12pt;
		z-index:+5;
		display: none;  
		}
		#textside10 {
		position:absolute;
		top:462px;
		direction: rtl;
		font-size:12pt;
		z-index:+5;
		display: none;  
		}
		#textside11 {
		position:absolute;
		top:462px;
		direction: rtl;
		font-size:12pt;
		z-index:+5;
		display: none;  
		}
		#textside12 {
		position:absolute;
		top:462px;
		direction: rtl;
		font-size:12pt;
		z-index:+5;
		display: none;  
		}		   
			
					/*---------------------------end of the textside ------------------*/
/*------------------------text main------------*/
	#textmean1 {
		position:absolute;
		top:64px;
		right: 86.2px;
		line-height: 24.2px !important;
		/*line-height: 165%;*/
		font-size:12pt;
		text-align:right;
		direction: rtl;
		z-index:+5;
	}
	#textmean2 {
		position:absolute;
		top:64px;
		right: 86.2px;
		line-height: 24.2px!important;
		font-size:12pt;
		text-align:right;
		direction: rtl;
		display: none;
		z-index:+5;
	}
	#textmean3 {
		position:absolute;
		top:64px;
		right: 86.2px;
		line-height: 24.2px!important;
		font-size:12pt;
		text-align:right;
		direction: rtl;
		display: none;
		z-index:+5;
	}
	#textmean4 {
		position:absolute;
		top:64px;
		right: 86.2px;
		line-height: 24.2px!important;
		font-size:12pt;
		text-align:right;
		direction: rtl;
		display: none;
		z-index:+5;
	}
	#textmean5 {
		position:absolute;
		top:64px;
		right: 86.2px;
		line-height: 24.2px!important;
		font-size:12pt;
		text-align:right;
		direction: rtl;
		display: none;
		z-index:+5;
	}
	#textmean6 {
		position:absolute;
		top:64px;
		right: 86.2px;
		line-height: 24.2px!important;
		font-size:12pt;
		text-align:right;
		direction: rtl;
		display: none;
		z-index:+5;
	}
	#textmean7 {
		position:absolute;
		top:64px;
		right: 86.2px;
		line-height: 24.2px!important;
		font-size:12pt;
		text-align:right;
		direction: rtl;
		display: none;
		z-index:+5;
	}
	#textmean8 {
		position:absolute;
		top:64px;
		right: 86.2px;
		line-height: 24.2px!important;
		font-size:12pt;
		text-align:right;
		direction: rtl;
		display: none;
		z-index:+5;
	}
	#textmean9 {
		position:absolute;
		top:64px;
		right: 86.2px;
		line-height: 24.2px!important;
		font-size:12pt;
		text-align:right;
		direction: rtl;
		display: none;
		z-index:+5;
	}
	#textmean10 {
		position:absolute;
		top:64px;
		right: 86.2px;
		line-height: 24.2px!important;
		font-size:12pt;
		text-align:right;
		direction: rtl;
		display: none;
		z-index:+5;
	}
	#textmean11 {
		position:absolute;
		top:64px;
		right: 86.2px;
		line-height: 24.2px!important;
		font-size:12pt;
		text-align:right;
		direction: rtl;
		display: none;
		z-index:+5;
	}
	#textmean12 {
		position:absolute;
		top:64px;
		right: 86.2px;
		line-height: 24.2px!important;
		font-size:12pt;
		text-align:right;
		direction: rtl;
		display: none;
		z-index:+5;
	}

/*-------------------------------end of text main ---------------------------*/

/*-------------------------------3d back ---------------------------*/

		.The_move_panel_3d{
			-webkit-font-smoothing:antialiased;
			-o-font-smoothing:antialiased;
			-moz-font-smoothing:antialiased;
			-ms-font-smoothing:antialiased;
		}

		.front{
			overflow:hidden;
		}

		#back_for_back_3d{
			position:absolute;
			height: 592px;
			width: 393px;
			background-color:#6691f1;
			opacity: 1;
			border-radius: 27px; 
			left:116px;
			top:37px;
			z-index: 10;
			display: none;
		}
		#back_Under_3dtext{
			position:absolute;
			height: 100%;
			width: 100%;
			border-radius: 27px; 
			background-color:#ffffff;
			opacity: 0.6;
		}

		.back_For_the_3d_address{
			position: absolute;;
			overflow:hidden;
			display: none;
		}


/*---------------------------------------*/
		#address_full{
			width: 393px;
			z-index: 11;
			position:absolute;
			text-align: center;
			top:61px;
			right: 40px;
			font-size:25pt;
			color: black;
			opacity:0;
			font-family: 'Droid Arabic Naskh', serif;
		}

		#strok_for3d_back{
			position:absolute;
			height: 562px;
			width: 363px;
			border: solid 1px black;
			opacity: 0.4;
			border-radius: 20px; 
			left:14px;
			top:14px;
			display: none;
			
		}

		#cycle_3d{
			position:absolute;
			top: 125px;
			right:153px;
			border-radius: 50%;
			background-image:url(../../Main-Page/images/Mushtaq.jpg) ;
			background-size: 160px; 
			height: 150px;
			width: 150px;
			opacity: 0;
			border: solid 2px #07118F;
			padding: 8px;
			-ms-background-clip: content-box;
			-moz-background-clip: content-box;
			-webkit-background-clip: content-box;
			background-clip:content-box;
			z-index: 11;

			}
				/**************************text about **************/

		.black_p_text_about{
			color: black;
			font-weight: normal;
		}
		#text_for_about{
			height: 306px;
			width: 343px;
			/*border: solid 1px red;*/
			z-index: 11;
			position:absolute;
			top:304px;
			right: 65px;
			font-size:10.5pt;
			text-align:center;
			color: #07118F;
			direction: rtl;
			opacity: 0;
			font-weight: bold;
			font-family: 'Droid Arabic Naskh', serif;
		}
	
		a:link,a:visited {
			cursor:pointer;
			letter-spacing: 2px;
			text-decoration: none;
			color: black;
			font-weight: normal;
			}

		a,p::-webkit-selection{
			background-color: rgba(0, 0, 0, 0.14);
		}
		a,p::-o-selection{
			background-color: rgba(0, 0, 0, 0.14);
		}
		a,p::-ms-selection{
			background-color: rgba(0, 0, 0, 0.14);
		}  
		a,p::-moz-selection{
			background-color: rgba(0, 0, 0, 0.14);
		  }
		a,p::selection {
			background-color: rgba(0, 0, 0, 0.14);
		}


		/*-------------------------------end 3d back ---------------------------*/

		#lines{
			position: absolute;
			height: 592px;
			top:37px;	
			left:120px;
			fill:none;
			stroke:#5f5c34;
			stroke-width:1.3;
			opacity: 0.7;
			z-index: +2;
		}

  		#backtext{
			position: absolute;
			height: 592px;
			top:37px;	
			left:116px;
			fill:black;
			opacity: 0.8;
			z-index: 1;
		}
	
		#forstopmove{
			position:absolute;
			height: 592px;
			width: 393px;
			background-color:black;
			opacity: 0.5;
			border-radius: 27px; 
			left:116px;
			top:37px;
			z-index: 2;
			display: none;
		}

 		#shadow_for_backtext{	
			position:absolute;
			height: 592px;
			width: 393px;
			border-radius: 29px; 
			left:116px;
			top:37px;
			-webkit-box-shadow: 0px 0px 30px 0.5px black ;
			-moz-box-shadow: 0px 0px 30px 0.5px black ;
			-ms-box-shadow: 0px 0px 30px 0.5px black ;
			-o-box-shadow: 0px 0px 30px 0.5px black ;
			box-shadow: 0px 0px 30px 0.5px black ;		
		}
 		#back_base_size{
			height: 592px;
			width: 550px;
			z-index: -1;
		}
			/********************************************** Hint and textside **********************************************/
	#hint {
			position: absolute;
			/* right: 70px ;*/
			top:37px;	
			height: 592px;
			z-index: -1;
			display: none;
	            }
	.vsidetext{
			width: 463px;
			right: 86px;		
			}
	.hsidetext_longwidth_inv1{
			width: 678px;
			left: 138px ;		
			}
	.hsidetext_longwidth1{
			width: 655px; 
			right: 86px;
			}

	#back_hint {
			position:absolute;
			height: 100%;
			width: 100%;
			border-radius: 27px; 
			opacity: 0.8;
			background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.84) 29%, rgba(0,0,0,0.59) 52%, rgba(0,0,0,0) 100%);
			background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0.84) 29%,rgba(0,0,0,0.59) 52%,rgba(0,0,0,0) 100%);
			background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0.84) 29%,rgba(0,0,0,0.59) 52%,rgba(0,0,0,0) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 );
			z-index:-1;
		}

	#back_hint_inv {
			position:absolute;
			height: 100%;
			width: 100%;
			border-radius: 27px; 
			opacity: 0.8;
		
			background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.84) 71%, rgba(0,0,0,1) 100%);
			background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.84) 71%,rgba(0,0,0,1) 100%);
			background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0.84) 71%,rgba(0,0,0,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 );	
			z-index:-1;
			display: none;
		}

	.ilne_hint_table_vsidetext{
			position: absolute;	
			top: -447px;
			left: -86px;
			opacity: 0.6;
			-ms-writing-mode: tb-rl; 
			-webkit-writing-mode: tb-rl;
			writing-mode: tb-rl;  
			-webkit-writing-mode: vertical-rl;
			-moz-writing-mode: vertical-rl;
			-ms-writing-mode: vertical-rl;
			-o-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
	}

	.line_hint_vsidetext{
			width:2px;
  			height: 532px;
  			background-color:#5f5c34;
			margin: 13px;
	}

	.ilne_hint_table_hsidetext_long{
			position: absolute;	
  			top: 12px;
  			right: -13px;
			opacity: 0.6;
	}

	.line_hint_hsidetext_long{
			width:255px;
			height: 2px;
			background-color:#5f5c34;
			margin: 13px;
	}
	.textside_long_inv {
			right:32px;
		}
	.textside_long {
			position: absolute;
			right: 370px;
		}	
	.textside {
			left: 111px;
		}	

	.rotate{
			height: 100px;
			width: 532px;
			-o-transform: rotate(-90deg); 
			-ms-transform: rotate(-90deg); 
			-webkit-transform: rotate(-90deg); 
			-moz-transform: rotate(-90deg);
			transform: rotate(-90deg);
			-o-transform-origin: bottom left;
			-ms-transform-origin: bottom left;
			-webkit-transform-origin: bottom left;
			-moz-transform-origin: bottom left;
			transform-origin: bottom left;
	}

		/**********************************************End textside and hint**********************************************/
				
		.butoneffect{
			z-index: +12;
			}
		.hover {
			cursor:pointer;
			position:relative;
			-ms-transition: all .3s ease-in-out;
			-moz-transition: all .3s ease-in-out;
			-webkit-transition: all .3s ease-in-out;
			transition: all .3s ease-in-out;
			-moz-box-shadow: 0px 0px 135px 100px #000000 ;
			-webkit-box-shadow: 0px 0px 135px 100px #000000 ;
			box-shadow: 0px 0px 135px 100px #000000 ;
			display:inline-block;
			border-radius: 8px; 
			z-index: 100;
			 
			}

		.hovert {
			position:relative;
			-ms-transition: all .6s ease-in-out;
			-moz-transition: all .6s ease-in-out;
			-webkit-transition: all .6s ease-in-out;
			transition: all .6s ease-in-out;
			display:inline-block;
			}

		.longtext{
			-webkit-word-spacing:-3px;
			-moz-word-spacing:-3px;
			 word-spacing:-3px;
			 -webkit-letter-spacing:-0.2px;
			 -moz-letter-spacing:-0.2px;
			 letter-spacing:-0.2px;
			 }

			 /* ----------------------- move end ---------------------------------------------------------------------*/

	/* ----------------------------------------- side right-------------------------------------*/

			#side_right{
				 position:relative;
				 height: 100%;
                 width: 250px;
				 margin-left:auto;
				 z-index:+6;
				 }
	 /*--------------------------- TheAddress-----------------------*/
		.TheAddress{
		position:absolute;
		width: 250px;
		top:14px;
		font-size:21pt;
		text-align:center;
		/* direction: rtl;*/
		color: #6691f1;
		z-index:+10;
		font-family: 'Droid Arabic Naskh', serif;
		opacity: 0;
		cursor: pointer;
		/*border: solid 1px red;*/
		}
		#Address1 {
		left: 0;
		}
		#Address2 {
		left: 0;
		}					   
	/*----------------------- end TheAddress----------------------*/
			/*----------------------  the button to move side right ------------------*/

	#click_For_side_right_OUT{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right:0px;
		-webkit-border-radius: 13px 0px 0px 13px;
		-moz-border-radius: 13px 0px 0px 13px;
		border-radius: 13px 0px 0px 13px;
		height: 70px;
		width: 30px;		
		cursor:pointer;
		background-color:black;
		opacity: 0.2;
		z-index: 20;
		display: none;
					}

	#click_For_side_right_IN{
		position: absolute;
		top: 50%;
		-o-transform:  translateY(-50%);
		-ms-transform:  translateY(-50%);
		-webkit-transform:  translateY(-50%);
		-moz-transform:  translateY(-50%);
		transform: translateY(-50%);
		-moz-border-radius: 0px 13px 13px 0px;
		-webkit-border-radius: 0px 13px 13px 0px;
		border-radius: 0px 13px 13px 0px;
		left:3px;
		height: 70px;
		width: 30px;
		cursor:pointer;
		background-color:#6691f1;
		opacity: 0.4;
		z-index: 3;
		}
		
	#mod_scren_in{
		background-color:black;
		-moz-border-radius: 0px 13px 13px 0px;
		-webkit-border-radius: 0px 13px 13px 0px;
		border-radius: 0px 13px 13px 0px;
		opacity: 0.3;
		height: 100%;
		width: 100%;
		display: none;
	}
	#arrow_in{
		position: relative;
		top: 50%;
		left: 5px;
		-o-transform:  translateY(-50%);
		-ms-transform:  translateY(-50%);
		-webkit-transform:  translateY(-50%);
		-moz-transform:  translateY(-50%);
		transform: translateY(-50%);

	}
	#arr2_in{
		width: 19px;
		height: 2px;
		position: absolute;
		top: -6px;
		background: black;
		-webkit-transform: rotateZ(45deg)   ;
		-o-transform:  rotateZ(45deg)   ;
		-ms-transform:   rotateZ(45deg)   ;
		-moz-transform:  rotateZ(45deg)   ;
		transform: rotateZ(45deg)   ;
	}
	#arr1_in{

		width: 19px;
		height: 2px;
		position: absolute;
		top: 6px;
		background: black;
		-webkit-transform: rotateZ(-45deg)   ;
		-o-transform: rotateZ(-45deg)   ;
		-ms-transform:  rotateZ(-45deg)   ;
		-moz-transform: rotateZ(-45deg)   ;
		transform: rotateZ(-45deg)   ;
	}
	#arrow_out{
		position: absolute;
		top: 26px;
		left: 13px;
	}
	#arr2_out{
		width: 2px;
		height: 19px;
		position: absolute;
		top: -6px;
		background: #6691f1;
		-webkit-transform: rotateZ(45deg)   ;
		-o-transform:  rotateZ(45deg)   ;
		-ms-transform:   rotateZ(45deg)   ;
		-moz-transform:  rotateZ(45deg)   ;
		transform: rotateZ(45deg)   ;

	}
	#arr1_out{
		width: 2px;
		height: 19px;
		position: absolute;
		top: 6px;
		background:#6691f1;
		-webkit-transform: rotateZ(-45deg)   ;
		-o-transform: rotateZ(-45deg)   ;
		-ms-transform:  rotateZ(-45deg)   ;
		-moz-transform: rotateZ(-45deg)   ;
		transform: rotateZ(-45deg)   ;
		/* -webkit-transform-origin: 0 0 0;
		transform-origin: 0 0 0;*/
	}
		/*---------------------- End the button to move side right ------------------*/
			#back_under_side_right {
			position:absolute;
			height: 100%;
			width: 100%;
			background-color:black;
			opacity: 0.6;
			z-index:-2;
				}
			#backline{
			position: absolute;	
			width:3px ;
  			height: 100%;
  			background-color:#6691f1;
  			top: 0px;
  			left: 0px;
			opacity: 0.5;	
			}

				 /* ----------------------------- start control button --------------------------------*/
			#table_for_botton_control{
			position:absolute;
			top:72px;
			left: 36px;
			/*	width: 186px;
			height: 310px;*/
				}
			.td_of_botton_table {
			position:relative;
			padding-right: 90px;
			padding-bottom: 90px;
			/*border: solid 1px #6691f1;*/
			}

			.style_botton_control{
			position:absolute;
			border-radius: 50%;
			background-color:#6691f1;
			height: 70px;
			width: 70px;
			opacity: 0.5;
			border: solid 3px #6691f1;
			padding: 4px;
			-ms-background-clip: content-box;
			-moz-background-clip: content-box;
			-webkit-background-clip: content-box;
			background-clip: content-box;
			/*border: 5px solid #6691f1;*/
			cursor:pointer;
			display: inline-block;
			vertical-align: middle;
			-webkit-transform: perspective(1px) translateZ(0);
			transform: perspective(1px) translateZ(0);
			-webkit-transition-duration: 0.8s;
			transition-duration: 0.8s;
			}

			.style_botton_control:hover, .style_botton_control:focus {
			-webkit-transform: scale(0.8);
			transform: scale(0.8);
			-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
			transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
			}

			.border_effect_click{
			position:absolute;
			top: 7px;
			left:7px;
			border-radius: 50%;
			height: 64px;
            width: 64px;
			opacity: 0.7;
			border: solid 3px #6691f1;
			z-index:-1;
			display: none;
			}


				 /*------------------------ text_for_botton_right_side  ---------*/
				.text_for_botton_right_side{
				text-align: center;
				position:absolute;
			    top:17px;
			  	right:1px; 
				line-height: 130%;
				opacity: 0.7;
				font-size:13pt;
			  	direction: rtl;
				color:black;
				font-weight: bold;
				font-family: 'Droid Arabic Naskh', sans-serif;
				z-index: +1;   
						}
				/*--------------------------- end text_for_botton_right_side ---------------*/
				 
	 /* ----------------------------- end start control button --------------------------------*/

		/*--------------------------  modenight   --------------------------------*/
			#modenight {
			position:absolute;
			height: 100%;
			width: 100%;
			background-color:black;
			opacity: 0.7;
			display: none;
			z-index:3;
			}
			#modenightFor3D {
			position:absolute;
			height: 100%;
			width: 100%;
			background-color:black;
			opacity: 0.5;
			display: none;
			z-index:3;
			}
			#modenighthint {
			position:absolute;
			height: 100%;
			width: 100%;
			background-color: black;
			border-radius: 27px; 
			opacity: 0.6;
			display: none;
			z-index:1;
			}
		/*-------------------------- end modenight   --------------------------------*/
			#hideside{
			position: absolute;
			height: 100%;
			width: 1px;			
			top: 0px;
			right: 0px;
			z-index: +6;				
			}

			/*--------------------------   GIF   --------------------------------*/
				#gif1  {
				position:absolute;
				width: 247px;		
   				left: 3px;
				bottom:0px;
				opacity: 0.0;
				z-index: -2;
					}
				#gif2 {
				width: 247px;	
				position:absolute;
				left: 3px;
				bottom: 0px;
				opacity: 0.7;
				z-index: -2;
					}
			/*--------------------------  end GIF   --------------------------------*/

			/*------------------------------left sidde--------------------*/
			#side_left{
			position: absolute;
			height: 100%;
			width: 100px;
			top: 0px;
			margin-right:auto;
			z-index:+5;
			display: none;
			}

			#back_left {
			position:absolute;
			height: 100%;
			width: 100%;
			background-color:black;
			opacity: 0.3;
			z-index:-2;
				
			}
			#backline_left {
			position: absolute;	
			width:3px ;
  			height: 100%;
  			background-color:#6691f1;
  			top: 0px;
  			right: 0px;
			opacity: 0.3;	
				
			}

	#mumber_clock{
		position: absolute; 
		height: 95%;
		top:2%;
		right: 79px;
	}

	.num_td{
		width: 60px;
		cursor:pointer;
		display: inline-block;
		vertical-align: middle;
		-webkit-transform: perspective(1px) translateZ(0);
		transform: perspective(1px) translateZ(0);
		-webkit-transition-duration: 0.8s;
		transition-duration: 0.8s;
	}

	.num_td:hover, .num_td:focus {
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
	}

	#mumber_clock td{
		position: absolute;
	}

	#n4{
		position:absolute;
		border-radius: 50%;
		height: 55px;
		width: 55px;
		border: solid 2px #6691f1;
	}

			/*------------------------------ end left sidde--------------------*/