@font-face {
  font-family: 'Metronic';
  src: url("../fonts/MetronicProRegular.eot");
  src: url("../fonts/MetronicProRegular.woff2") format("woff2"), url("../fonts/MetronicProRegular.woff") format("woff"), url("../fonts/MetronicProRegular.ttf") format("truetype"), url("../fonts/MetronicProRegular.svg#MetronicProRegular") format("svg"), url("../fonts/MetronicProRegular.eot?#iefix") format("embedded-opentype");
  font-weight: 400;
}

@font-face {
  font-family: 'Metronic';
  src: url("../fonts/MetronicProSemiBold.eot");
  src: url("../fonts/MetronicProSemiBold.woff2") format("woff2"), url("../fonts/MetronicProSemiBold.woff") format("woff"), url("../fonts/MetronicProSemiBold.ttf") format("truetype"), url("../fonts/MetronicProSemiBold.svg#MetronicProSemiBold") format("svg"), url("../fonts/MetronicProSemiBold.eot?#iefix") format("embedded-opentype");
  font-weight: 600;
}

@font-face {
  font-family: 'Metronic';
  src: url("../fonts/MetronicProBold.woff2") format("woff2"), url("../fonts/MetronicProBold.woff") format("woff"), url("../fonts/MetronicProBold.ttf") format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: 'Metronic';
  src: url("../fonts/MetronicProRegular.eot");
  src: url("../fonts/MetronicProRegular.woff2") format("woff2"), url("../fonts/MetronicProRegular.woff") format("woff"), url("../fonts/MetronicProRegular.ttf") format("truetype"), url("../fonts/MetronicProRegular.svg#MetronicProRegular") format("svg"), url("../fonts/MetronicProRegular.eot?#iefix") format("embedded-opentype");
  font-weight: 400;
}

@font-face {
  font-family: 'Metronic';
  src: url("../fonts/MetronicProSemiBold.eot");
  src: url("../fonts/MetronicProSemiBold.woff2") format("woff2"), url("../fonts/MetronicProSemiBold.woff") format("woff"), url("../fonts/MetronicProSemiBold.ttf") format("truetype"), url("../fonts/MetronicProSemiBold.svg#MetronicProSemiBold") format("svg"), url("../fonts/MetronicProSemiBold.eot?#iefix") format("embedded-opentype");
  font-weight: 600;
}

@font-face {
  font-family: 'Metronic';
  src: url("../fonts/MetronicProLight.eot");
  src: url("../fonts/MetronicProLight.woff2") format("woff2"), url("../fonts/MetronicProLight.woff") format("woff"), url("../fonts/MetronicProLight.ttf") format("truetype"), url("../fonts/MetronicProLight.svg#MetronicProLight") format("svg"), url("../fonts/MetronicProLight.eot?#iefix") format("embedded-opentype");
  font-weight: 300;
}

@font-face {
  font-family: 'Metronic';
  src: url("../fonts/MetronicProBold.woff2") format("woff2"), url("../fonts/MetronicProBold.woff") format("woff"), url("../fonts/MetronicProBold.ttf") format("truetype");
  font-weight: bold;
}

