re #34317 fix css

re #34317 fix css

@import 'reset';
@import "fonts";
@import "icons";
@import "grid";
@import "case";
@import "contact-us";

body {
  font-family: 'museo_sans_cyrl', sans-serif;
  color: #2c373c;
  font-size: 15px;
  font-weight: 300;
  -webkit-text-size-adjust: none;
}

.home-page {
  background: #fff;
}

.clearfix{
  zoom:1;
  &:before, &:after{ content:""; display:table; }
  &:after{ clear: both; }
}

a {
  color: #2c373c;
  text-decoration: none;
  font-family: 'museo_sans_cyrl', sans-serif;
}

h1 ,
.header-title  {
  letter-spacing: -2px;
  font-size: 50px;
  font-weight: 100;
  font-family: 'museo_sans_cyrl', sans-serif;
  text-transform: none;
}

h2 {
  font-size: 22px;
  font-weight: 700;
  color: #2c373c;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

p {
  margin: 0;
}

.header {
  position: relative;
  background: url(../img/header_bg.jpg) #575f62 center no-repeat;
  background-size: cover;
  color: #fff;
  overflow: hidden;

  a {
    color: #fff;
  }
}

@import 'header';

.header-text {
    text-align: center;
    padding: 170px 0 223px 0;
}

.header-title {
  margin: 189px 10px 117px;
  text-align: center;
  font-weight: 900;
  color: #fff;
  &.small-margin {
      margin-top: 0;
      margin-bottom: 15px;
  }
}

.header-sub-title {
    color: rgba(255,255,255, 0.6);
    text-align: center;
    font-size: 17px;
    font-weight: 300;
    margin-bottom: 30px;
}
.button {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    &--big {
        text-transform: uppercase;
        font-size: 17px;
        font-weight: 500;
        padding: 0 50px;
        height: 56px;
        line-height: 56px;
        letter-spacing: 0.05em;
        border: 0;
        outline: 0;
        box-shadow: none;
    }
    &--blue {
        background: #6B86CF;
        color: #fff;
        border-radius: 4px;
    }
}

.our-services {
    padding-top: 74px;
    h2 {
        margin-bottom: 65px;
        font-size: 22px;
        letter-spacing: 0.03em;
    }
    .projects-tabs{
        text-align: center;
        li {
            display: inline-block;
            vertical-align: top;
            margin: 0 25px;
            width: 200px;
        }
        .icon-wrap{
            margin-bottom: 25px;
            svg {
                fill: #2C373C;
                width: 67px;
                height: 62px;
            }
        }
        a {
            letter-spacing: 0;
            line-height: 17px;
            margin-bottom: 0;
        }
    }
}

.project-tabs-wrap {
  padding: 0 40px;
}

.projects-tabs {
  display: table;
  width: 100%;
  table-layout: fixed;

  li {
    display: table-cell;
    text-align: center;
  }
  a {
    position: relative;
    display: inline-block;
    margin-bottom: 94px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 21px;
    letter-spacing: 2px;
    cursor: pointer;
    color: #3457c0;

    &.active {
      color: #3457c0;
      cursor: default;

      &:after,
      &:before {
        display: block;
        content: "";
        position: absolute;
        left: 50%;
        bottom: -43px;
        margin-left: -7px;
        width: 15px;
        height: 8px;
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCAxNSA4Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KCiAgICAgIC5jbHMtMyB7CiAgICAgICAgZmlsbDogI2QzYzQ2ZDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9ItCz0YDRg9C/0L/QsC0xc3ZnIj4KICAgIDxwYXRoIGQ9Ik0tMC4wMTAsMC42OTcgQy0wLjAxMCwwLjY5NyAwLjY5NywtMC4wMTAgMC42OTcsLTAuMDEwIEMwLjY5NywtMC4wMTAgNy42OTcsNi45OTAgNy42OTcsNi45OTAgQzcuNjk3LDYuOTkwIDYuOTkwLDcuNjk3IDYuOTkwLDcuNjk3IEM2Ljk5MCw3LjY5NyAtMC4wMTAsMC42OTcgLTAuMDEwLDAuNjk3IFoiIGlkPSJwYXRoLTEiIGNsYXNzPSJjbHMtMyIgZmlsbC1ydWxlPSJldmVub2RkIi8+CiAgICA8cGF0aCBkPSJNMTMuOTkwLC0wLjAxMCBDMTMuOTkwLC0wLjAxMCAxNC42OTcsMC42OTcgMTQuNjk3LDAuNjk3IEMxNC42OTcsMC42OTcgNy42OTcsNy42OTcgNy42OTcsNy42OTcgQzcuNjk3LDcuNjk3IDYuOTkwLDYuOTkwIDYuOTkwLDYuOTkwIEM2Ljk5MCw2Ljk5MCAxMy45OTAsLTAuMDEwIDEzLjk5MCwtMC4wMTAgWiIgaWQ9InBhdGgtMiIgY2xhc3M9ImNscy0zIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KICA8L2c+Cjwvc3ZnPgo=);
        animation: topBounce ease-in-out 0.5s;
        transform-origin: 50% 100%;
        animation-play-state: running;
      }
      svg {
        fill: #d7c76e;
//        stroke: #d7c76e;
      }
    }
    &:after,
    &:before {
      display: none;
    }
  }
  .icon-wrap {
    display: block;
    margin: 0 auto 17px;

    svg {
      fill: #fff;
//      stroke:#fff;
    }
  }
}

@media (max-width: 1023px) {
  .our-services .projects-tabs {
    display: block;
    li {
      width: 32%;
      margin: 0;

      &:nth-child(3n){
          margin-bottom: 55px;
      }
      &:last-child {
          margin-bottom: 0;
      }
    }
    a, a.active {
      &:after,
      &:before {
        bottom: -30px;
      }
    }
    .icon-wrap {
      margin-bottom: 10px;
    }
  }
  .project-tabs-wrap {
    padding: 0;
  }
}

