@charset "UTF-8";
/* CSS Document */

@font-face
{
font-family: droid;
font-weight:normal;
src:url('fonts/DroidSansArabic.otf'),
	url('fonts/DroidSansArabic.ttf'),
    url('fonts/DroidSansArabic.woff'); /* IE9 */
} 

body{
	background: -webkit-radial-gradient(#402211, #1a110c); /* Safari 5.1 to 6.0 */
 	background: -o-radial-gradient(#402211, #1a110c); /* For Opera 11.6 to 12.0 */
  	background: -moz-radial-gradient(#402211, #1a110c); /* For Firefox 3.6 to 15 */
  	background: radial-gradient(#402211, #1a110c); /* Standard syntax */
	font-family:droid;
}
h1{
	font-family:droid;
}

#wrapper{
	width:1024px;
	height:auto;
	margin:0 auto;
	position:relative;
}

#menu{
	width:260px;
	height:570px;
	position:absolute;
	right:0;
	z-index:10;
	background-image:url(images/menu-bg.png);
	background-repeat:no-repeat;
}

#logo{
	width:195px;
	height:170px;
	margin:10px 15px 10px 50px;
}


#page-content{
	width:925px;
	height:auto;
	min-height:660px;
	margin:20px 99px 0 0;
	float:left;
	z-index:1;
	background:url(images/page-bg2.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
}


	

#slider{
	width:680px;
	height:450px;
	float:left;
	margin:100px 40px 30px 50px;
	background-color:#fff;
	padding:10px;
}

#content{
	width:700px;
	height:auto;
	padding:60px 40px 80px 50px;
	float:left;
	font-family:droid;
	text-align:right;
}

#photo{
	width:250px;
	height:auto;
	float:left;
	margin-right:25px;
	margin-bottom:25px;
	background-color:#fff;
	padding:10px;
}
#phot-des{
	width:250px;
	height:auto;
	font-size:14px;
	font-family:droid;
	color:#000;
	text-align:right;
	margin-top:7px;
}


#photo-r{
	width:450px;
	height:auto;
	float:right;
	margin-left:25px;
	margin-top:25px;
	margin-bottom:25px;
	background-color:#fff;
	padding:10px;
}
#phot-r-des{
	width:450px;
	height:auto;
	font-size:14px;
	font-family:droid;
	color:#000;
	text-align:right;
	margin-top:7px;
}
#author{
	width:90%;
	margin:0px 3% 0 0;
	height:20px;
	line-height:20px;
	font-size:14px;
	color:#000;
	text-align:right;
	float:right;
	bottom:0;

}

@media screen and (max-width:1024px) 
 {  
 
 #wrapper{
	width:100%;/*1024*/
}

#menu{
	width:25.390625%;/*260 / 1024*/
	background-size:100% 100%;
	padding-bottom:20px;
}

#logo{
	width:75%;/*195 / 260*/
	height:auto;
	margin:3.8461538462% 5.7692307692% 3.8461538462% 19.2307692308%;/*10 15 10 50*/
}

#logo img{
	width:100%;
	height:100%;
}

#page-content{
	width:90.33203125%;/*925 / 1024*/
	height:auto;
	min-height:300px;
	padding-bottom:40px;
	margin:1.953125% 9.66796875% 0 0;/*20 99 0 0*/
}

#slider{
	width:73.5135135135%;/*680 / 925*/
	height:auto;
	margin:10.8108108108% 4.3243243243% 65px 5.4054054054%;/*100 40 0 50*/
	padding:1.0810810811%;/*10 / 925*/
}

#slider img{
	width:100%;
	height:100%;
}

#content{
	width:75.6756756757%;/*700 / 925*/
	padding:6.4864864865% 4.3243243243% 8.6486486486% 5.4054054054%;/*60 40 80 50*/
}

#photo{
	width:30%;/*250 / 700*/
	height:auto;
	margin-right:2%;
	padding:1.7%;
}
#photo img{
	width:100%;
	height:100%;
}
#phot-des{
	width:100%;
	height:auto;
}

#photo-r{
	width:50%;
	height:auto;

}
#phot-r-des{
	width:100%;
}
#photo-r img{
	width:100%;
	height:100%;
}



 }
 
 
 
 @media screen and (max-width:768px)
{
#menu{
	width:100%;/*260 / 1024*/
	min-height:400px;
	height:auto;
	background-size:100% 100%;
	padding-bottom:20px;
	background-image:url(images/menu-bg4.png);
	shadow: 0px 1px 5px #000;
}

#logo{
	width:30%;/*195 / 260*/
	height:auto;
	min-height:250px;
	margin:10px 5.7692307692% 10px 7.2307692308%;/*10 15 10 50*/
	float:right;
}

#logo img{
	width:100%;
	height:100%;
}

#page-content{
	width:100%;/*925 / 1024*/
	height:auto;
	min-height:300px;
	padding-bottom:50px;
	margin:190px 0 0 0;/*20 99 0 0*/
	float:left;
}

#slider{
	width:87%;/*680 / 925*/
	height:auto;
	margin:150px 4.3243243243% 30px 5.4054054054%;/*100 40 0 50*/
	padding:1.0810810811%;/*10 / 925*/
}

#slider img{
	width:100%;
	height:100%;
}

#content{
	width:80.6023015203%;/*700 / 925*/
	padding:6.4864864865% 4.3243243243% 90px 5.4054054054%;/*60 40 80 50*/
	margin-top:100px;
}	

#photo{
	width:40%;/*250 / 700*/
	height:auto;
	margin-right:2%;
	padding:1.7%;
}
#phot-des{
	width:100%;
	height:auto;
}	

#photo-r{
	width:50%;
	height:auto;
	margin-left:2%;
	padding:1.7%;
}
#phot-r-des{
	width:100%;
}
}
 
 
 
 @media screen and (max-width:360px)
  {
	  #logo{	
	margin:10px 5.7692307692% 10px 6.2307692308%;/*10 15 10 50*/
}

#menu{
	min-height:430px;
  }
  
#page-content{
	padding-bottom:50px;
}
  
  #content{
	margin-top:130px;
	padding:6.4864864865% 4.3243243243% 120px 5.4054054054%;/*60 40 80 50*/

}	

#slider{
	
	margin:180px 4.3243243243% 20px 5.4054054054%;/*100 40 0 50*/
}
#photo{
	width:100%;/*250 / 700*/
	height:auto;
	margin-right:0;
	margin-bottom:20px;
	padding:1.7%;
}
#phot-des{
	width:100%;
	height:auto;
}

#photo-r{
	width:100%;
	height:auto;
	margin: 0 0 20px 0;
	padding:1.7%;
}
#phot-r-des{
	width:100%;
}

}