@font-face {
  font-family: 'Ruble';
  src: url("../fonts/metronic-rub-regular.eot");
  src: url("../fonts/metronic-rub-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/metronic-rub-regular.svg#metronic-rub-regular") format("svg"), url("../fonts/metronic-rub-regular.ttf") format("truetype"), url("../fonts/metronic-rub-regular.woff") format("woff"), url("../fonts/metronic-rub-regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Ruble';
  src: url("../fonts/metronic-rub-semibold.eot");
  src: url("../fonts/metronic-rub-semibold.eot?#iefix") format("embedded-opentype"), url("../fonts/metronic-rub-semibold.svg#metronic-rub-semibold") format("svg"), url("../fonts/metronic-rub-semibold.ttf") format("truetype"), url("../fonts/metronic-rub-semibold.woff") format("woff"), url("../fonts/metronic-rub-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Ruble';
  src: url("../fonts/metronic-rub-bold.eot");
  src: url("../fonts/metronic-rub-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/metronic-rub-bold.svg#metronic-rub-bold") format("svg"), url("../fonts/metronic-rub-bold.ttf") format("truetype"), url("../fonts/metronic-rub-bold.woff") format("woff"), url("../fonts/metronic-rub-bold.woff2") format("woff2");
  font-weight: bold;
  font-style: normal;
}

.input, .textarea {
  border: 2px transparent solid;
  border-radius: 4px;
  background-color: #f2f2f2;
  margin-bottom: 15px;
}

.input label, .textarea label {
  font-size: 16px;
  line-height: 1.75;
  color: #b0b0b0;
  position: absolute;
  left: 24px;
  top: 26px;
  cursor: text;
  -webkit-transition: 0.18s;
  transition: 0.18s;
}

.input label div, .textarea label div {
  -webkit-transition: opacity 0.18s;
  transition: opacity 0.18s;
}

.input input, .textarea input {
  height: 78px;
}

.input textarea, .textarea textarea {
  height: 120px;
  width: 100%;
  padding-top: 38px;
  padding-bottom: 10px;
}

.input input, .input textarea, .textarea input, .textarea textarea {
  width: 100%;
  resize: none;
  overflow: hidden;
  color: #333333;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  padding-left: 24px;
  padding-right: 24px;
  background-color: transparent;
  border: 0;
  font-family: 'Metronic', sans-serif;
}

.input.disabled label, .textarea.disabled label {
  opacity: .5;
}

.input.focus input, .input.focused input, .textarea.focus input, .textarea.focused input {
  padding-top: 20px;
}

.input.focus label, .input.focused label, .textarea.focus label, .textarea.focused label {
  font-size: 13px;
  line-height: 6px;
  letter-spacing: 0;
  top: 16px;
  color: #b0b0b0;
}

.input.focus label div, .input.focused label div, .textarea.focus label div, .textarea.focused label div {
  opacity: 0;
}

.radio .custom-radio {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #e0e7eb;
  -webkit-transition: background-color .5s ease;
  transition: background-color .5s ease;
}

.radio .custom-radio:after {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #5a6c82;
  -webkit-transition: opacity .5s ease, background-color .5s ease;
  transition: opacity .5s ease, background-color .5s ease;
  opacity: 0;
}

.radio input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}

.radio input:checked + .custom-radio {
  background-color: #fff;
}

.radio input:checked + .custom-radio:after {
  opacity: 1;
}

.form.contacts-form .form-fields {
  font-size: 0;
}

.form.contacts-form .form-fields .input {
  display: inline-block;
  vertical-align: top;
}

.form.contacts-form .form-fields .input.name {
  margin-right: 16px;
  width: calc( 50% - 8px);
}

.form.contacts-form .form-fields .input.company {
  width: calc( 50% - 8px);
}

.form.contacts-form .form-fields .input.phone {
  margin-right: 16px;
  width: calc( 50% - 8px);
}

.form.contacts-form .form-fields .input.email {
  width: calc( 50% - 8px);
}

.form.contacts-form .form-fields .input.text textarea {
  height: 156px;
}

.form.contacts-form .row {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.form.contacts-form .row .col.col-50 {
  width: calc( 50% - 8px);
}

.form.contacts-form .row .col.col-25 {
  width: calc( 25% - 8px);
}

.form.contacts-form .input.file-upload {
  height: 82px;
  overflow: hidden;
}

.form.contacts-form .input.file-upload:before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  right: 78px;
  height: 100%;
  width: 40px;
  background: -webkit-gradient(linear, left top, right top, from(rgba(242, 242, 242, 0)), to(#f2f2f2));
  background: linear-gradient(90deg, rgba(242, 242, 242, 0) 0%, #f2f2f2 100%);
}

.form.contacts-form .input.file-upload input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}

.form.contacts-form .input.file-upload .value {
  padding: 0 24px;
  line-height: 80px;
  white-space: nowrap;
}

.form.contacts-form .input.file-upload .value span.format {
  opacity: .5;
}

.form.contacts-form .input.file-upload .cv {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 78px;
  height: 78px;
  background-color: #f2f2f2;
}

.form.contacts-form .input.file-upload .cv img.icon-image {
  position: absolute;
  width: 24px;
  height: 28px;
  top: 24px;
  right: 25px;
}

.form.security-form .form-fields {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.form.security-form .form-fields .input.email, .form.security-form .form-fields .submit {
  width: calc( 50% - 8px);
}

* {
  position: relative;
  outline: none;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.row > .col, .row > li {
  width: 25%;
}

.row > .col.col-1-16, .row > li.col-1-16 {
  width: 6.25%;
}

.row > .col.col-2-16, .row > li.col-2-16 {
  width: 12.5%;
}

.row > .col.col-3-16, .row > li.col-3-16 {
  width: 18.75%;
}

.row > .col.col-4-16, .row > li.col-4-16 {
  width: 25%;
}

.row > .col.col-5-16, .row > li.col-5-16 {
  width: 31.25%;
}

.row > .col.col-6-16, .row > li.col-6-16 {
  width: 37.5%;
}

.row > .col.col-7-16, .row > li.col-7-16 {
  width: 43.75%;
}

.row > .col.col-8-16, .row > li.col-8-16 {
  width: 50%;
}

.row > .col.col-9-16, .row > li.col-9-16 {
  width: 56.25%;
}

.row > .col.col-10-16, .row > li.col-10-16 {
  width: 62.5%;
}

.row > .col.col-11-16, .row > li.col-11-16 {
  width: 68.75%;
}

.row > .col.col-12-16, .row > li.col-12-16 {
  width: 75%;
}

.row > .col.col-13-16, .row > li.col-13-16 {
  width: 81.25%;
}

.row > .col.col-14-16, .row > li.col-14-16 {
  width: 87.5%;
}

.row > .col.col-15-16, .row > li.col-15-16 {
  width: 93.75%;
}

.row > .col.col-25, .row > li.col-25 {
  width: 25%;
}

.row > .col.col-50, .row > li.col-50 {
  width: calc( 50% - 8px);
}

.row > .col.col-75, .row > li.col-75 {
  width: 75%;
}

.row > .col.col-100, .row > li.col-100 {
  width: 100%;
}

.row.bordered {
  border-left: 1px rgba(51, 51, 51, 0.08) solid;
  border-right: 1px rgba(51, 51, 51, 0.08) solid;
}

.row.bordered > .col, .row.bordered > li {
  border-right: 1px rgba(51, 51, 51, 0.08) solid;
}

.row.bordered > .col:last-child, .row.bordered > li:last-child {
  border-right: 0;
}

.row.row-72 > .col, .row.row-72 > li {
  height: 72px;
}

.row.row-88 > .col, .row.row-88 > li {
  height: 88px;
}

.row.row-120 > .col, .row.row-120 > li {
  height: 120px;
}

.row.row-160 > .col, .row.row-160 > li {
  height: 160px;
}