@font-face {
    font-family: "Gotham Pro";
    src: url("../fonts/GothamProRegular/GothamProRegular.eot");
    src: url("../fonts/GothamProRegular/GothamProRegular.eot?#iefix")format("embedded-opentype"),
    url("../fonts/GothamProRegular/GothamProRegular.woff") format("woff"),
    url("../fonts/GothamProRegular/GothamProRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
}
/* font-family: "GothamProBold"; */
@font-face {
    font-family: "Gotham Pro";
    src: url("../fonts/GothamProBold/GothamProBold.eot");
    src: url("../fonts/GothamProBold/GothamProBold.eot?#iefix")format("embedded-opentype"),
    url("../fonts/GothamProBold/GothamProBold.woff") format("woff"),
    url("../fonts/GothamProBold/GothamProBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
}
/* font-family: "GothamProMedium"; */
@font-face {
    font-family: "Gotham Pro";
    src: url("../fonts/GothamProMedium/GothamProMedium.eot");
    src: url("../fonts/GothamProMedium/GothamProMedium.eot?#iefix")format("embedded-opentype"),
    url("../fonts/GothamProMedium/GothamProMedium.woff") format("woff"),
    url("../fonts/GothamProMedium/GothamProMedium.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
}
/* font-family: "GothamProLight"; */
@font-face {
    font-family: "Gotham Pro";
    src: url("../fonts/GothamProLight/GothamProLight.eot");
    src: url("../fonts/GothamProLight/GothamProLight.eot?#iefix")format("embedded-opentype"),
    url("../fonts/GothamProLight/GothamProLight.woff") format("woff"),
    url("../fonts/GothamProLight/GothamProLight.ttf") format("truetype");
    font-style: normal;
    font-weight: 100;
}

@import "normalize.css";
@import "jquery.fancybox.css";
@innerWidth: 960px;
@blue: #4CBBE4;
@yellow: #EECE34;

.clear {clear: both;}
.last {margin-right: 0 !important;}
.tac {text-align: center;}
.hide {display: none;}



body {
  background: #fff;
  font-family: "Gotham Pro", Arial, sans-serif;
  font-size: 18px;
  font-weight: 100;
  line-height: 1.2;
  color: #000;
  padding: 0;
  margin: 0;
}

.wrap {
  min-width: 960px;
}

.inner {
  width: @innerWidth;
  margin: 0 auto;
}

margin: 1em 0 1.4em;

.gradient (@startColor: #ffda2a, @endColor: #ffca1d) {
  background-color: @startColor;
  background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
  background: -webkit-linear-gradient(top, @startColor, @endColor);
  background: -moz-linear-gradient(top, @startColor, @endColor);
  background: -ms-linear-gradient(top, @startColor, @endColor);
  background: -o-linear-gradient(top, @startColor, @endColor);
}

.border-radius (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius:    @radius;
  border-radius:         @radius;
  -moz-background-clip:    padding;
  -webkit-background-clip: padding-box;
  background-clip:         padding-box;
}

.box-shadow (@string) {
  -webkit-box-shadow: @string;
  -moz-box-shadow:    @string;
  box-shadow:         @string;
}

input[name="email"] {
  display: none !important;
}

.input.error,textarea.error {
  border-color: #F2132C !important;
  outline: 2px solid #F2132C !important;
}
 
form {

  .input {
    width: 166px;
    height: 51px;
    display: inline-block;
    font-family: "Open Sans",sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    padding: 0 14px !important;
    margin: 0 8px;
  }

  textarea {
    width: 166px;
    display: inline-block;
    font-family: "Open Sans",sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #fff;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    padding: 14px !important;
    margin: 0 8px;
  }

  ::-webkit-input-placeholder { /* WebKit browsers */
      color:    #fff;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
     color:    #fff;
     opacity:  1;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
     color:    #fff;
     opacity:  1;
  }
  :-ms-input-placeholder { /* Internet Explorer 10+ */
     color:    #fff;
  }

  input[name="email"] {
    display: none;
  }

  .btn {
    display: inline-block;
    border: none;
    padding: 0 14px;
    background: #9D1C1F;
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    color: #FFF;
    border-radius: 5px;
    position: relative;
    height: 51px;
    vertical-align: top;
    margin: 0 8px;
    
    &:hover {
      background: #aD1C1F;
    }
  }
}

.custom-close {

  .fancybox-close {
    top: 17px !important;
    right: 16px !important;
    width: 31px !important;
    height: 29px !important;
    background: url(../img/close.png) no-repeat 0 0 !important;
  }
}

.fancybox-image {
  pointer-events: none;
  -moz-user-select: none; 
  -webkit-user-select: none; 
  -ms-user-select: none; 
  user-select: none;
}

.popup {
  background-color: #fff;
  padding: 20px;
  min-width: 590px;

  form {
    border-radius: 5px;
    padding: 0;
    text-align: center;
    min-width: 300px;
    padding: 50px 0;

    h3 {
      color: #686868;
      padding: 0;
      font-size: 48px;
      line-height: 1.2;
      font-weight: 100;
      display: block;
      margin: 0;
      text-transform: uppercase;
    }

    h4 {
      margin: 0 0 20px 0;
      color: #9d1c1f;
      font-weight: 100;
      font-size: 24px;
      color: #9d1c1f;
      text-transform: uppercase;
    }

    .input {
      display: block;
      margin: 0 auto 15px;
      background: #d8d8d8;
    }

    .btn {
      padding: 0 35px;
    }
  }
}

.succesBlock .fancybox-skin {
  background: #fff;
  min-height: 77px;
  border-radius: 0;
  text-align: center;

  h3 {
    color: #9d1c1f;
    text-align: center;
    margin: 0;
    min-width: 590px;
    line-height: 77px;
    font-size: 24px;
    display: block;
    padding: 0;
    text-transform: uppercase;
    font-weight: 100;
  }
}

.top-slider {
  position: absolute;
  top: 0;
  z-index: 0;
  height: 800px;
  min-height: 800px !important;
  width: 100%;
  min-width: 960px;

  .bx-controls {

    .bx-controls-direction {

      a {
        display:block;
        width:80px;
        height:75px;
        background:url(../img/arrows-custom.png) no-repeat;
        text-indent:-9999px;
        border:0;
        opacity: 1;
        top: 52% !important;

        &.bx-next {
          background-position:-81px 0;
          right: 86px;
        }

        &.bx-prev {
          left: 86px;
        }
      }
    }

    .bx-pager {
      margin: 0 !important;
      padding: 0 !important;
      position: absolute;
      bottom: 37px;
      z-index: 70;
      
      a {
        display: block;
        width:7px !important;
        height:7px !important;
        background:none !important;
        text-indent:-9999px;
        border:3px solid #fff !important;
        margin: 0 7px !important;
        border-radius: 7px !important;
        vertical-align: top;

        &.active {
          background: #fff !important;
        }
      }
    }
  }

  .bx-wrapper {
    height: 800px;
    min-height: 800px !important;
    width: 100%;
  }

  .bx-viewport {
    height: 800px;
    min-height: 800px !important;
    width: 100%;

    li {
      height: 800px;
      min-height: 800px !important;

      .slide {
        width: 100%;
        height: 800px;
        min-height: 800px !important;
      background-position: center;
      background-size: cover !important;
      }
    }
  }
}

.top-bg {
  margin: 0; padding: 0;


}

#main {
  text-align: center;
  color: #f2f2f2;
  height: 800px;
  min-height: 800px !important;

  .inner {
    z-index: 1;
    position: relative;
  }
}

#nav {
  padding-top: 50px;

  ul {
    margin: 0;
    padding: 0;
  }

  li {
    display: inline-block;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 300;
    margin-right: 62px;

    a {
      text-decoration: none;
      padding: 10px 20px;
      line-height: 25px;
      color: #f2f2f2;
      display: block;

      &:hover,&:focus {
        background: #fff;
        border-radius: 5px;
        color: #d91e2a;
      }
    }
    
  }
}

h1 {
  font-size: 30px;
  font-weight: 100;
  text-transform: uppercase;
  margin: 50px 0 15px;
}

.top-phone {
  font-weight: 100;
  font-size: 30px;

  a {
    color: #F2F2F2;
    font-weight: 100;
    text-decoration: none;
    border-bottom: 1px solid;

    &:hover {
      border: none;
    }
  }
}

.slogan {
  text-transform: uppercase;
  font-size: 48px;
  font-weight: 300;
  letter-spacing: 3px;
}

.top-logo {
  display: block;
  margin: 0 0 48px;
}

.projects {
  font-size: 24px;
  text-transform: uppercase;
  font-weight: 300;
}

.gray {
  background: #f2f2f2;
}

.title {
  text-align: center;
  padding: 60px 0 10px;

  h2 {
    margin: 0;
    text-transform: uppercase;
    color: #686868;
    font-size: 48px;
    text-transform: uppercase;
    font-weight: 100;
  }
}

.line-title {
  border-top: 2px solid #9d1c1f;
  position: relative;
  text-align: center;
  font-size: 18px;
  font-weight: 100;
  text-transform: uppercase;
  color: #9d1c1f;
  margin: 60px 0 20px;;

  h3 {
    position: relative;
    display: inline-block;
    background: #f2f2f2;
    top: -15px;
    padding: 0 20px;
    margin: 0;
    font-weight: 100;
  }
}

#about {
  text-align: center; 
}

