/* ################# embed arabic fonts ############################### */

@font-face{
	font-family:'asmaa';
	src:url('../fonts/myfonts/asmaa/asmaa?#iefix');
	src:local('أسماء'),local('asmaa'),
	url('../fonts/myfonts/asmaa/asmaa.woff') format('woff');
}
@font-face{
	font-family:'shorooq';
	src:url('../fonts/myfonts/shorooq/shorooq.eot?#iefix');
	src:local('شروق'),local('shorooq'),
url('../fonts/myfonts/shorooq/shorooq.woff') format('woff');}
@font-face {
	font-family: "naskh";
	src: url('../fonts/myfonts/DroidNaskh/DroidNaskh-Regular.eot');
	src: url('../fonts/myfonts/DroidNaskh/DroidNaskh-Regular.woff') format("woff"), 
	url('../fonts/myfonts/DroidNaskh/DroidNaskh-Regular.ttf') format("truetype");
}
@font-face {
	font-family: "naskh-bold";
	src: url('../fonts/myfonts/DroidNaskh/DroidNaskh-Bold.eot');
	src: url('../fonts/myfonts/DroidNaskh/DroidNaskh-Bold.woff') format("woff"), 
	url('../fonts/myfonts/DroidNaskh/DroidNaskh-Bold.ttf') format("truetype");
}
@font-face {
	font-family: "kufi";
	src: url('../fonts/myfonts/DroidKufi/DroidKufi-Regular.eot');
	src: url('../fonts/myfonts/DroidKufi/DroidKufi-Regular.woff') format("woff"), 
	url('../fonts/myfonts/DroidKufi/DroidKufi-Regular.ttf') format("truetype");
}
@font-face {
	font-family: "kufi-bold";
	src: url('../fonts/myfonts/DroidKufi/DroidKufi-bold.eot');
	src: url('../fonts/myfonts/DroidKufi/DroidKufi-bold.woff') format("woff"), 
	url('../fonts/myfonts/DroidKufi/DroidKufi-Bold.ttf') format("truetype");
}


/* #################    fonts Name      ############################### */

.arial 	 	{ font-family : arial   	!important;}
.tahoma  	{ font-family : tahoma  	!important;}
.asmaa 	 	{ font-family : asmaa   	!important;}
.shorooq 	{ font-family : shorooq 	!important;}
.naskh      { font-family : naskh 		!important;}
.naskh-bold { font-family : naskh-bold  !important;}
.kufi 		{ font-family : kufi  		!important;}
.kufi-bold 	{ font-family : kufi-bold 	!important;}


/* #################   font-weight     ############################### */

.b400{	font-weight: 400 !important;}
.b500{	font-weight: 500 !important;}
.b600{	font-weight: 600 !important;}
.b700{	font-weight: 700 !important;}

/* #################    font-Size      ############################### */

.s10{ font-size: 10px !important;}
.s11{ font-size: 11px !important;}
.s12{ font-size: 12px !important;}
.s13{ font-size: 13px !important;}
.s14{ font-size: 14px !important;}
.s15{ font-size: 15px !important;}
.s16{ font-size: 16px !important;}
.s17{ font-size: 17px !important;}
.s18{ font-size: 18px !important;}
.s19{ font-size: 19px !important;}
.s20{ font-size: 20px !important;}
.s21{ font-size: 21px !important;}
.s22{ font-size: 22px !important;}
.s23{ font-size: 23px !important;}
.s24{ font-size: 24px !important;}
.s25{ font-size: 25px !important;}
.s26{ font-size: 26px !important;}
.s27{ font-size: 27px !important;}
.s28{ font-size: 28px !important;}
.s29{ font-size: 29px !important;}
.s30{ font-size: 30px !important;}


/* #################    bg color      ############################### */