@keyframes topBounce{
  0% {
    transform:  translate(0px,-21px)  scaleX(1.00) scaleY(1.00) ;
  }
  22% {
    transform:  translate(0px,0px)  scaleX(1.30) scaleY(0.40) ;
  }
  45% {
    transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
  68% {
    transform:  translate(0px,0px)  scaleX(1.20) scaleY(0.70) ;
  }
  100% {
    transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
}

.projects-list {
  position: relative;
  overflow: hidden;

  .projects-row {
    overflow: hidden;
    background: #fff;
    transition: all 0.4s ease-in-out;
  }
  .project-cell {
    float: left;
    text-align: center;
    width: 41.0938%;
    overflow: hidden;

    &:hover {
      .project-info {
        opacity: 1;
      }
      .customer-comment {
        opacity: 1;
      }
      .project-info-text {
        opacity: 1;
      }
      img:not(.customer-photo) {
        transform: scale(1.02);
      }
    }
    a {
      display: block;
      position: relative;
      color: #fff;
    }
    img {
      width: 100%;
      vertical-align: top;
      transition: all 0.3s ease-in;
      animation: imagesCell ease-in-out 0.3s 1;
    }
  }
  &.equal-list {
      .project-cell {
          width: 50%;
      }
  }
  .project-cell-l {
    width: 58.9062%;

    .project-info .helper {
//      height: 74%;
    }
  }

  .project-info {
    font-size: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(52, 87 , 192, .85);
    opacity: 0;
    transition: all 0.2s ease;

    .helper {
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
  }
  .project-name {
    display: block;
    margin-bottom: 20px;
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -3px;
  }
  .project-info-text {
    display: inline-block;
    vertical-align: middle;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transition-delay: 0.1s;
    transform: translateY(0px);
  }
  .project-description {
    display: inline-block;
    width: 285px;
    font-size: 15px;
  }
  .project-cell .customer-photo {
    position: absolute;
    bottom: -41px;
    right: 0;
    width: 213px;
  }
  .customer-comment {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 31px;
    font-size: 18px;
    padding-left: 45px;
    text-align: left;
    opacity: 0;
    transition: all 0.15s ease-in-out;
    transition-delay: 0.1s;
    transform: translateY(0px);

    .icon {
      position: absolute;
      top: -35px;
      left: 47px;
    }
  }
  .comment-text {
    display: block;
    margin-bottom: 25px;
    line-height: 1.33;
    max-width: 60%;
  }
  .customer-name {
    display: block;
    font-size: 21px;
  }
  .customer-position {
    color: #c5cbe7;
    font-size: 13px;
  }
  .prev-tab,
  .next-tab {
    display: block;
    position: absolute;
    left: -79px;
    top: 50%;
    width: 120px;
    height: 120px;
    background: rgba(44,55,60, 0.4);
    transform: translateY(-50%);
    z-index: 5;
    border-radius: 50%;
    cursor: pointer;

    &.disabled {
      background: rgba(44,55,60, 0.1);
      cursor: default;

      &:after {
        border-color: #687174;
      }
    }
    &:after {
      content: "";
      position: absolute;
      right: 18px;
      top: 50%;
      width: 14px;
      height: 14px;
      border: solid 1px #fff;
      border-top-width: 0;
      border-right-width: 0;
      transform-origin: 0.5 0.5;
      transform: rotate(45deg) translateY(-50%);
    }
  }
  .next-tab {
    left: auto;
    right: -79px;

    &:after {
      left: 8px;
      right: auto;
      border-width: 0;
      border-right-width: 1px;
      border-top-width: 1px;
    }
  }
}

@keyframes imagesCell {
  0% {
//    transform: translateY(30px);
    opacity: 0;
  }
  100% {
//    transform: translateY(0);
    opacity: 1;
  }
}

.open-source {
  h2 {
    margin: 105px 0 53px;
    letter-spacing: 0.03em;
  }
}

@media (max-width: 980px) {
  .projects-list {
    .customer-comment {
      display: none;
    }
    .project-cell-l {
      .project-info {
        .helper {
          height: 100%;
        }
      }
    }
  }
}

@media (max-width: 800px) {
  .our-services{
    padding: 33px 33px 0 33px;
    h2 {
      margin-bottom: 20px;
    }
  }
  .header-text {
      padding: 115px 10px 120px 10px;
  }
  .projects-list {
    .project-cell {
      float: none;
      width: 100%;
    }
    .prev-tab,
    .next-tab {
      display: none;
    }
    &.equal-list {
        .project-cell {
            width: 100%;
        }
    }
  }
  .open-source {
    h2 {
      margin: 100px 10px 26px;
    }
  }
}

@media (max-width: 400px) {
  .our-services {
    .projects-tabs {
      width: 220px;
      margin: 0 auto;
      li {
        display: block;
        width: 100%;
        text-align: left;
        margin-bottom: 12px;
        &:nth-child(3n) {
          margin-bottom: 12px;
        }
        &:last-child {
            margin-bottom: 0;
        }
      }
      a {
        >span {
          display: inline-block;
          vertical-align: middle;
          &:last-child {
            width: 138px;
          }
        }
      }
      .icon-wrap {
        margin-right: 10px;
        margin-bottom: 0;
      }
    }
  }
}

@media (max-width: 720px) {
  div.tabs-cnt {
    margin-bottom: 74px;

    .tabs-content {
      padding: 0 33px;
      font-size: 22px;
      line-height: 1.5;
    }
  }
  .open-source {
    h2 {
        margin-top: 78px;
    }
  }
}

@media (max-width: 600px) {
  .open-source {
    .tabs-cnt .tabs-header li {
      width: 44%;
      margin: 0;
    }
  }
}

.tabs-cnt {
  max-width: 812px;
  margin: 0 auto 94px;

  .tabs-header {
    margin-bottom: 24px;
    text-align: center;

    li {
      display: inline-block;
      margin: 0 9px;
    }
  }
  .tab-title {
    display: block;
    border: solid 1px transparent;
    padding: 7px 11px;
    font-size: 16px;
    color: #3457c0;
    cursor: pointer;

    &.active {
      border-color: #d7c76e;
      color: #2c373c;
    }
  }
  .tabs-content {
    font-size: 32px;
    font-weight: 100;
    line-height: 42px;
    text-align: center;

    a {
      color: #3457c0;
      cursor: pointer;

      &:hover {
        color: #ed002d;
        border-bottom: solid 1px;
      }
    }
  }
  .tab {
    display: none;

    &.active {
      display: block;
    }
  }
  p {
    letter-spacing: 1px;
  }
}

.sensiolabs {
  margin: 128px auto 74px;
  max-width: 812px;
  width: 81%;

  .sensiolabs-logo {
    margin-right: 20px;
    margin-bottom: 20px;
    display: inline-block;
  }
  p {
    width: 500px;
    font-size: 24px;
    font-weight: 100;
    line-height: 1.5;
    float: right;
  }
  a {
    color: #3457C0;

    &:hover {
      color: #ED002D;
      border-bottom: solid 1px;
    }
  }
  &::before {
    content: "";
    display: block;
    width: 188px;
    height: 1px;
    background-color: #c3c7c8;
    position: absolute;
    left: 50%;
    margin-left: -94px;
    margin-top: -64px;
  }
}

@media (max-width: 880px) {
  .sensiolabs {
    text-align: center;
    margin-top: 47px;

    &:before {
      display: none;
    }
    .sensiolabs-logo {
      margin-right: 0;
    }
    p {
      float: none;
      width: auto;
    }
  }
}
@media (max-width: 720px) {
  .sensiolabs p {
    font-size: 22px;
  }
}

.conference {
  padding-bottom: 79px;
  margin-bottom: 65px;
  border-top: solid 1px transparent;
  background: url(../img/conf-bg.jpg) center no-repeat;
  background-size: cover;
  color: #fff;

  h2 {
    margin-top: 66px;
    color: #fff;
  }
  .fwdays {
    margin-top: 69px;

    .conf-logo {
      margin-left: -13px;
    }
  }
  .cnc {
    margin-top: 135px;

    .conf-logo {
    }
  }
  p {
    margin: 140px 0 48px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 100;
  }
}
.arrow-button {
  display: inline-block;
  position: relative;
  width: 39px;
  height: 39px;
  background: transparent;
  cursor: pointer;
  text-align: center;
  border: 0px solid transparent;

  &:hover {

    &:before {
      top: 100%;
      transform: rotateX(90deg);
    }
    &:after {
      top: 0;
      transform: rotateX(0deg);
    }
  }
  &:after,
  &:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    width: 39px;
    height: 39px;
    transition: all 0.2s ease-in-out;
  }
  &:after {
    top: -100%;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjM5IiBoZWlnaHQ9IjM5IiB2aWV3Qm94PSIwIDAgMzkgMzkiPgogIDxkZWZzPgogICAgPHN0eWxlPgoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjZDdjNzZlOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBkPSJNMC4wMDAsMzkuMDAwIEMwLjAwMCwzOS4wMDAgMC4wMDAsLTAuMDAwIDAuMDAwLC0wLjAwMCBDMC4wMDAsLTAuMDAwIDM5LjAwMCwtMC4wMDAgMzkuMDAwLC0wLjAwMCBDMzkuMDAwLC0wLjAwMCAzOS4wMDAsMzkuMDAwIDM5LjAwMCwzOS4wMDAgQzM5LjAwMCwzOS4wMDAgMC4wMDAsMzkuMDAwIDAuMDAwLDM5LjAwMCBaTTE2LjgzMywxMS43ODcgQzE2LjgzMywxMS43ODcgMTUuODMzLDEyLjc4NyAxNS44MzMsMTIuNzg3IEMxNS44MzMsMTIuNzg3IDIyLjU0NywxOS41MDAgMjIuNTQ3LDE5LjUwMCBDMjIuNTQ3LDE5LjUwMCAxNS44MzMsMjYuMjEzIDE1LjgzMywyNi4yMTMgQzE1LjgzMywyNi4yMTMgMTYuODMzLDI3LjIxMyAxNi44MzMsMjcuMjEzIEMxNi44MzMsMjcuMjEzIDI0LjU0NywxOS41MDAgMjQuNTQ3LDE5LjUwMCBDMjQuNTQ3LDE5LjUwMCAxNi44MzMsMTEuNzg3IDE2LjgzMywxMS43ODcgWiIgaWQ9InBhdGgtMSIgY2xhc3M9ImNscy0yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+Cg==);
    transform-origin: 50% 100%;
    transform: rotateX(-90deg);
  }
  &:before {
    top: 0;
    transform-origin: 50% 0;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjM5IiBoZWlnaHQ9IjM5IiB2aWV3Qm94PSIwIDAgMzkgMzkiPgogIDxkZWZzPgogICAgPHN0eWxlPgoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjZDdjNzZlOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBkPSJNMC4wMDAsMzkuMDAwIEMwLjAwMCwzOS4wMDAgMC4wMDAsLTAuMDAwIDAuMDAwLC0wLjAwMCBDMC4wMDAsLTAuMDAwIDM5LjAwMCwtMC4wMDAgMzkuMDAwLC0wLjAwMCBDMzkuMDAwLC0wLjAwMCAzOS4wMDAsMzkuMDAwIDM5LjAwMCwzOS4wMDAgQzM5LjAwMCwzOS4wMDAgMC4wMDAsMzkuMDAwIDAuMDAwLDM5LjAwMCBaTTM4LjAwMCwxLjAwMCBDMzguMDAwLDEuMDAwIDEuMDAwLDEuMDAwIDEuMDAwLDEuMDAwIEMxLjAwMCwxLjAwMCAxLjAwMCwzOC4wMDAgMS4wMDAsMzguMDAwIEMxLjAwMCwzOC4wMDAgMzguMDAwLDM4LjAwMCAzOC4wMDAsMzguMDAwIEMzOC4wMDAsMzguMDAwIDM4LjAwMCwxLjAwMCAzOC4wMDAsMS4wMDAgWk0xNi44MzMsMTEuNzg3IEMxNi44MzMsMTEuNzg3IDI0LjU0NywxOS41MDAgMjQuNTQ3LDE5LjUwMCBDMjQuNTQ3LDE5LjUwMCAxNi44MzMsMjcuMjEzIDE2LjgzMywyNy4yMTMgQzE2LjgzMywyNy4yMTMgMTUuODMzLDI2LjIxMyAxNS44MzMsMjYuMjEzIEMxNS44MzMsMjYuMjEzIDIyLjU0NywxOS41MDAgMjIuNTQ3LDE5LjUwMCBDMjIuNTQ3LDE5LjUwMCAxNS44MzMsMTIuNzg3IDE1LjgzMywxMi43ODcgQzE1LjgzMywxMi43ODcgMTYuODMzLDExLjc4NyAxNi44MzMsMTEuNzg3IFoiIGlkPSJwYXRoLTEiIGNsYXNzPSJjbHMtMiIgZmlsbC1ydWxlPSJldmVub2RkIi8+Cjwvc3ZnPgo=) ;
  }
}
.conference-list {
//  overflow: hidden;

  li {
    float: left;
    margin-left: 10.1562%;
    width: 28.5156%;

    &:last-child {
      float: right;
      margin-right: 12.6%;
    }
  }
}

