/* Global CSS Props */
:root{
    /* primary color, its separate channel R, G, B values & its (H)ue, (S)aturation, (L)ightness components */
    --primary-color: #00807f;

    --primary-color-r: 0;
    --primary-color-g: 128;
    --primary-color-b: 127;
    
    --primary-color-h: 207deg;
    --primary-color-s: 100%;
    --primary-color-l: 20%;
    
    --primary-color-rgb: var(--primary-color-r), var(--primary-color-g), var(--primary-color-b);
    
    /* the same for secondary color */
    --secondary-color: #00807f;
    
    --secondary-color-r: 0;
    --secondary-color-g: 128;
    --secondary-color-b: 127;
    
    --secondary-color-h: 87deg;
    --secondary-color-s: 70%;
    --secondary-color-l: 44%;
    
    --secondary-color-rgb: var(--secondary-color-r), var(--secondary-color-g), var(--secondary-color-b);
    
    /* accent colors */
    --accent-color-light-blue: #424242;
    /* fonts */
    --base-color: #222;
    --base-font: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --base-font-weight: 400;
    --headings-color: var(--base-color);
    --headings-font: var(--base-font);
    --headings-font-weight: 300;
    /* image overlay color */
    --background-overlay-color: rgba( var(--primary-color-rgb), 0.8);
    /* buttons */
    --button-color: #fff;
    --button-font-weight: 600;
    --button-hover-color: var(--button-color);
    --button-bg-color: var(--primary-color);
    --button-hover-bg-color: hsl( var(--primary-color-h), calc( var(--primary-color-s) ), calc( var(--primary-color-l) + 7% ));
    --button-border-radius: 3px;
    /* doc-buttons */
    --doc-button-color: var(--button-color);
    --doc-button-hover-color: var(--doc-button-color);
    --doc-button-bg-color: var(--secondary-color);
    --doc-button-hover-bg-color: hsl( var(--secondary-color-h), calc( var(--secondary-color-s) - 10% ), calc( var(--secondary-color-l) - 5% ) );
    --doc-button-icon-bg-color: hsl( var(--secondary-color-h), var(--secondary-color-s), calc( var(--secondary-color-l) - 5% ) );
    --doc-button-hover-icon-bg-color: hsl( var(--secondary-color-h), calc( var(--secondary-color-s) - 15% ), calc( var(--secondary-color-l) - 15% ) );
    /* links */
    --link-color: var(--primary-color);
    --link-hover-color: hsl( var(--primary-color-h), calc( var(--primary-color-s) ), calc( var(--primary-color-l) + 10% ));
    /* top / main  navigation menu */
    --nav-menu-item-color: var(--primary-color);
    --nav-menu-item-hover-color: var(--link-hover-color);
    /* active menu item is the item with the link to the current page */
    --nav-menu-top-level-item-underline-color: var(--primary-color);
    --nav-menu-top-level-active-item-underline-color: var(--primary-color);
    --nav-menu-submenu-item-sideline-color: var(--primary-color);
    --nav-menu-submenu-active-item-sideline-color: rgba(141, 141, 141, .6);
}

