@font-face {
    font-family: "SFProDisplay-Regular";
    src: url("./fonts/SFProDisplay-Regular.eot");
    src: url("./fonts/SFProDisplay-Regular.woff") format("woff"),
    url("./fonts/SFProDisplay-Regular.woff2") format("woff2"),
    url("./fonts/SFProDisplay-Regular.otf") format("opentype"),
    url("./fonts/SFProDisplay-Regular.ttf") format("ttf");
}
@font-face {
    font-family: "SFProDisplay-Semibold";
    src: url("./fonts/SFProDisplay-Semibold.eot");
    src: url("./fonts/SFProDisplay-Semibold.woff") format("woff"),
    url("./fonts/SFProDisplay-Semibold.woff2") format("woff2"),
    url("./fonts/SFProDisplay-Semibold.otf") format("opentype"),
    url("./fonts/SFProDisplay-Semibold.ttf") format("ttf");
}
@font-face {
    font-family: "SFProDisplay-Light";
    src: url("./fonts/SFProDisplay-Light.eot");
    src: url("./fonts/SFProDisplay-Light.woff") format("woff"),
    url("./fonts/SFProDisplay-Light.woff2") format("woff2"),
    url("./fonts/SFProDisplay-Light.otf") format("opentype"),
    url("./fonts/SFProDisplay-Light.ttf") format("ttf");
}

html * {
    font-family: SFProDisplay-Regular, sans-serif;
}
.header {
    width: 100%;
    height: 110px;
    background: rgba(16, 15, 21, 0.86);
    z-index: 99999;
    position: absolute;
}
.header .container {
    align-items: center;
}
.header-text {
    height: 100%;
    color: #fff;
}
.header-phone:hover {
    color: rgba(255, 73, 72, 0.6);
}
.header-bg {
    width: 100%;
    background: linear-gradient(95.82deg, rgba(16, 15, 21, 0.8) 13.6%, rgba(16, 15, 21, 0.41) 90.14%);
    margin-top: 110px;
}
.front-page .header-bg {
    position: absolute;
    top: 0px;
    min-height: 690px;
}
.header-block {
    background: #555;
    position: relative;
    overflow: hidden;
}
.video-box {
    margin-top: 110px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.front-page .header-block {
    background: #333 no-repeat center top;
    background-size: 1440px;
    height: 800px;
}
.logo-image {
    width: 278px;
    height: 87px;
}
.company-name {
    color: #fff;
    display: inline-block;
    line-height: 19px;
    padding: 10px 0 0 0px;
}
.company-name a {
    display: inline-block;
    text-align: left;
    vertical-align: top;
}
.company-name a span {
    font-family: SFProDisplay-Light, serif;
}
.menu {
    color: #fff;
    padding: 50px 0 0 0;
    text-transform: uppercase;
    font-size: 15px;
    text-align: center;
}
.menu li {
    display: inline-block;
    margin-right: 45px;
}
.menu li a:hover {
    color: rgba(255, 73, 72, 0.6);
}
.menu li a.active {
    color: #FF4948;
    text-decoration: underline;
}
.laptop-image img {
    width: 100%;
}
.contacts {
    padding: 50px 0 0 0px;
    text-align: right;
}
.header-phone {
    color: #FF4948;
    padding-left: 25px;
    background: url("../images/icon_phone_red.png") no-repeat left center;
    background-size: 20px;
}
.footer-phone a {
    color: #fff;
    padding-left: 25px;
    background: url("../images/icon_phone_white.png") no-repeat left center;
    background-size: 20px;
}
.footer-email a {
    color: #fff;
    padding-left: 25px;
    background: url("../images/icon_mail_white.png") no-repeat left center;
    background-size: 20px;
}
.social-media-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    padding-top: 40px;
}
.social-media-icons img {
    width: 24px;
    height: 24px;
    margin: 0 15px;
    opacity: 1;
}
.social-media-icons img:hover {
    opacity: 0.9;
}
.f-s-15 {
    font-size: 15px;
    font-family: SFProDisplay-Light, serif;
}
.f-s-17 {
    font-size: 17px;
    font-family: SFProDisplay-Light, serif;
}
.f-s-18 {
    font-size: 18px;
    font-family: SFProDisplay-Light, serif;
}
.f-s-20 {
    font-size: 20px;
}
.f-s-22 {
    font-size: 22px;
}
.f-s-30 {
    font-size: 30px;
    line-height: 36px;
}
.f-s-36 {
    font-size: 30px;
    line-height: 36px;
}
.f-s-40 {
    font-size: 40px;
}
.f-w-light {
    font-family: SFProDisplay-Light, serif;
}
.t-c-red {
    color: #FF4948;
}
.t-c-grey {
    color: #576066;
}

