/*--------------------------------------------------
BODY
--------------------------------------------------*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {display:block; }
audio, canvas, video {display:inline-block; *display:inline; *zoom:1; }
audio:not([controls]) {display:none; }
[hidden] {display:none; }
html {font-size:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
html, button, input,select, textarea {font-family: "font-family: Arial, Helvetica, sans-serif;", 'Arial', sans-serif;color:#444444;}
body {margin:0; padding:0; background:#f6f6f6; font-size:1em; line-height:1.3;}
::-moz-selection {background:#72a9bd; color:inherit; text-shadow:none;}
::selection {background:#72a9bd; color:inherit; text-shadow:none; }
img::selection {background:transparent;}
img::-moz-selection {background:transparent;}
a{outline: none; }
a{ color: #2C3E50; }
a:hover{ color: #2980b9; }
img {border: none;}
.f-left{float: left;}
.f-right{float: right;}
.left{text-align: left;}
.right{text-align: right;}
.center{text-align: center;}
.clear{ clear: both;}
.ib{display: inline-block;}
.rtl{direction:rtl;}
body{
	-webkit-font-smoothing: subpixel-antialiased !important;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;

}



/*--------------------------------------------------
Non-Semantic Helper Classes
--------------------------------------------------*/

.hidden {display:none !important; visibility:hidden;}
.visuallyhidden {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px;}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto;}
.invisible {visibility:hidden;}
.clearfix:before, .clearfix:after, .cf:before, .cf:after  {content:""; display:table;}
.clearfix:after, .cf:after {clear:both;}
.clearfix, .cf {*zoom:1;}
::-webkit-input-placeholder {   color: #35383d;}
:-moz-placeholder { /* Firefox 18- */   color: #35383d;}
::-moz-placeholder {  /* Firefox 19+ */    color: #35383d;}
:-ms-input-placeholder {   color: #35383d;}

/*--------------------------------------------------
Typography
--------------------------------------------------*/
h1{ font-size: 1.5em; font-weight: bold; margin:0; }
h2{font-size:1.1em; font-weight: bold;  margin: 0;}
h3{	margin: 0;	padding: 0; font-size: 1.2em;font-weight: bold; }
h4{	font-size: 1.3em; font-weight: normal; }
h5{	font-size: 1em; font-weight: normal; text-align: right; margin: 0;  padding-top:1%; }



/*--------------------------------------------------
Basic
--------------------------------------------------*/
#wrapper{

    width: 100%;

	text-align: center;
	margin:0 auto;
	 overflow: hidden;

}

#holder{ width: 92%;  margin: 0 auto;}
#holder_inner { margin:2% 0; }

/*--------------------------------------------------
header
--------------------------------------------------*/
#header{
 width:92%;
 margin: 0 auto;
 padding: 1.5% 0 2% 0;
}
#logo{
	float:right;
	width:36%;
}
#logo img{width:100%;}

#top_info{ float: left; width: 20%; text-align: right; margin-top:1%; }
#top_info div{ margin-bottom:3%; }
#top_info a{ text-decoration: none; }
#top_info img{ vertical-align: text-bottom; padding:0 1%; margin-right:2%; margin-top:1% }

#search{float: left; text-align: center; width: 70%; margin-top:2.2%;}
#search input[type="text"]{
	 width: 30%;
	 padding:.5%;
	 }
 #search input[type="submit"]{
 width: 5%;
 padding:.5%;
 background-color: #2F2F2F;
 color: #FFFFFF;
 border:1px solid #2F2F2F;
 transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; -webkit-transition:all 0.5s linear; white-space:nowrap; cursor:pointer;
 }
  #search input[type="submit"]:hover{
 background-color:#DFDFDF;
 color: #2F2F2F;
 border:1px solid #777777;

 }
.styled-select{ width: 40%; float: left; margin-top:1.5%; }
.styled-select select{
   background: #f7f7f7;
   width: 100%;
   padding: 2%;
   line-height: 1;
   border: 1px solid #c5c5c5;
   border-radius: 3px;
   direction: rtl;
   font-size: 1.2em;

   }
