/* add colors as rgb values, otherwise you can't call any function on it - like rgba for example */
:root {
    --primary-color: 46, 155, 66;
    --secondary-color: 46, 155, 66;
    --submenu-bgcolor: 255, 255, 255;
    --text-color: 60, 60, 60;
    --footer-icon1:202,214,0;
    --footer-icon2:96,165,214;
    --footer-icon3:237,145,13;
}

body.sj h1.theme-site-name,
.awards-btn:hover {
    color: rgb(var(--primary-color));
}

.awards-btn:hover {
    background: rgb(var(--submenu-bgcolor));
}

.info-bar{
    background-color: rgb(var(--primary-color));
}

.top-bar,
.footer-inner,
.page-main-page .sj-content-row-4 .column-2col-2 {
    background: rgb(var(--secondary-color));
}

/* NAV */

body:not(.page-main-page) .nav-wrapper{
    background-color: rgba(var(--primary-color), 0.8);
}

.nav > ul > li > a:hover,
.nav > ul > li > a {
    color: rgb(var(--submenu-bgcolor));
}

.nav ul ul {
    background: rgba(var(--submenu-bgcolor), .86);
}
/* TODO: remove :not */
.page-main-page .nav > ul > li > a,
body:not(.page-main-page) .nav ul ul a,
.nav ul ul a{
    color: rgb(var(--text-color));
}

/* TODO: remove :not */

body:not(.page-main-page) .nav,
.nav{
    background:none;
}

/* NAV MOBILE */
div.slicknav_menu,
a.slicknav_btn{
    background-color: rgb(var(--primary-color));
}


/* CONTENT */
.page-main-page .sj-content-row-3 .sj_element_news ul + a{
    color: rgb(var(--submenu-bgcolor));
}

/* FOOTER */
.footer-inner .theme-address i {
    color: rgb(var(--footer-icon1));
}

.footer-inner .theme-email i {
    color: rgb(var(--footer-icon2));
}

.footer-inner .theme-telephone i {
    color: rgb(var(--footer-icon3));
}