#features {
  padding-bottom: 20px;

  .item {
    width: 260px;
    margin-right: 90px;
    float: left;
  }
}

#team {
  text-align: center;
  
  .item {
    display: inline-block;
    width: 220px;
    vertical-align: top;
    margin: 50px 6px 0;
    
    img {
      margin: 0 0 20px;
    }
  }

  .red {
    font-size: 24px;
    color: #9d1c1f;
    text-transform: uppercase;
    margin: 40px 0 65px;
  }
}

.order {
  height: 352px;
  text-align: center;
  padding: 1px 0;
  
  h2 {
    text-transform: uppercase;
    font-family: "Open Sans", sans-serif;
    font-weight: 100;
    font-size: 36px;
    line-height: 58px;
    color: #fff;
    margin: 90px 0 0;
  }

  h3 {
    font-family: "Open Sans", sans-serif;
    font-size: 18px;
    line-height: 25px;
    font-weight: 400;
    color: #fff;
    margin: 0 0 20px;
  }
}

#order1 {
  // background: url(../img/bg5.jpg) center 55% no-repeat;
  // background-size: cover;
  background: transparent;
}

#stat {
  text-align: center;
  padding-bottom: 60px;
  height: 485px;
  
  .item {
    width: 33%;
    float: left;

    .count {
      margin: 0 auto;
    }
    
    p {
      color: #9d1c1f;
      text-transform: uppercase;
      
    }
  }
}