.styled{
   background: #fff;
   width: 100%;
   padding: 5px;
   line-height: 1;
   border: 1px solid #c5c5c5;
   border-radius: 0;

   }
#site_langs img{}
/*--------------------------------------------------
top_menu
--------------------------------------------------*/
#shaddow{ position: absolute; top:3%; left:4%; width: 92%;  z-index: 8 }
#shaddow img { width: 100%;  }
#nav{
  width: 92%;
  background-color: #0a8ece;
  text-align: center;
  margin:0 auto;
  border-radius:5px;
  /*
  position: absolute;
  top:-4%;
  left:4%;
  */
  z-index: 10;
}

#nav ul{
   margin: 0 auto;
   padding: 0;
   list-style: none;
   direction: rtl;

}
#nav li{
  display: inline-block;
   margin-right:-4px;
   /* float: right;   */
	padding:1.5% 4.9%;
	text-align: center;
	border-left:1px solid #076999;
	border-right:1px solid #66b9e0;
	transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -webkit-transition:all 0.3s linear;

}
#nav li:first-child{
	border-right:none;
}
#nav li:last-child{
	border-left:none;
}
#nav li:hover{
     background-color: #2980b9;
}
#nav a{
     color: #FFFFFF;
	 text-decoration: none;
	 font-size:110%;
}
#head{ height: 365px;margin-top: .5%; }
#head_pnim{ margin-top:.7%; }
#top_pic{ width: 64%; height: 100%; overflow: hidden; float: left;}
#top_pic img{ width: 100%; min-height: 365px;}
#top_article { width: 33%; height: 100%;  float: right; background-color: #2980b9; text-align: right; direction: rtl; padding:0 1.5%; color: #FFFFFF;}

#top_article a{ color: #FFFFFF; font-style: italic; font-weight: bold; }

#share_bttn{ margin-top:5%;}

#cat_holder{ margin-bottom:.5%; }
#cat_holder ul{ padding:0; margin:0;list-style: none; direction: rtl;  }
#cat_holder li{ float: right; width: 16.66%; padding: 1.37% 0; }
#cat_holder li a{ font-size: 1.1em; font-weight: bold; text-decoration: none; color:#fff; }


#mainBottomGallery{
	width: 100%; position: relative; clear: both;height: 300px;
}
.gall_pic{
	width: 100%;
	border-left: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
	height: 145px;
	overflow: hidden;
	background-color: #FFFFFF; }
.gall_pic img{min-height:145px; }

.gall_logo{
	width: 90%;
	border-left: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
	height: 123px;
	text-align: center;
	padding:5% 5% 0  5%;
    background-color: #FFFFFF;
	overflow: hidden;
	}
.gall_logo img{ width: 100%; vertical-align: middle; max-height: 123px;}
.cycle-slideshow { width: 100% }
.cycle-slideshow img { width: 100%;}

/*--------------------------------------------------
side_menu
--------------------------------------------------*/
#side_menu{
  text-align: right;
  margin:2% 0;
}

#side_menu ul{
   margin: 0;
   padding: 0;
   list-style: none;
   direction: rtl;

}
#side_menu li{
	padding:4% 10%;
	background-color: #d4d8db;
	border-bottom:1px solid #f2f5f5
	transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -webkit-transition:all 0.3s linear;
}
#side_menu li:hover{
	background-color: #c0c3c5;
}

#side_menu li.odd{
     background-color: #ecf0f1;
	 transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -webkit-transition:all 0.3s linear;
}
#side_menu li.odd:hover{
	background-color: #f6fbfd;
}
#side_menu li a{
   display: inline-block;
   text-decoration: none;
   color: #3c4d5e;
   font-weight: bold;
   font-size: 1.2em;
   width: 90%;
}
#side_menu li img{
   display: inline-block;

}





#pnim_menu {  text-align: right;  margin:2% 0; }

#pnim_menu ul{
   margin: 0;
   padding: 0;
   list-style: none;
   direction: rtl;

}



