/*--------------------------------------------------
BODY
--------------------------------------------------*/
*{
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */

	}
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%;  height: 100%;}
html, button, input, select, textarea {font-family: 'FbMetropoliSans', sans-serif;color:#fff; font-weight: 100; }
form{  margin:0; }

body {margin:0; padding:0; background:#FFFFFF; font-size:18px; line-height:1.3; height: 100%;}
::-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: #000; }
a:hover{ color:  #666666; }
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;

}

input, select{ font-size: 115%; color: #7AAC3D;}

/*--------------------------------------------------
Non-Semantic Helper Classes
--------------------------------------------------*/
.ir {display:block; border:0; text-indent:-999em; overflow:hidden; background-color:transparent; background-repeat:no-repeat; text-align:left; direction:ltr; *line-height:0;}
.ir br {display:none;}
.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;}

:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder          {color: transparent}
:focus:-moz-placeholder           {color: transparent}
:focus:-ms-input-placeholder      {color: transparent}

/*--------------------------------------------------
Typography
--------------------------------------------------*/
h1{	margin: 0;	padding: 0; font-size: 4em; font-weight:  normal;direction: rtl;  line-height: 1; -webkit-text-stroke-width: 1px;
   -webkit-text-stroke-color: rgba(255,255,255,.5);  }
h2{font-size:4.000em;  font-weight:  normal;  margin: 0;	padding: 0; direction: rtl;font-family: 'Tangerine', cursive;
 color: #ba9c5d;}
h3{	margin: 0;	padding: 0; font-size:2.333em; font-weight: bold;direction: rtl; }
h4{	font-size: 1.3em; font-weight: normal;direction: rtl;	margin: 0;	padding: 0; }
h5{	font-size: 1em; font-weight: normal; text-align: right; margin: 0;direction: rtl; }
.red{ color: #C7050D; }
h1 span{ font-size: 120%;  }


/*--------------------------------------------------
Basic
--------------------------------------------------*/

#wrapper{
   width: 100%;
   height: 100%;
   text-align: center;
   margin:0 auto;
   padding:0;
   position: relative;


}
#logo{ width: 6%; position: absolute; top:0; left:100px; padding:10px 0; }
#proj_logo{  position: absolute; top:0; right:calc(5% + 100px); padding:10px 0; z-index: 9999; width: 10%;}
#logo img, #proj_logo img{ width: 100%; }

#about{ padding:0; position: relative; }
.about_text{ position: absolute; text-align: right;  direction: rtl; width: 50%; left:10%; top:0; z-index: 99; font-size: 1.25em; padding-top:1%;}
.about_slogan h2{ font-size: 130%;right:-30%; position: absolute; font-size: 6em; bottom:-55%; }


#mifrat{ background-color: #FFFFFF; padding:2.5% 5%; color: #7AAC3D; }
.mifrat_half{ display: inline-block; width: 50%; margin-left:-4px; vertical-align: top; }
 .rsABlock{ width: 45%; right:6%; top:25%; color: #3a3a3c; text-align: right; direction: rtl; }
 .mifrat_half img{ float:right; max-width: 250px; margin-left:5%;}
  .mifrat_half p{ line-height: 2; text-align: right; padding:5%; }
 .nomob{ display: block; }
 .mob{ display: none; }



.gal_hold{ float:right; width: 33.333%; padding:15px; }
.gal_hold img{  width: 100%; }
.gal_hold a{ display: block; position: relative; }
.gal_hold_inner{ overflow: hidden; position: relative; max-height: 350px;}
.gal_hold_inner a>.zoom img{ width: auto; height: auto;    min-width: initial;    min-height: initial;}
.gal_hold_inner a>.zoom{ position: absolute; top:0; text-align: center; width: 100%; height: 99%; display: block; padding-top:25%; background-color: rgba(0,0,0,.5); opacity: 0; transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; -webkit-transition:all 0.2s linear; cursor: pointer; }
 .gal_hold_inner a:hover>.zoom{ opacity: 1; }

#gallery{ padding:4% 0; }

#minisite_proj_info,#minisite_proj_info1{ background-color: #FFFFFF;padding:2.5%; direction: rtl;}
#minisite_proj_info h3,#minisite_proj_info1 h3{padding-bottom:2.5%; color: #7AAC3D;  }
#minisite_proj_info input[type="text"], #minisite_proj_info1 input[type="text"]{ width: 25%;  border:none; background-color: transparent; border-bottom:1px solid #3A3A3C; padding:7px 0;margin:2%;}
#minisite_proj_info input[type="submit"],#minisite_proj_info1 input[type="submit"]{ width: 12%; cursor: pointer; background-color: #7AAC3D; color: #fff; border:none; padding:7px; font-weight: bold; }
.ty{ max-width: 1200px; }

.mif_icons{ direction: rtl; }
.mif_icon{ display: inline-block; width: 25%; margin-left:-4px; vertical-align: top; padding:5%;  }
.mif_icon img{ width: 100%; padding:0 20%;}
.mif_icon h4{ font-size: 1.33em; padding:0; margin:0;  }
.mif_icon p{ font-size:1em; padding:0; margin:0;  }

   #nav-icon1, #nav-icon2, #nav-icon3, #nav-icon4 {
  width: 35px;
  height: 25px;
  position: relative;
  margin: auto;
  /*margin-top:30px; */
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon1 span, #nav-icon3 span, #nav-icon4 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 0px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
  top: 0px;
}

#nav-icon3 span:nth-child(2),#nav-icon3 span:nth-child(3) {
  top: 10px;
}

#nav-icon3 span:nth-child(4) {
  top: 20px;
}

#nav-icon3.open span:nth-child(1) {
  top: 10px;
  width: 0%;
  left: 50%;
}

