@font-face {
    font-family: 'Open Sans';
    font-weight: 300;
    font-display: swap;
    src: url(fonts/opensans/OpenSans-Light.woff) format("truetype");
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 400;
    font-display: swap;
    src: url(fonts/opensans/OpenSans-Regular.woff) format("truetype");
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 600;
    font-display: swap;
    src: url(fonts/opensans/OpenSans-Semibold.woff) format("truetype");
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 700;
    font-display: swap;
    src: url(fonts/opensans/OpenSans-Bold.woff) format("truetype");
}
/****************************************/
/* COLORS                               */
/****************************************/
:root {
    --primary: #96bf0d; /* Kristianstad grön webb */
    --primary-dark: #5d7708; /* Kristianstad mörkgrön custom */
    --primary-light: #c1f028; /* Kristianstad ljusgrön custom */
    --secondary: #639ec8; /* Kristianstad blå webb*/
    --secondary-dark: #3c7caa; /* Kristianstad mörkblå custom*/
    --secondary-light: #d9e8f2; /* Kristianstad ljusblå custom */
    --graytone-dark: #a6a6a6; /* Kristianstad mörkgrå custom */
    --graytone-mid: #ededed; /* Kristianstad grå webb */
    --graytone-light: #f5f5f5; /* Kristianstad ljusgrå webb */
    --complementary-1: #dad3cc; /* Kristianstad grå */
    --complementary-2: #96bf0d; /* Kristianstad grön */
    --complementary-3: #629fca; /* Kristianstad blå */
    --text: #414040; /* Kristianstad textfärg webb */
    --anchor-text: #0058cc; /* länkfärg custom */
    --anchor-text-light: White;

    --body-bg: var(--graytone-light);
    --header-bg: White;
    --header-border: var(--secondary-dark);
    --header-text: var(--text);
    --path-text: var(--anchor-text);
    --footer-bg: var(--graytone-mid);
    --footer-text: var(--text);
    --footer-border: var(--primary);
    --button-bg: var(--primary-dark);
    --button-border: var(--primary);
    --button-text: var(--anchor-text-light);
    --menu-bg: var(--primary);
    --menu-text: var(--anchor-text-light);
    --menu-selected-bg: ; /* N/A */
    --menu-focus-bg: var(--primary-light);
    --submenu-bg: White;
    --submenu-border: var(--secondary-dark);
    --submenu-text: var(--text);
    --submenu-header-bg: var(--secondary-dark);
    --submenu-header-border: White;
    --submenu-header-text: var(--anchor-text-light);
    --submenu-selected-bg: var(--secondary-light);
    --submenu-selected-border: var(--secondary);
    --submenu-focus-bg: var(--graytone-mid);
    --submenu-focus-border: var(--graytone-dark);
    --tab-border: var(--graytone-dark);
    --tab-bg: var(--graytone-mid);
    --tab-selected-border: var(--secondary-dark);
    --tab-focus-border: var(--secondary);
    --tab-selected-bg: var(--body-bg);
    --caption-bg: var(--secondary-dark); /* graph header */
    --caption-text: var(--anchor-text-light);
    --pageinfo-bg: White; /* Page Info, Measure areas */
    --pageinfo-border: White;
    --pageinfo-text: var(--text);
    --content-item-border: var(--graytone-mid);
    --content-itemgroup-1-bg: White;
    --content-itemgroup-1-item-bg: var(--graytone-light);
    --content-itemgroup-2-bg: var(--graytone-light);
    --content-itemgroup-2-item-bg: White;
    --subcontent-wide-bg: var(--body-bg);
    --subcontent-itemgroup-1-bg: White;
    --subcontent-itemgroup-2-bg: White;
    --subcontent-itemgroup-3-bg: White;
}
/****************************************/
/* LOGO SIZE                            */
/****************************************/
#mbHeader a img {
    width: 220px;
}
@media screen and (max-width:1200px) {
    #mbHeader a img {
        width: 200px;
    }
}
@media screen and (max-width:1000px) {
    #mbHeader a img {
        width: 160px;
    }
}
@media screen and (max-width:450px) {
    #mbHeader a img {
        width: 120px;
    }
}
@media screen and (max-width:350px) {
    #mbHeader a img {
        width: 100px;
    }
}
/* Top menu */
@media screen and (min-width:1201px) {
    #mbHeader {
        border-width: 0;
    }
}
/****************************************/
/* FONTS                                */
/****************************************/
body, input, button {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.5em;
}
h1, h2, h3, h4, h5, h6, #mbHeader, #mbFooter {
    font-family: 'Open Sans', Arial, sans-serif;
}
h1 {
    font-size: 42px;
    line-height: 1.3em;
    font-weight: 600;
    margin-top: 6px;
    margin-bottom: 20px;
}
h2 {
    font-size: 34px;
    line-height: 1.2em;
    font-weight: 600;
}
#mbSubContent h2 {
    font-size: 22px;
}
h3 {
    font-size: 22px;
    line-height: 1.3em;
    font-weight: 600;
    margin: 1.5em 0 0.5em 0;
}
.MB .Item h3 {
    font-size: 20px;
    margin: 0 0 0.5em 0;
}
h4 {
    font-size: 20px;
    line-height: 1.3em;
    font-weight: 600;
}
#mbSubContent .Caption {
    font-size: 19px;
    font-weight: 600;
}
p {
    margin-bottom: 20px;
    margin-top: 0;

}
#mbMenu, #mbSubMenu {
    font-size: 18px;
}
#mbFooter {
    font-size: 17px;
    line-height: 27px;
}
.MB .Ingress, .MB .Ingress p {
    font-size: 19px;
    line-height: 1.5em;
    font-weight: 700;
}
@media screen and (max-width:1350px) {
    h1 {
        font-size: 38px;
    }
    h2 {
        font-size: 28px;
    }
    h3 {
        font-size: 21px;
    }
    .MB .Item h3 {
        font-size: 19px;
    }
    h4 {
        font-size: 19px;
    }
    body {
        font-size: 19px;
    }
    p {
        margin-bottom: 19px;
    }
    .MB .Ingress, .MB .Ingress p {
        font-size: 23px;
    }
    #mbMenu, #mbSubMenu {
        font-size: 16px;
    }
}
@media screen and (max-width:768px) {
    h1 {
        font-size: 30px;
    }
    h2 {
        font-size: 26px;
    }
    h3 {
        font-size: 20px;
    }
    h4, #mbSubContent .Caption, .MB .Item h3 {
        font-size: 18px;
    }
    body {
        font-size: 18px;
    }
    p {
        margin-bottom: 18px;
    }
    .MB .Ingress, .MB .Ingress p {
        font-size: 20px;
    }
}
@media screen and (max-width:480px) {
    h1 {
        font-size: 28px;
    }
    h2, #mbSubContent h2 {
        font-size: 24px;
    }
    h3 {
        font-size: 20px;
    }
    h4 {
        font-size: 18px;
    }
    body {
        font-size: 18px;
        line-height: 1.5em;
    }
    p {
        margin-bottom: 18px;
    }
    .MB .Ingress, .MB .Ingress p {
        font-size: 18px;
    }
}
#mbCaption {
    display: none;
}
/****************************************/
/* FOOTER                               */
/****************************************/
#mbFooter {
    overflow: hidden;
    font-weight: 600;
}
#mbFooter ul {
    margin: 2em 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#mbFooter li {
    list-style: none;
    padding: 0;
}
#mbFooter img {
    width: 218px;
}
@media screen and (max-width:900px) {
    #mbFooter ul {
        flex-direction: column;
        align-items: flex-start;
    }
    #mbFooter img {
        width: 190px;
    }
}
@media screen and (max-width:600px) {
    #mbFooter img {
        width: 156px;
    }
}
/****************************************/
/* Section templates                    */
/****************************************/
#mbSubContent .ItemGroup {
    border-radius: 8px;
}
#mbSubContent .ItemGroup.blue {
    background-color: #DEEAF4; /* ljusblå */
}
#mbSubContent .ItemGroup.green {
    background-color: #eaf8d3; /* ljusgrön */
}
#mbSubContent .ItemGroup.pink {
    background-color: #fbd0e3; /* rosa */
}
#mbSubContent .ItemGroup.yellow {
    background-color: #fff8cc; /* ljusgul */
}
#mbSubContent .ItemGroup.gray {
    background-color: #eff2ef; /* ljusgrå */
}
#mbSubContent .ItemGroup.white {
    background-color: White;
}
#mbSubContent .ItemGroup.transparent {
    background-color: transparent;
}
/****************************************/
/* Item templates                       */
/****************************************/
.Item.green {
    background-color: var(--complementary-2) !important;
    padding: 1em;
    border-width: 0 !important;
    border-radius: 8px;
}
.Item.blue {
    background-color: var(--complementary-1) !important;
    padding: 1em;
    border-width: 0 !important;
    border-radius: 8px;
}
.Item.goal {
    background-position: bottom;
    background-repeat: no-repeat;
    padding-bottom: 50px;
}
.Item.goal.green {
    background-image: url(images/osteraker/siluett.png);
}
.Item.goal.blue {
    background-image: url(images/osteraker/hus.png);
}
/****************************************/
/* Page customizations                  */
/****************************************/
.mb-img-left #mbContentImage {
    float: left;
    width: 30%;
}
.mb-img-right #mbContentImage {
    float: right;
    width: 30%;
}
.mb-img-left #mbContentImage img,
.mb-img-right #mbContentImage img {
    object-fit: contain;
}
.mb-wide.mb-img-left #mbContentHeader,
.mb-wide.mb-img-right #mbContentHeader {
    max-width: 1000px;
}
/****************************************/
/* Item customizations                  */
/****************************************/