html, body, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, .overlay .inner_info h1, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
  font-size: 100%;
  font-style: normal;
  outline: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

html, body {
  height: 100%;
  width: 100%; }

body {
  line-height: 1; }

ol, ul {
  list-style-type: none; }

blockquote, q {
  quotes: none; }
  blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

@font-face {
  font-family: "open_sans_semibold";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/open_sans_semibold.eot");
  src: url("fonts/open_sans_semibold.eot?") format("eot"), url("fonts/open_sans_semibold.woff") format("woff"), url("fonts/open_sans_semibold.ttf") format("truetype"), url("fonts/open_sans_semibold.svg#open_sans_semibold") format("svg"); }
@font-face {
  font-family: "gotham_probold";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/gotham_probold.eot");
  src: url("fonts/gotham_probold.eot?") format("eot"), url("fonts/gotham_probold.woff") format("woff"), url("fonts/gotham_probold.ttf") format("truetype"), url("fonts/gotham_probold.svg#gotham_probold") format("svg"); }
@font-face {
  font-family: "gotham_promedium";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/gotham_promedium.eot");
  src: url("fonts/gotham_promedium.eot?") format("eot"), url("fonts/gotham_promedium.woff") format("woff"), url("fonts/gotham_promedium.ttf") format("truetype"), url("fonts/gotham_promedium.svg#gotham_promedium") format("svg"); }
@font-face {
  font-family: "gotham_problack";
  font-style: normal;
  font-weight: normal;
  src: url("fonts/gotham_problack.eot");
  src: url("fonts/gotham_problack.eot?") format("eot"), url("fonts/gotham_problack.woff") format("woff"), url("fonts/gotham_problack.ttf") format("truetype"), url("fonts/gotham_problack.svg#gotham_problack") format("svg"); }
/*@font-face {*/
    /*font-family: 'GothamBook';*/
    /*src: url('gothambook.eot');*/
    /*src: url('gothambook.eot') format('embedded-opentype'),*/
         /*url('gothambook.woff') format('woff'),*/
         /*url('gothambook.ttf') format('truetype'),*/
         /*url('gothambook.svg#GothamBook') format('svg');*/
/*}*/


.clearfix:before, .clearfix:after {
  content: "";
  display: table; }

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

.sprite {
  background-image: url("../img/bg/sprite.png");
  background-repeat: no-repeat; }

.start {
  position: fixed; 
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 18px solid #b0b0af;
  /*background: #f0f0ef;*/
  background: url('/img/start_bg.jpg');
  background-size: cover;
  z-index: 10;
  display: none; }
  .start img {
    position: absolute;
    top: 50%;
    margin-top: -85px;
    left: 50%;
    margin-left: -112px;
    display: none; }

.wrapper {
  width: 100%;
  height: 100%;
  position: relative; }

.inner_wrapper {
  position: relative;
  height: 100%;
    padding-top: 65px;
    box-sizing: border-box;
}
  .inner_wrapper.contacts {
    background: url("../img/bg_contacts.jpg") center no-repeat;
    background-size: cover; }