/* Set default font-family, text color, etc. here */
html, body {
    color: var(--base-color);
    font-family: var(--base-font);
    font-weight: var(--base-font-weight);
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
.site_title,
.paragraphs-item-webform .field-name-field-paragraph-title,
.paragraphs-item-content .field-name-field-paragraph-title,
.paragraphs-item-long-content .field-name-field-paragraph-title,
.paragraphs-item-content-list > .content > .container > .field-name-field-paragraph-title,
.paragraphs-item-content-list .field-name-field-paragraph-title,
.field-name-field-paragraph-carousel .owl-carousel .owl-item .field-name-field-paragraph-title,
.paragraphs-item-discussions > .content > .container > .field-name-field-paragraph-title {
    color: var(--headings-color);
    font-family: var(--headings-font);
    font-weight: var(--headings-font-weight);
}

.font-color-white h1,
.font-color-white .h1,
.font-color-white h2,
.font-color-white .h2,
.font-color-white h3,
.font-color-white .h3,
.font-color-white h4,
.font-color-white .h4,
.font-color-white h5,
.font-color-white .h5,
.font-color-white h6,
.font-color-white .h6,
.font-color-white.paragraphs-item-webform .field-name-field-paragraph-title,
.font-color-white.paragraphs-item-content .field-name-field-paragraph-title,
.font-color-white.paragraphs-item-long-content .field-name-field-paragraph-title,
.font-color-white.paragraphs-item-content-list > .content > .container > .field-name-field-paragraph-title,
.font-color-white.paragraphs-item-content-list .field-name-field-paragraph-title,
.font-color-white.field-name-field-paragraph-carousel .owl-carousel .owl-item .field-name-field-paragraph-title,
.font-color-white.paragraphs-item-discussions > .content > .container > .field-name-field-paragraph-title,

.font-color-white-smoke h1,
.font-color-white-smoke .h1,
.font-color-white-smoke h2,
.font-color-white-smoke .h2,
.font-color-white-smoke h3,
.font-color-white-smoke .h3,
.font-color-white-smoke h4,
.font-color-white-smoke .h4,
.font-color-white-smoke h5,
.font-color-white-smoke .h5,
.font-color-white-smoke h6,
.font-color-white-smoke .h6,
.font-color-white-smoke.paragraphs-item-webform .field-name-field-paragraph-title,
.font-color-white-smoke.paragraphs-item-content .field-name-field-paragraph-title,
.font-color-white-smoke.paragraphs-item-long-content .field-name-field-paragraph-title,
.font-color-white-smoke.paragraphs-item-content-list > .content > .container > .field-name-field-paragraph-title,
.font-color-white-smoke.paragraphs-item-content-list .field-name-field-paragraph-title,
.font-color-white-smoke.field-name-field-paragraph-carousel .owl-carousel .owl-item .field-name-field-paragraph-title,
.font-color-white-smoke.paragraphs-item-discussions > .content > .container > .field-name-field-paragraph-title,

.font-color-dark-gray h1,
.font-color-dark-gray .h1,
.font-color-dark-gray h2,
.font-color-dark-gray .h2,
.font-color-dark-gray h3,
.font-color-dark-gray .h3,
.font-color-dark-gray h4,
.font-color-dark-gray .h4,
.font-color-dark-gray h5,
.font-color-dark-gray .h5,
.font-color-dark-gray h6,
.font-color-dark-gray .h6,
.font-color-dark-gray.paragraphs-item-webform .field-name-field-paragraph-title,
.font-color-dark-gray.paragraphs-item-content .field-name-field-paragraph-title,
.font-color-dark-gray.paragraphs-item-long-content .field-name-field-paragraph-title,
.font-color-dark-gray.paragraphs-item-content-list > .content > .container > .field-name-field-paragraph-title,
.font-color-dark-gray.paragraphs-item-content-list .field-name-field-paragraph-title,
.font-color-dark-gray.field-name-field-paragraph-carousel .owl-carousel .owl-item .field-name-field-paragraph-title,
.font-color-dark-gray.paragraphs-item-discussions > .content > .container > .field-name-field-paragraph-title,

.font-color-light-gray h1,
.font-color-light-gray .h1,
.font-color-light-gray h2,
.font-color-light-gray .h2,
.font-color-light-gray h3,
.font-color-light-gray .h3,
.font-color-light-gray h4,
.font-color-light-gray .h4,
.font-color-light-gray h5,
.font-color-light-gray .h5,
.font-color-light-gray h6,
.font-color-light-gray .h6,
.font-color-light-gray.paragraphs-item-webform .field-name-field-paragraph-title,
.font-color-light-gray.paragraphs-item-content .field-name-field-paragraph-title,
.font-color-light-gray.paragraphs-item-long-content .field-name-field-paragraph-title,
.font-color-light-gray.paragraphs-item-content-list > .content > .container > .field-name-field-paragraph-title,
.font-color-light-gray.paragraphs-item-content-list .field-name-field-paragraph-title,
.font-color-light-gray.field-name-field-paragraph-carousel .owl-carousel .owl-item .field-name-field-paragraph-title,
.font-color-light-gray.paragraphs-item-discussions > .content > .container > .field-name-field-paragraph-title,

.font-color-black h1,
.font-color-black .h1,
.font-color-black h2,
.font-color-black .h2,
.font-color-black h3,
.font-color-black .h3,
.font-color-black h4,
.font-color-black .h4,
.font-color-black h5,
.font-color-black .h5,
.font-color-black h6,
.font-color-black .h6,
.font-color-black.paragraphs-item-webform .field-name-field-paragraph-title,
.font-color-black.paragraphs-item-content .field-name-field-paragraph-title,
.font-color-black.paragraphs-item-long-content .field-name-field-paragraph-title,
.font-color-black.paragraphs-item-content-list > .content > .container > .field-name-field-paragraph-title,
.font-color-black.paragraphs-item-content-list .field-name-field-paragraph-title,
.font-color-black.field-name-field-paragraph-carousel .owl-carousel .owl-item .field-name-field-paragraph-title,
.font-color-black.paragraphs-item-discussions > .content > .container > .field-name-field-paragraph-title {
    color: inherit;
}


.background-color-overlay:before {
    background-color: var(--background-overlay-color) !important;
    border-bottom: var(--primary-color) solid 20px;
}

/* links */

a { color: var(--link-color) }
a:hover, a:focus { color: var(--link-hover-color) }

/* Buttons */

.button {
    color: var(--button-color) !important;
    background: var(--button-bg-color) !important;
    border-radius: var(--button-border-radius) !important;
}

.button:hover,
.button:focus {
    background: var(--button-hover-bg-color) !important;
}

.doc-button {
    background: var(--doc-button-bg-color) !important;
}

.doc-button:hover,
.doc-button:focus {
    background: var(--doc-button-hover-bg-color) !important;
}

.doc-button:before {
    background: var(--doc-button-icon-bg-color);
    -webkit-transition: background-color .25s ease-out;
         -o-transition: background-color .25s ease-out;
            transition: background-color .25s ease-out;
}

.doc-button:hover:before,
.doc-button:focus:before {
    background: var(--doc-button-hover-icon-bg-color);
}

/* main nav menu links */

#block-menu-menu-site-menu a {
    font-weight: normal;
    color: var(--nav-menu-item-color);
}