#order2 {
  background: url(../img/bg4.jpg) center 55% no-repeat;
  background-size: cover;
  // background: transparent;
  background-attachment: fixed;
}

#how {
  // height: 1180px;
  // background: #F2F2F2 url(../img/scheme.png) no-repeat center 165px;
  padding-bottom: 50px;

  .inner {
    position: relative;
  }

  .title {
    margin-bottom: 38px;
  }

  .row {
    padding-left: 38px;
  }

  .item {
    width: 220px;
    float: left;
    margin: 0 112px 80px 0;
    text-align: center;
    position: relative;
    
    .l {
      width: 41px;
      height: 24px;
      background: url(../img/right-arrow.png) no-repeat;
      position: absolute;
      top: 81px;
      left: -83px;
    }

    .r {
      width: 41px;
      height: 24px;
      background: url(../img/right-arrow.png) no-repeat;
      position: absolute;
      top: 82px;
      right: -82px;
    }

    p {
      font-size: 18px;
      font-weight: 100;
      color: #686868;
    }
  }

  // .p1 {
  //   left: 38px;
  //   top: 353px;
  // }

  // .p2 {
  //   left: 369px;
  //   top: 353px;
  // }

  // .p3 {
  //   right: 20px;
  //   top: 353px;
  // }

  // .p4 {
  //   left: 38px;
  //   top: 700px;
  // }

  // .p5 {
  //   left: 369px;
  //   top: 700px;
  // }

  // .p6 {
  //   right: 20px;
  //   top: 700px;
  // }

  // .p7 {
  //   top: 1020px;
  //   left: 200px;
  // }

  // .p8 {
  //   top: 1020px;
  //   left: 538px;
  // }

  // .p1 {
  //   left: 38px;
  //   top: 353px;
  // }
}

#reviews {
  text-align: center;
  
  .line {
    width: 332px;
    height: 2px;
    background: #9d1c1f;
    float: left;
    margin: 50px 0 50px;

    &.r {
      float: right;
    }
  }
}

#reviews {
  padding-bottom: 80px;

  .bx-viewport {
    height: auto !important;  
  }

  .bx-controls {
    position: absolute;
    top: -71px;
    width: 100%;
    text-align: center;

    .bx-controls-direction {

      a {
        display: inline-block;
        position: static;
        margin: 0 3px;
        top: 0;
        width: 44px;
        height: 43px;
        background: url(../img/controls-custom.png) no-repeat;

        &.bx-next {
          background-position: -51px 0;
        }

        &:hover {
          background-position: 0 -44px;

          &.bx-next {
            background-position: -51px -44px;
          }
        }
      }
    }
  }
}

.reviews {

  li {
    padding: 0 10px;

    p {
      line-height: 36px;
      color: #686868;
      margin: 0;

      &.big {
        font-size: 24px;
        font-weight: 400;
      }
    }

    h3 {
      font-size: 24px;
      line-height: 36px;
      color: #686868;
      font-weight: 700;
      margin: 0;
      text-transform: uppercase;
      
    }
  }
}

#contacts {
  position: relative;

  .show-map {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 65px;
  }

  #show-map {
    text-decoration: none;
    border-bottom: 1px solid #747473;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;

    &:hover {
      border: none;
    }

    &.click {
      background: rgba(0, 0, 0, 0.76);
      border-radius: 3px;
      padding: 5px 8px;
      border: none;
    }
  }
}

