/* Font Definitions */

/* Example */
 /* Light */
/*
@font-face {
  font-family: 'example';
  font-style: normal;
  font-weight: 300;
  src: url('data:application/font-woff2;charset=utf-8;base64,') format('woff2');
}
*/

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

    --primary-color-r: 247;
    --primary-color-g: 142;
    --primary-color-b: 30;
    
    --primary-color-h: 31deg;
    --primary-color-s: 93%;
    --primary-color-l: 54%;

    /* hsl(31deg 93% 68%) ← hover */
    
    --primary-color-rgb: var(--primary-color-r), var(--primary-color-g), var(--primary-color-b);

    /* the same for secondary color */
    --secondary-color: #000; 
    
    --secondary-color-r: 0;
    --secondary-color-g: 0;
    --secondary-color-b: 0;
    
    --secondary-color-h: 0deg;
    --secondary-color-s: 0%;
    --secondary-color-l: 0%;
    
    --secondary-color-rgb: var(--secondary-color-r), var(--secondary-color-g), var(--secondary-color-b);

    /* accent colors */
    /*
    --accent-color-orange: var(--secondary-color);
    --accent-color-1: var(--accent-color-orange);
    --accent-color-1-r: var(--secondary-color-r);
    --accent-color-1-g: var(--secondary-color-g);
    --accent-color-1-b: var(--secondary-color-b);
    */
   
    /* fonts */
    --base-color: #222;
    --base-font: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;
    --base-font-weight: 400;
    --headings-color: var(--secondary-color);
    --headings-font: var(--base-font);
    --headings-font-weight: 700;
    /* image overlay color */
    --background-overlay-color: rgba( var(--secondary-color-r), var(--secondary-color-g), var(--secondary-color-b), 0.5);
    --background-overlay-bottom-line-color: var(--primary-color);
    --background-overlay-bottom-line-width: 20px;
    /* buttons */
    --button-color: #fff;
    --button-font: var(--base-font);
    --button-font-weight: 700;
    --button-hover-color: var(--button-color);
    --button-bg-color: var(--primary-color);
    --button-hover-bg-color: hsl( var(--primary-color-h), var(--primary-color-s), calc( var(--primary-color-l) + 14% ));
    --button-border-radius: 30px;
    /* doc-buttons */
    --doc-button-color: var(--button-color);
    --doc-button-hover-color: var(--doc-button-color);
    --doc-button-bg-color: var(--button-bg-color);
    --doc-button-hover-bg-color: var(--button-hover-bg-color);
    --doc-button-icon-bg-color: hsl( var(--primary-color-h), var(--primary-color-s), calc( var(--primary-color-l) - 10% ) );
    --doc-button-hover-icon-bg-color: hsl( var(--primary-color-h), var(--primary-color-s), calc( var(--primary-color-l) - 5% ) );
    /* 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(--secondary-color);
    --nav-menu-item-hover-color: var(--primary-color);
    --nav-menu-item-font: var(--base-font);
    --nav-menu-item-font-weight: 700;
    --nav-menu-item-text-transform: normal;
    /* 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 {
    font-family: var(--headings-font);
    font-weight: var(--headings-font-weight);
}

body:not(.node-type-document) h1,
body:not(.node-type-document) h2,
body:not(.node-type-document) h3,
body:not(.node-type-document) h4,
body:not(.node-type-document) h5,
body:not(.node-type-document) h6,
body:not(.node-type-document) .h1,
body:not(.node-type-document) .h2,
body:not(.node-type-document) .h3,
body:not(.node-type-document) .h4,
body:not(.node-type-document) .h5,
body:not(.node-type-document) .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);
}

.node-type-document h1:not(.block-title),
.node-type-document h2:not(.block-title),
.node-type-document h3:not(.block-title),
.node-type-document h4:not(.block-title),
.node-type-document h5:not(.block-title),
.node-type-document h6:not(.block-title),
.node-type-document .h1:not(.block-title),
.node-type-document .h2:not(.block-title),
.node-type-document .h3:not(.block-title),
.node-type-document .h4:not(.block-title),
.node-type-document .h5:not(.block-title),
.node-type-document .h6:not(.block-title) {
    color: var(--headings-color);
}

body:not(.node-type-document) .font-color-white h1,
body:not(.node-type-document) .font-color-white .h1,
body:not(.node-type-document) .font-color-white h2,
body:not(.node-type-document) .font-color-white .h2,
body:not(.node-type-document) .font-color-white h3,
body:not(.node-type-document) .font-color-white .h3,
body:not(.node-type-document) .font-color-white h4,
body:not(.node-type-document) .font-color-white .h4,
body:not(.node-type-document) .font-color-white h5,
body:not(.node-type-document) .font-color-white .h5,
body:not(.node-type-document) .font-color-white h6,
body:not(.node-type-document) .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,

body:not(.node-type-document) .font-color-white-smoke h1,
body:not(.node-type-document) .font-color-white-smoke .h1,
body:not(.node-type-document) .font-color-white-smoke h2,
body:not(.node-type-document) .font-color-white-smoke .h2,
body:not(.node-type-document) .font-color-white-smoke h3,
body:not(.node-type-document) .font-color-white-smoke .h3,
body:not(.node-type-document) .font-color-white-smoke h4,
body:not(.node-type-document) .font-color-white-smoke .h4,
body:not(.node-type-document) .font-color-white-smoke h5,
body:not(.node-type-document) .font-color-white-smoke .h5,
body:not(.node-type-document) .font-color-white-smoke h6,
body:not(.node-type-document) .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,

body:not(.node-type-document) .font-color-dark-gray h1,
body:not(.node-type-document) .font-color-dark-gray .h1,
body:not(.node-type-document) .font-color-dark-gray h2,
body:not(.node-type-document) .font-color-dark-gray .h2,
body:not(.node-type-document) .font-color-dark-gray h3,
body:not(.node-type-document) .font-color-dark-gray .h3,
body:not(.node-type-document) .font-color-dark-gray h4,
body:not(.node-type-document) .font-color-dark-gray .h4,
body:not(.node-type-document) .font-color-dark-gray h5,
body:not(.node-type-document) .font-color-dark-gray .h5,
body:not(.node-type-document) .font-color-dark-gray h6,
body:not(.node-type-document) .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,

body:not(.node-type-document) .font-color-light-gray h1,
body:not(.node-type-document) .font-color-light-gray .h1,
body:not(.node-type-document) .font-color-light-gray h2,
body:not(.node-type-document) .font-color-light-gray .h2,
body:not(.node-type-document) .font-color-light-gray h3,
body:not(.node-type-document) .font-color-light-gray .h3,
body:not(.node-type-document) .font-color-light-gray h4,
body:not(.node-type-document) .font-color-light-gray .h4,
body:not(.node-type-document) .font-color-light-gray h5,
body:not(.node-type-document) .font-color-light-gray .h5,
body:not(.node-type-document) .font-color-light-gray h6,
body:not(.node-type-document) .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,

body:not(.node-type-document) .font-color-black h1,
body:not(.node-type-document) .font-color-black .h1,
body:not(.node-type-document) .font-color-black h2,
body:not(.node-type-document) .font-color-black .h2,
body:not(.node-type-document) .font-color-black h3,
body:not(.node-type-document) .font-color-black .h3,
body:not(.node-type-document) .font-color-black h4,
body:not(.node-type-document) .font-color-black .h4,
body:not(.node-type-document) .font-color-black h5,
body:not(.node-type-document) .font-color-black .h5,
body:not(.node-type-document) .font-color-black h6,
body:not(.node-type-document) .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(--background-overlay-bottom-line-color) solid var(--background-overlay-bottom-line-width);
}

/* links */