@media (max-width: 720px) {
  .conference {
    padding-bottom: 0;
    margin-bottom: 32px;
    background: none;

    h2 {
      margin: 0 0 -68px;
    }
    p {
      margin: 40px 33px 22px;
      font-size: 16px;
    }
  }
  .conference-list {
    li {
      float: none;
      padding-bottom: 26px;
      width: auto;
      text-align: center;

      &.fwdays {
        margin: 0;
        padding-top: 148px;
        background: url(../img/fwdays-mobile-bg.jpg) center #2b3942;
        background-size: cover;
      }
      &.cnc {
        margin: 0;
        padding-top: 101px;
        background: url(../img/cnc-mobile-bg.jpg) top  #413828;
        background-size: cover;
      }
    }
  }
}

.having-blog {
  padding: 0 10.1562%;

  h2 {
    margin-bottom: 59px;
  }
  h3 {
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
  }
  p {
    margin-bottom: 37px;
    font-size: 15px;
    line-height: 1.33;
    color: #919699;
    font-family: "Helvetic Neue", Helvetica, Arial;
    font-weight: normal;
  }
  .user {
    overflow: hidden;

    img {
      float: left;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .user-name {
      margin: 8px 0 5px 62px;
      font-size: 17px;
      font-weight: 700;
    }
    .post-date {
      margin-left: 62px;
      font-size: 13px;
      color: #919699;
    }
  }
}

.preview-blog-list {
  overflow: hidden;
  margin-bottom: 70px;

  li {
    float: left;
    margin-right: 6.0784%;
    width: 28.6274%;

    &:last-child,
    &:nth-child(3n)  {
      margin-right: 0;
    }
  }
}

@media (max-width: 1023px) {
  .having-blog {
    padding: 0 33px;

    h2 {
      margin-bottom: 31px;
    }
    h3 {
      font-size: 20px;
    }
    p {
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 9px;
//      font-weight: 500;

    }
  }
  .preview-blog-list {
    margin-bottom: 10px;

    li {
      margin-right: 0;
      margin-bottom: 40px;
      width: auto;
    }
  }
}

@media (max-width: 800px) {
  .having-blog {
    padding: 0 92px;
  }
}

.subscribe-form-wrap {
  padding: 34px 40px 36px;
  max-width: 520px;
  margin: 0 auto 69px;
  background: #f5f7f7;

  .input-wrap {
    margin-right: 52px;
  }
  input {
    width: 100%;
    height: 38px;
    font-size: 22px;
    color: #919699;
    font-weight: 100;
    font-family: 'museo_sans_cyrl';
    background: transparent;
    border: none;
    border-bottom: 1px solid #c3c7c8;
    outline: none;
    vertical-align: middle;
    padding: 3px 0 0;
    border-radius: 0;

    &:focus {
      color: #2c373c;
      border-bottom-color: #d7c76e;
    }
  }
  button {
    float: right;
    top: 3px;
    margin-left: 10px;
    vertical-align: middle;
  }
}

@media (max-width: 600px) {
  .subscribe-form-wrap {
    margin: 0 -33px;
    padding: 18px 15px 23px;
    max-width: 200%;

    input {
      font-size: 15px;
    }
  }
  .having-blog {
    padding: 0 33px;
  }
}

.details-info {
  padding: 62px 0 35px;
  background: #f5f7f7;

  h1 {
    text-transform: none;
    color: #D7C86F;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 32px;
    text-align: center;
    letter-spacing: 0;
  }
  h3 {
    margin-bottom: 28px;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
  }
}

.more-detail-wrap {
  max-width: 812px;
  margin: 0 auto;
}

.hidden-content {
  transform-origin: 50% 0;
  transition: all 0.35s ease-in-out;
  height: auto;
  overflow: hidden;

  &.hidden {
    height: 0;
    opacity: 0;
  }
}

.more-detail {
  margin-bottom: 42px;
  font-size: 13px;
  color: #828f97;
  column-count: 2;
  column-gap: 45px;
  position: relative;
  z-index: 2;
  line-height: 1.4em;

  li {
    position: relative;
    margin-bottom: 20px;
    padding-left: 15px;
    z-index: 1;

    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 5px;
      width: 3px;
      height: 3px;
      background: #7D9099;
    }
  }
}

.show-more-info {
  display: block;
  background: #fff;
  text-decoration: none;
  color: #3457c0;
  margin: -10px auto 0;
  padding: 18px 0;
  width: 340px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 880px) {
  .more-detail {
    margin-bottom: 20px;
    column-count: 1;

    li {
      margin: 0 19px 20px;
    }
  }
  .details-info {
    h2, h3 {
      padding: 0 15px;
    }
  }
}

@media (max-width: 480px) {
  .show-more-info {
    width: 240px;
  }
}

@import "footer";

.loader {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
  background: rgba(255,255,255,0.8);
}

.circular{
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -25px 0 0 -25px;
  animation: rotate 2s linear infinite;
  height: 50px;
  width: 50px;
}

.path {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  animation:
  dash 1.5s ease-in-out infinite,
  color 6s ease-in-out infinite;
  stroke-linecap: round;
  stroke: #3457c0;
}

@keyframes rotate{
  100%{
    transform: rotate(360deg);
  }
}

@keyframes dash{
  0%{
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50%{
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100%{
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}

.team-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  background: url("../img/team.png") no-repeat top center;
  background-size: cover;
  top: -37px;
  height: 500px;
  text-align: center;
  margin-bottom: 50px;
  overflow: hidden;

  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.6);
  }

  &__video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    @media screen and (max-width:1024px){
      display: none;
    }
  }

  &__title, &__sub-title {
    position: relative;
    color: #2c373c;
    text-shadow: none;
    padding: 0 16px;
    z-index: 2;
  }

  &__sub-title {
    color: rgba(0, 0, 0, 0.8);
    margin: 0;
  }
}

.jobs-content {
  .post-content:after {
    margin-left: 0;
  }

  .post-content p {
    margin-left: 0;
    margin-right: 0;
  }

  .post-content .read-more {
    margin-left: 0;
  }

  .blog-post .tags{
    margin-left: 0;
  }
}

@import "../../css/pages/hire-us";
@import "subscribe-status";

@import 'reset';
@import "fonts";
@import "icons";
@import "grid";
@import "case";
@import "contact-us";

body {
  font-family: 'museo_sans_cyrl', sans-serif;
  color: #2c373c;
  font-size: 15px;
  font-weight: 300;
  -webkit-text-size-adjust: none;
}

.home-page {
  background: #fff;
}

.clearfix{
  zoom:1;
  &:before, &:after{ content:""; display:table; }
  &:after{ clear: both; }
}

a {
  color: #2c373c;
  text-decoration: none;
  font-family: 'museo_sans_cyrl', sans-serif;
}

h1 ,
.header-title  {
  letter-spacing: -2px;
  font-size: 50px;
  font-weight: 100;
  font-family: 'museo_sans_cyrl', sans-serif;
  text-transform: none;
}

h2 {
  font-size: 22px;
  font-weight: 700;
  color: #2c373c;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1px;
}

p {
  margin: 0;
}

.header {
  position: relative;
  background: url(../img/header_bg.jpg) #575f62 center no-repeat;
  background-size: cover;
  color: #fff;
  overflow: hidden;

  a {
    color: #fff;
  }
}

@import 'header';

.header-text {
    text-align: center;
    padding: 170px 0 223px 0;
}

.header-title {
  margin: 189px 10px 117px;
  text-align: center;
  font-weight: 900;
  color: #fff;
  &.small-margin {
      margin-top: 0;
      margin-bottom: 15px;
  }
}

.header-sub-title {
    color: rgba(255,255,255, 0.6);
    text-align: center;
    font-size: 17px;
    font-weight: 300;
    margin-bottom: 30px;
}
.button {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
    &--big {
        text-transform: uppercase;
        font-size: 17px;
        font-weight: 500;
        padding: 0 50px;
        height: 56px;
        line-height: 56px;
        letter-spacing: 0.05em;
        border: 0;
        outline: 0;
        box-shadow: none;
    }
    &--blue {
        background: #6B86CF;
        color: #fff;
        border-radius: 4px;
    }
}

.our-services {
    padding-top: 74px;
    h2 {
        margin-bottom: 65px;
        font-size: 22px;
        letter-spacing: 0.03em;
    }
    .projects-tabs{
        text-align: center;
        li {
            display: inline-block;
            vertical-align: top;
            margin: 0 25px;
            width: 200px;
        }
        .icon-wrap{
            margin-bottom: 25px;
            svg {
                fill: #2C373C;
                width: 67px;
                height: 62px;
            }
        }
        a {
            letter-spacing: 0;
            line-height: 17px;
            margin-bottom: 0;
        }
    }
}

.project-tabs-wrap {
  padding: 0 40px;
}