.contacts {
  color: #ffffff;
  background: rgba(0,0,0,0.76);
  text-align: center;
  position: absolute;
  top: 0;
  width: 100%;
  height: 800px;
  min-height: 800px !important;
  
  .line {
    width: 333px;
    height: 2px;
    background: #f2f2f2;
    float: left;
    margin: 18px 0 0 0;

    &.r {
      float: right;
    }
  }

  h2 {
    color: #ffffff;
  }

  h3 {
    font-weight: 100;
    font-size: 30px;
    line-height: 48px;
  }

  h4 {
    margin: 0;
    position: relative;
    top: -11px;
    font-weight: 100;
    text-transform: uppercase;
  }

  .left {
    width: 440px;
    float: left;
    margin: 28px 0 0 10px;
    text-align: left;
  }

  .right {
    width: 429px;
    float: right;
    text-align: left;
    padding-top: 29px;

    strong {
      font-size: 24px;
    }

    a {
      color: #fff;

      &:hover {
        text-decoration: none;
      }
    }
  }

  hr {
    height: 2px;
    background: #f2f2f2;
    border: none;
    margin: 62px 0 20px;
  }

  .input {
    display: block;
    padding: 0 18px !important;
    margin: 0 0 18px;
    width: 404px;
    font-family: "Gotham Pro",sans-serif;
    font-weight: 100;
  }

  input[name=pochta].input {
    display: inline-block;
    width: 248px;
    margin-right: 23px;
  }

  textarea {
    padding: 12px 18px !important;
    width: 404px;
    height: 87px;
    margin: 0 0 18px;
    font-family: "Gotham Pro",sans-serif;
    font-weight: 100;
  }

  .btn {
    display: inline-block;
    width: 127px;
    margin: 0;
  }
}

#map > ymaps {
  width: 100% !important;
  height: 800px !important;
}

#footer {
  background: url(../img/bg6.jpg) center 55% no-repeat;
  background-size: cover;
  // background: transparent;
  background-attachment: fixed;

  height: 399px;
  padding-top: 1px;
  text-align: center;
  
  .caption {
    margin-top: 11%;
  } 
}

ul.tabs {
  margin: 25px 0;
  padding: 0;
}
.tabs li {
  display: inline-block;
  margin: 0 70px 0 0;
  padding: 0 25px;
  line-height: 45px;
  border: 1px solid rgba(0, 0, 0, 0);
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 300;
  color: #9E1E21;
  cursor: pointer;
  position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {

}
.tabs li.current {
  border: 1px solid #9e1e21;
  border-radius: 7px;
}
.box {
  display: none;
  // border: 1px solid #D4D4D4;
  // border-width: 0 1px 1px;
  // background: #EFEFEF;
  // padding: 0 12px;
}
.box.visible {
  display: block;
}

#folio {
  padding-bottom: 100px;

  h3 {
    display: block;
    text-align: center;
    color: #9e1e21;
    font-weight: 300;
    text-transform: uppercase;
    margin: 2em 0;
    // display: none;
    
  }

  h4 {
    display: block;
    text-align: center;
    font-weight: 300;
    text-transform: uppercase;
    color: #686868;
    margin: 2.3em 0 2.5em;
    // display: none;
    
  }
}

.folio-image {
  display: block;
  float: left;
  font-size: 16px;
  font-size: 0;
  width: 235px;
  // height: 142px;
  height: auto;
  
  vertical-align: top;
  margin: 0 5px 5px 0;
}

.folio-image:nth-child(4n) {
  margin-right: 0;
}

.bx-clone{
   // display: none !important;
}

.folio-tabs {
  .bx-controls {

    .bx-controls-direction {

      a {
        display:block;
        width:80px;
        height:75px;
        background:url(../img/arrows-custom2.png) no-repeat;
        text-indent:-9999px;
        border:0;
        opacity: 1;
        top: 52% !important;

        &.bx-next {
          background-position:-81px 0;
          right: -120px;
        }

        &.bx-prev {
          left: -120px;
        }
      }
    }
  }
}

.caro {

  .slide {
    width: 960px !important;
    height: 932px;
  }

  .item {
    float: left;
    width: 478px;
    height: 466px;

    a {
      display: inline-block;
    }

    a.text:hover span {
      border: none;
    }

    img {
      vertical-align: bottom;
      padding: 2px;
      display: inline-block !important;
    }
  }

  .left {
    float: left;
    width: 239px;

  }

  .right {
    float: right;
    width: 239px;
  }
}

.caro .item a.text {
    display: block;
    width: 235px;
    height: 174px;
    text-align: center;
    text-transform: uppercase;
    background: #9d1c1f;
    font-size: 24px;
    line-height: 29px;
    text-decoration: none;
    margin: 2px;
    padding-top: 55px;
}

.caro .item a.text span {
    color: #fff;
    border-bottom: 1px solid #b65557;
    padding: 20px 0 0 0;
}