/*--------------------------------------------------
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: 'Assistant', sans-serif;color:#343339; }
form{  margin:0; }

body {margin:0; padding:0; background:#fff; font-size:18px; 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: #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;
  /*background-image: url(pics/bg.jpg);*/
  background-position: center;
	background-size: cover;
	background-attachment: fixed;
}

input, select{ font-size: 115%; }

/*--------------------------------------------------
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: 1.667em; font-weight:  normal;direction: rtl;  }
h2{font-size:1.333em;  font-weight:  normal;  margin: 0;	padding: 0; direction: rtl;}
h3{	margin: 0;	padding: 0; font-size: 1.5em;font-weight: normal;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; }


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

#wrapper{
   width: 100%;

   text-align: center;
   margin:0 auto;

}
#wrapper{

background-image: url(pics/top.jpg);
  background-position: center top;
  background-size: 100%;
  background-repeat: no-repeat;

 }
 .width-wrapper {
 width: 100%;

   text-align: center;
   max-width: 1200px;
   margin:0 auto;
  }
#logo{ padding-top:10%; padding-bottom:10%; }
#logo h1{ font-weight: 900; color: #404042; font-size: 4em; }
#logo h2{ font-weight: 700; color: #404042; font-size: 3em; }

.manu{ }

.navbar-nav{ list-style-type: none; background-color:  #343339; width: 100%; /*max-width: 1200px;*/ margin:0; padding:0; margin: auto; direction: rtl; /*border-radius: 50px;*/ }
.navbar-nav li{ display: inline-block; }
.navbar-nav li a{ text-decoration: none; padding:15px; color: #fff; font-size: 1.125em; display: block; }


.main_icon_block{float:right;width:27.33%;margin:3%;}
.main_icon_block img{ width: 100%; }
.main_icon_block a{display:block;text-decoration:none;color:#1178e1;outline:none;position:relative;padding:5px;}
.main_icon_block a:hover{}

.main_icon_block a:before,
.main_icon_block a:after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';opacity:0;-webkit-transition:opacity 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, transform 0.35s;}
.main_icon_block a:before{border-top:3px solid #1178e1;border-bottom:3px solid #1178e1;-webkit-transform:scale(0,1);transform:scale(0,1);}
.main_icon_block a:after{border-right:3px solid #1178e1;border-left:3px solid #1178e1;-webkit-transform:scale(1,0);transform:scale(1,0);}
.main_icon_block a:hover:before,
.main_icon_block a:hover:after{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
.main_icon_block h3{ font-size: 1em; font-weight: bold; }

h2.title{ font-size: 2.66em; color: #1178e1; padding:2.5% 0; font-weight: bold; }
#products,#about,#price{ padding:3% 0; }

.half{ width: 50%; display: inline-block; margin-left:-4px; padding:0 10px; vertical-align: top; }
#price{ direction: rtl; }

#price input[type="text"], #price textarea{
 width: 100%;
 padding:7px; font-size: 1.125em; text-align: right;
 border:1px solid #E8E8E8;
 margin:5px 0;

 }
.send_btn{ padding:15px 0; }
.send_btn button{ padding:7px 30px; font-size: 1.33em; color: #fff; background-color: #86cbe4; border:none; cursor: pointer;}
#about{ height: 500px; overflow: hidden; background-image: url(pics/about_bg.jpg); background-position: center; background-attachment: fixed; background-size: 100%; position: relative;  width: 100%;}
#about:before{
	content: "";
	display: block;
	position: absolute;
	/*z-index: 1;   */
	width: 100%; height: 100%; top:0; left:0;
	background-color: rgba(97, 181, 230, .76);

	 }
#about h2,#about p{ position: relative; }
#about p{ color: #fff; line-height: 1.6; font-size: 1.125em; direction: rtl; padding:0 10%;}
h2.title.white{ color: #fff; }

 .nomob{ display: block; }
 .mob{ display: none; }

  .navbar-nav{ }
  .navbar-nav img{ width: 100%; }

 .toggleHolder { cursor: pointer; font-size: 2em; font-weight: normal; color: #1178e1; padding:1.5%; }
 #address{ padding:5% 0; direction: rtl; }

.address_block{ display: inline-block; margin:0 3%; text-align: center;  }
.address_icon{ width: 75px; height: 75px; background-color: #1178e1; border-radius: 50%; color: #fff; margin:0 auto }
.address_icon i{ font-size: 2em;  line-height: 75px; }
.address_info{ padding-top:15px; font-size: 1.125em; }
.address_info a{ text-decoration: none; }
.address_info a:hover{ color: #1178e1; }

  .grid2 {
	overflow: hidden;
	margin: 0;
	padding:  0;
	width: 100%;
	list-style: none;
	direction: ltr;

}
.grid2_adv {
	width: 79%;
	float: left;
}
.side_menu_adv{
   padding:15px 0;
   text-align: center;
 direction: rtl;

}
.side_menu_adv a{ display: inline-block; padding:10px; text-decoration: none; color: #FFFFFF; background-color: #0E8EC3; border-radius: 3px; }
.side_menu_adv a:hover{ background-color: #00ADEF; }
/* Common style */
.grid2 figure {
	position: relative;
	z-index: 1;
   /*	display: inline-block;    */
   float:right;
	overflow: hidden;
	margin:0;
	width: 25%;
	height: 400px;

	background: #fff;
	text-align: center;
	cursor: pointer;



}
#city_galll .grid2 figure{ height: 450px; }


.grid2 figure a {
	position: relative;
	z-index: 1;
	display: inline-block;
	overflow: hidden;
	margin: -0.135em;
	width: 100%;
	height: 376px;
	background: #fff;
	text-align: center;
	cursor: pointer;

}
.grid2 figure img {
	position: relative;
	display: block;
	opacity: 1;
	object-fit: cover;
    width: 520px;
    height: 500px;

}
 #city_galll .grid2 figure img{ position: absolute; margin:auto; top:0; bottom:0; left:0; right:0; }
.grid2 figure h2 img{ 	position: relative;   width: initial;    height: initial;  }
.grid2 figure figcaption {

	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid2 figure figcaption::before,
.grid2 figure figcaption::after {
	pointer-events: none;
}

.grid2 figure figcaption,
.grid2 figure a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid2 figure a {
	z-index: 9;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
    opacity: 0;
}

.grid2 figure h2 {
	font-weight: normal;
    color: #00ADEF;
	 opacity: 0;
	 	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;

}
.grid2 figure:hover h2 { opacity: 1;   }
.grid2 figure h2 span {
	font-weight: 800;
}

.grid2 figure h2,
.grid2 figure p {
	margin: 0;
}

.grid2 figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}


figure.effect-chico2 img {

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-chico2:hover img {

	-webkit-transform: scale(1.04);
	transform: scale(1.04);
}

figure.effect-chico2 figcaption {

}


figure.effect-chico2 figcaption::before,
figure.effect-chico2 p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-chico2 h2 {
    padding: 10px;
    text-align: center;
    font-weight: normal;
    display: inline-block;
	background: rgba(0, 0, 0, .7);
	color:#000 ;
    border-radius: 50px;
    margin: 0 auto;
    font-size: 1.125em;
	margin-top:37%;

}


figure.effect-chico2 h3{
  background: rgb(255,255,255);
  background: rgba(255,255,255,.6);
  padding:3px 20%;
  display: inline-block;
  font-size:1.333em;
  color:#000;
    margin-top: 30px;

   }

figure.effect-chico2 p {
	margin: 0 auto;
	max-width: 200px;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-chico2:hover figcaption::before,
figure.effect-chico2:hover p {
	opacity: 1;
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
#top_phone { padding-bottom:15px; }
#top_phone a{ display: block; margin:0 auto; width: 80%; background-color: #1178e1; color: #fff; font-size: 1.66em; text-decoration: none; border-radius: 12px; padding:12px; font-weight: bold; border:3px solid #fff; }

 /*--------------------------------------------------
media query
--------------------------------------------------*/
@media screen and (min-width:100px) and (max-width:959px) {
 	body { font-size: 86%; }
 .nomob{ display: none; }
 .mob{ display: block; }
 #logo h1,#logo h2{ text-shadow: 2px 2px 5px white,2px 2px 5px white,2px 2px 5px white; font-size: 150%;}
#logo{ padding:5% 0; }
#logo h1{ font-size: 300%; }
.navbar-nav li a{ padding:7px 15px; }
.main_icon_block h3{ min-height: 40px; }
#about{ height: 430px; }
.grid2 figure{ width: 50%; height: 150px; }
.grid2 figure h2{ opacity: 1; padding:0; margin-top:25%; }
.half{ width: 100%; }
#price{ padding:3% 10%; }
.address_icon{ width: 50px; height: 50px; }
.address_icon i{ line-height: 50px;  }
.address_block{ width: 25%; vertical-align: top; }

}

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

}

@media screen and (min-width:960px) and (max-width:1024px) {
 .grid2 figure{ height: 250px; }
}

@media screen and (min-width:1025px) and (max-width:1200px) {
 .grid2 figure{ height: 250px; }
}

@media screen and (min-width:1201px) and (max-width:1400px) {

}
@media screen and (min-width:1401px)and (max-width:1600px) {

}