/* #FONTS
====================================== */
  @font-face {
    font-family: "Roboto";
    src: url("../fonts/RobotoLight.eot");
    src: url("../fonts/RobotoLight.eot?#iefix") format("embedded-opentype"), url("../fonts/RobotoLight.woff") format("woff"), url("../fonts/RobotoLight.ttf") format("truetype");
    font-style: normal;
    font-weight: 300;
  }

  @font-face {
    font-family: "Roboto";
    src: url("../fonts/RobotoRegular.eot");
    src: url("../fonts/RobotoRegular.eot?#iefix") format("embedded-opentype"), url("../fonts/RobotoRegular.woff") format("woff"), url("../fonts/RobotoRegular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
  }

  @font-face {
    font-family: "Roboto";
    src: url("../fonts/RobotoMedium.eot");
    src: url("../fonts/RobotoMedium.eot?#iefix") format("embedded-opentype"), url("../fonts/RobotoMedium.woff") format("woff"), url("../fonts/RobotoMedium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
  }

  @font-face {
    font-family: "Roboto";
    src: url("../fonts/RobotoBold.eot");
    src: url("../fonts/RobotoBold.eot?#iefix") format("embedded-opentype"), url("../fonts/RobotoBold.woff") format("woff"), url("../fonts/RobotoBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
  }


/* #MAIN
====================================== */
  html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
    -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px;
  }

  *, *::before, *::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
  }

  *:focus {
    outline: none !important;
    border: none !important;
  }

  body {
    font: 400 16px/1.65 "Roboto", sans-serif; /* #1em */
    color: #33404e;
    background: #f2f2f2 url(../img/background.jpg) top center repeat-y;
    background-size: cover;
  }

  @media only screen and (max-width: 1024px) {
    body {font-size: 14px;}
  }

  ::selection {
    color: #fff;
    background: #e57777;
  }

  ::-moz-selection {
    color: #fff;
    background: #e57777;
  }

  h1, h2, h3, h4, h5, h6 {line-height: 1;}

  p {margin: 0 0 20px;}

  ul {
    list-style-position: inside;
    padding-left: 0;
  }

  .hidden {opacity: 0;}
  .visible {opacity: 1;}

  .left {
    float: left;
    margin: 20px 20px 20px 0 !important;
  }

  .right {
    float: right;
    margin: 20px 0 20px 20px !important;
  }

  .left:first-child,
  .right:first-child {margin-top: 0 !important;}

  .flex {
    display: flex;
    flex-flow: row wrap;
    align-items: stretch;
  }

  .clear::after {
    display: block;
    content: "";
    clear: both;
  }


/* #LINKS
====================================== */
  a {
    color: #33404e;
    text-decoration: none;
    transition: all ease-out .4s;
  }

  a:hover {
    color: #e57777;
    text-decoration: underline;
  }

  p a {
    color: #e57777;
    border-bottom: 1px solid #5f9ddf;
  }

  p a:hover {
    text-decoration: none;
    border-bottom: unset;
  }

  .link, .link:visited {
    display: inline-block;
    position: relative;
    background-color: transparent;
    text-decoration: none;
    color: #33404e;
    transition: all ease-out .4s;
  }

  .link:hover, .link:active {
    outline: 0;
    text-decoration: none;
    color: #e57777;
  }

  .link::after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background: #e57777;
    transition: width .8s;
  }

  .link:hover::after {width: 100%;}

  .link::before {
    position: absolute;
    bottom: 0;
    right: 0;
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background: #5f9ddf;
    transition: width .8s;
  }

  .link:hover::before {width: 0;}


/* #SCROLL
====================================== */
  #scroll {
    z-index: 99;
    position: fixed;
    right: 40px;
    bottom: 40px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    background-color: #5f9ddf;
    text-indent: -9999px;
    display: none;
    border-radius: 60px;
    box-shadow: 0px 6px 35px 0 rgba(95, 157, 223, 0.6);
    transition: background-color .3s ease-out,
   box-shadow .3s ease-out;
  }

  @media only screen and (max-width: 1024px) {
    #scroll {display: none !important;}
  }

  #scroll span {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -12px;
    height: 0;
    width: 0;
    border: 8px solid transparent;
    border-bottom-color: #fff;
  }

  #scroll:hover {
    background-color: #e57777;
    box-shadow: 0px 6px 35px 0 rgba(229, 119, 119, 0.6);
  }