#block-menu-menu-site-menu .menu.nav > li.active-trail.active > a {
    position: relative;
    text-decoration: none;
}

#block-menu-menu-site-menu > .menu.nav > li > a:before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    background: var(--nav-menu-top-level-item-underline-color);
    height: 2px;
    -webkit-transition: width .2s ease-out;
    -o-transition: width .2s ease-out;
    transition: width .2s ease-out;
    z-index: 1001;
}

#block-menu-menu-site-menu > .menu.nav > li > a:after { content: none }

#block-menu-menu-site-menu > .menu.nav > li > a:hover:before,
#block-menu-menu-site-menu > .menu.nav > li > a:focus:before,
#block-menu-menu-site-menu > .menu.nav > li.active-trail.active > a:before {
    width: 100%;
}

#block-menu-menu-site-menu .menu.nav .dropdown-menu li:before { background: var(--nav-menu-submenu-item-sideline-color) }
#block-menu-menu-site-menu .menu.nav .dropdown-menu li.active:before { background: var(--nav-menu-submenu-active-item-sideline-color) }

#block-menu-menu-site-menu a:hover,
#block-menu-menu-site-menu a:focus { color: var(--nav-menu-item-hover-color) }

#block-menu-menu-site-menu a.active-trail.active { color: var(--nav-menu-item-hover-color) }
/*#block-menu-menu-site-menu .menu.nav .dropdown-menu li.active:before,*/
#block-menu-menu-site-menu > .menu.nav > li.active-trail.active > a:before {
    background: var(--nav-menu-top-level-active-item-underline-color);
}

@media screen and (min-width: 768px) {
    .nav > li > a { padding: 10px 7px }
    #block-menu-menu-site-menu .menu.nav > li { margin-right: .565em }
    #block-menu-menu-site-menu .menu.nav li a { font-size: 16px }
}

@media screen and (min-width: 992px) {
    .nav > li > a { padding: 10px 15px }
    #block-menu-menu-site-menu .menu.nav > li { margin-right: 1em }
    #block-menu-menu-site-menu .menu.nav li a { font-size: 18px }
}

/* Link behavior under font-color-white class modifier */

