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


	/*********************************************************************************************************/
	/*********************************************************************************************************/
			* {
			margin: 0;
			padding: 0;
			}

			html, body {
			background-color: #000000;
			height: 100%;
			width: 100%;
			}

			.TheAddress{
				position:absolute;
				width: 200px;
				top:277px;
				left: 700px;
				font-size:21pt;
				text-align:left;
				color: #D38E26;
				z-index:+10;
				font-family: 'Droid Arabic Naskh', serif;
				opacity: 0.8;
				display: none;
				}
				.Thenameofdr{
					position:absolute;
					width: 250px;
					top:277px;
					right: 700px;
					font-size:21pt;
					text-align:right;
					color: #D38E26;
					z-index:+10;
					font-family: 'Droid Arabic Naskh', serif;
					opacity: 0.8;
					display: none;
					
					}			


			#box {
				position: absolute;
				width: 100%;
				background-color: #CC0606;
				font-size: 16pt;
				color:#fffbc4;
				text-align: center;
				padding: 10px 0 10px 0;
				z-index: +200;
			}

			#container {
			position:fixed;
			top:50%;
			margin-top:-330px;
			left:50%;
			margin-left:-330px;
			/*border:2px solid red;*/
			width: 660px;
			height:660px;
			}

			#s_pointer {
			stroke:#F8BA06 ;
			stroke-width: 0.2px;
			stroke-linecap: round; 
			}

			#s-second{   
			z-index:2; 
			}

			#mmm{
			position: absolute;
			top: 205px;
			left: 256px;
			z-index:3;   				
			}

			#smole {
			position: absolute;
			top: 323.5px;
			left: 322.2px;
			width:13px;
			height:13px;
			z-index:3;
			}
			#smole:hover {	cursor: pointer;
			}

			#bigc {
			position: absolute;
			top: 312px;
			left: 311px;
			width:35px;
			height:35px;
			z-index:2;
			}

			.elmants {
			position:absolute;
			}

			.effct{
				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;
			}
		
			.effct:hover, .effct: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);
			}

			/*****************------------------------------------------------------------*/
			 #theclockbackRotate {
				border-radius: 50%;

				-webkit-animation: spin 30s linear 0s infinite reverse;
				-moz-animation: spin 30s linear 0s infinite reverse;  
				-ms-animation: spin 30s linear 0s infinite reverse;
				-o-animation: spin 30s linear 0s infinite reverse;
				animation: spin 30s linear 0s infinite reverse;
				
				-webkit-animation-play-state: paused;
				-moz-animation-play-state: paused;
				-ms-animation-play-state: paused;
				-o-animation-play-state: paused;  
				animation-play-state: paused;
			  }
			  #theclockback_image {
				width:660px;
				height:660px;
				background-image:url(../images/Circle_back.jpg);
				background-repeat:no-repeat;
				background-position:50% 50%;

				-webkit-animation: spin 60s linear 0s infinite normal;
				-moz-animation: spin 60s linear 0s infinite normal;
				-ms-animation: spin 60s linear 0s infinite normal;
				-o-animation: spin 60s linear 0s infinite normal;
				animation: spin 60s linear 0s infinite normal;
			  }
			  #container:hover #theclockbackRotate {
				-webkit-animation-play-state: running;
				-moz-animation-play-state: running;
				-ms-animation-play-state: running;
				-o-animation-play-state: running;
				animation-play-state: running;
			  }
			  @keyframes spin {
				0% { transform: rotate(360deg); }
				100% { transform: rotate(0deg); }
			  }
			  @-webkit-keyframes spin {
				0% {-webkit-transform: rotate(360deg);
				  transform: rotate(360deg);}
				100% { -webkit-transform: rotate(0deg);
				  transform: rotate(0deg);}
			  }

			  @-moz-keyframes spin {
				0% { -moz-transform: rotate(360deg); 
				  transform: rotate(360deg);}
				100% { -moz-transform: rotate(0deg);
				  transform: rotate(0deg);}
			  }
			  @-o-keyframes spin {
				0% { -o-transform: rotate(360deg); 
				  transform: rotate(360deg);}
				100% { -o-transform: rotate(0deg);
				  transform: rotate(0deg);}
			  }
			  @-ms-keyframes spin {
				0% {-ms-transform: rotate(360deg);
				  transform: rotate(360deg);}
				100% { -ms-transform: rotate(0deg);
				  transform: rotate(0deg);}
			  }
			  /*-----------------------------------------------------------------------*/

			/*-----------------12----------------------*/
			#n12 {
			position: absolute;
			top: 132px;
			left: 291px;
			z-index:3;
			}
		
			/*-------------------1--------------------*/

			#n1 {
			position: absolute;
			top: 154px;
			left: 371px;
			z-index:3;
			}	
	
			/*--------------------2-------------------*/
			#n2 {
			position: absolute;
			top: 212px;
			left: 430px;
			z-index:3;
			}	
		
			/*------------------3---------------------*/
			#n3 {
			position: absolute;
			top: 292px;
			left: 451px;
			z-index:3;
			}	
		
			/*--------------------4-------------------*/	
			#n4 {
			position: absolute;
			top: 372px;
			left: 430px;
			z-index:3;
			}	
		
			/*--------------------5-------------------*/
			#n5 {
			position: absolute;
			top: 431px;
			left: 371px;
			z-index:3;
			}	
			
			/*-------------------6--------------------*/
			#n6 {
			position: absolute;
			top: 452px;
			left: 291px;
			z-index:3;
			}	
			
			
			/*-------------------7--------------------*/
			#n7 {
			position: absolute;
			top: 431px;
			left: 211px;
			z-index:3;
			}	

			/*------------------8---------------------*/
			#n8 {
			position: absolute;
			top: 372px;
			left: 153px;
			z-index:3;
			}	
			
			
			/*-------------------9--------------------*/
			#n9 {
			position: absolute;
			top: 292px;
			left: 131px;
			z-index:3;
			}	
			
			/*--------------------10-------------------*/
			#n10 {
			position: absolute;
			top: 212px;
			left: 153px;
			z-index:3;
			}	
		
			/*------------------11---------------------*/
			#n11 {
			position: absolute;
			top: 154px;
			left: 211px;
			z-index:3;
			}	


			#black_start{
				opacity: 1;
				position: absolute;
				top: 0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
				z-index: 100;
				background-color: black;
			}

		  /***************************************************************************************************/
		  /***************************************************************************************************/