.m-l-10 {
    margin-left: 10px;
    display: inline-block;
}
.m-l-25 {
    margin-left: 25px;
    display: inline-block;
}
.m-l-35 {
    margin-left: 35px;
    display: inline-block;
}
.m-l-40 {
    margin-left: 40px;
    display: inline-block;
}
.m-l-50 {
    margin-left: 50px;
    display: inline-block;
}
.p-r-30 {
    padding-right: 30px;
    display: inline-block;
}
.m-t-5 {
    margin-top: 5px;
    display: inline-block;
}
.m-t-10 {
    margin-top: 10px;
    display: inline-block;
}
.m-b-10 {
    margin-bottom: 10px;
}
.m-t-15 {
    margin-top: 15px;
}
.m-t-20 {
    margin-top: 20px;
    display: inline-block;
}
.m-t-30 {
    margin-top: 30px;
    display: inline-block;
}
.m-t-40 {
    margin-top: 40px;
    display: inline-block;
}
.m-t-60 {
    margin-top: 60px;
    display: inline-block;
}
.m-t-70 {
    margin-top: 70px;
    display: inline-block;
}
.m-t-80 {
    margin-top: 80px;
    display: inline-block;
}
.m-t-100 {
    margin-top: 100px;
    display: inline-block;
}
.m-b-30 {
    margin-bottom: 30px;
    display: inline-block;
}
.p-b-30 {
    padding-bottom: 30px;
}
.p-b-50 {
    padding-bottom: 50px;
}
.p-t-30 {
    padding-top: 30px;
}
.p-t-100 {
    padding-top: 100px;
}
.l-h-133 {
    line-height: 133%;
}
.button {
    font-family: SFProDisplay-Light;
    background: #FF4948;
    border-radius: 5px;
    padding: 10px 20px;
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
}
.button:hover {
    filter: drop-shadow(-4px 4px 9px rgba(255, 73, 72, 0.3)) drop-shadow(4px 4px 9px rgba(255, 73, 72, 0.3));
}
.button.inactive {
    background: rgba(255, 73, 72, 0.8);
    color: rgba(255, 255, 255, 0.8);
    filter: none;
    cursor: wait;
}
.icon-check {
    padding-left: 25px;
    background: url("../images/icon_check.png") no-repeat left center;
    background-size: 20px;
}
.icon-check-red {
    padding-left: 25px;
    background: url("../images/icon_check_red.png") no-repeat left center;
    background-size: 20px;
}
.icon-red-arrow {
    padding-left: 25px;
    background: url("../images/icon_arrow.png") no-repeat left center;
    background-size: 20px;
}
.icon-red-arrow-left {
    padding-left: 25px;
    background: url("../images/icon_arrow_left.png") no-repeat left center;
}
.content-block {
    position: relative;
    background: #fff;
}
.content-block-grey {
    background: #F6F6F6;
}
.benefits-block {
    position: relative;
    min-height: 325px;
    background: #F6F6F6;
    padding-bottom: 30px;
}
.benefits-block-activities {
    position: relative;
    min-height: 325px;
    background: #F6F6F6;
}
.red-rectangle {
    background: url("../images/red-rectangle.png") no-repeat left center;
    width: 84px;
    height: 303px;
    position: absolute;
    top: 110px;
    left: 0;
}
.triangle-grey-1 {
    background: url("../images/triangle-grey-1.png") no-repeat left center;
    width: 165px;
    height: 165px;
    position: absolute;
    top: 0;
    right: 0;
}
.triangle-grey-2 {
    background: url("../images/triangle-grey-2.png") no-repeat left center;
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.triangle-grey-3 {
    background: url("/images/triangle-grey-3.png") no-repeat left center;
    width: 118px;
    height: 118px;
    position: absolute;
    top: 0;
    right: 0;
}
.triangle-grey-4 {
    background: url("../images/triangle-grey-4.png") no-repeat left center;
    width: 70px;
    height: 154px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -77px;
}
.mask-1 {
    background: url("/images/mask-1.png") no-repeat left center;
    width: 207px;
    height: 221px;
    position: absolute;
    top: 0;
    right: 0;
}
.mask-2 {
    background: url("../images/mask-2.png") no-repeat left -60px;
    width: 480px;
    height: 372px;
    position: absolute;
    top: 0;
    right: 0;
}
.mask-3 {
    background: url("../images/mask-3.png") no-repeat left top;
    width: 320px;
    height: 449px;
    position: absolute;
    top: 0;
    left: 0;
}
.benefit-row {
    padding: 45px 0 15px 0px;
}
.front-page .benefit-row {
    padding: 0px 0 20px 50px;
}
.benefit-count {
    position: absolute;
    left: 0;
    top: 0;
}
.footer-block {
    color: #fff;
    background: #100F15;
    min-height: 110px;
}
.footer-phone a:hover,
.footer-email a:hover {
    color: #e5e5e5
}
.red-underline  {
    border-bottom: 1px #FF4948 solid;
}
.content-more-ten-years {
    margin-top: 60px;
    margin-left: 30px;
    padding: 0 0 40px 50px;
    border-left: 1px #FF4948 solid;
}
.value-row {
    position: relative;
    border: 1px #FF4948 solid;
    padding: 25px 15px 15px 15px;
    text-align: center;
    height: 180px;
}
.value-title {
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    text-align: center;
}
.value-title span {
    background: #F6F6F6;
    padding: 0 15px 0 15px;
    display: inline-block;
}
.menu-toggle {
    width: 39px;
    height: 39px;
    background: url("../images/icon_menu.png") no-repeat center center;
    cursor: pointer;
    float: right;
    margin: 35px 0 0 0;
}
.menu-toggle.active {
    background: url("../images/icon_red_cross.png") no-repeat center center;
}
.values-block {
    position: relative;
}
.image-ural {
    margin: 15px 0;
}
b {
    font-family: SFProDisplay-Semibold, serif;
}
.vacancies-requirements-block {
    position: relative;
    width: 380px;
    height: 590px;
    background: #FFFFFF;
    border-radius: 10px;
    margin-top: 60px;
}
.header-bg-vacancies {
    width: 100%;
    background: #F6F6F6;
    margin-top: 110px;
}
.vacancies-text {
    position: absolute;
    width: 433px;
    height: 36px;
    left: 54px;
    top: 127px;
    font-size: 30px;
    line-height: 36px;
    color: #576066;
}
.vacancies-img {
    background: url("../images/vacancies_header.png");
    position: absolute;
    width: 742.8px;
    height: 290px;
    z-index: 1;
}
.vacancies-img2 {
    position: absolute;
    width: 332.64px;
    height: 239.81px;
    right: 220px;
    z-index: 0;
}
.content-block-vacancies {
    padding-bottom: 80px;
    position: relative;
    background: #fff;
    height: auto;
}
.content-block-job {
    padding-bottom: 60px;
    position: relative;
    height: auto; 
    background: #F6F6F6;
}
.benefit-vacancies {
    width: 360px;
    height: 400px;
}
.benefit-description-vacancies{
    width: 332px;
    height: 130px;
    font-weight: 300;
    font-size: 17px;
    line-height: 155%;
    color: #555555;
}
.arrow_left {
    background: url("../images/arrow_left.png");
    width: 33px;
    height: 19px;
    position: absolute;
    top: 70px;
    right: 131px;
}
.arrow_right {
    background: url("../images/arrow_right.png");
    width: 33px;
    height: 19px;
    position: absolute;
    top: 70px;
    right: 53px;
}
.rectangle {
    background: url("../images/rectangle_vacancies.png");
    position: absolute;
    width: 31px;
    height: 60px;
    top: 23px;
}
.header-bg-vacancy {
    width: 100%;
    min-height: 298px;
    margin-top: 110px;
    background: #ffffff;
    padding-bottom: 30px;
    box-sizing: border-box;
}
.header-bg-vacancy .container {
    padding-top: 0;
    align-items: flex-start;
}
.form-vacancies {
    width: 526px;
    height: 573px;
    margin-top: 70px;
    background: #FFFFFF;
    border-radius: 10px;
}
.grey-underline  {
    border-bottom: 1px #576066 solid;
}
.mask-4 {
    background: url("../images/mask-4.png") no-repeat left;
    width: 360.65px;
    height: 240px;
    position: absolute;
    margin-top: -195px;
    margin-left: -40px;
}
.content-block-vacancy {
    background: #F6F6F6;
    flex: 1;
}
.vacancies-requirements-block:hover .f-s-20 {
    opacity: 0.8;
}
.mask-5 {
    background: url("../images/mask-5.png") no-repeat left -60px;
    width: 332.64px;
    height: 239.81px;
    position: absolute;
    right: 175px;
}