#pnim_menu li a{
   display:block;
   text-decoration: none;
   color: #3c4d5e;
   font-weight: bold;
   font-size: 1.2em;
   padding:4% 10%;
   	background-color: #d4d8db;
	margin-bottom:.7%;
	transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -webkit-transition:all 0.3s linear;

}
#pnim_menu li a:hover{
	background-color: #2980B9;
	color: #FFFFFF;
}

/*--------------------------------------------------
home page
--------------------------------------------------*/

#right_side{ width:21%; float: right; text-align: right; }
#center { width:96%; text-align: right; }
#center2 { width:100%; text-align: right; }

#left_side{width:78.5%; float: left; margin-right:.5%;  }
 .video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


.title{
 border-bottom: 3px solid #9e9e9e; position: relative;   margin-bottom: 3%;
}
.title h1{
padding:0;
color: #0a8ece;
background-color: #f6f6f6;
position: absolute;
left:0;
right:0;
margin:0 auto;
 top:-20px;
 width: 30%;
 }
.pas{
 border-bottom: 3px solid #9e9e9e; padding:1% 0;
}

.info_text,.info_text_home{ padding: 0;  direction: rtl; }

.more a{display:block;  font-style: italic; font-weight: bold; padding:2%; float:left; direction: rtl; color: #36a2d6;    }
.more a:hover{color: #666666;    }

#proj_contact { width: 50%; margin: auto; text-align: right; padding-top:2%; }
#proj_contact h2 { padding-bottom:2%; }
#proj_contact input[type="text"]{
  width: 96%;
  background: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #333;
  padding:5px;
  text-align: left;
  color: #333;
  outline: 0;
  font-size: 1em;
}
#proj_contact input[type="text"],#proj_contact input[type="text"]:focus{
	text-align: right;
}
#proj_contact input[type="submit"]{
float: right;
 padding:2% 3%;
 width: 99%;
 background-color: #474747;
 color: #FFFFFF;
 border: 1px solid #474747;
 font-size: 1em;
 font-weight: bold;
 cursor: pointer;
 transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; -webkit-transition:all 0.5s linear; white-space:nowrap; cursor:pointer;
}
#proj_contact input[type="submit"]:hover{
 background-color:#0A8ECE;
 color: #fff;
 border:1px solid#0A8ECE; ;
}

#proj_contact input[type="text"].code{
  width: 50%;
  padding:8px 5px;

}


.proj_phone{ padding:0 20px; font-size: 1.6em; font-weight: bold; color: #0A8ECE; text-align: center; }
.proj_phone a{ display: none; text-decoration: none; font-size: 1.5em; font-weight: bold; color: #0A8ECE;}
.proj_phone span{ display: block;}

#top_slider{ position:relative; z-index: 1; }

/*--------------------------------------------------
CONTACT PAGE
--------------------------------------------------*/

#maps{ width: 60%; float: left; padding-top:2%; }
#contact{ width: 30%; float: right; margin-top:4%; text-align: right; padding-bottom:3%; padding-right:4%; }
#contact h2{ padding:2% 0; }
#contact input[type="text"]{
  margin:1% 0;
  width: 97.5%;
  background: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #333;
  padding:5px;
  text-align: left;
  color: #333;
  outline: 0;
  font-size: 1em;
}
#contact input[type="text"],#contact input[type="text"]:focus{
	text-align: right;
}
#contact input[type="submit"]{
	 margin:1% 0;
	float:left;
 padding:2% 3%;
 width: 23%;
 background-color: #474747;
 color: #FFFFFF;
 border: 1px solid #474747;
 font-size: 1em;
 font-weight: bold;
 cursor: pointer;
 transition:all 0.5s linear; -moz-transition:all 0.5s linear; -o-transition:all 0.5s linear; -webkit-transition:all 0.5s linear; white-space:nowrap; cursor:pointer;
}
#contact input[type="submit"]:hover{
 background-color:#0A8ECE;
 color: #fff;
 border:1px solid #0A8ECEs;
}

