@charset "utf-8";

@font-face {
    font-family: Canela;
    src: url(../webfonts/Canela-Regular-Web.woff) format("woff"),url(../webfonts/Canela-Regular-Web.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Karla;
    src: url(../webfonts/Karla-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: Karla;
    src: url(../webfonts/Karla-Italic.ttf) format("truetype");
    font-weight: 400;
    font-style: italic
}

@font-face {
    font-family: Karla;
    src: url(../webfonts/Karla-Bold.ttf) format("truetype");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: Karla;
    src: url(../webfonts/Karla-BoldItalic.ttf) format("truetype");
    font-weight: 700;
    font-style: italic
}

@font-face {
    font-family: ATC Harris;
    src: url(../webfonts/ATCHarris-Bold.woff) format("woff"),url(../webfonts/ATCHarris-Bold.woff2) format("woff2");
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: ATC Harris;
    src: url(../webfonts/ATCHarris-Regular.woff) format("woff"),url(../webfonts/ATCHarris-Regular.woff2) format("woff2");
    font-weight: 400;
    font-style: normal
}

:root {
    --font-global: Karla,"system-ui",Arial,sans-serif;
    --font-global-alt: Karla,"system-ui",Arial,sans-serif;
    --font-global-hdn: Canela,Georgia,Times New Roman,serif;
    --font-global-nav: ATC Harris,monospace;
    --color-accent: rgb(76, 111, 231);
    --color-accent-alpha-90: rgb(76, 111, 231, .9);
}

body {
    letter-spacing: -0.03em;
}

.inner-nav ul {
    font-family: var(--font-global-nav);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.07em;
    line-height: 1.625;
    text-transform: uppercase;
}

.hs-line-2 {
    font-family: var(--font-global-hdn);
    font-size: 55px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.hs-line-3 {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.2;
    text-transform: none;
}

.lead-alt {
    font-family: var(--font-global-hdn);
    font-size: 55px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.section-title {
    font-family: var(--font-global-hdn);
    font-size: 55px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.services-title {
    font-family: var(--font-global-hdn);
    font-size: 34px;
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.2;
}

.bg-video-wrapper > video {
    filter: grayscale(1.0) opacity(0.1);
}

.home-content {
    text-align: left;
}

#clients .logo-item {
    height: 150px;
}

#contact .ci-text, #contact input, #contact textarea {
    font-size: 16px;
}

.google-map #map {
    display: block;
    width: 100%;
    height: 485px;
    position: relative;
    background-color: #111 !important;
    z-index: 1;
}

.light-content .footer-made a {
    color: #777;
}

.bg-accent, .bg-dark.light-content.bg-accent, .bg-dark-lighter.light-content.bg-accent {
    background-color: var(--color-accent) !important;
}

.bg-dark-alfa-30:before {
    background: rgba(34,34,34, 0);
}

.services-icon {
    color: var(--color-accent);
    height: 2em;
    width: 2em;
}

.services-icon svg {
    height: 2em;
    width: 2em;
}

.light-content .section-title-descr {
    color: #fff;
}

.ci-icon:before {
    background: var(--color-accent);
}

.btn-mod {
    background: var(--color-accent-alpha-90);
}

.btn-mod:hover, .btn-mod:focus {
    background: var(--color-accent);
}

@media only screen and (max-width: 768px) {
    .google-map #map {
        height: 300px;
    }
}

@media only screen and (max-width: 480px) {
    .google-map #map {
        height: 300px;
    }
}