:root {
    --visione-primary: #06c;
    --visione-primary-dark: #17324d;
    --visione-text-muted: #455b71;
    --visione-text-body: #17324d;
    --visione-text-soft: #455b71;
    --visione-success: #008758;
    --visione-warning: #a66300;
    --visione-danger: #d9364f;
    --visione-info: #2f80ed;
    --visione-light-bg: #f0f6fc;
    --visione-home-hero-bg: var(--visione-light-bg);
    --visione-font-sans: "Titillium Web", Arial, sans-serif;
    --visione-font-mono: "Roboto Mono", monospace;
}

html,
body {
    color: var(--visione-text-body);
    font-family: var(--visione-font-sans);
    font-size: 1rem;
    line-height: 1.5;
}

button,
input,
select,
textarea {
    font-family: var(--visione-font-sans);
}

code,
kbd,
pre,
samp {
    font-family: var(--visione-font-mono);
}

a {
    text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.card-title,
.callout-title {
    color: var(--visione-primary-dark);
    font-family: var(--visione-font-sans);
    line-height: 1.2;
}

p,
li,
td,
th,
label,
small,
.card-text,
.card .card-body .card-text,
.callout p,
.form-text {
    color: inherit;
    font-family: var(--visione-font-sans) !important;
}

.lead {
    color: var(--visione-text-soft);
    font-size: 1.125rem;
    line-height: 1.55;
}

.text-muted,
.text-secondary {
    color: var(--visione-text-soft) !important;
}

.text-dark {
    color: var(--visione-text-body) !important;
}

.text-primary,
.category.text-primary {
    color: var(--visione-primary) !important;
}

.text-success,
.category.text-success {
    color: var(--visione-success) !important;
}

.text-warning {
    color: var(--visione-warning) !important;
}

.text-danger {
    color: var(--visione-danger) !important;
}

.text-info {
    color: var(--visione-info) !important;
}

.display-1 {
    font-size: clamp(3rem, 5vw, 4.75rem);
    line-height: 1;
}

.display-3 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1;
}

.display-6 {
    font-size: clamp(1.75rem, 2.4vw, 2.25rem);
    line-height: 1.1;
}

.bg-light {
    background-color: var(--visione-home-hero-bg) !important;
}

html body .navbar .navbar-collapsable .navbar-nav li.nav-item a.nav-link[data-focus-mouse="true"], .navbar .navbar-collapsable .navbar-nav li.nav-item button.nav-link[data-focus-mouse="true"] {
    border-color: inherit !important
}

.it-hero-wrapper.it-primary,
.it-hero-wrapper.it-primary-bg {
    background: var(--visione-primary) !important;
    color: #fff;
}

.it-hero-wrapper.it-primary h1,
.it-hero-wrapper.it-primary p,
.it-hero-wrapper.it-primary-bg h1,
.it-hero-wrapper.it-primary-bg p {
    color: #fff !important;
}

.it-hero-wrapper .container {
    min-height: 240px;
    display: flex;
    align-items: center;
}

.it-hero-wrapper .container > .row {
    width: 100%;
    justify-content: center;
}

.it-hero-wrapper .it-hero-text-wrapper {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.it-hero-wrapper .it-hero-text-wrapper h1,
.it-hero-wrapper .it-hero-text-wrapper p {
    width: 100%;
}

.it-hero-wrapper.bg-light .it-hero-text-wrapper p {
    font-size: 1.3rem;
}

.bg-light h1,
.bg-light h2,
.bg-light h3,
.bg-light h4,
.bg-light h5,
.bg-light h6 {
    color: var(--visione-primary-dark) !important;
}

.bg-light p,
.bg-light .lead,
.bg-light .text-muted,
.bg-light .text-secondary {
    color: var(--visione-text-soft) !important;
}

.icon {
    color: currentColor;
    fill: currentColor;
    flex-shrink: 0;
}

.icon-primary {
    color: var(--visione-primary) !important;
    fill: var(--visione-primary) !important;
}

.icon-success {
    color: var(--visione-success) !important;
    fill: var(--visione-success) !important;
}

.icon-warning {
    color: var(--visione-warning) !important;
    fill: var(--visione-warning) !important;
}

.icon-danger {
    color: var(--visione-danger) !important;
    fill: var(--visione-danger) !important;
}

.icon-info {
    color: var(--visione-info) !important;
    fill: var(--visione-info) !important;
}

.btn-primary .icon:not([class*="icon-"]),
.badge[class*="bg-"] .icon:not([class*="icon-"]),
.rounded-circle[class*="bg-"] .icon:not([class*="icon-"]) {
    color: #fff;
    fill: #fff;
}

.it-header-wrapper .header-slim-right-zone .btn .rounded-icon,
.it-header-wrapper .header-slim-right-zone .btn .rounded-icon .icon {

}

.it-footer,
.it-footer a,
.it-footer h2,
.it-footer h3,
.it-footer h4,
.it-footer .it-brand-text,
.it-footer .it-brand-text h2,
.it-footer .it-brand-text h3,
.it-footer .member-name,
.it-footer .icon {
    color: #fff !important;
    fill: #fff !important;
}

@media (max-width: 767.98px) {
    .it-hero-wrapper .container {
        min-height: 220px;
    }

    .it-hero-wrapper .it-hero-text-wrapper {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}