.projects-tabs {
  display: table;
  width: 100%;
  table-layout: fixed;

  li {
    display: table-cell;
    text-align: center;
  }
  a {
    position: relative;
    display: inline-block;
    margin-bottom: 94px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 21px;
    letter-spacing: 2px;
    cursor: pointer;
    color: #3457c0;

    &.active {
      color: #3457c0;
      cursor: default;

      &:after,
      &:before {
        display: block;
        content: "";
        position: absolute;
        left: 50%;
        bottom: -43px;
        margin-left: -7px;
        width: 15px;
        height: 8px;
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjgiIHZpZXdCb3g9IjAgMCAxNSA4Ij4KICA8ZGVmcz4KICAgIDxzdHlsZT4KCiAgICAgIC5jbHMtMyB7CiAgICAgICAgZmlsbDogI2QzYzQ2ZDsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9ItCz0YDRg9C/0L/QsC0xc3ZnIj4KICAgIDxwYXRoIGQ9Ik0tMC4wMTAsMC42OTcgQy0wLjAxMCwwLjY5NyAwLjY5NywtMC4wMTAgMC42OTcsLTAuMDEwIEMwLjY5NywtMC4wMTAgNy42OTcsNi45OTAgNy42OTcsNi45OTAgQzcuNjk3LDYuOTkwIDYuOTkwLDcuNjk3IDYuOTkwLDcuNjk3IEM2Ljk5MCw3LjY5NyAtMC4wMTAsMC42OTcgLTAuMDEwLDAuNjk3IFoiIGlkPSJwYXRoLTEiIGNsYXNzPSJjbHMtMyIgZmlsbC1ydWxlPSJldmVub2RkIi8+CiAgICA8cGF0aCBkPSJNMTMuOTkwLC0wLjAxMCBDMTMuOTkwLC0wLjAxMCAxNC42OTcsMC42OTcgMTQuNjk3LDAuNjk3IEMxNC42OTcsMC42OTcgNy42OTcsNy42OTcgNy42OTcsNy42OTcgQzcuNjk3LDcuNjk3IDYuOTkwLDYuOTkwIDYuOTkwLDYuOTkwIEM2Ljk5MCw2Ljk5MCAxMy45OTAsLTAuMDEwIDEzLjk5MCwtMC4wMTAgWiIgaWQ9InBhdGgtMiIgY2xhc3M9ImNscy0zIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KICA8L2c+Cjwvc3ZnPgo=);
        animation: topBounce ease-in-out 0.5s;
        transform-origin: 50% 100%;
        animation-play-state: running;
      }
      svg {
        fill: #d7c76e;
//        stroke: #d7c76e;
      }
    }
    &:after,
    &:before {
      display: none;
    }
  }
  .icon-wrap {
    display: block;
    margin: 0 auto 17px;

    svg {
      fill: #fff;
//      stroke:#fff;
    }
  }
}

@media (max-width: 1023px) {
  .our-services .projects-tabs {
    display: block;
    li {
      width: 32%;
      margin: 0;

      &:nth-child(3n){
          margin-bottom: 55px;
      }
      &:last-child {
          margin-bottom: 0;
      }
    }
    a, a.active {
      &:after,
      &:before {
        bottom: -30px;
      }
    }
    .icon-wrap {
      margin-bottom: 10px;
    }
  }
  .project-tabs-wrap {
    padding: 0;
  }
}

