@import url("reset.css");

.clear {
    clear: both;
}

body {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: #000;
}

p {
    padding: 10px;
}

#wrapper {
    width: 100%;
    min-width: 900px;
    max-width: 1440px;
    margin: 0 auto;
}

#header {
    float: left;
    /* height: 960px; */
    width: 100%;
}

#header video {
    width: 100%;
}

#header #title {
    position: absolute;
    left: 231px;
    top: 282px;
    width: 658px;
    height: 395px;
    z-index: 100;
}

#header #title h1 {
    color: #0D131B;
    font-size: 95px;
    font-style: normal;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 0.285px;
    text-transform: uppercase;
    margin-bottom: 70px;
}

#header #title #sub {
    color: #314E73;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.9px;
    margin-bottom: 40px;
    padding: 0;
}

#header #title #text {
    color: #314E73;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    padding: 0;
}

#navigation {
    float: left;
    height: 100px;
    width: 100%;
}

#navigation #logo {
    float: left;
    margin: 30px 200px 0 0;
}

#navigation #logo a {
    color: #0D131B;
    font-family: Play;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    text-decoration: none;
}

#navigation .menu {
    float: left;
    margin-top: 35px;
}

#navigation .menu li {
    display: inline;
    margin-right: 142px;
}

#navigation .menu li a {
    text-decoration: none;
    color: #314E73;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

#navigation .menu li:last-child {
    margin-right: 0;
}

#navigation #email {
    display: none;
}

#navigation #phone {
    float: right;
    margin: 35px 0 0 0;
}

#navigation #phone #icon {
    float: left;
    background: url(../img/call.png) no-repeat;
    width: 30px;
    height: 30px;
    margin: -3px 10px 0 0;
}

#navigation #phone #number a {
    color: #0D131B;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-decoration: none;
}

#contentliquid {
    float: left;
    width: 100%;
}

#content {
    width: 100%;
}

#content #about {
    margin: 140px 0 146px 0;
}

#content #about h2 {
    color: #0D131B;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: 0.15px;
    margin-bottom: 70px;
}

#content #about h3 {
    float: left;
    color: #0D131B;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.09px;
    margin-right: 54px;
    overflow: hidden;
}

#content #about #text {
    color: #314E73;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.26px;
    overflow: hidden;
    padding-bottom: 140px;
}

#content #about #text p {
    padding: 0 0 20px 0;
}

#content #hb {
    margin: 0;
}

#content #hb h3 {
    float: left;
    color: #0D131B;
    font-size: 50px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.15px;
    margin-right: 28px;
    overflow: hidden;
}

#content #hb #text {
    color: #314E73;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.26px;
    overflow: hidden;
    margin-bottom: 70px;
}

#content #hb #text p {
    padding: 10px 0;
}

#content #develop {
    margin: 0;
}

#content #develop h3 {
    color: #0D131B;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0.09px;
    margin-bottom: 40px;
}

#content #develop #ch {
    color: #0D131B;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
}

#content #develop #left {
    float: left;
    width: 50%;
}

#content #develop #left h3 {
    color: #314E73;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.06px;
    margin-bottom: 30px;
    padding-right: 100px;
}

#content #develop #left ul {
    padding-right: 100px;
}

#content #develop #left ul li {
    color: #314E73;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.208px;
    margin-bottom: 15px;
}

#content #develop #left #desc {
    padding: 10px 0;
    color: #314E73;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    letter-spacing: 0.208px;
    padding-right: 100px;
}

#content #develop #right {
    float: right;
    width: 50%;
}

#content #develop #right h3 {
    color: #314E73;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: 0.06px;
    margin-bottom: 30px;
}

#content #develop #right ul {
    margin-bottom: 69px;
}

#content #develop #right ul li {
    color: #314E73;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0.208px;
}

#ourWork {
    margin: 140px 0;
    background: url(../img/ourWork.jpg), lightgray 50% / cover no-repeat;
    height: 786px;
    width: 100%;
}

#ourWork #block {
    padding: 0;
    width: 100%;
    min-width: 900px;
    max-width: 1440px;
    margin: 0 auto;
}

#ourWork h2 {
    color: #0D131B;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: 0.15px;
    text-transform: uppercase;
}

#ourWork #block #text {
    padding: 100px 0;
}

#ourWork p {
    color: #314E73;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.6px;
    padding: 10px 0;
}

#content #vacancies {
    padding: 0 0 140px 0;
    background: url(../img/vacancies.png) 0 100px no-repeat;
}