/*
.font-color-white a { color: #ccc }
.font-color-white a:hover,
.font-color-white a:focus { color: #fff }
*/

/* form buttons */

body:not(.node-type-document) .btn:not(.dropdown-toggle),
body:not(.node-type-document) form button:not(.dropdown-toggle),
body:not(.node-type-document) input[type="reset"],
body:not(.node-type-document) input[type="submit"],
.node-overview-page .field-name-field-overview-link a,
.node-overview-page .paragraphs-item-long-content .field-name-field-paragraph-button-title a {
    display: inline-block;
    border: 0;
    border-radius: var(--button-border-radius);
    color: var(--button-color);
    cursor: pointer;
    font-size: 18px;
    font-size: calc(16px + (18 - 16) * (100vw - 320px) / (1200 - 320));
    font-weight: var(--button-font-weight);
    line-height: 1;
    padding: .625em 1.25em;
    /* margin: 1.25em 0; */
    text-decoration: none !important;
    text-shadow: none;
    white-space: normal;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-transition: background-color 0.25s ease-out;
    transition: background-color 0.25s ease-out;
}

body:not(.node-type-document) form button:not(.btn-danger):not(.btn-warning):not(.dropdown-toggle),
body:not(.node-type-document) .btn.btn-primary,
body:not(.node-type-document) .btn.btn-success,
body:not(.node-type-document) input[type="reset"],
body:not(.node-type-document) input[type="submit"],
.node-overview-page .field-name-field-overview-link a,
.node-overview-page .paragraphs-item-long-content .field-name-field-paragraph-button-title a {
    background: var(--button-bg-color);
}

body:not(.node-type-document) .btn.full-width,
body:not(.node-type-document) form button.full-width,
body:not(.node-type-document) input[type="reset"].full-width,
body:not(.node-type-document) input[type="submit"].full-width {
    display: block;
    margin: 0 30px
}

/*

body:not(.node-type-document) .btn:first-child,
body:not(.node-type-document) form button:first-child,
body:not(.node-type-document) input[type="reset"]:first-child,
body:not(.node-type-document) input[type="submit"]:first-child {
    margin-top: 0
}

body:not(.node-type-document) .btn:last-child,
body:not(.node-type-document) form button:last-child,
body:not(.node-type-document) input[type="reset"]:last-child,
body:not(.node-type-document) input[type="submit"]:last-child {
    margin-top: 0
}

*/

body:not(.node-type-document) .btn-primary:hover,
body:not(.node-type-document) .btn-success:hover,
body:not(.node-type-document) form button:not(.btn-danger):not(.btn-warning):not(.dropdown-toggle):hover,
body:not(.node-type-document) input[type="reset"]:hover,
body:not(.node-type-document) input[type="submit"]:hover,
body:not(.node-type-document) .btn-primary:focus,
body:not(.node-type-document) .btn-success:focus,
body:not(.node-type-document) form button:not(.btn-danger):not(.btn-warning):not(.dropdown-toggle):focus,
body:not(.node-type-document) input[type="reset"]:focus,
body:not(.node-type-document) input[type="submit"]:focus,
.node-overview-page .field-name-field-overview-link a:hover,
.node-overview-page .field-name-field-overview-link a:focus,
.node-overview-page .paragraphs-item-long-content .field-name-field-paragraph-button-title a:hover,
.node-overview-page .paragraphs-item-long-content .field-name-field-paragraph-button-title a:focus {
    color: var(--button-hover-color);
    background: var(--button-hover-bg-color);
}


body:not(.node-type-document) .btn:focus,
body:not(.node-type-document) form button:focus,
body:not(.node-type-document) input[type="reset"]:focus,
body:not(.node-type-document) input[type="submit"]:focus {
    outline: none !important
}

/* Sometimes WYSIWYG editors add unwanted inline styling to the text */
.node-type-overview-page .entity-paragraphs-item .field .field-item > p[style],
.node-type-overview-page .entity-paragraphs-item .field .field-item > p span[style] {
    color: inherit !important;
    font-size: inherit !important;
    text-align: inherit !important;
}

.node-type-overview-page .entity-paragraphs-item .field .field-item *[style] {
    font-family: inherit !important;
}