/*///////////////
    OVERRIDES
//////////////*/
html,
.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6,
.uk-heading-2xlarge,
.uk-heading-large,
.uk-heading-medium,
.uk-heading-small,
.uk-heading-xlarge,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Saira Semi Condensed', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

.uk-offcanvas-overlay::before { background: rgba(255, 255, 255, .6); }

.uk-sticky { transition: background .1s ease-in-out; }

.uk-sticky-placeholder { display: none; }

.uk-navbar { z-index: 1; }

.uk-navbar-item,
.uk-navbar-nav > li > a,
.uk-navbar-toggle {
    min-height: 70px;
}

.uk-navbar-nav > li > a,
.uk-navbar-toggle {
    color: #fff;
}

.uk-navbar-nav > li > a:hover,
.uk-navbar-toggle:hover {
    color: #2795d3;
}

* + .uk-progress { margin-top: 0; }

.uk-progress { background: rgba(255, 255, 255, .3); }

.uk-button-primary { background: #2795d3; }

.uk-button-primary:hover { background: #52aadc; }

.uk-input,
.uk-select,
.uk-textarea {
    border-color: transparent;
}

/*////////////
    CUSTOM
///////////*/
.to-top {
    position: fixed;
    bottom: 16px;
    right: 16px;
    background: #fff;
    border-radius: 500px;
    padding: 12px;
    line-height: 1.3;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2),
                0 6px 10px 0 rgba(0, 0, 0, .14),
                0 1px 18px 0 rgba(0, 0, 0, .12);
}

/* Navbar */
.header-logo { max-width: 120px; }

.header-logo.logo-stuck { display: none; }

.uk-sticky.stuck {
    background: #fff;
    transition: background .1s ease-in-out;
}

.uk-sticky.stuck .logo-stuck { display: block; }

.uk-sticky.stuck .header-logo:not(.logo-stuck) { display: none; }

.uk-sticky.stuck .uk-navbar-nav > li > a,
.uk-sticky.stuck .uk-navbar-toggle {
    color: #222;
}

.uk-sticky.stuck .uk-navbar-nav > li > a:hover,
.uk-sticky.stuck .uk-navbar-toggle:hover {
    color: #2795d3;
}

.hero .uk-button-primary {
    background: #2795d3;
    color: #fff;
}

.hero .uk-button-primary:hover {
    background: #52aadc;
    color: #fff;
}

/* Text Utilities */
.title-light { font-weight: 300; }

.title-bold { font-weight: 700; }

.text-lead { font-size: 20px; }

/* Icons */
.about-card .uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve),
.services-card .uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) {
    stroke: #2795d3;
}

.about-card .uk-icon svg[data-svg="home"],
.about-card .uk-icon svg[data-svg="settings"],
.about-card .uk-icon svg[data-svg="happy"],
.services-card .uk-icon svg[data-svg="commenting"],
.services-card .uk-icon svg[data-svg="phone"] {
    fill: #2795d3;
}

/* Progress bars */
.progress-container { position: relative; }

.progress-label {
    font-size: 12px;
    text-transform: uppercase;
}

.progress-tooltip {
    position: absolute;
    top: -8px;
    left: 0;
    border-radius: 2px;
    background: #fff;
    color: #222;
    font-size: 12px;
    padding: 4px;
}

.progress-tooltip::after {
    content: " ";
    position: absolute;
    top: 100%;
    left: 50%;
    border-width: 5px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    transform: translateX(-50%);
  }

.progress-tooltip[data-percentage="95"] { left: calc(95% - 16px); }
.progress-tooltip[data-percentage="100"] { left: calc(100% - 20px); }
.progress-tooltip[data-percentage="70"] { left: calc(70% - 16px); }
.progress-tooltip[data-percentage="82"] { left: calc(82% - 16px); }

/* Sections */
.services-card,
.customer-card {
    padding: 20px;
}

.section-background {
    background-position: 0% 35%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.background-phrases { background-image: url(../img/bg-arzion3.jpg); }

.background-kickstart { background-image: url(../img/bg-arzion2.jpg); }

.contact-info-box {
    position: absolute;
    bottom: 16px;
    left: 56px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    padding: 16px;
}

/* Footer */
.footer-logo { max-width: 160px; }

@media (max-width: 640px) {
    .contact-info-box {
        left: 46px;
        right: 16px;
    }
}