#content #vacancies h2 {
    float: left;
    color: #0D131B;
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0.15px;
    text-transform: uppercase;
    margin: 20px 92px 0 0;
}

#content #vacancies p {
    color: #5397B5;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.3px;
    padding: 0;
    overflow: hidden;
}

#modalButton {
    width: 30%;
    background: #5397B5;
    padding: 30px;
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
    text-align: center;
    margin: 50px auto 100px auto;
    cursor: pointer;
    font-weight: 700;
}

#footer {
    width: 100%;
    background: #0D131B;
    clear: both;
    color: #fff;
}

#footer #left {
    padding: 140px 0 140px 190px;
}

#footer #left h3 {
    font-family: Play;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 30px;
}

#footer #left #desc {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.6px;
    padding: 0;
}

#footer #left #contacts {
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
    letter-spacing: 0.09px;
    margin: 52px 0 25px 0;
}

#footer #left #phone {
    height: 40px;
    background: url(../img/call_w.png) no-repeat;
    padding: 6px 0 0 60px;
    margin-bottom: 10px;
}

#footer #left #phone a {
    color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -1.5px;
    text-decoration: none;
}

#footer #left #email {
    height: 40px;
    background: url(../img/mail.png) no-repeat;
    padding: 6px 0 0 60px;
    margin-bottom: 10px;
}

#footer #left #email a {
    color: #fff;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-decoration: none;
}

#footer #left #address {
    height: 40px;
    background: url(../img/earth.png) no-repeat;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: -0.6px;
    padding: 6px 0 0 60px;
}

#footer #map {
    float: right;
    width: 1007px;
    height: 395px;
    background: url(../img/map_1920.png) no-repeat;
    margin: 140px 190px 0 50px;
}

#modal {
    width: 40%;
    display: none;
    color: #000;
}

#modal p {
    padding: 10px 0;
}

#modal form input,
textarea,
select {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    border: 1px #5397B5 solid;
    padding: 10px 15px;
    width: 100%;
    color: #000;
    outline: none !important;
}

#modal form input[type="submit"] {
    background-color: #5397B5;
    border: 0;
    color: #fff;
    padding: 20px 15px;
    font-size: 16px;
    text-transform: uppercase;
    margin-top: 10px;
}

#modal form input[type="checkbox"] {
    width: auto;
    float: left;
    border: 0;
    padding: 0;
    margin: 0 10px 0 0;
}

#modal .output_message {
    text-align: center;
    margin: 20px 0 0 0;
}

/* **************************************************************** */

@media (max-width: 1440px) {
    #navigation #logo {
        margin: 30px 200px 0 50px;
    }

    #navigation #phone {
        margin: 35px 50px 0 0;
    }

    #header #title {
        left: 50px;
    }

    #content #about {
        margin: 140px 50px 146px 50px;
    }

    #content #hb {
        margin: 0 50px;
    }

    #content #develop {
        margin: 0 50px;
    }

    #ourWork {
        background: url(../img/ourWork.jpg) center no-repeat;
    }

    #ourWork h2 {
        margin: 0 50px;
    }

    #ourWork #block #text {
        padding: 100px 50px;
    }

    #content #vacancies {
        padding: 0 50px 140px 50px;
        background: url(../img/vacancies.png) 50px 100px no-repeat;
    }

    #footer #map {
        width: 713px;
        height: 264px;
        background: url(../img/map_1280.png) no-repeat;
        margin: 140px 50px 0 50px;
    }

    #footer #left {
        width: 30%;
        padding: 140px 0 140px 50px;
    }

    #footer #left #contacts {
        font-size: 26px;
    }
}

/* **************************************************************** */

@media (max-width: 1280px) {
    #navigation #logo {
        margin: 30px 100px 0 50px;
    }

    #navigation .menu li {
        margin-right: 100px;
    }

    #header #title {
        top: 230px;
    }

    #footer #left {
        padding: 140px 0 140px 50px;
    }

    #footer #left #phone a {
        font-size: 18px;
    }

    #footer #left #email a {
        font-size: 18px;
    }

    #footer #left #address {
        font-size: 18px;
    }
}

/* **************************************************************** */