.bgred 	   { background-color: #8A0707 !important;}
.bgblue    { background-color: #1B83BB !important;}
.bgyellow  { background-color:#FFFF6A  !important;}
.bgwhite   { background-color:#FFFFFF  !important;}
.bgblack   { background-color:#222222  !important;}
.bggreen   { background-color:#008F00  !important;}
.bggray    { background-color:#5E5E5E  !important;}
.bgbrown   { background-color:#f1a30a  !important;}
.bgsite    { background-color:#3f4342  !important;}


/* #################    margin       ############################### */

.m5   {	margin: 		 5px  !important;}
.mr5  {	margin-right: 	 5px  !important;}
.ml5  {	margin-left:  	 5px  !important;}
.mt5  {	margin-top:   	 5px  !important;}
.mb5  { margin-bottom:   5px  !important;}

.m-5  {	margin: 		-5px  !important;}
.mr-5 { margin-right: 	-5px  !important;}
.ml-5 { margin-left: 	-5px  !important;}
.mt-5 { margin-top: 	-5px  !important;}
.mb-5 { margin-bottom: 	-5px  !important;}

.m10  { margin:        	10px  !important;}
.mr10 { margin-right:  	10px  !important;}
.ml10 { margin-left:   	10px  !important;}
.mt10 { margin-top:    	10px  !important;}
.mb10 { margin-bottom: 	10px  !important;}

.m-10 { margin: 	   -10px  !important;}
.mr-10{ margin-right:  -10px  !important;}
.ml-10{ margin-left:   -10px  !important;}
.mt-10{ margin-top:    -10px  !important;}
.mb-10{ margin-bottom: -10px  !important;}

.m15  { margin: 		15px  !important;}
.mr15 { margin-right: 	15px  !important;}
.ml15 { margin-left: 	15px  !important;}
.mt15 { margin-top: 	15px  !important;}
.mb15 { margin-bottom:  15px  !important;}

.m-15 { margin: 		-15px !important;}
.mr-15{ margin-right: 	-15px !important;}
.ml-15{ margin-left: 	-15px !important;}
.mt-15{ margin-top: 	-15px !important;}
.mb-15{ margin-bottom:  -15px !important;}

.m20  {	margin: 		 20px !important;}
.mr20 { margin-right:  	 20px !important;}
.ml20 { margin-left:  	 20px !important;}
.mt20 { margin-top: 	 20px !important;}
.mb20 { margin-bottom: 	 20px !important;}

.m-20 { margin: 		-20px !important;}
.mr-20{ margin-right: 	-20px !important;}
.ml-20{ margin-left: 	-20px !important;}
.mt-20{ margin-top: 	-20px !important;}
.mb-20{ margin-bottom: 	-20px !important;}


/* #################    padding      ############################### */

.p5  {  padding: 		5px   !important;}
.pr5 {  padding-right: 	5px   !important;}
.pl5 {  padding-left: 	5px   !important;}
.pt5 {  padding-top: 	5px   !important;}
.pb5 {  padding-bottom: 5px   !important;}

.p-5 { 	padding: 		-5px  !important;}
.pr-5{  padding-right:  -5px; !important}
.pl-5{  padding-left:   -5px; !important}
.pt-5{  padding-top:    -5px; !important}
.pb-5{  padding-bottom: -5px; !important}

.p10 {  padding: 		10px  !important;}
.pr10{  padding-right: 	10px  !important;}
.pl10{  padding-left: 	10px  !important;}
.pt10{  padding-top: 	10px  !important;}
.pb10{  padding-bottom: 10px  !important;}

.p-10 {  padding: 		 -10px  !important;}
.pr-10{  padding-right:  -10px  !important;}
.pl-10{  padding-left:   -10px  !important;}
.pt-10{  padding-top: 	 -10px  !important;}
.pb-10{  padding-bottom: -10px  !important;}

.p15 {  padding: 		 15px  !important;}
.pr15{  padding-right: 	 15px  !important;}
.pl15{  padding-left: 	 15px  !important ;}
.pt15{  padding-top: 	 15px  !important ;}
.pb15{  padding-bottom:  15px  !important ;}

.p-15 {  padding: 		 -15px  !important;}
.pr-15{  padding-right:  -15px  !important;}
.pl-15{  padding-left: 	 -15px  !important;}
.pt-15{  padding-top: 	 -15px  !important;}
.pb-15{  padding-bottom: -15px  !important;}

.p20 { 	padding: 		 20px  !important;}
.pr20{  padding-right:   20px  !important;}
.pl20{  padding-left: 	 20px  !important;}
.pt20{  padding-top:  	 20px  !important;}
.pb20{  padding-bottom:  20px  !important;}

.p-20 {  padding: 		 -20px  !important;}
.pr-20{  padding-right:  -20px  !important;}
.pl-20{  padding-left: 	 -20px  !important;}
.pt-20{  padding-top: 	 -20px  !important;}
.pb-20{  padding-bottom: -20px  !important;}


/*#########################  start site Css  #########################################*/

/*custom navbar for mobile size and logo change*/

body {
    font-family: naskh-bold;
    font-size: 12px;
    line-height: 30px;
    
}
body a {
    font-family: shorooq;
    font-size: 16px;
}


.affix-top{
	background-color: #420000;
}




.navbar-default.affix {
        
        background-color: #420000;
    }

    .navbar-default .navbar-header .navbar-brand {
        font-size: 14px;
        color: #f05f40;
        width: 300px;
        height: 60px;
        background-image: url(../img/hd-logo.png);
        background-position: center;
        background-repeat: no-repeat;
        
        
        
        
    }
    .navbar-default.affix .navbar-header .navbar-brand {
        font-size: 14px;
        color: #f05f40;
        width: 300px;
        height: 60px;
        background-image: url(../img/hd-logo.png);
        background-position: center;
        background-repeat: no-repeat
    }

    .navbar-default.affix .navbar-header .navbar-brand:hover,
    .navbar-default.affix .navbar-header .navbar-brand:focus {
        color: #eb3812;
    }

    .navbar-default.affix .nav > li>a,
    .navbar-default.affix .nav>li>a:focus {
        /*color: #222;*/
        color:rgb(230, 203, 135);
    }

    .navbar-default.affix .nav > li>a:hover,
    .navbar-default.affix .nav>li>a:focus:hover {
        /*color: #f05f40;*/
        color: #fff;
    }
    
@media(max-width:320px) {
   .navbar-default .navbar-header .navbar-brand {
        font-size: 14px;
        color: #f05f40;
        width: 250px;
        height: 60px;
        background-image: url(../img/hd-logo.png);
        background-position: center;
        background-repeat: no-repeat
        
        
        
    }
    .navbar-default.affix .navbar-header .navbar-brand {
        font-size: 14px;
        color: #f05f40;
        width: 250px;
        height: 60px;
        background-image: url(../img/hd-logo.png);
        background-position: center;
        background-repeat: no-repeat
    }
    
    
    
    .header-content{
    	margin-top:60px;	
    }
 }
 
@media(max-width:767px) {
.header-content{
    	margin-top:60px;	
    }
}


/*######################### shadwo for items ################################*/


.img-rounded
{
    border: 5px solid #FFFFFF;
    position:relative;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.img-rounded:before, .img-rounded:after
{
	content:"";
    position:absolute; 
    z-index:-1;
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:0;
    bottom:0;
    left:10px;
    right:10px;
    border-radius:100px / 10px;
} 
.img-rounded:after
{
    right:10px; 
    left:auto; 
    transform:skew(8deg) rotate(3deg);
}




/* change fonts and size of public tags like h1 h2 p  div  ...*/
h1,.h1 {font-size: 30px;  font-family:  shorooq; margin-top: 5px; margin-bottom: 5px;}
h2,.h2 {font-size: 22px;  font-family:  shorooq; margin-top: 5px; margin-bottom: 5px;}
h3,.h3 {font-size: 18px;  font-family:  shorooq; margin-top: 5px; margin-bottom: 5px;}
h4,.h4 {font-size: 18px;  font-family:  shorooq; margin-top: 5px; margin-bottom: 5px;}
h5,.h5 {font-size: 16px;  font-family:  shorooq; margin-top: 5px; margin-bottom: 5px;}
h6,.h6 {font-size: 14px;  font-family:  shorooq; margin-top: 5px; margin-bottom: 5px;}

li{ font-size: 12px; line-height: 30px; margin-right:15px; margin-left:15px;}
ol, ul{ margin-top:5px; margin-bottom:10px;}

/*h2,h3,h4,h5,h6,.h2,.h3,.h4,.h5,.h6 {  font-family: kufi;}*/
p,.p {  text-indent: 0px; padding: 5px; font-size: 12px; line-height: 30px;}*/

p > h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6  {
	color: #0476ce;
	line-height: 30px
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6  {
	
}