#contact textarea{
  width: 96%;
  background: rgb(255, 255, 255);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #333;
  padding:5px;
  text-align: left;
  color: #333;
  resize: none;
  outline: 0;
  font-size: 1em;
}

#contact input[type="text"].code{
  width: 50%;
  padding:9px 5px;
  float: right;

}

#address{ width: 46%; float: left; margin-top:4%; text-align: left; }

#address a{
  color: #333;
  text-decoration: none;
  font-size: 1em;
}
#address a:hover{
  color:  #666666;
  text-decoration: underline;
  font-size: 1em;
}


.info_pic{ width: 42%; padding-right:2%; float: left;margin-top:2%; }
.info_pic img{ width: 100%;}
.info_text{ width: 50%;float: right; text-align: right; }

.p_top{ direction: rtl; }
.p_top h1{ text-align: right; padding-top:4%; color: #0A8ECE; margin-right:3%;  float: right; width: 50%;}


#proj_logo{ width: 35%; float:right; margin: 0 0 0 2%; }
#proj_logo img{ width: 100%;}

#proj_title{ color: #0A8ECE; font-size: 1.2em; font-weight: bold; margin-bottom:2%; }
#proj_text{ padding-top:2%; text-align: right; direction: rtl; float: left; width: 63%;}
#proj_text ul{ padding: 0; margin: 0; text-align: right; list-style-position: inside; }
#proj_text ul li{text-align: right; }
.proj_tab_content{ padding:2%; background-color: #fff; border:1px solid #D4D8DB; min-height:450px;}

#dgamim{ margin-top:2%; }

#tabs{width:100%;clear:both;margin:1.5% 0 2% 0;}
.full_width #tabs{width:50%;}
#tabs ul{
	list-style: none;
	display: inline;
	width:100%;

}
#tabs ul li{
float: right;
background-color: #0a8ece;
text-align: center;
width: 12%;
padding: 1% 3%;
margin-left:.2%;
}
#tabs ul li:hover{
background-color:  #2980B9;

}
#tabs ul li a{text-decoration:none;color:white;}
#captchaImg{float:left;}
#captchaImg2{float:right; margin:1% 0;}
/*--------------------------------------------------
FOOTER
--------------------------------------------------*/
#footer{
   font-size:1em;
   text-align: center;
   direction: rtl;
   text-align: right;
   clear: both;
   padding:00;
   color: #2c3e50;
   width: 92%; margin: 0 auto;


}
#footer_address{ width: 100%; text-align: center; }
#footer_social{ border-top:3px solid #9d9d9d; padding-top:2%;}


#footer_links{ padding: 0 2%;}

#footer_links ul{
 text-align: right;
 margin: 0 auto;
 width: 20%;
 float: right;
 padding:0;

}
#footer_links li{
  list-style-type: none;
  padding-left:5px;
}
#footer a{
   color: #4444;

   line-height: 1.5em;
}
#footer a:hover{
   text-decoration:none;
}
.social_icons{ padding-bottom:1%; float: left; width: 20%; text-align: left;  }



#credit{ text-align: center; clear: both; padding-top:3%; }
#credit a{ color:#2c3e50; padding:10px;}
#credit a:hover{ color:#000;}




/*-----------------------------------------------------------
PROJECT TABLE
-----------------------------------------------------------*/
table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
}

.bordered {
    border: solid #ccc 1px;
}