@keyframes topBounce{
  0% {
    transform:  translate(0px,-21px)  scaleX(1.00) scaleY(1.00) ;
  }
  22% {
    transform:  translate(0px,0px)  scaleX(1.30) scaleY(0.40) ;
  }
  45% {
    transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
  68% {
    transform:  translate(0px,0px)  scaleX(1.20) scaleY(0.70) ;
  }
  100% {
    transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;
  }
}

.projects-list {
  position: relative;
  overflow: hidden;

  .projects-row {
    overflow: hidden;
    background: #fff;
    transition: all 0.4s ease-in-out;
  }
  .project-cell {
    float: left;
    text-align: center;
    width: 41.0938%;
    overflow: hidden;

    &:hover {
      .project-info {
        opacity: 1;
      }
      .customer-comment {
        opacity: 1;
      }
      .project-info-text {
        opacity: 1;
      }
      img:not(.customer-photo) {
        transform: scale(1.02);
      }
    }
    a {
      display: block;
      position: relative;
      color: #fff;
    }
    img {
      width: 100%;
      vertical-align: top;
      transition: all 0.3s ease-in;
      animation: imagesCell ease-in-out 0.3s 1;
    }
  }
  &.equal-list {
      .project-cell {
          width: 50%;
      }
  }
  .project-cell-l {
    width: 58.9062%;

    .project-info .helper {
//      height: 74%;
    }
  }

  .project-info {
    font-size: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: rgba(52, 87 , 192, .85);
    opacity: 0;
    transition: all 0.2s ease;

    .helper {
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
  }
  .project-name {
    display: block;
    margin-bottom: 20px;
    font-size: 52px;
    font-weight: 700;
    letter-spacing: -3px;
  }
  .project-info-text {
    display: inline-block;
    vertical-align: middle;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transition-delay: 0.1s;
    transform: translateY(0px);
  }
  .project-description {
    display: inline-block;
    width: 285px;
    font-size: 15px;
  }
  .project-cell .customer-photo {
    position: absolute;
    bottom: -41px;
    right: 0;
    width: 213px;
  }
  .customer-comment {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 31px;
    font-size: 18px;
    padding-left: 45px;
    text-align: left;
    opacity: 0;
    transition: all 0.15s ease-in-out;
    transition-delay: 0.1s;
    transform: translateY(0px);

    .icon {
      position: absolute;
      top: -35px;
      left: 47px;
    }
  }
  .comment-text {
    display: block;
    margin-bottom: 25px;
    line-height: 1.33;
    max-width: 60%;
  }
  .customer-name {
    display: block;
    font-size: 21px;
  }
  .customer-position {
    color: #c5cbe7;
    font-size: 13px;
  }
  .prev-tab,
  .next-tab {
    display: block;
    position: absolute;
    left: -79px;
    top: 50%;
    width: 120px;
    height: 120px;
    background: rgba(44,55,60, 0.4);
    transform: translateY(-50%);
    z-index: 5;
    border-radius: 50%;
    cursor: pointer;

    &.disabled {
      background: rgba(44,55,60, 0.1);
      cursor: default;

      &:after {
        border-color: #687174;
      }
    }
    &:after {
      content: "";
      position: absolute;
      right: 18px;
      top: 50%;
      width: 14px;
      height: 14px;
      border: solid 1px #fff;
      border-top-width: 0;
      border-right-width: 0;
      transform-origin: 0.5 0.5;
      transform: rotate(45deg) translateY(-50%);
    }
  }
  .next-tab {
    left: auto;
    right: -79px;

    &:after {
      left: 8px;
      right: auto;
      border-width: 0;
      border-right-width: 1px;
      border-top-width: 1px;
    }
  }
}

@keyframes imagesCell {
  0% {
//    transform: translateY(30px);
    opacity: 0;
  }
  100% {
//    transform: translateY(0);
    opacity: 1;
  }
}

.open-source {
  h2 {
    margin: 105px 0 53px;
    letter-spacing: 0.03em;
  }
}

@media (max-width: 980px) {
  .projects-list {
    .customer-comment {
      display: none;
    }
    .project-cell-l {
      .project-info {
        .helper {
          height: 100%;
        }
      }
    }
  }
}

@media (max-width: 800px) {
  .our-services{
    padding: 33px 33px 0 33px;
    h2 {
      margin-bottom: 20px;
    }
  }
  .header-text {
      padding: 115px 10px 120px 10px;
  }
  .projects-list {
    .project-cell {
      float: none;
      width: 100%;
    }
    .prev-tab,
    .next-tab {
      display: none;
    }
    &.equal-list {
        .project-cell {
            width: 100%;
        }
    }
  }
  .open-source {
    h2 {
      margin: 100px 10px 26px;
    }
  }
}

@media (max-width: 400px) {
  .our-services {
    .projects-tabs {
      width: 220px;
      margin: 0 auto;
      li {
        display: block;
        width: 100%;
        text-align: left;
        margin-bottom: 12px;
        &:nth-child(3n) {
          margin-bottom: 12px;
        }
        &:last-child {
            margin-bottom: 0;
        }
      }
      a {
        >span {
          display: inline-block;
          vertical-align: middle;
          &:last-child {
            width: 138px;
          }
        }
      }
      .icon-wrap {
        margin-right: 10px;
        margin-bottom: 0;
      }
    }
  }
}

@media (max-width: 720px) {
  div.tabs-cnt {
    margin-bottom: 74px;

    .tabs-content {
      padding: 0 33px;
      font-size: 22px;
      line-height: 1.5;
    }
  }
  .open-source {
    h2 {
        margin-top: 78px;
    }
  }
}

@media (max-width: 600px) {
  .open-source {
    .tabs-cnt .tabs-header li {
      width: 44%;
      margin: 0;
    }
  }
}

.tabs-cnt {
  max-width: 812px;
  margin: 0 auto 94px;

  .tabs-header {
    margin-bottom: 24px;
    text-align: center;

    li {
      display: inline-block;
      margin: 0 9px;
    }
  }
  .tab-title {
    display: block;
    border: solid 1px transparent;
    padding: 7px 11px;
    font-size: 16px;
    color: #3457c0;
    cursor: pointer;

    &.active {
      border-color: #d7c76e;
      color: #2c373c;
    }
  }
  .tabs-content {
    font-size: 32px;
    font-weight: 100;
    line-height: 42px;
    text-align: center;

    a {
      color: #3457c0;
      cursor: pointer;

      &:hover {
        color: #ed002d;
        border-bottom: solid 1px;
      }
    }
  }
  .tab {
    display: none;

    &.active {
      display: block;
    }
  }
  p {
    letter-spacing: 1px;
  }
}

.sensiolabs {
  margin: 128px auto 74px;
  max-width: 812px;
  width: 81%;

  .sensiolabs-logo {
    margin-right: 20px;
    margin-bottom: 20px;
    display: inline-block;
  }
  p {
    width: 500px;
    font-size: 24px;
    font-weight: 100;
    line-height: 1.5;
    float: right;
  }
  a {
    color: #3457C0;

    &:hover {
      color: #ED002D;
      border-bottom: solid 1px;
    }
  }
  &::before {
    content: "";
    display: block;
    width: 188px;
    height: 1px;
    background-color: #c3c7c8;
    position: absolute;
    left: 50%;
    margin-left: -94px;
    margin-top: -64px;
  }
}

@media (max-width: 880px) {
  .sensiolabs {
    text-align: center;
    margin-top: 47px;

    &:before {
      display: none;
    }
    .sensiolabs-logo {
      margin-right: 0;
    }
    p {
      float: none;
      width: auto;
    }
  }
}
@media (max-width: 720px) {
  .sensiolabs p {
    font-size: 22px;
  }
}

.conference {
  padding-bottom: 79px;
  margin-bottom: 65px;
  border-top: solid 1px transparent;
  background: url(../img/conf-bg.jpg) center no-repeat;
  background-size: cover;
  color: #fff;

  h2 {
    margin-top: 66px;
    color: #fff;
  }
  .fwdays {
    margin-top: 69px;

    .conf-logo {
      margin-left: -13px;
    }
  }
  .cnc {
    margin-top: 135px;

    .conf-logo {
    }
  }
  p {
    margin: 140px 0 48px;
    font-size: 18px;
    line-height: 26px;
    font-weight: 100;
  }
}
.arrow-button {
  display: inline-block;
  position: relative;
  width: 39px;
  height: 39px;
  background: transparent;
  cursor: pointer;
  text-align: center;
  border: 0px solid transparent;

  &:hover {

    &:before {
      top: 100%;
      transform: rotateX(90deg);
    }
    &:after {
      top: 0;
      transform: rotateX(0deg);
    }
  }
  &:after,
  &:before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    width: 39px;
    height: 39px;
    transition: all 0.2s ease-in-out;
  }
  &:after {
    top: -100%;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjM5IiBoZWlnaHQ9IjM5IiB2aWV3Qm94PSIwIDAgMzkgMzkiPgogIDxkZWZzPgogICAgPHN0eWxlPgoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjZDdjNzZlOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBkPSJNMC4wMDAsMzkuMDAwIEMwLjAwMCwzOS4wMDAgMC4wMDAsLTAuMDAwIDAuMDAwLC0wLjAwMCBDMC4wMDAsLTAuMDAwIDM5LjAwMCwtMC4wMDAgMzkuMDAwLC0wLjAwMCBDMzkuMDAwLC0wLjAwMCAzOS4wMDAsMzkuMDAwIDM5LjAwMCwzOS4wMDAgQzM5LjAwMCwzOS4wMDAgMC4wMDAsMzkuMDAwIDAuMDAwLDM5LjAwMCBaTTE2LjgzMywxMS43ODcgQzE2LjgzMywxMS43ODcgMTUuODMzLDEyLjc4NyAxNS44MzMsMTIuNzg3IEMxNS44MzMsMTIuNzg3IDIyLjU0NywxOS41MDAgMjIuNTQ3LDE5LjUwMCBDMjIuNTQ3LDE5LjUwMCAxNS44MzMsMjYuMjEzIDE1LjgzMywyNi4yMTMgQzE1LjgzMywyNi4yMTMgMTYuODMzLDI3LjIxMyAxNi44MzMsMjcuMjEzIEMxNi44MzMsMjcuMjEzIDI0LjU0NywxOS41MDAgMjQuNTQ3LDE5LjUwMCBDMjQuNTQ3LDE5LjUwMCAxNi44MzMsMTEuNzg3IDE2LjgzMywxMS43ODcgWiIgaWQ9InBhdGgtMSIgY2xhc3M9ImNscy0yIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+Cg==);
    transform-origin: 50% 100%;
    transform: rotateX(-90deg);
  }
  &:before {
    top: 0;
    transform-origin: 50% 0;
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgd2lkdGg9IjM5IiBoZWlnaHQ9IjM5IiB2aWV3Qm94PSIwIDAgMzkgMzkiPgogIDxkZWZzPgogICAgPHN0eWxlPgoKICAgICAgLmNscy0yIHsKICAgICAgICBmaWxsOiAjZDdjNzZlOwogICAgICB9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8cGF0aCBkPSJNMC4wMDAsMzkuMDAwIEMwLjAwMCwzOS4wMDAgMC4wMDAsLTAuMDAwIDAuMDAwLC0wLjAwMCBDMC4wMDAsLTAuMDAwIDM5LjAwMCwtMC4wMDAgMzkuMDAwLC0wLjAwMCBDMzkuMDAwLC0wLjAwMCAzOS4wMDAsMzkuMDAwIDM5LjAwMCwzOS4wMDAgQzM5LjAwMCwzOS4wMDAgMC4wMDAsMzkuMDAwIDAuMDAwLDM5LjAwMCBaTTM4LjAwMCwxLjAwMCBDMzguMDAwLDEuMDAwIDEuMDAwLDEuMDAwIDEuMDAwLDEuMDAwIEMxLjAwMCwxLjAwMCAxLjAwMCwzOC4wMDAgMS4wMDAsMzguMDAwIEMxLjAwMCwzOC4wMDAgMzguMDAwLDM4LjAwMCAzOC4wMDAsMzguMDAwIEMzOC4wMDAsMzguMDAwIDM4LjAwMCwxLjAwMCAzOC4wMDAsMS4wMDAgWk0xNi44MzMsMTEuNzg3IEMxNi44MzMsMTEuNzg3IDI0LjU0NywxOS41MDAgMjQuNTQ3LDE5LjUwMCBDMjQuNTQ3LDE5LjUwMCAxNi44MzMsMjcuMjEzIDE2LjgzMywyNy4yMTMgQzE2LjgzMywyNy4yMTMgMTUuODMzLDI2LjIxMyAxNS44MzMsMjYuMjEzIEMxNS44MzMsMjYuMjEzIDIyLjU0NywxOS41MDAgMjIuNTQ3LDE5LjUwMCBDMjIuNTQ3LDE5LjUwMCAxNS44MzMsMTIuNzg3IDE1LjgzMywxMi43ODcgQzE1LjgzMywxMi43ODcgMTYuODMzLDExLjc4NyAxNi44MzMsMTEuNzg3IFoiIGlkPSJwYXRoLTEiIGNsYXNzPSJjbHMtMiIgZmlsbC1ydWxlPSJldmVub2RkIi8+Cjwvc3ZnPgo=) ;
  }
}
.conference-list {
//  overflow: hidden;

  li {
    float: left;
    margin-left: 10.1562%;
    width: 28.5156%;

    &:last-child {
      float: right;
      margin-right: 12.6%;
    }
  }
}

@media (max-width: 720px) {
  .conference {
    padding-bottom: 0;
    margin-bottom: 32px;
    background: none;

    h2 {
      margin: 0 0 -68px;
    }
    p {
      margin: 40px 33px 22px;
      font-size: 16px;
    }
  }
  .conference-list {
    li {
      float: none;
      padding-bottom: 26px;
      width: auto;
      text-align: center;

      &.fwdays {
        margin: 0;
        padding-top: 148px;
        background: url(../img/fwdays-mobile-bg.jpg) center #2b3942;
        background-size: cover;
      }
      &.cnc {
        margin: 0;
        padding-top: 101px;
        background: url(../img/cnc-mobile-bg.jpg) top  #413828;
        background-size: cover;
      }
    }
  }
}