/* #CONTAINER
====================================== */
  .container {width: 100%;}

  .container_footer {
    background: #1f2229;
    border-top: 10px solid rgba(0, 0, 0, 0.4);
  }


/* #WRAPPER
====================================== */
  .wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
  }

  @media only screen and (max-width: 1024px) {
    .wrapper {padding: 0 20px;}
  }


/* #ICON
====================================== */
  .icon {
    display: block;
    float: left;
    width: 28px;
    height: 28px;
  }

  .icon_small {
    width: 14px;
    height: 14px;
    margin-top: 5px;
  }

  .icon + p {margin-left: 20px;}


/* #HEADER
====================================== */
  .header {}

  .header__wrapper {
    min-height: 140px;
    align-items: center;
    justify-content: space-between;
  }

  @media only screen and (max-width: 1024px) {
    .header__wrapper {flex-flow: column wrap;}
    .header__wrapper > * {margin-bottom: 20px;}
    .header__wrapper > *:first-child {margin-top: 20px;}
  }

  .header__contact {position: relative;}

  .header__contact p {margin-bottom: 0;}

  .header__icon {
    position: absolute;
    top: 50%;
    margin-top: -13px;
  }

  .header__icon + p {margin-left: 45px;}

  .header__contact_phones .header__icon {
    width: 12px;
    height: 64px;
    margin-top: -32px;
  }

  .header__contact_phones p {margin-left: 25px;}


/* #LOGO
====================================== */
  .logo {display: block;}

  .logo_header {width: 220px;}

  .logo_footer {
    flex: 0 0 220px !important;
  }

  @media only screen and (max-width: 1024px) {
    .logo_footer {
      display: inline-block;
      width: 220px;
    }
  }