@media (max-width: 480px) {
    #wrapper {
        min-width: auto;
        max-width: none;
    }

    #navigation {
        float: none;
        height: 100%;
    }

    #navigation #logo {
        margin: 14px 20px;
    }

    #navigation #logo a {
        font-size: 20px;
    }

    #navigation .menu {
        display: none;
    }

    #navigation #phone {
        margin: 16px 20px 16px 0;
    }

    #navigation #phone #icon {
        width: 16px;
        height: 16px;
        margin: 0 10px 0 0;
        background-size: cover;
    }

    #navigation #phone #number a {
        font-size: 16px;
    }

    #header {
        height: 100vh;
    }

    #header video {
        object-fit: cover;
        width: 100vw;
        height: 100vh;
    }

    #header #title {
        position: absolute;
        left: 0;
        top: 200px;
        width: auto;
        height: 395px;
        z-index: 100;
        background: rgb(249 249 249 / 60%);
        display: flex;
        flex-direction: column;
        margin: 0 20px;
    }

    #header #title h1 {
        font-size: 40px;
        margin: 10px 20px 0 20px;
    }

    #header #title #sub {
        font-size: 18px;
        margin: 15px 20px;
    }

    #header #title #text {
        font-size: 16px;
        padding: 0 20px;
    }

    #content #about {
        margin: 20px;
    }

    #content #about h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    #content #about h3 {
        font-size: 18px;
        margin-right: 20px;
    }

    #content #about #text {
        font-size: 16px;
        padding-bottom: 0;
    }

    #content #hb {
        margin: 0 20px;
    }

    #content #hb h3 {
        font-size: 24px;
        margin-right: 20px;
    }

    #content #hb #text {
        font-size: 16px;
        margin-bottom: 30px;
    }

    #content #hb #text p {
        padding: 0 0 10px 0;
    }

    #content #develop {
        margin: 0 20px;
    }

    #content #develop h3 {
        font-size: 24px;
        margin-bottom: 20px;
    }

    #content #develop #ch {
        font-size: 20px;

    }

    #content #develop #left {
        float: none;
        width: 100%;
    }

    #content #develop #left h3 {
        font-size: 20px;
        margin-bottom: 20px;
        padding-right: 0;
    }

    #content #develop #left ul {
        padding-right: 0;
    }

    #content #develop #left #desc {
        font-size: 16px;
        padding-right: 0;
    }

    #content #develop #right {
        float: none;
        width: 100%;
        margin-top: 20px;
    }

    #content #develop #right h3 {
        margin-bottom: 20px;
    }

    #content #develop #right ul {
        margin-bottom: 20px;
    }

    #ourWork {
        margin: 50px 0 20px 0;
        background: url(../img/ourWork_m.png) center no-repeat;
        width: 100%;
        background-size: cover;
        /* height: 100vh; */
        height: 500px;
    }

    #ourWork h2 {
        margin: 0 20px;
        font-size: 30px;
    }

    #ourWork #block #text {
        padding: 0 20px;
    }

    #ourWork #block {
        padding: 0;
        width: 100%;
        min-width: auto;
        max-width: none;
        margin: 0 auto;
    }

    #content #vacancies {
        margin: 0 20px;
        padding: 0;
        background: url(../img/vacancies.png) 0 0 no-repeat;
        background-size: 40%;
    }

    #content #vacancies h2 {
        float: none;
        font-size: 30px;
        margin: 0 auto;
        text-align: right;
    }

    #content #vacancies p {
        font-size: 24px;
        margin: 100px 0 50px 0;
    }

    #modalButton {
        width: auto;
        margin: 0 20px 50px 20px;
        font-size: 24px;
        display: flex;
        flex-direction: column;
    }

    #footer #map {
        float: none;
        width: 100%;
        height: 274px;
        background: url(../img/map_m.png) no-repeat;
        background-size: cover;
        margin: 0 auto;
    }

    #footer #left {
        width: 100%;
        padding: 50px 0;
    }

    #footer #left h3 {
        padding: 0 20px;
    }

    #footer #left #desc {
        padding: 0 20px;
    }

    #footer #left #contacts {
        font-size: 24px;
        margin: 40px 0;

    }

    #footer #left #phone {
        background: url(../img/call_w.png) 20px 0 no-repeat;
        padding: 10px 0 0 70px;
    }

    #footer #left #email {
        background: url(../img/mail.png) 20px 0 no-repeat;
        padding: 6px 0 0 70px;
    }

    #footer #left #address {
        background: url(../img/earth.png) 20px 0 no-repeat;
        padding: 6px 0 0 70px;
    }

    #modal {
        width: 100%;
    }
}