.having-blog {
  padding: 0 10.1562%;

  h2 {
    margin-bottom: 59px;
  }
  h3 {
    margin-bottom: 16px;
    font-weight: 500;
    font-size: 24px;
    line-height: 28px;
  }
  p {
    margin-bottom: 37px;
    font-size: 15px;
    line-height: 1.33;
    color: #919699;
    font-family: "Helvetic Neue", Helvetica, Arial;
    font-weight: normal;
  }
  .user {
    overflow: hidden;

    img {
      float: left;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .user-name {
      margin: 8px 0 5px 62px;
      font-size: 17px;
      font-weight: 700;
    }
    .post-date {
      margin-left: 62px;
      font-size: 13px;
      color: #919699;
    }
  }
}

.preview-blog-list {
  overflow: hidden;
  margin-bottom: 70px;

  li {
    float: left;
    margin-right: 6.0784%;
    width: 28.6274%;

    &:last-child,
    &:nth-child(3n)  {
      margin-right: 0;
    }
  }
}

@media (max-width: 1023px) {
  .having-blog {
    padding: 0 33px;

    h2 {
      margin-bottom: 31px;
    }
    h3 {
      font-size: 20px;
    }
    p {
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 9px;
//      font-weight: 500;

    }
  }
  .preview-blog-list {
    margin-bottom: 10px;

    li {
      margin-right: 0;
      margin-bottom: 40px;
      width: auto;
    }
  }
}

@media (max-width: 800px) {
  .having-blog {
    padding: 0 92px;
  }
}

.subscribe-form-wrap {
  padding: 34px 40px 36px;
  max-width: 520px;
  margin: 0 auto 69px;
  background: #f5f7f7;

  .input-wrap {
    margin-right: 52px;
  }
  input {
    width: 100%;
    height: 38px;
    font-size: 22px;
    color: #919699;
    font-weight: 100;
    font-family: 'museo_sans_cyrl';
    background: transparent;
    border: none;
    border-bottom: 1px solid #c3c7c8;
    outline: none;
    vertical-align: middle;
    padding: 3px 0 0;
    border-radius: 0;

    &:focus {
      color: #2c373c;
      border-bottom-color: #d7c76e;
    }
  }
  button {
    float: right;
    top: 3px;
    margin-left: 10px;
    vertical-align: middle;
  }
}

@media (max-width: 600px) {
  .subscribe-form-wrap {
    margin: 0 -33px;
    padding: 18px 15px 23px;
    max-width: 200%;

    input {
      font-size: 15px;
    }
  }
  .having-blog {
    padding: 0 33px;
  }
}

.details-info {
  padding: 62px 0 35px;
  background: #f5f7f7;

  h1 {
    text-transform: none;
    color: #D7C86F;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 32px;
    text-align: center;
    letter-spacing: 0;
  }
  h3 {
    margin-bottom: 28px;
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
  }
}

.more-detail-wrap {
  max-width: 812px;
  margin: 0 auto;
}

.hidden-content {
  transform-origin: 50% 0;
  transition: all 0.35s ease-in-out;
  height: auto;
  overflow: hidden;

  &.hidden {
    height: 0;
    opacity: 0;
  }
}

.more-detail {
  margin-bottom: 42px;
  font-size: 13px;
  color: #828f97;
  column-count: 2;
  column-gap: 45px;
  position: relative;
  z-index: 2;
  line-height: 1.4em;

  li {
    position: relative;
    margin-bottom: 20px;
    padding-left: 15px;
    z-index: 1;

    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 5px;
      width: 3px;
      height: 3px;
      background: #7D9099;
    }
  }
}

.show-more-info {
  display: block;
  background: #fff;
  text-decoration: none;
  color: #3457c0;
  margin: -10px auto 0;
  padding: 18px 0;
  width: 340px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 880px) {
  .more-detail {
    margin-bottom: 20px;
    column-count: 1;

    li {
      margin: 0 19px 20px;
    }
  }
  .details-info {
    h2, h3 {
      padding: 0 15px;
    }
  }
}

@media (max-width: 480px) {
  .show-more-info {
    width: 240px;
  }
}

@import "footer";

.loader {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 5;
  background: rgba(255,255,255,0.8);
}

.circular{
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -25px 0 0 -25px;
  animation: rotate 2s linear infinite;
  height: 50px;
  width: 50px;
}

.path {
  stroke-dasharray: 1,200;
  stroke-dashoffset: 0;
  animation:
  dash 1.5s ease-in-out infinite,
  color 6s ease-in-out infinite;
  stroke-linecap: round;
  stroke: #3457c0;
}

@keyframes rotate{
  100%{
    transform: rotate(360deg);
  }
}

@keyframes dash{
  0%{
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
  }
  50%{
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
  }
  100%{
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
  }
}

@import "../../css/pages/hire-us";
@import "subscribe-status";


Fix the "selected" checkmark in tree picker search results

// Tree
// -------------------------
.umb-tree {
    margin: 0;
    min-width: 100%;
    width: auto;
    padding: 0 0 20px;
    list-style-type: none;

    * {
        white-space: nowrap;
    }

    a, a:hover {
        outline: none;
        text-decoration: none;
    }

    ins {
        margin: -4px 0 0 -16px;
        width: 16px;
        height: 16px;
        visibility: hidden;
        text-decoration: none;
        font-size: 12px;
        transition: color 120ms;

        &:hover {
            color: @ui-option-type-hover;
        }
    }

    i.noSpr {
        display: inline-block;
        margin-top: 1px;
        width: 16px;
        height: 16px;
        line-height: 16px;
    }

    ul {
        padding: 0;
        margin: 0;
        min-width: 100%;
        width: 100%;

        &.collapsed {
            display: none;
        }
    }

    //loader defaults
    .umb-loader {
        height: 10px;
        margin: 10px 10px 10px 10px;
    }

    .search-subtitle {
        color: @gray-7;
        display: block;
        padding-left: 35px;
    }
}

body.touch .umb-tree {
    ins {
        font-size: 14px;
        visibility: visible;
        padding: 7px;
    }

    .umb-tree-item > .umb-tree-item__inner {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 110%;
    }

    // change height of this if touch devices should have a different height of preloader.
    .umb-tree-item .l div {
        padding: 0;
    }
}

.umb-tree-root, .umb-tree-item__inner {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    border:2px solid transparent;

    color: @ui-option-type;
    a {
        color: @ui-option-type;
    }

    &:hover {
        background: @ui-option-hover;

        color: @ui-option-type-hover;
        a {
            color: @ui-option-type-hover;
        }

        > .umb-options {
            visibility: visible;
        }

        .umb-tree-icon {
            color: @ui-option-type-hover;
        }
    }
}

.umb-tree-header {
    display: flex;
    padding: 20px 0 20px 20px;
    box-sizing: border-box;
    color: @gray-2;
    font-weight: bold;
    font-size: 15px;
}

.umb-tree-icon,
.umb-tree-node-search {
    cursor: pointer;
}

.umb-tree .umb-search-group {
    position: inherit;
    display: inherit;

    list-style: none;

    h6 {
        padding: 10px 0 10px 20px;
        font-weight: inherit;
        background: @gray-10;
        font-size: 14px;
    }

    &:hover {
        background: inherit;
    }

    &-item {
        padding: 4px 0;

        &:hover {
            background-color: @gray-10;
        }

        &-link {
            display: block;
        }
    }

    &-link {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        font-weight: normal !important;
    }
}

.umb-tree .umb-tree-node-checked > .umb-tree-item__inner > i[class^="icon-"],
.umb-tree .umb-tree-node-checked > .umb-tree-item__inner > i[class*=" icon-"],
.umb-tree .umb-tree-node-checked .umb-search-group-item-name > i[class^="icon-"],
.umb-tree .umb-tree-node-checked .umb-search-group-item-name > i[class*=" icon-"] {
    font-family: 'icomoon' !important;
    color: @green !important;

    &::before {
        content: "\e165" !important;
        font-family: inherit;
    }
}

.umb-options {
    visibility: hidden;
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    padding: 9px 5px;
    text-align: center;
    margin: 0 10px 0 auto;
    cursor: pointer;
    border-radius: @baseBorderRadius;

    &:hover {
        background: @btnBackgroundHighlight;
    }

    i {
        height: 5px !important;
        width: 5px !important;
        border-radius: 20px;
        background: @black;
        display: inline-block;
        margin: 0 2px 0 0;

        &:last-child {
            margin: 0;
        }
    }

    .hide-options & {
        display: none !important;
    }
}

// Tree item states
// -------------------------
.not-published {
    > .umb-tree-item__inner > i.icon,
    > .umb-tree-item__inner > a {
        opacity: 0.6;
    }
}

.not-allowed {
    > .umb-tree-item__inner > i.icon,
    > .umb-tree-item__inner > a {
        cursor: not-allowed;
    }
}

.umb-tree-item__annotation {
    &::before {
        font-family: 'icomoon';
        position: absolute;
        bottom: 0;
    }
}

.has-unpublished-version > .umb-tree-item__inner > .umb-tree-item__annotation::before {
    content: "\e25a";
    color: @green;
    font-size: 20px;
    margin-left: -25px;
}

.is-container > .umb-tree-item__inner > .umb-tree-item__annotation::before {
    content: "\e04e";
    color: @blue;
    font-size: 9px;
    margin-left: -20px;
}

.protected > .umb-tree-item__inner > .umb-tree-item__annotation::before {
    content: "\e256";
    color: @red;
    font-size: 20px;
    margin-left: -25px;
}

.locked > .umb-tree-item__inner > .umb-tree-item__annotation::before {
    content: "\e0a7";
    color: @red;
    font-size: 9px;
    margin-left: -20px;
}

.no-access {
    .umb-tree-icon,
    .root-link,
    .umb-tree-item__label {
        color: @gray-7;
        cursor: not-allowed;
    }
}

// Tree icons
// -------------------------
.umb-tree-icon {
    vertical-align: middle;
    margin: 0 13px 0 0;
    //color: @gray-1;
    color: @ui-option-type;
    font-size: 20px;

    &.blue {
        color: @blue;
    }

    &.green {
        color: @green;
    }

    &.purple {
        color: @purple;
    }

    &.orange {
        color: @orange;
    }

    &.red {
        color: @red;
    }
}