a { color: var(--link-color) }
a:hover, a:focus { color: var(--link-hover-color) }
a:focus { outline-offset: 2px }

/* Buttons */

.button, .doc-button {
    font-family: var(--button-font) !important;
    font-weight: var(--button-font-weight) !important;
}

.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);
}

/* Remove the hardcoded home icon */
#block-menu-menu-site-menu .fa.fa-home,
#block-menu-menu-site-menu > .menu.nav .dropdown .caret { display: none !important }

/* main nav menu links */

#block-menu-menu-site-menu a {
    font-family: var(--nav-menu-item-font);
    font-weight: var(--nav-menu-item-font-weight) !important;
    color: var(--nav-menu-item-color);
    text-transform: var(--nav-menu-item-text-transform);
}

#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 {
        float: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    #block-menu-menu-site-menu .menu.nav > li { margin-right: .565em }
    #block-menu-menu-site-menu .menu.nav li a { font-size: 12px }
}

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

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

.node-overview-page .font-color-white .content a { color: #d9d9d9 }
.node-overview-page .font-color-white .content a:hover,
.node-overview-page .font-color-white .content a:focus { color: #fff}

.node-overview-page .font-color-white .field-name-field-overview-link a,
.node-overview-page .font-color-white.paragraphs-item-long-content .field-name-field-paragraph-button-title a {
    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-family: var(--button-font) !important;
    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-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
}

.button:active,
.button.active,
.doc-button:active,
.doc-button.active,
body:not(.node-type-document) .btn:active,
body:not(.node-type-document) .btn.active,
body:not(.node-type-document) form button:active,
body:not(.node-type-document) form button.active,
body:not(.node-type-document) input[type="reset"]:active,
body:not(.node-type-document) input[type="reset"].active,
body:not(.node-type-document) input[type="submit"]:active,
body:not(.node-type-document) input[type="submit"].active,
.node-overview-page .field-name-field-overview-link a:active,
.node-overview-page .field-name-field-overview-link a.active,
.node-overview-page .paragraphs-item-long-content .field-name-field-paragraph-button-title a:active,
.node-overview-page .paragraphs-item-long-content .field-name-field-paragraph-button-title a.active {
    -webkit-box-shadow: inset 0 3px 5px rgb(0 0 0 / 40%);
    box-shadow: inset 0 3px 5px rgb(0 0 0 / 40%);
}

/* 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;
}

/* Fix Bootstrap Dropdown Control Style in Page Editing Mode */
.page-node-add form .btn-group.bootstrap-select .btn.dropdown-toggle,
.page-node-edit form .btn-group.bootstrap-select .btn.dropdown-toggle {
    border-radius: 0;
}

/* top-nav menu dropdown fix */

@media screen and (min-width: 768px) {
    #block-menu-menu-site-menu > .menu.nav li > ul { display: none }
    #block-menu-menu-site-menu > .menu.nav li:hover > ul { display: block }

    #block-menu-menu-site-menu > .menu.nav .dropdown-menu .menu.nav {
        position: absolute;
        top: 0;
        left: 100%;
        display: none;
        min-width: 180px;
        list-style: none;
        text-align: left;
        padding: 0;
        background-color: #FFF;
        border: 1px solid #D9D9D9;
        border-left: none;
        border-radius: 0 5px 5px 0;
    }

    #block-menu-menu-site-menu > .menu.nav .dropdown-menu .open .dropdown-menu,
    #block-menu-menu-site-menu > .menu.nav .dropdown-menu li:hover > .menu {
        display: block;
    }
}