@font-face {
    font-family: 'Roboto-Bold';
    src: url('../font/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
    url('../font/Roboto-Bold.woff') format('woff'), url('../font/Roboto-Bold.ttf') format('truetype'),
    url('../font/Roboto-Bold.svg#Roboto-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url('../font/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
    url('../font/Roboto-Regular.woff') format('woff'), url('../font/Roboto-Regular.ttf') format('truetype'),
    url('../font/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('../font/Roboto-Light.eot?#iefix') format('embedded-opentype'),
    url('../font/Roboto-Light.woff') format('woff'),
    url('../font/Roboto-Light.ttf')  format('truetype'), url('../font/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*
  Flaticon icon font: Flaticon
  Creation date: 28/02/2019 13:43
  */

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: "Flaticon";
        src: url("../font/Flaticon.svg#Flaticon") format("svg");
    }
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
    font-family: Flaticon;
    font-size: 20px;
    font-style: normal;
}

.flaticon-about-us:before {
    content: "\f101";
    font-size: 110px;
    color: #f99969;
}
.flaticon-help-operator::before {
    content: "\f100";
    font-size: 100px;
    color: #f6b33b;
}
.flaticon-help-operator, .flaticon-about-us {
    display: inline-block;
    width: 170px;
    height: 170px;
    position: relative;
    border: 3px solid #f6b33b;
    border-radius: 50%;
}
.flaticon-about-us:before, .flaticon-help-operator::before {
    position: absolute;
    right: 7px;
    top: 7px;
    border: 8px solid;
    border-radius: 50%;
    width: 150px;
    height: 150px;
}
.flaticon-about-us {
    border-color: #f99969;
}
.flaticon-about-us:before {

}
body {
    font-size: 16px;
    color: #2F2E2E;
    font-family: Roboto-Regular, Arial, sans-serif;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
}

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

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

a {
    color: rgba(0, 0, 0, .65);
    text-decoration: none;
}

a:hover {
    color: rgba(0, 0, 0, .85);
}

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

.clearfix:after {
    clear: both;
}

header {
    position: fixed;
    width: 100%;
    top: 0;
    background: #2c2d39;
    z-index: 99;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
}

.content {
    margin-top: 67px;
}

.container {
    max-width: 980px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.display-flex {
    display: flex;
    justify-content: space-between;
}

.display-flex--header {
    height: 67px;
    align-items: center;
}
.menu-list__element:last-child {
    padding-right: 0;
}
.header-logo__link {
    font-size: 26px;
    color: #fff;
    font-weight: bold;
    position: relative;
    text-transform: uppercase;
}
.header-logo__link:hover, .header-logo__link:focus {
    color: #fff;
}
.menu-list__link {
    color: #fff;
}
.menu-list__link:hover, .menu-list__link:focus{
    color: #fff;
    text-decoration: underline;
}
.header-logo__link:before {

}
.section-contact > .display-flex {
    flex-direction: column;
    text-align: center;
}
.header-logo__link > span {
    color: #7d809f;
}

.menu-list__element {
    display: inline-block;
    padding: 0 35px;
}

.logo img
{
  margin-top:5px;
  margin-bottom:15px;
  position: relative;
}

.section-img {

    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)), url("../img/index.jpg") no-repeat fixed center;
}
.section-img__first {
    height: calc(100vh - 67px);
}
.section-img > .container {
    text-align: center;
    height: calc(100vh - 67px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title-img {
    font-size: 60px;
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.section-img_text {
    font-size: 26px;
    color: #fff;
    margin-bottom: 20px;
}

.btn {
    background-color: #222756;
    border-color: #222756;
    display: inline-block;
    padding: 15px;
    color: #fff;
    border-radius: 3px;
    min-width: 200px;
    cursor: pointer;
    text-align: center;
}

.btn:hover, .btn:focus {
    color: #fff;
    background-color: #161B4A;
    border-color: #161B4A;
}

.left-side, .right-side {
    width: 100%;
}

.right-side {
    text-align: center;
}

.container.display-flex {
    align-items: center;
    padding: 100px 15px;
}
.title {
    font-size: 32px;
    margin-bottom: 30px;
}
.section-text {
    margin-bottom: 20px;
}
.section-about_us {
    background: #e8ecf8;
}
.section-about_us .left-side {
    text-align: center;
}
.section-about_us .right-side {
    text-align: left;
}
.section-contact {
    border-top: 1px solid #f1f1f1;
}
footer {
    background: #2c2d39;
}
.copy, .copy p a {
    color: #fff;
}
.copy p a {
    padding-top: 10px;
    display: inline-block;
}
.copyright {

}
.section-img--contact {
    height: 275px;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)), url("../img/contact-img.jpg") no-repeat fixed center 67px;
}
.title-img.title-contact {
    font-weight: normal;
    text-transform: capitalize;
}
.title-contact {
}
.section-img.section-img--contact > .container {
    align-items: self-start;
    padding-left: 55px;
    height: 275px;
}
.form-group {
    margin-bottom: 1rem;
}
label {
    display: inline-block;
    margin-bottom: .5rem;
}
.form-control::placeholder {
    color: #6c757d;
    opacity: 1;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-primary {
    font-size: 16px;
}
.section-img--about-us, .section-img--services {
    height: 275px;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)), url("../img/about-us-img.jpg") no-repeat fixed center 67px;
}
.section-img--services {
    height: 275px;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7)), url("../img/services-img.jpg") no-repeat fixed center 67px;
}
.title-about {
}
.section-about__us {
    padding: 100px 0;
}
.section-services {
    padding: 60px 0 20px 0;
}
.section-about__us .section-text {
    margin-bottom: 0;
    font-size: 18px;
}
.display-flex--services {
    flex-wrap: wrap;
}
.title-services {
}
.services-block {
    width: 50%;
    padding: 0 20px;
    margin-bottom: 60px;
}
.services-title {
    position: relative;
    font-size: 20px;
    padding: 15px 0 50px 90px;
    font-weight: normal;
}
.services-title:before {
    content: '';
    background: url("../img/sprite.png") no-repeat;
    width: 70px;
    height: 85px;
    position: absolute;
    left: 0;
    top: 0;
}
.services-title--cognitive-solutions:before {
    background-position: -80px 0;
}
.services-title--app-development:before {
    background-position: -150px 0;
}
.services-title--quality-guarantee:before {
    background-position: -225px 0;
}
.services-title--mobile-design:before {
    background-position: -296px 0;
}
.services-title--mobile-development:before {
    background-position: -370px 0;
}
.header-logo {
    flex-shrink: 0;
}
.display-flex--footer {
    height: 135px;
    align-items: center;
}
#validationTextarea {
    height: 7rem;
}
@media (max-width: 768px) {
    .menu-list__element {
        padding: 5px 10px;
    }
    .menu-list {
        padding-left: 15px;
    }
}
@media (max-width: 480px) {
    .display-flex--header {
        flex-direction: column;
        justify-content: space-evenly;
        height: 90px;
    }
    .content {
        margin-top: 90px;
    }
    .container.display-flex {
        flex-direction: column-reverse;
        padding: 50px 15px;
        text-align: center;
    }
    .section-img__first {
        height: calc(100vh - 90px);
    }
    .section-about_us .container.display-flex,
    .section-contact .container.display-flex,
    .display-flex.display-flex--contact.container{
        flex-direction: column;
    }
    .section-about_us .right-side {
        text-align: center;
    }
    .display-flex--services {
        flex-direction: column;
    }
    .services-block, .left-side, .right-side {
        width: 100%;
    }
    .address.right-side {
        margin-top: 40px;
    }
    .form-group {
        text-align: left;
    }
    .section-img--about-us, .section-img--services, .section-img--contact {
        background-position: center center;
    }

}