/* Start:/styles/chram.css?17852402946201*/
.landing {
  background: url(/images/portfolio/chram/landing_bg.jpg);
  background-color: #f2f2f2;
  *zoom: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF2F2F2', endColorstr='#FF8AC8ED');
  background-image: url(/images/portfolio/chram/landing_bg.jpg), -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(242, 242, 242, 0)), color-stop(20%, rgba(215, 232, 240, 0)), color-stop(34%, rgba(215, 232, 240, 0.5)), color-stop(41%, rgba(210, 229, 243, 0.8)), color-stop(42%, #cee4f1), color-stop(48%, #c9e0ee), color-stop(49%, #c5e1ef), color-stop(52%, #c4dff0), color-stop(53%, #bfdef0), color-stop(61%, #b5d9ef), color-stop(63%, #b6d8f1), color-stop(63%, #b1daf0), color-stop(64%, #b3d9f0), color-stop(71%, #a8d4ed), color-stop(75%, #a5d2ef), color-stop(75%, #a6d3f2), color-stop(78%, #9fd0ee), color-stop(81%, #9ecfef), color-stop(81%, #9acfee), color-stop(83%, #9ccfee), color-stop(90%, #91ccee), color-stop(100%, #8ac8ed));
  background-image: url(/images/portfolio/chram/landing_bg.jpg), -webkit-linear-gradient(top, rgba(242, 242, 242, 0) 0%, rgba(215, 232, 240, 0) 20%, rgba(215, 232, 240, 0.5) 34%, rgba(210, 229, 243, 0.8) 41%, #cee4f1 42%, #c9e0ee 48%, #c5e1ef 49%, #c4dff0 52%, #bfdef0 53%, #b5d9ef 61%, #b6d8f1 63%, #b1daf0 63%, #b3d9f0 64%, #a8d4ed 71%, #a5d2ef 75%, #a6d3f2 75%, #9fd0ee 78%, #9ecfef 81%, #9acfee 81%, #9ccfee 83%, #91ccee 90%, #8ac8ed 100%);
  background-image: url(/images/portfolio/chram/landing_bg.jpg), -webkit-gradient(linear, left top, left bottom, from(rgba(242, 242, 242, 0)), color-stop(20%, rgba(215, 232, 240, 0)), color-stop(34%, rgba(215, 232, 240, 0.5)), color-stop(41%, rgba(210, 229, 243, 0.8)), color-stop(42%, #cee4f1), color-stop(48%, #c9e0ee), color-stop(49%, #c5e1ef), color-stop(52%, #c4dff0), color-stop(53%, #bfdef0), color-stop(61%, #b5d9ef), color-stop(63%, #b6d8f1), color-stop(63%, #b1daf0), color-stop(64%, #b3d9f0), color-stop(71%, #a8d4ed), color-stop(75%, #a5d2ef), color-stop(75%, #a6d3f2), color-stop(78%, #9fd0ee), color-stop(81%, #9ecfef), color-stop(81%, #9acfee), color-stop(83%, #9ccfee), color-stop(90%, #91ccee), to(#8ac8ed));
  background-image: url(/images/portfolio/chram/landing_bg.jpg), linear-gradient(top, rgba(242, 242, 242, 0) 0%, rgba(215, 232, 240, 0) 20%, rgba(215, 232, 240, 0.5) 34%, rgba(210, 229, 243, 0.8) 41%, #cee4f1 42%, #c9e0ee 48%, #c5e1ef 49%, #c4dff0 52%, #bfdef0 53%, #b5d9ef 61%, #b6d8f1 63%, #b1daf0 63%, #b3d9f0 64%, #a8d4ed 71%, #a5d2ef 75%, #a6d3f2 75%, #9fd0ee 78%, #9ecfef 81%, #9acfee 81%, #9ccfee 83%, #91ccee 90%, #8ac8ed 100%);
  background-position: bottom center, left top;
  background-repeat: no-repeat, repeat-x;
}

.line {
  position: relative;
  background: url(/images/portfolio/chram/line_head.png) no-repeat center center;
  height: 24px;
  width: 100%;
  overflow: hidden;
  margin-bottom: 24px;
}
.line:before {
  content: "";
  position: absolute;
  height: 1px;
  width: 50%;
  background: #553e2d;
  top: 50%;
  right: 50%;
  margin-right: 35px;
}
.line:after {
  content: "";
  position: absolute;
  height: 1px;
  width: 50%;
  background: #553e2d;
  top: 50%;
  left: 50%;
  margin-left: 35px;
}

.many-margin {
  margin: 56px 0 60px;
}

.design {
  background: url(/images/portfolio/chram/pattern.jpg) repeat-x top center, url(/images/portfolio/chram/mini-pattern.png) repeat-x top 176px left 0 white;
  overflow: visible;
}
.design .container-small {
  position: relative;
}
.design .popup {
  position: absolute;
  top: 437px;
  left: -127px;
  border-top: 1px solid #553e2d;
  border-bottom: 1px solid #553e2d;
  max-width: 300px;
  padding: 13px 53px 24px ;
  line-height: 210%;
  text-align: center;
  font-size: 18px;
  z-index: 5;

}
.design .popup:before{
  content: "";
  position: absolute;;
  width: 210px;
  height: 44px;
  top: -54px;
  left: 50%;
  margin-left: -105px;
  background: url(/images/portfolio/chram/popup_head.png) no-repeat;
}
.design .dis2 {
  position: relative;
  z-index: 1;
}
.design .dis3 {
  float: right;
  margin-top: -447px;
  margin-right: -167px;
  position: relative;
  z-index: 1;
}
.design .dis4 {
  margin-top: -542px;
  margin-left: -157px;
  position: relative;
  z-index: 1;
}
.design .dis5 {
  float: right;
  margin-top: -306px;
  margin-right: -82px;
  position: relative;
  z-index: 1;
}

.mobile {
  background: url(/images/portfolio/chram/pattern.jpg) repeat-x top 276px center, url(/images/portfolio/chram/mini-pattern.png) repeat-x top 452px left 0 white;
  border-top: 1px solid #fff;
  padding-bottom: 100px;
}
.mobile .container-small {
  background: #fff;
}
.mobile .left, .mobile .center, .mobile .right {
  float: left;
}
.mobile .left, .mobile .right {
  width: 24.95756%;
  position: relative;
  background: #fff;
}
.mobile .left img, .mobile .right img {
  position: relative;
  z-index: 1;
}
.mobile .left:after, .mobile .right:after {
  content: "";
  position: absolute;
  bottom: -11px;
  height: 11px;
  left: 50%;
  margin-left: -167px;
  width: 335px;
  background: url(/images/portfolio/chram/shadow_side.png) no-repeat;
}
.mobile .center {
  width: 50.08489%;
  position: relative;
}
.mobile .phone {
  position: relative;
  height: 643px;
  background: #fff;
}
.mobile .phone:after {
  content: "";
  position: absolute;
  background: url(/images/portfolio/chram/phone.png) no-repeat;
  width: 289px;
  height: 604px;
  top: 39px;
  right: 50%;
  margin-right: -218px;
  z-index: 0;
}
.mobile .phone .screen {
  position: absolute;
  z-index: 1;
  top: 127px;
  left: 50%;
  margin-left: -47px;
}
.mobile .phone .sidemenu {
  background: url(/images/portfolio/chram/sidemenu.jpg) no-repeat;
  width: 162px;
  height: 430px;
  position: relative;
  z-index: 0;
  top: 127px;
  left: 50%;
  margin-left: -231px;
}
.mobile .phone:before {
  content: "";
  position: absolute;
  bottom: -31px;
  right: 50%;
  margin-right: -328px;
  background: url(/images/portfolio/chram/shadow_main.png) no-repeat;
  width: 500px;
  height: 48px;
}

/*# sourceMappingURL=chram.css.map */
/* End */
/* /styles/chram.css?17852402946201 */