#nav-icon3.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
  top: 10px;
  width: 0%;
  left: 50%;
}

#menu_button_holder{ z-index: 9999999; position: fixed; top:10px; right:10px; }
#menu_button{  padding:15px 10px; }
.navbar-collapse{ width: 100%; position: fixed; top: 0; right: 0; z-index: 999; }
 .navbar-nav{ list-style-type: none; background-color: #00a2ea; direction: rtl;padding:17px 0; margin:0; border-bottom:1px solid #fff; }
.navbar-nav li{ padding:10px 2.5%;  direction: rtl;  display: inline-block;  }
.navbar-nav li:last-child{ border: none; }
.navbar-nav a{ color: #fff;font-size: 1.66em;  text-decoration: none;}
 .navbar-nav{ list-style-type: none; padding-top:20vh; background-color: transparent; }
.navbar-nav li{ padding:10% 0;  direction: rtl; display: block;  }
.navbar-nav a{ color: #fff;  font-size: 1.66em;  text-decoration: none;}
   .navbar-nav{ padding-right:0%; border-bottom:none; }
   .navbar-collapse{ width:80%; }
  .navbar-nav img{ width: 100%; }

#hiddenPanel {position:fixed; top:120px; left:-170px; width:170px; height:55px; z-index: 10;}
#close-bar { position:fixed; left:50px; top:120px; width:55px; height:55px;  cursor: pointer; }

#hiddenPanel2 {position:fixed; top:190px; left:-348px; width:348px; background:#e43e3e; height:55px; z-index: 10; }
#close-bar2 { position:fixed; left:50px; top:190px;  width:55px; height:55px; cursor: pointer; }
#wapp{ position: fixed; bottom: 5vh; right:1vw; }
		#wapp {  z-index: 99999999; }
	#wapp img{ width:100px; }

 /*--------------------------------------------------
media query
--------------------------------------------------*/
@media screen and (min-width:100px) and (max-width:959px) {
#wapp img{ width:70px; }
 .nomob{ display: none; }
 .mob{ display: block; }
  #wrapper{ padding:0; }
  body {font-size:14px;}
  #about{ padding:5%; }
  #gallery{ }

  .mif_icon{ width: 50%; padding:0; }
    .mif_icon p{ display: none; }
	.mif_icons{ padding:2.5% 0 8% 0; }
  #logo{  width: 20%; z-index: 999; left:10px; top:0;}
#logo img{ width: initial; max-height: 40px; -webkit-filter: brightness(10);  filter: brightness(10);
}
  #proj_logo{ left:0; right:0; margin:0 auto; width: 40%; border-radius: 50%; background-color: #fff; overflow: hidden; padding:0; top:15px;}

.rsABlock{ width: 100%; top:initial; bottom:0; right:0; padding:0 10px;  }
.rsABlock p{ display: none; }
.rsABlock h3 a{ display: block; background-color: #BA9C5D; color: #fff; text-align: center; text-decoration: none; font-weight: 100; margin-top:10px; padding:10px 0; border-radius: 50px;  }
.rsABlock h3 a img{ -webkit-filter: brightness(10);  filter: brightness(10);  }
h1{ font-size: 2.66em; line-height: .7; }
h2{ font-size: 3em; }
.rsABlock h2{ line-height: .8; text-align: center; }
.minisite_form a{ display: block; background-color: #7AAC3D; color: #fff; text-align: center; text-decoration: none; font-weight: 100;  padding:10px 0; border-radius: 50px;  }
.about_text{ position: relative; padding:5% 2.5%;  width: 100%; left: initial; text-align: justify;}
.about_slogan h2{ right:initial; font-size: 2.66em; bottom:-15%; left:0; width: 85%; }
.mifrat_half{ width: 100%; }
.mifrat_half img{ float:none; max-width: none; width: 100%; margin:0; margin-bottom:20px; }
.gal_hold{ width: 50%; padding:10px; }
.gal_hold_inner{ max-height: 120px;}
#minisite_proj_info{ padding:10%; }
#minisite_proj_info input[type="text"]{ width: 100%; margin:2% 0; }
#minisite_proj_info input[type="submit"]{ width: 100%;margin-top:25px; padding:15px 0 }


}

@media screen and (min-width:560px) and (max-width:959px) {
 .navbar-nav li{ padding:2.5% 0;  direction: rtl; display: block;  }
}

@media screen and (min-width:960px) and (max-width:1024px) {

}

@media screen and (min-width:1025px) and (max-width:1200px) {
body {font-size:12px;}  .gal_hold_inner{ max-height: 180px;}
.about_slogan h2 {    font-size: 5em;    bottom: -39%;} .mifrat_half img{ max-width: 150px; }
.gal_hold{width: 33.3333%; }
}

@media screen and (min-width:1201px) and (max-width:1400px) {
body {font-size:14px;}  .gal_hold_inner{ max-height: 200px;}
}
@media screen and (min-width:1401px)and (max-width:1600px) {
body {font-size:16px;}   .gal_hold_inner{ max-height: 220px;}
}