// Tree
// -------------------------
.umb-tree {
    margin: 0;
    min-width: 100%;
    width: auto;
    padding: 0 0 20px;
    list-style-type: none;

    * {
        white-space: nowrap;
    }

    a, a:hover {
        outline: none;
        text-decoration: none;
    }

    ins {
        margin: -4px 0 0 -16px;
        width: 16px;
        height: 16px;
        visibility: hidden;
        text-decoration: none;
        font-size: 12px;
        transition: color 120ms;

        &:hover {
            color: @ui-option-type-hover;
        }
    }

    i.noSpr {
        display: inline-block;
        margin-top: 1px;
        width: 16px;
        height: 16px;
        line-height: 16px;
    }

    ul {
        padding: 0;
        margin: 0;
        min-width: 100%;
        width: 100%;

        &.collapsed {
            display: none;
        }
    }

    //loader defaults
    .umb-loader {
        height: 10px;
        margin: 10px 10px 10px 10px;
    }

    .search-subtitle {
        color: @gray-7;
        display: block;
        padding-left: 35px;
    }
}

body.touch .umb-tree {
    ins {
        font-size: 14px;
        visibility: visible;
        padding: 7px;
    }

    .umb-tree-item > .umb-tree-item__inner {
        padding-top: 8px;
        padding-bottom: 8px;
        font-size: 110%;
    }

    // change height of this if touch devices should have a different height of preloader.
    .umb-tree-item .l div {
        padding: 0;
    }
}

.umb-tree-root, .umb-tree-item__inner {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    border:2px solid transparent;

    color: @ui-option-type;
    a {
        color: @ui-option-type;
    }

    &:hover {
        background: @ui-option-hover;

        color: @ui-option-type-hover;
        a {
            color: @ui-option-type-hover;
        }

        > .umb-options {
            visibility: visible;
        }

        .umb-tree-icon {
            color: @ui-option-type-hover;
        }
    }
}

.umb-tree-header {
    display: flex;
    padding: 20px 0 20px 20px;
    box-sizing: border-box;
    color: @gray-2;
    font-weight: bold;
    font-size: 15px;
}

.umb-tree-icon,
.umb-tree-node-search {
    cursor: pointer;
}

.umb-tree .umb-search-group {
    position: inherit;
    display: inherit;

    list-style: none;

    h6 {
        padding: 10px 0 10px 20px;
        font-weight: inherit;
        background: @gray-10;
        font-size: 14px;
    }

    &:hover {
        background: inherit;
    }

    &-item {
        padding: 4px 0;

        &:hover {
            background-color: @gray-10;
        }

        &-link {
            display: block;
        }
    }

    &-link {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        font-weight: normal !important;
    }
}

.umb-tree .umb-tree-node-checked > .umb-tree-item__inner > i[class^="icon-"],
.umb-tree .umb-tree-node-checked > .umb-tree-item__inner > i[class*=" icon-"] {
    font-family: 'icomoon' !important;
    color: @green !important;

    &::before {
        content: "\e165" !important;
        font-family: inherit;
    }
}

.umb-options {
    visibility: hidden;
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-end;
    padding: 9px 5px;
    text-align: center;
    margin: 0 10px 0 auto;
    cursor: pointer;
    border-radius: @baseBorderRadius;

    &:hover {
        background: @btnBackgroundHighlight;
    }

    i {
        height: 5px !important;
        width: 5px !important;
        border-radius: 20px;
        background: @black;
        display: inline-block;
        margin: 0 2px 0 0;

        &:last-child {
            margin: 0;
        }
    }

    .hide-options & {
        display: none !important;
    }
}

// Tree item states
// -------------------------
.not-published {
    > .umb-tree-item__inner > i.icon,
    > .umb-tree-item__inner > a {
        opacity: 0.6;
    }
}

.not-allowed {
    > .umb-tree-item__inner > i.icon,
    > .umb-tree-item__inner > a {
        cursor: not-allowed;
    }
}

.umb-tree-item__annotation {
    &::before {
        font-family: 'icomoon';
        position: absolute;
        bottom: 0;
    }
}

.has-unpublished-version > .umb-tree-item__inner > .umb-tree-item__annotation::before {
    content: "\e25a";
    color: @green;
    font-size: 20px;
    margin-left: -25px;
}

.is-container > .umb-tree-item__inner > .umb-tree-item__annotation::before {
    content: "\e04e";
    color: @blue;
    font-size: 9px;
    margin-left: -20px;
}

.protected > .umb-tree-item__inner > .umb-tree-item__annotation::before {
    content: "\e256";
    color: @red;
    font-size: 20px;
    margin-left: -25px;
}

.locked > .umb-tree-item__inner > .umb-tree-item__annotation::before {
    content: "\e0a7";
    color: @red;
    font-size: 9px;
    margin-left: -20px;
}

.no-access {
    .umb-tree-icon,
    .root-link,
    .umb-tree-item__label {
        color: @gray-7;
        cursor: not-allowed;
    }
}

// Tree icons
// -------------------------
.umb-tree-icon {
    vertical-align: middle;
    margin: 0 13px 0 0;
    //color: @gray-1;
    color: @ui-option-type;
    font-size: 20px;

    &.blue {
        color: @blue;
    }

    &.green {
        color: @green;
    }

    &.purple {
        color: @purple;
    }

    &.orange {
        color: @orange;
    }

    &.red {
        color: @red;
    }
}


Фикс вёрстки.

Фикс вёрстки.

// базовые цвета

@color-red: #d2360c;
@color-orange: #d6380d;
@color-darkgrey: #2b2b2a;
@color-whitebg: #f0f0eb;
@color-white: #fefdfd;
@color-darkwhite: #e0dfdf;	// цвет шрифта для тёмного фона
@color-grey: #9a9594;
@color-lightgrey: #b3b3b3;	// цвет для рамок таблиц и т.п.
@color-links: blue;
@color-links-hover: blue;
@color-links-visited: blue;
@color-links-active: blue;

// размеры шрифтов

@font-small: 13px;
@font-medium: 14px;
@font-large: 15px;
@font-h1: 22px;
@font-h2: 20px;
@font-h3: 18px;
@font-h4: 17px;
@font-h5: 16px;
@font-h6: 15px;

// размеры

@leftcolumn-width: 260px;
@rightcolumn-width: 260px;

// стандартные элементы

html {
	background: @color-darkgrey;
	text-rendering: optimizeLegibility;
	font-family: Helvetica, Arial, Garuda, sans-serif;
	font-size: @font-medium;
}

body {
	background: @color-whitebg;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 8px;
	margin: 0 @rightcolumn-width 0 @leftcolumn-width;
	min-height: 100%;
	min-width: (980px - @leftcolumn-width - @rightcolumn-width);
	.transition( all 0.3s ease-out );
}

.headers-style() {
	color: @color-red;
	font-weight: normal;
}

h1 {
	font-size: @font-h1;
	.headers-style();
}
h2 {
	font-size: @font-h2;
	.headers-style();
}
h3 {
	font-size: @font-h3;
	.headers-style();
}
h4 {
	font-size: @font-h4;
	.headers-style();
}
h5 {
	font-size: @font-h5;
	.headers-style();
}
h6 {
	font-size: @font-h6;
	.headers-style();
}

table {
	width: 100%;
	border: 1px solid @color-lightgrey;
	.border-radius( 2px );
	tr {
		th, td {
			text-align: left;
			border-bottom: 1px dotted @color-lightgrey;
			padding: 8px 16px;
		}
		&:last-child {
			th, td {
				border-bottom: none;
			}
		}
	}
}

input[type='button'],
input[type='submit'],
.button {
	display: inline-block;
	background-color: @color-darkgrey;
	color: @color-white;
	border: none;
	border-radius: 11px;
	padding: 2px 8px 3px;
	margin: 8px 2px 2px 0;
	width: auto;
	text-decoration: none;
	cursor: pointer;
	&:hover, &:visited, &:active {
		color: @color-white;
	}
}

a {
	color: @color-links;
	&:hover {
		color: @color-links-hover;
	}
	&:active {
		color: @color-links-active;
	}
	&:visited {
		color: @color-links-visited;
	}
	&.dashed {
		text-decoration: none;
		border-bottom: 1px dashed @color-links;
		&:hover {
			border-color: @color-links-hover;
		}
		&:active {
			border-color: @color-links-active;
		}
		&:visited {
			border-color: @color-links-visited;
		}
	}
}

// левый столбец

#left {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: @leftcolumn-width;
	overflow: visible;
}

// меню