.bordered tr:hover {
    background: #d6e9ff;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

.bordered td, .bordered th {
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: right;
}

.bordered th {
	color: #666666;
    background-color: #DFDFDF;
    border-top: none;

}

.bordered td:first-child, .bordered th:first-child {
    border-right: none;
}

/*-----------------------------------------------------------
PROJECTS PAGE
-----------------------------------------------------------*/
#projectRow{ margin:1% 0; }
#projectRow a{text-decoration:none;}
#projectRow img{margin:0%;width: 100%; vertical-align: top;}
#projectImg{float:right;width:35%;}
#projectText{float:right;width:43%;}
#projectLogo{float:left;width:20%;}
#projectText h1,#projectText p{float:right;text-align:right;margin:2%;padding:0;} 
::-webkit-input-placeholder {
   text-align:right;
}

:-moz-placeholder { /* Firefox 18- */
   text-align:right;
}

::-moz-placeholder {  /* Firefox 19+ */   
   text-align:right;
}

:-ms-input-placeholder {  
   text-align:right;
}

.cycle-pager-active {
	color: #D69746 !important;
}
.cycle-pager span {
	font-family: arial;
	font-size: 50px;
	width: 16px;
	height: 16px;
	display: inline-block;
	color: #ddd;
	cursor: pointer;
}

/*-----------------------------------------------------------
SINGLE PROJECT PAGE
-----------------------------------------------------------*/

#list{float:right;width:45%;height:100%;}

#rSide{float:right;direction:rtl; width: 50%;}
#rSide.full_width{width: 100%;}
#lSide{float:left; width: 47%; padding-right:3%; padding-top:2.5%; }
#img img{margin-top:1%; width: 100%}
#logo{width:35%;}
#aboutProject{text-align:right;}


/*--------------------------------------------------
media query
--------------------------------------------------*/
@media screen and (min-width:100px) and (max-width:559px) {
#logo{ width:98%; }
 #nav li{padding:0% 3%;border:none;  margin:1% 0;}
 #nav a {  white-space: nowrap; display: block;}
  #top_info{ width: 100% }
 .title h1 {top: -10px; width: 50%;}
h1 {font-size: 1em;}
#holder_inner{ margin-top:7%; }
#rSide,#lSide { width: 100%; }
.proj_tab_content{ min-height: 200px;}
#tabs ul li {width: 94%;padding: 3% 3%;margin-bottom: .5%;}
#gallery{ clear: both; }
.info_pic { width:100%; }
.info_text{ width: 100%; }
#projectImg{ width: 100% }
#projectText { width: 100%}
#projectLogo{ width: 100%; }
#contact{ width: 100% }
#maps{ width: 100%; }
#shaddow{ display: none; }
#top_slider{ position: static; }
#nav{ position: static;  width: 100%}

}
@media screen and (min-width:560px) and (max-width:959px) {

#logo{ width:98%; }
 #nav li{padding:1.5% 3.1%;}
  #top_info{ width: 100% }
 .title h1 {top: -10px; width: 50%;}
h1 {font-size: 1em;}
#holder_inner{ margin-top:7%; }
#rSide,#lSide { width: 100%; }
.proj_tab_content{ min-height: 200px;}
#tabs ul li {width: 94%;padding: 3% 3%;margin-bottom: .5%;}
#gallery{ clear: both; }
.info_pic { width:100%; }
.info_text{ width: 100%; }
#projectImg{ width: 100% }
#projectText { width: 100%}
#projectLogo{ width: 100%; }
#contact{ width: 100% }
#maps{ width: 100%; }
#shaddow{ display: none; }
#top_slider{ position: static; }
#nav{ position: static;  width: 100%}
}

@media screen and (min-width:960px) and (max-width:1024px) {
 #nav li{padding:1.5% 3.3%;}
 #nav a{ font-size: 100% }
 #top_info{ width: 35% }
#logo{ width:57%; }
.title h1 {top: -10px; width: 50%;}
h1 {font-size: 1.2em;}
}

@media screen and (min-width:1025px) and (max-width:1200px) {
#nav li{padding:1.5% 3.6%;}
#top_info{ width: 30% }
#logo{ width:50%; }
.title h1 {top: -10px; width: 50%;}
h1 {font-size: 1.2em;}
}

@media screen and (min-width:1201px) and (max-width:1400px) {
#nav li{padding:1.5% 4%;}
 #top_info{ width: 22% }
#logo{ width:42%;}
}
@media screen and (min-width:1401px) and (max-width:1900px) {
#nav li{padding:1.5% 4.9%;}
}
@media screen and (min-width:1901px) {

}