/* #MENU
====================================== */
  .menu {
    position: relative;
    max-height: 50px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background-color: #5f9ddf;
    z-index: 9999;
  }

  @media only screen and (max-width: 1024px) {
    .menu {padding-top: 50px;}
  }

  .menu + div {margin-top: 0;}

  .menu_scroll {
    position: fixed;
    top: 0;
    left: 0;
  }

  @media only screen and (max-width: 1024px) {
    .menu_scroll {position: relative;}
  }

  .menu_scroll + div {margin-top: 50px;}

  @media only screen and (max-width: 1024px) {
    .menu_scroll + div {margin-top: 0;}
  }

  .menu_mobile {max-height: initial !important;}

  .menu .wrapper {padding: 0;}

  .menu__container {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
  }

  .menu__element {
    display: flex;
    flex: 1;
    text-align: center;
    vertical-align: middle;
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px transparent;
    position: relative;
    background: transparent;
    transition: color 0.3s;
  }

  @media only screen and (max-width: 1024px) {
    .menu__element {flex: 0 0 100%;}
  }

  .menu__element::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #81b7f1;
    transform: scaleX(0);
    transform-origin: 50%;
    transition: transform 0.3s ease-out;
  }

  .menu__element:hover::before,
  .menu__element:focus::before,
  .menu__element:active::before,
  .menu__element_active::before {
    transform: scaleX(1);
  }

  .menu__element_active::before {background-color: #e57777;}

  .menu__link,
  .menu__link:visited {
    flex: 1 0 0;
    font-size: 1em;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    padding: 12px 0;
  }

  .menu__link:hover,
  .menu__link:visited:hover {
    text-decoration: none;
    color: #fff;
  }


/* HAMBURGER
====================================== */
  .hamburger {
    display: none;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    left: 22px;
    top: 23px;
    width: 30px;
    height: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
  }

  @media only screen and (max-width: 1024px) {
    .hamburger {
      display: block;
    }
  }

  .hamburger, .hamburger::before, .hamburger::after {
    width: 30px;
    height: 4px;
    background-color: #fff;
    position: absolute;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
    border-radius: 4px;
  }

  .hamburger::before, .hamburger::after {
    content: "";
    display: block;
  }

  .hamburger::before {top: 8px;}
  .hamburger::after {bottom: 8px;}

  .hamburger_spin {
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  .hamburger_spin::before {transition: top 0.1s 0.34s ease-in, opacity 0.1s ease-in;}

  .hamburger_spin::after {
    transition: bottom 0.1s 0.34s ease-in, -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
    transition: bottom 0.1s 0.34s ease-in, transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19), -webkit-transform 0.3s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  .menu_mobile .hamburger {
    -webkit-transform: rotate(225deg);
            transform: rotate(225deg);
    transition-delay: 0.14s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .menu_mobile .hamburger::before {
    top: 0;
    opacity: 0;
    transition: top 0.1s ease-out, opacity 0.1s 0.14s ease-out;
  }

  .menu_mobile .hamburger::after {
    bottom: 0;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    transition: bottom 0.1s ease-out, -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
    transition: bottom 0.1s ease-out, transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.3s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
  }


/* #BUTTONS
====================================== */
  button,
  .button {
    display: inline-block;
    cursor: pointer;
    background-color: #5f9ddf;
    box-shadow: 0px 6px 35px 0 rgba(95, 157, 223, 0.6);
    color: #fff;
    font-weight: 400;
    border-radius: 4px;
    border: none;
    padding: 10px 22px;
    text-transform: none;
    transition: all 0.3s ease 0s;
    text-align: center;
    text-decoration: none !important;
  }

  button:hover, button:active,
  .button:hover, .button:active {
    background-color: #5f9ddf;
    color: #fff;
    box-shadow: none;
  }

  .button_red {
    background-color: #e57777;
    box-shadow: 0px 6px 35px 0 rgba(229, 119, 119, 0.6);
  }

  .button_red:hover, .button_red:active {
    background-color: #e57777;
  }


/* #COVER
====================================== */
  .cover {
    height: 300px;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  @media only screen and (max-width: 1024px) {
    .cover {height: 150px;}
  }

  .cover__image {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-attachment: fixed;
    background-size: cover;
    transition: transform cubic-bezier(0.12, 0.53, 0.42, 0.82);
    transform: scale(2);
    animation: cover__image 2s forwards;
  }

  @media only screen and (max-width: 1024px) {
    .cover__image {background-attachment: initial;}
  }

  @keyframes cover__image {
    to {
      transform: scale(1);
    }
  }

  .cover__image_services {background-position: center center;}
  .cover__image_promotions {background-position: center center;}

  .page_portfolio .cover__image {background-position: top center;}
  .page_prices .cover__image {background-position: center center;}
  .page_vacancies .cover__image {background-position: center center;}
  .page_promotions .cover__image {background-position: center center;}

  .cover .page__title {
    position: absolute;
    color: #e57777;
    text-align: center;
    bottom: 0;
    width: 100%;
    margin: -1em 0 0;
    padding: 20px;
    z-index: 999;
    font-size: 2em;
    text-transform: uppercase;
    /* background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.8) 50%, rgba(0,0,0,0)); */
    background-image: linear-gradient(to right, rgba(0,0,0,0), #e57777 50%, rgba(0,0,0,0));
    transition: all ease-out;
    transform: scaleX(0);
    animation: page__title 1s forwards;
  }

  @keyframes page__title {
    to {
      transform: scale(1);
      color: #fff;
    }
  }


/* #PAGINATION
====================================== */
  .pagination {
    align-items: center;
    justify-content: center;
    margin-top: 20px;
  }

  .pagination__item {}
  .pagination__item_previous {order: 1;}
  .pagination__item_next {order: 3;}

  .pagination__link {
    display: block;
    width: 48px;
    height: 48px;
    background-color: #eee;
    border-radius: 4px;
    background-size: 50% 50%;
    background-position: center;
    background-repeat: no-repeat;
    transition: all .4s ease-out;
  }

  .pagination__item_previous .pagination__link {background-image: url(../img/arrow_left.svg);}
  .pagination__item_next .pagination__link {background-image: url(../img/arrow_right.svg);}

  .pagination__link_active:hover {background-color: #33404e;}
  .pagination__item_previous .pagination__link_active:hover {background-image: url(../img/arrow_left-hover.svg);}
  .pagination__item_next .pagination__link_active:hover {background-image: url(../img/arrow_right-hover.svg);}

  .pagination__link_inactive {opacity: .5;}

  .pagination__counter {
    order: 2;
    padding: 0 20px;
  }


/* #SOCIAL
====================================== */
  .socials {line-height: 1;}

  .socials__element {
    display: inline-block;
    opacity: .6;
    width: 36px;
    height: 36px;
    margin: 0 10px;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform .4s ease-out, opacity .4s ease-out;
  }

  .socials__element:first-child {
    margin-left: 0;
  }

  .socials__element:last-child {
    margin-right: 0;
  }

  .socials__element:hover {
    opacity: 1;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }

  .socials__element_vk {
    background-image: url(../img/socials/vk.svg);
  }

  .socials__element_fb {
    background-image: url(../img/socials/fb.svg);
  }

  .socials__element_tw {
    background-image: url(../img/socials/tw.svg);
  }

  .socials__element_im {
    background-image: url(../img/socials/im.svg);
  }


/* #FOOTER
====================================== */
  .footer {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    background-color: transparent;
    color: #dfdfdf;
    font-weight: 300;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    padding: 40px 0;
  }

  @media only screen and (max-width: 1024px) {
    .footer {
      display: block;
      padding: 20px 0;
    }
  }

  .footer > * {
    margin: 0px 20px;
    flex: 1;
  }

  @media only screen and (max-width: 1024px) {
    .footer > * {
      margin: 0 auto 20px;
    }
  }

  .footer > *:first-child {margin-left: 0;}

  .footer > *:last-child {
    margin-right: 0;
    text-align: right;
  }

  .footer__copyright {flex: 3;}

  @media only screen and (max-width: 1024px) {
    .footer > *:last-child {
      margin-bottom: 0;
      text-align: unset;
    }
  }


/* #FORMS
====================================== */
  form {font-size: inherit;}

  form .control-group {
    width: 95%;
    margin: 0 auto 20px;
  }

  form label.control-label {
    text-transform: uppercase;
    font-size: .75em
  }

  form .required {
    color: #e57777;
    margin-left: 5px;
  }

  form input[type="text"],
  form textarea {
    display: block;
    width: 100%;
    padding: 5px 0;
    background: none !important;
    border: none;
    border-bottom: 2px solid #5f9ddf;
    border-radius: 2px;
    transition: border ease-out .4s;
    margin: 0;
  }

  form input[type="text"]:focus,
  form textarea:focus {
    border: none;
    border-bottom: 2px solid #e57777 !important;
  }

  form textarea {resize: none;}
  form input[type="radio"] {margin-right: 5px;}

  form label.radio {
    display: block;
    cursor: pointer;
    margin-top: 10px;
    font-size: .875em;
  }

  @media only screen and (max-width: 1024px) {
    form label.radio {font-size: 1em;}
  }

  form label.radio a {
    color: #5f9ddf;
    text-decoration: none;
    transition: color ease-out .25s;
  }

  form label.radio a:hover {
    color: #e57777;
    text-decoration: none;
  }

  form .help-block {
    display: block;
    margin: 0;
    font-size: .75em;
    font-style: italic;
    color: #e57777;
  }

  form .btn-toolbar {text-align: center;}

  @media only screen and (max-width: 1024px) {
    form .btn-primary {font-size: 14px;}
  }

  /* .jsn-form-submit:disabled,
  .jsn-form-submit[disabled] {
    cursor: not-allowed;
    opacity: .5;
    pointer-events: none;
  } */