#menu_adm {
	position: absolute;
	top: 12px;
	left: 0;
	width: @leftcolumn-width;
	color: @color-darkwhite;
	background: @color-darkgrey;

	> ul {
		width: @leftcolumn-width;
		padding: 0;
		margin: 0;
		list-style-type: none;
		> li {
			font-size: @font-large;
			position: relative;
			cursor: pointer;
			> span {
				padding: 8px 0 8px 40px;
				display: block;
				.transition( all 0.1s linear );
				&:hover {
					color: @color-red;
				}
				&:before {
					position: absolute;
					top: 8px;
					left: 15px;
					.websymbols;
				}
			}
			&#menu_content > span:before {
				content: "?";
			}
			&#menu_catalog > span:before {
				content: "i";
			}
			&#menu_media > span:before {
				content: "d";
			}
			&#menu_talks > span:before {
				content: "L";
			}
			&#menu_users > span:before {
				content: "¡";
			}
			&#menu_settings > span:before {
				content: "^";
			}
			&#menu_development > span:before {
				content: "T";
			}

			&.selected.match > span {
				background: @color-orange;
				color: @color-white;
				&:before {
					color: @color-white;
				}
				&:after {
					display: inline-block;
					position: absolute;
					left: @leftcolumn-width;
					top: 0;
					width: 0;
					height: 0;
					border-left: 5px solid @color-orange;
					border-top: 16px solid transparent;
					border-bottom: 16px solid transparent;
					content: '';
				}
			}

			> ul {
				padding: 2px 0 0 0;
				margin: 0;
				list-style-type: none;
				display: none;
			}
			&.selected > ul {
				display: block;
			}
			> ul > li {
				position: relative;
				a, a:hover, a:visited, a:active {
					display: block;
					font-size: @font-small;
					padding: 6px 0 6px 40px;
					color: @color-darkwhite;
					text-decoration: none;
					.transition( all 0.1s linear );
				}
				a:hover {
					color: @color-red;
				}
				&.selected {
					background: @color-orange;
					a, a:hover, a:visited, a:active {
						color: white;
						&:after {
							display: inline-block;
							position: absolute;
							left: @leftcolumn-width;
							top: 0;
							width: 0;
							height: 0;
							border-left: 5px solid @color-orange;
							border-top: 13px solid transparent;
							border-bottom: 13px solid transparent;
							content: '';
						}
					}
				}
			}
		}
	}
}

// лого и копирайт

#signature {
	position: absolute;
	bottom: 0;
	left: 0;
	width: @leftcolumn-width;
	padding: 0 0 6px 10px;
	font-size: @font-medium;

	#signature_difra {
		height: 17px;
		background: url('/images/difra.svg') no-repeat;
		display: block;
		text-indent: 54px;
		padding-top: 9px;
		color: @color-darkwhite;
	}
	#signature_ajam {
		height: 17px;
		display: block;
		color: @color-grey;
		a,
		a:hover,
		a:visited,
		a:active {
			color: @color-grey;
		}
	}
}

// правый столбец

#right {
	position: absolute;
	right: -@rightcolumn-width;
	width: ( @rightcolumn-width - 20px );
	top: 0;
	padding: 10px;
	color: @color-white;
	.transition( all 0.3s ease-out );
}

// адаптивка

@media screen and (max-width: 1239px) {
	body {
		margin-right: 0;
	}
	#right {
		display: none;
	}
}

// дополнительные стили

.small {
	font-size: @font-small;
}

.error {
	&, &:hover, &:active, &:visited {
		color: @color-red;
		&.dashed {
			border-color: @color-red;
		}
	}
}

// базовые цвета

@color-red: #d2360c;
@color-orange: #d6380d;
@color-darkgrey: #2b2b2a;
@color-whitebg: #f0f0eb;
@color-white: #fefdfd;
@color-darkwhite: #e0dfdf;	// цвет шрифта для тёмного фона
@color-grey: #9a9594;
@color-lightgrey: #b3b3b3;	// цвет для рамок таблиц и т.п.
@color-links: blue;
@color-links-hover: blue;
@color-links-visited: blue;
@color-links-active: blue;

// размеры шрифтов

@font-small: 13px;
@font-medium: 14px;
@font-large: 15px;
@font-h1: 22px;
@font-h2: 20px;
@font-h3: 18px;
@font-h4: 17px;
@font-h5: 16px;
@font-h6: 15px;

// размеры

@leftcolumn-width: 260px;
@rightcolumn-width: 260px;

// стандартные элементы

html {
	background: @color-darkgrey;
	text-rendering: optimizeLegibility;
	font-family: Helvetica, Arial, Garuda, sans-serif;
	font-size: @font-medium;
}

body {
	background: @color-whitebg;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 8px;
	margin: 0 @rightcolumn-width 0 @leftcolumn-width;
	min-height: 100%;
	min-width: (980px - @leftcolumn-width - @rightcolumn-width);
	.transition( all 0.3s ease-out );
}

.headers-style() {
	color: @color-red;
	font-weight: normal;
}

h1 {
	font-size: @font-h1;
	.headers-style();
}
h2 {
	font-size: @font-h2;
	.headers-style();
}
h3 {
	font-size: @font-h3;
	.headers-style();
}
h4 {
	font-size: @font-h4;
	.headers-style();
}
h5 {
	font-size: @font-h5;
	.headers-style();
}
h6 {
	font-size: @font-h6;
	.headers-style();
}

table {
	width: 100%;
	border: 1px solid @color-lightgrey;
	.border-radius( 2px );
	tr {
		th, td {
			text-align: left;
			border-bottom: 1px dotted @color-lightgrey;
			padding: 8px 16px;
		}
		&:last-child {
			th, td {
				border-bottom: none;
			}
		}
	}
}

input[type='button'],
input[type='submit'],
.button {
	display: inline-block;
	background-color: @color-darkgrey;
	color: @color-white;
	border: none;
	border-radius: 11px;
	padding: 2px 8px 3px;
	margin: 8px 2px 2px 0;
	width: auto;
	text-decoration: none;
	cursor: pointer;
	&:hover, &:visited, &:active {
		color: @color-white;
	}
}

a {
	color: @color-links;
	&:hover {
		color: @color-links-hover;
	}
	&:active {
		color: @color-links-active;
	}
	&:visited {
		color: @color-links-visited;
	}
	&.dashed {
		text-decoration: none;
		border-bottom: 1px dashed @color-links;
		&:hover {
			border-color: @color-links-hover;
		}
		&:active {
			border-color: @color-links-active;
		}
		&:visited {
			border-color: @color-links-visited;
		}
	}
}

// левый столбец

#left {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	width: @leftcolumn-width;
	overflow: auto;
}

// меню

#menu_adm {
	position: absolute;
	top: 12px;
	left: 0;
	width: @leftcolumn-width;
	color: @color-darkwhite;
	background: @color-darkgrey;

	> ul {
		width: @leftcolumn-width;
		padding: 0;
		margin: 0;
		list-style-type: none;
		> li {
			font-size: @font-large;
			position: relative;
			cursor: pointer;
			> span {
				padding: 8px 0 8px 40px;
				display: block;
				.transition( all 0.1s linear );
				&:hover {
					color: @color-red;
				}
				&:before {
					position: absolute;
					top: 8px;
					left: 15px;
					.websymbols;
				}
			}
			&#menu_content > span:before {
				content: "?";
			}
			&#menu_catalog > span:before {
				content: "i";
			}
			&#menu_media > span:before {
				content: "d";
			}
			&#menu_talks > span:before {
				content: "L";
			}
			&#menu_users > span:before {
				content: "¡";
			}
			&#menu_settings > span:before {
				content: "^";
			}
			&#menu_development > span:before {
				content: "T";
			}

			&.selected.match > span {
				background: @color-orange;
				color: @color-white;
				&:before {
					color: @color-white;
				}
				&:after {
					display: inline-block;
					position: absolute;
					left: @leftcolumn-width;
					top: 0;
					width: 0;
					height: 0;
					border-left: 5px solid @color-orange;
					border-top: 16px solid transparent;
					border-bottom: 16px solid transparent;
					content: '';
				}
			}

			> ul {
				padding: 2px 0 0 0;
				margin: 0;
				list-style-type: none;
				display: none;
			}
			&.selected > ul {
				display: block;
			}
			> ul > li {
				position: relative;
				a, a:hover, a:visited, a:active {
					display: block;
					font-size: @font-small;
					padding: 6px 0 6px 40px;
					color: @color-darkwhite;
					text-decoration: none;
					.transition( all 0.1s linear );
				}
				a:hover {
					color: @color-red;
				}
				&.selected {
					background: @color-orange;
					a, a:hover, a:visited, a:active {
						color: white;
						&:after {
							display: inline-block;
							position: absolute;
							left: @leftcolumn-width;
							top: 0;
							width: 0;
							height: 0;
							border-left: 5px solid @color-orange;
							border-top: 13px solid transparent;
							border-bottom: 13px solid transparent;
							content: '';
						}
					}
				}
			}
		}
	}
}

// лого и копирайт

#signature {
	position: absolute;
	bottom: 0;
	left: 0;
	width: @leftcolumn-width;
	padding: 0 0 6px 10px;
	font-size: @font-medium;

	#signature_difra {
		height: 17px;
		background: url('/images/difra.svg') no-repeat;
		display: block;
		text-indent: 54px;
		padding-top: 9px;
		color: @color-darkwhite;
	}
	#signature_ajam {
		height: 17px;
		display: block;
		color: @color-grey;
		a,
		a:hover,
		a:visited,
		a:active {
			color: @color-grey;
		}
	}
}

// правый столбец

#right {
	position: absolute;
	right: -@rightcolumn-width;
	width: ( @rightcolumn-width - 20px );
	top: 0;
	padding: 10px;
	color: @color-white;
	.transition( all 0.3s ease-out );
}

// адаптивка

@media screen and (max-width: 1239px) {
	body {
		margin-right: 0;
	}
	#right {
		display: none;
	}
}

// дополнительные стили

.small {
	font-size: @font-small;
}

.error {
	&, &:hover, &:active, &:visited {
		color: @color-red;
		&.dashed {
			border-color: @color-red;
		}
	}
}