.navigation {
    background: #f3f2f2!important;
    color: white;
  position: absolute;
  width: 100%;
  height: 65px;
  top: 0px;
  left: 0;
  z-index: 6;
  box-shadow: 0 2px 5px #9f9fa0; }
  @media screen and (max-width: 640px) {
    .navigation {
      text-align: center;
      display: none;
      top: 0;
      height: auto; } }

.lang {
  display: block;
  float: right;
  margin: 27px 28px 0 0;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  color: #5a5a5b;
  font-weight: 700;
  font-family: gotham_problack; 
  font-size: 15px; }
  .lang:hover {
    color: #bfbdbd; }
  @media screen and (max-width: 960px) {
    .lang {
      margin: 35px 15px 0 0;
      font-size: 12px; } }
  @media screen and (max-width: 768px) {
    .lang {
      margin: 28px 15px 0 0;
      font-size: 11px; } }
  @media screen and (max-width: 480px) {
    .lang {
      margin: 28px 20px 0 0; } }
  @media screen and (max-width: 640px) {
    .lang {
      float: none;
      margin: 20px 0 0 0;
      font-size: 15px;
      position: absolute;
      left: 20px;
      font-weight: 700;
      font-family: gotham_problack; } }

.main_nav, .works_list {
  float: left;
  margin: 27px 0 0 30px;
  width: 29%; }
  @media screen and (max-width: 854px) {
    .main_nav, .works_list {
      margin: 35px 0 0 20px; } }
  @media screen and (max-width: 768px) {
    .main_nav, .works_list {
      margin: 27px 0 0 15px;
      width: 28%; } }
  @media screen and (max-width: 640px) {
    .main_nav, .works_list {
      float: none;
      margin: 40px auto 35px;
      width: 215px;
      line-height: 35px; } }
  .main_nav li, .works_list li {
    float: left; }
    @media screen and (max-width: 640px) {
      .main_nav li, .works_list li {
        height: 35px;
        line-height: 35px;
        float: none; } }
    .main_nav li a, .works_list li a {
      display: block;
      text-transform: uppercase;
      text-decoration: none;
      font-weight: 700;
      font-family: gotham_problack;
      font-size: 15px; }
      @media screen and (max-width: 960px) {
        .main_nav li a, .works_list li a {
          font-size: 12px; } }
      @media screen and (max-width: 768px) {
        .main_nav li a, .works_list li a {
          font-size: 11px; } }
      @media screen and (max-width: 640px) {
        .main_nav li a, .works_list li a {
          font-size: 15px; } }
      .main_nav li a span, .works_list li a span {
        margin: 0 5px; }
        @media screen and (max-width: 768px) {
          .main_nav li a span, .works_list li a span {
            margin: 0 2px; } }
        @media screen and (max-width: 640px) {
          .main_nav li a span, .works_list li a span {
            display: none; } }

.works_list {
  width: 61%;
  margin: 27px 0 0 0px; }
  @media screen and (max-width: 640px) {
    .works_list {
      margin: 10px auto 20px;
      width: 215px; } }
  .works_list li {
    margin: 0 10px; }
    @media screen and (max-width: 960px) {
      .works_list li {
        margin: 0 8px; } }
    @media screen and (max-width: 854px) {
      .works_list li {
        margin: 0 5px; } }

.logo {
  width: 175px;
  height: 55px;
  display: block;
  position: absolute;
  top: 30px;
  left: 25px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 5; }
  @media screen and (max-width: 540px) {
    .logo {
      width: 153px;
      height: 48px;
      top: 25px;
      left: 25px; } }

.nav_button {
  position: absolute;
  background-position: -18px 0;
  right: 20px;
  top: 20px;
  width: 18px;
  height: 16px;
  z-index: 5;
  cursor: pointer; }
  @media screen and (max-width: 640px) {
    .nav_button {
      z-index: 7;
      top: 5px;
      right: 5px; } }

.works_pages .navigation {
  background: #f3f2f2; }
  @media screen and (max-width: 640px) {
    .works_pages .navigation li {
      border-top: 2px dashed #8a8fd0; }
      .works_pages .navigation li:first-child {
        border-top: 0; } }
  .works_pages .navigation li span {
    color: #cfcecd; }
  .works_pages .navigation li a {
    color: #5a5a5b; }
    .works_pages .navigation li a:hover, .works_pages .navigation li a.current {
      color: #545aa8; }
.works_pages .logo {
  background-image: url("../img/logo.png"); }
.works_pages .nav_button {
  background-position: -18px 0; }
.works_pages .generalblock, .works_pages .block_projects {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%; }
.works_pages .bislideshow, .works_pages .inner_page {
  list-style: none;
  width: 97%;
  height: 95%;
  top: 0;
  left: 0;
  z-index: 0;
  padding: 0;
  margin: 20px 0 0 22px; }
  .works_pages .bislideshow li, .works_pages .inner_page li {
    position: absolute;
    width: 101%;
    height: 101%;
    top: -0.5%;
    left: -0.5%;
    opacity: 0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    transition: opacity 1s; }
    .works_pages .bislideshow li img, .works_pages .inner_page li img {
      width: 100%;
      display: block;
      height: auto; }
.works_pages .cbp-bicontrols {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 3; }
  .works_pages .cbp-bicontrols .prev {
    position: absolute;
    width: 20px;
    height: 62px;
    margin: -15px 0 0;
    top: 50%;
    cursor: pointer;
    left: 25px;
    background: url(/img/arrows_sprite.png);
    background-position: -14px -7px }
    .works_pages .cbp-bicontrols .prev:hover {
      background-position: -14px -70px; }
  .works_pages .cbp-bicontrols .next {
    position: absolute;
    width: 20px;
    height: 62px;
    margin: -15px 0 0;
    top: 50%;
    cursor: pointer;
    right: 25px;
    background: url(/img/arrows_sprite.png); 
    background-position: -39px -8px;}
    .works_pages .cbp-bicontrols .next:hover {
      background-position: -39px -71px; }

.backgroundsize .bislideshow li, .backgroundsize .works_pages .inner_page li, .works_pages .backgroundsize .inner_page li {
  /* If background-size supported we'll add the images to the background of the li */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  background-position: center center;
  /* ...and hide the images */ }
  .backgroundsize .bislideshow li img, .backgroundsize .works_pages .inner_page li img, .works_pages .backgroundsize .inner_page li img {
    display: none; }

/* Fallback */
.no-js.no-backgroundsize .main_page li:first-child {
  opacity: 1; }

.no-js.backgroundsize .main_page li:first-child img {
  display: block; }

.gallery {
  background-color: #fefeff;
    margin-left: 19px;}

.section {
  width: 33%;
}
  .section:hover .wrapper_info {
    opacity: 1;
    transition: opacity 0.3s ease-out;
    -webkit-transition: opacity 0.3s ease-in; }
  @media screen and (max-width: 800px) {
    .section {
      width: 50%; } }
  @media screen and (max-width: 480px) {
    .section {
      width: 100%; } }
  .section img {
    width: 100%;
    height: 100%;
    vertical-align: top;
    display: block;
  }
  .section .wrapper_info {
    background: #fff;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    top: 0;
    left: 0;
    display: block;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    -webkit-transition: opacity 0.3s ease-out; }
  .section .info {
    width: 100%;
    height: 100%;
    text-align: center;
    display: table; }
    .section .info p, .section .info .overlay .inner_info h1, .overlay .inner_info .section .info h1 {
      display: table-cell;
      vertical-align: middle;
      color: #acabab;
      text-decoration: underline;
      text-transform: uppercase;
      line-height: 30px;
      font-family: gotham_probold;
      font-size: 20px; }

.more {
  position: absolute;
  bottom: 30px;
  left: 30px;
  text-decoration: none;
  color: #fefeff;
  line-height: 30px;
  cursor: pointer;
  z-index: 4;
  font-family: open_sans_semibold;
  font-size: 29px; }
  @media screen and (max-width: 480px) {
    .more {
      bottom: 15px;
      left: 15px;
      font-size: 23px; } }
  .more span {
    /*background-position: -85px 0;*/
    width: 18px;
    height: 18px;
    display: inline-block;
    margin: 0 0 0 5px; 
    background: url(/img/more.png);
    background-size: cover;    }
    @media screen and (max-width: 480px) {
      .more span {
        background-position: -87px -2px;
        width: 14px;
        height: 14px; } }

.white_pages .navigation {
  background: #545aa8; }
  @media screen and (max-width: 640px) {
    .white_pages .navigation li {
      border-top: 2px dashed #d4d4d6; }
      .white_pages .navigation li:first-child {
        border-top: 0; } }
  .white_pages .navigation li span {
    color: #cfcecd; }
  .white_pages .navigation li a {
    color: #f3f0f0; }
    .white_pages .navigation li a:hover, .white_pages .navigation li a.current {
      color: #8a8fd0; }
    .white_pages .navigation li a.lang {
      color: #8a8fd0; }
      .white_pages .navigation li a.lang:hover {
        color: #f3f0f0; }
  .white_pages .navigation .nav_button {
    background-position: -20px 0px; }
  .white_pages .navigation .lang {
    color: #8a8fd0; }
.white_pages .logo {
  background-image: url("../img/logo_violet.png"); }
  @media screen and (max-width: 480px) {
    .white_pages .logo {
      position: relative;
      margin: 3px 0 0 3px;
      top: 0;
      left: 0; } }

.main_about_picture {
  width: 100%;
  position: relative;
  text-align: center; }
  .main_about_picture img {
    width: 100%;
    height: auto; }
  @media screen and (max-width: 540px) {
    .main_about_picture {
      margin: 100px 0 100px; } }

.motto {
  position: absolute;
  text-transform: uppercase;
  color: #545aa8;
  width: 100%;
  margin: 0 auto;
  bottom: -55px;
  font-family: gotham_probold;
  font-size: 51px; }
  @media screen and (max-width: 720px) {
    .motto {
      bottom: -37px;
      font-size: 35px; } }
  @media screen and (max-width: 540px) {
    .motto {
      bottom: -25px;
      font-size: 25px; } }

.text_block {
  text-align: center;
  margin: 0 auto;
  width: 70%; }
  .text_block h3 {
    margin: 0 0 25px;
    color: #545aa8;
    line-height: 23px;
    text-transform: uppercase;
    font-family: gotham_probold;
    font-size: 23px; }
    @media screen and (max-width: 540px) {
      .text_block h3 {
        font-size: 20px; } }
    @media screen and (max-width: 480px) {
      .text_block h3 {
        font-size: 19px; } }
    @media screen and (max-width: 320px) {
      .text_block h3 {
        font-size: 18px; } }
  .text_block .text {
    line-height: 30px;
    color: #4b4f57;
    font-family: open_sans_semibold;
    font-size: 20px; }
    @media screen and (max-width: 540px) {
      .text_block .text {
        font-size: 16px; } }
    @media screen and (max-width: 480px) {
      .text_block .text {
        line-height: 27px; } }
    @media screen and (max-width: 320px) {
      .text_block .text {
        line-height: 25px;
        font-size: 14px; } }

.separation {
  background: #4b4f57;
  width: 75px;
  height: 2px;
  margin: 35px auto 90px; }
  @media screen and (max-width: 540px) {
    .separation {
      margin: 30px auto 70px; } }

.img_block {
  width: 90%;
  margin: 0 auto 95px; }
  .img_block img {
    width: 43%;
    margin: 0 2% 0 4%; }
    @media screen and (max-width: 640px) {
      .img_block img {
        margin: 0;
        width: 100%; } }
  @media screen and (max-width: 540px) {
    .img_block {
      margin: 0 auto 75px; } }

.copyright {
  line-height: 19px;
  color: #545aa8;
  text-align: center;
  margin: 155px 0 55px;
  font-family: gotham_probold;
  font-size: 12px; }
  @media screen and (max-width: 540px) {
    .copyright {
      margin: 135px 0 35px; } }

.vCard {
  width: 100%;
  text-align: center;
  color: #474746;
  text-transform: uppercase;
  line-height: 30px;
  height: 385px;
  position: absolute;
  top: 50%;
  margin-top: -193px;
  font-family: gotham_probold;
  font-size: 23px; }
  @media screen and (max-width: 480px) {
    .vCard {
      position: relative;
      line-height: 20px;
      margin-top: 5px;
      top: 0;
      font-size: 12px; } }
  @media screen and (max-width: 240px) {
    .vCard {
      font-size: 14px; } }
  .vCard a {
    text-decoration: none;
    display: block;
    color: #474746;
    text-transform: uppercase; }
  .vCard .adr, .vCard .email {
    margin: 0 0 42px; }
    @media screen and (max-width: 480px) {
      .vCard .adr, .vCard .email {
        margin: 0 0 13px; } }
  .vCard .skype {
    margin: 0 0 170px; }

.overlay {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  text-align: center;
  background: #545aa8;
  background: rgba(172,171,171, 0.7); }
  .overlay .auxiliary {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle; }
  .overlay .overlay_wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 500px;
    height: 300px;
    padding: 50px 30px 50px 40px;
    text-align: left;
    background: #fbfbfd;
    max-width: 900px;
     }
  .overlay .close {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 17px;
    height: 15px;
    background-position: 0px -20px;
    cursor: pointer; }
    .overlay .close:hover {
      background-position: -20px -20px; }
  .overlay .inner_info {
    width: 100%;
    height: 100%;
    overflow: auto; }
    .overlay .inner_info .jspDrag {
      background: #acabab ; }
    .overlay .inner_info .jspTrack {
      background: #efeff1; }
    .overlay .inner_info p, .overlay .inner_info h1 {
      width: 60%;
      line-height: 20px;
      margin: 0 0 15px 0;
      color: #4b4f57;
      font-size: 13px;
      font-family: open_sans_semibold; }
      @media screen and (max-width: 720px) {
        .overlay .inner_info p, .overlay .inner_info h1 {
          width: 75%; } }
      @media screen and (max-width: 480px) {
        .overlay .inner_info p, .overlay .inner_info h1 {
          width: 95%; } }
    .overlay .inner_info h1 {
      font-size: 20px; }
  .overlay .socweb {
    position: absolute;
    width: 180px;
    left: 30px;
    bottom: 40px; }
    @media screen and (max-width: 720px) {
      .overlay .socweb {
        width: 85px; } }
    @media screen and (max-width: 480px) {
      .overlay .socweb {
        bottom: 0;
        right: 32%;
        width: 165px; } }
    .overlay .socweb a {
      width: 77px;
      height: 26px;
      border: 1px solid #d4d4d6;
      display: block;
      float: left;
      margin: 0 10px 0 0;
      text-decoration: none;
      border-radius: 3px;
      line-height: 27px;
      color: #d4d4d6;
      font-family: open_sans_semibold;
      font-size: 13px; }
      @media screen and (max-width: 720px) {
        .overlay .socweb a {
          float: none;
          margin: 0 10px 10px 0; } }
      @media screen and (max-width: 600px) {
        .overlay .socweb a {
          width: 70px; } }
      @media screen and (max-width: 480px) {
        .overlay .socweb a {
          float: left; } }
      .overlay .socweb a:hover {
        color: #5a5a5b;
        border: 1px solid #5a5a5b; }
        .overlay .socweb a:hover.fb span {
          background-position: -45px -20px; }
        .overlay .socweb a:hover.tw span {
          background-position: -65px -20px; }
      .overlay .socweb a span {
        display: block;
        width: 16px;
        height: 16px;
        margin: 6px 6px 0 6px;
        float: left; }
        @media screen and (max-width: 600px) {
          .overlay .socweb a span {
            margin: 6px 3px 0 5px; } }
      .overlay .socweb a.fb span {
        background-position: -45px 0; }
      .overlay .socweb a.tw span {
        background-position: -65px 0; }
@media screen and (max-width: 1500px) {
  .main_nav.ua {
    width: 26%;
  }
}
@media screen and (max-width: 1200px) {
 .main_nav.ua li a, .works_list.ua li a{
    font-size: 13px;
  }
  .main_nav.ua{
        width: 25%;
  }
  .lang.ua{
    font-size: 13px;
  }
  .works_list.ua{
    width: 65%;
  }
  .works_list.ua li{
    margin: 0 7px;
  }
}
@media screen and (max-width: 1000px) {
  .main_nav.ua li a, .works_list.ua li a, .lang.ua {
    font-size: 12px;
  }
  .lang{
    margin: 27px 15px 0 0;
  }
  

}
@media screen and (max-width: 1000px) {
  .main_nav.ua{
    margin: 27px 0 0 10px;
  }
  .works_list.ua li {
    margin: 0 6px;
  }
  .works_list.ua{
    margin-left: 5px;
    width: 67%;
  }
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.main_nav li a, .works_list li a,.lang {
  font-family: 'Open Sans', sans-serif;
}
.main_nav li a {
  font-size: 17px;
}
.lang {
  color: #474746;
}
.white_pages .navigation .lang:hover {
color: #acabab;
}

.overlay .inner_info ul {
    list-style:disc;
    width: 60%;
    line-height: 20px;
    margin: 0 0 15px 0;
    color: #4b4f57;
    font-size: 13px;
    font-family: open_sans_semibold;
    margin-left: 17px;
}

.navigation a {
    color: #474746!important;
}

.navigation li a.current, .navigation li a:hover {
    color: #acabab!important;
}