/* Font Definitions */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto+Condensed:wght@300;400;500;700&family=Roboto+Slab:wght@700&family=Roboto:wght@300;400;500;700;900&display=swap');

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

    --primary-color-r: 0;
    --primary-color-g: 30;
    --primary-color-b: 68;
    
    --primary-color-h: 214deg;
    --primary-color-s: 100%;
    --primary-color-l: 13%;

    /* 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: #1E407C;
    
    --secondary-color-r: 30;
    --secondary-color-g: 64;
    --secondary-color-b: 124;
    
    --secondary-color-h: 218deg;
    --secondary-color-s: 61%;
    --secondary-color-l: 30%;
    
    --secondary-color-rgb: var(--secondary-color-r), var(--secondary-color-g), var(--secondary-color-b);

    /* accent colors */
    --accent-color-slate-max-light: #eef3f7;
    --accent-color-original-87-pink: #bc204b;
    --accent-color-pugh-blue: #96bee6;
    --accent-color-slate-gray: #314d64;
    --accent-color-coral: #f2665e;
    --accent-color-creek: #3ea39e;
    --accent-color-keystone-yellow: #ffd100;

    /* neutrals */
    --neutral-color-coaly-gray: #262626;
    --neutral-color-limestone-max-light: #f2f2f4;

    /* fonts */
    --base-color: var(--neutral-color-coaly-gray);
    --base-font: Roboto, Arial, Tahoma, sans-serif;
    --base-font-weight: 400;
    --base-line-height: 1.5;
    --headings-color: var(--primary-color);
    --headings-font: var(--base-font);
    --headings-font-weight: 700;
    --headings-line-height: 1.3;
    /* image overlay color */
    --background-overlay-color: rgba( var(--primary-color-r), var(--primary-color-g), var(--primary-color-b), 0.5);
    --background-overlay-blend-mode: normal;
    --background-overlay-bottom-line-color: var(--secondary-color);
    --background-overlay-bottom-line-width: 20px;
    /* buttons */
    --button-color: #fff;
    --button-focus-outline: 2px dashed var(--button-color);
    --button-focus-outline-offset: -2px;
    --button-font: var(--base-font);
    --button-font-weight: 500;
    --button-hover-color: var(--button-color);
    --button-bg-color: var(--link-color);
    --button-hover-bg-color: var(--primary-color);
    --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(--secondary-color);
    --doc-button-icon-bg-color: var(--primary-color);
    --doc-button-hover-icon-bg-color: var(--primary-color);
    /* links */
    --link-color: #005fa9;
    --link-focus-outline: 0.8px auto var(--link-color);
    --link-focus-outline-offset: 3px;
    --link-font-weight: 700;
    /* we use this link color in footer */
    --link-light-color: #cce9ff;
    --link-hover-color: var(--link-color);
    --link-text-decoration: none;
    --link-text-decoration-color: var(--link-color);
    --link-text-decoration-style: solid;
    --link-text-decoration-skip-ink: auto;
    --link-text-decoration-thickness: 0.1em;
    --link-text-underline-offset: auto;
    --link-hover-text-decoration: underline;
    --link-hover-text-decoration-color: var(--link-text-decoration-color);
    --link-hover-text-decoration-style: var(--link-text-decoration-style);
    --link-hover-text-decoration-skip-ink: var(--link-text-decoration-skip-ink);
    --link-hover-text-decoration-thickness: var(--link-text-decoration-thickness);
    --link-hover-text-underline-offset: var(--link-text-underline-offset);
    /* selected text - just comment these two in order to use default colors */
    --selection-color: var(--neutral-color-coaly-gray);
    --selection-bg-color: #b4d5fe;
    /* top navigation menu */
    --top-nav-menu-bg-color: var(--secondary-color);
    --top-nav-menu-item-bg-color: transparent;
    --top-nav-menu-item-font: var(--nav-menu-item-font);
    --top-nav-menu-item-font-weight: 400;
    --top-nav-menu-item-text-transform: uppercase;
    --top-nav-menu-item-text-decoration: none;
    --top-nav-menu-item-hover-bg-color: var(--top-nav-menu-item-bg-color);
    --top-nav-menu-item-hover-text-decoration: underline solid 0.1em;
    --top-nav-menu-item-active-bg-color: var(--top-nav-menu-item-hover-bg-color);
    --top-nav-menu-item-active-text-decoration: var(--top-nav-menu-item-hover-text-decoration);
    /* main navigation menu */
    --nav-menu-item-color: var(--primary-color);
    --nav-menu-item-hover-color: var(--primary-color);
    --nav-menu-item-font: 'Roboto Condensed', 'Arial Narrow', Arial, Tahoma, sans-serif;
    --nav-menu-item-font-weight: 500;
    --nav-menu-item-text-transform: normal;
    /* active menu item is the item with the link to the current page */
    --nav-menu-top-level-item-color: #fff;
    --nav-menu-top-level-item-hover-color: var(--nav-menu-top-level-item-color);
    --nav-menu-top-level-item-underline-color: var(--accent-color-pugh-blue);
    --nav-menu-top-level-item-underline-transition-duration: 0;
    --nav-menu-top-level-item-underline-width: 4px;
    --nav-menu-top-level-active-item-underline-color: var(--accent-color-pugh-blue);
    --nav-menu-submenu-item-sideline-color: var(--accent-color-pugh-blue);
    --nav-menu-submenu-active-item-sideline-color: rgba(141, 141, 141, .6);
    /* tabs */
    --block-grid-tabs-item-color: var(--primary-color);
    --block-grid-tabs-item-border-color: var(--link-color);
    /* accordion */
    --block-grid-accordion-item-color: var(--primary-color);
    --block-grid-accordion-item-border-color: var(--link-color);
}

/* 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);
    line-height: var(--base-line-height);
}

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);
    line-height: var(--headings-line-height);
}

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.paragraphs-item-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.paragraphs-item-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.paragraphs-item-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.paragraphs-item-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.paragraphs-item-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 {
    background-blend-mode: var(--background-overlay-blend-mode);
}

.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);
    font-weight: var(--link-font-weight);
    text-decoration: var(--link-text-decoration) var(--link-text-decoration-style) var(--link-text-decoration-color) var(--link-text-decoration-thickness);
    text-decoration-skip-ink: var(--link-text-decoration-skip-ink);
    text-underline-offset: var(--link-text-underline-offset);
}

a:hover, a:focus {
    color: var(--link-hover-color);
    text-decoration: var(--link-hover-text-decoration) var(--link-hover-text-decoration-style) var(--link-hover-text-decoration-color) var(--link-hover-text-decoration-thickness);
    text-decoration-skip-ink: var(--link-hover-text-decoration-skip-ink);
    text-underline-offset: var(--link-hover-text-underline-offset);
}

a:any-link:focus-visible {
    outline: var(--link-focus-outline, 1px auto Highlight);
    outline: var(--link-focus-outline, 1px auto -webkit-focus-ring-color);
    outline-offset: var(--link-focus-outline-offset);
}

a:-webkit-any-link:focus-visible {
    outline: var(--link-focus-outline, 1px auto Highlight);
    outline: var(--link-focus-outline, 1px auto -webkit-focus-ring-color);
    outline-offset: var(--link-focus-outline-offset);
}

/* Selected Text */

::selection {
    color: var(--selection-color, HighlightText);
    background-color: var(--selection-bg-color, Highlight);
}

/* 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,
.paragraphs-item-discussions .field-name-field-paragraph-button-label .field-item,
.paragraphs-item-discussions .field-name-field-discussions-button-label a.ctools-use-modal {
    background: var(--doc-button-bg-color) !important;
}

.doc-button:hover,
.doc-button:focus,
.paragraphs-item-discussions .col-xs-12 .content > a:hover ~ .field-name-field-paragraph-button-label .field-item,
.paragraphs-item-discussions .col-xs-12 .content > a:focus ~ .field-name-field-paragraph-button-label .field-item,
.paragraphs-item-discussions .node-discussions:hover .field-name-field-discussions-button-label a.ctools-use-modal,
.paragraphs-item-discussions .node-discussions:focus .field-name-field-discussions-button-label a.ctools-use-modal {
    background: var(--doc-button-hover-bg-color) !important;
}

.doc-button:before,
.paragraphs-item-discussions .field-name-field-paragraph-button-label .field-item:before,
.paragraphs-item-discussions .field-name-field-discussions-button-label a.ctools-use-modal: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,
.paragraphs-item-discussions .col-xs-12 .content > a:hover ~ .field-name-field-paragraph-button-label .field-item:before,
.paragraphs-item-discussions .col-xs-12 .content > a:focus ~ .field-name-field-paragraph-button-label .field-item:before,
.paragraphs-item-discussions .node-discussions:hover .field-name-field-discussions-button-label a.ctools-use-modal:before,
.paragraphs-item-discussions .node-discussions:focus .field-name-field-discussions-button-label a.ctools-use-modal:before {
    background: var(--doc-button-hover-icon-bg-color);
}

.paragraphs-item-discussions .col-xs-12 .content > a:focus,
.paragraphs-item-discussions .node-discussions:focus {
    outline: none !important;
}

/* NOTE: `Discussions` html structure seems to be changed: Fix How card item reacts on hover / focus  */
.field-name-field-paragraph-discussions .field-collection-view .content > a:hover ~ .field-name-field-paragraph-introduction > .field-items,
.field-name-field-paragraph-discussions .field-collection-view .content > a:focus ~ .field-name-field-paragraph-introduction > .field-items {
    height: 175px;
}

.field-name-field-paragraph-discussions .field-collection-view .content > a:hover ~ .field-name-field-paragraph-introduction > .field-items h3,
.field-name-field-paragraph-discussions .field-collection-view .content > a:focus ~ .field-name-field-paragraph-introduction > .field-items h3 {
    padding-top: 1em;
    margin-bottom: 1em;
    -webkit-line-clamp: 2;
}

.field-name-field-paragraph-discussions .field-collection-view .content > a:hover ~ .field-name-field-paragraph-button-label,
.field-name-field-paragraph-discussions .field-collection-view .content > a:focus ~ .field-name-field-paragraph-button-label {
    bottom: 175px;
    -webkit-transition: bottom 0.3s ease 0.02s;
    -o-transition: bottom 0.3s ease 0.02s;
    transition: bottom 0.3s ease 0.02s;
}

/* Top Navigation Menu */

.navbar-default {
    background: var(--top-nav-menu-bg-color);
}

.navbar-default .navbar-nav > li > a {
    background: var(--top-nav-menu-item-bg-color);
}

.navbar-default .navbar-nav > li > a .link-text {
    font-family: var(--top-nav-menu-item-font);
    font-weight: var(--top-nav-menu-item-font-weight);
    text-decoration: var(--top-nav-menu-item-text-decoration);
    text-transform: var(--top-nav-menu-item-text-transform);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background: var(--top-nav-menu-item-hover-bg-color);
}

.navbar-default .navbar-nav > li > a:hover .link-text,
.navbar-default .navbar-nav > li > a:focus .link-text {
    text-decoration: var(--top-nav-menu-item-hover-text-decoration);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background: var(--top-nav-menu-item-active-bg-color);
}

.navbar-default .navbar-nav > .active > a .link-text,
.navbar-default .navbar-nav > .active > a:hover .link-text,
.navbar-default .navbar-nav > .active > a:focus .link-text {
    text-decoration: var(--top-nav-menu-item-active-text-decoration);
}


/* 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 {
    color: var(--nav-menu-top-level-item-color);
}

#block-menu-menu-site-menu > .menu.nav > li > a:hover,
#block-menu-menu-site-menu > .menu.nav > li > a:focus {
    color: var(--nav-menu-top-level-item-hover-color);
}

#block-menu-menu-site-menu > .menu.nav > li > a:before {
    content: '';
    position: absolute;
    bottom: calc( -1 * var(--nav-menu-top-level-item-underline-width) );
    left: 0;
    width: 0%;
    background: var(--nav-menu-top-level-item-underline-color);
    height: var(--nav-menu-top-level-item-underline-width);
    -webkit-transition: width var(--nav-menu-top-level-item-underline-transition-duration, .2s) ease-out;
    -o-transition: width var(--nav-menu-top-level-item-underline-transition-duration, .2s) ease-out;
    transition: width var(--nav-menu-top-level-item-underline-transition-duration, .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: 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):not(.js-hide):not(label),
body:not(.node-type-document) form button:not(.dropdown-toggle):not(.js-hide),
body:not(.node-type-document) input[type="reset"]:not(.js-hide),
body:not(.node-type-document) input[type="submit"]:not(.js-hide),
.node-overview-page .field-name-field-overview-link a:not(.js-hide),
.node-overview-page .paragraphs-item-long-content .field-name-field-paragraph-button-title a:not(.js-hide) {
    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);
}

.button:focus,
.doc-button:focus,
body:not(.node-type-document) .btn:not(label):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,
.node-overview-page .field-name-field-overview-link a:focus,
.node-overview-page .paragraphs-item-long-content .field-name-field-paragraph-button-title a:focus,
.paragraphs-item-discussions .col-xs-12 .content > a:focus ~ .field-name-field-paragraph-button-label .field-item,
.paragraphs-item-discussions .node-discussions:focus .field-name-field-discussions-button-label a.ctools-use-modal {
    outline: none !important;
}

.button:focus-visible,
.doc-button:focus-visible,
body:not(.node-type-document) .btn:not(label):focus-visible,
body:not(.node-type-document) form button:focus-visible,
body:not(.node-type-document) input[type="reset"]:focus-visible,
body:not(.node-type-document) input[type="submit"]:focus-visible,
.node-overview-page .field-name-field-overview-link a:focus-visible,
.node-overview-page .paragraphs-item-long-content .field-name-field-paragraph-button-title a:focus-visible,
.paragraphs-item-discussions .col-xs-12 .content > a:focus-visible ~ .field-name-field-paragraph-button-label .field-item,
.paragraphs-item-discussions .node-discussions:focus .field-name-field-discussions-button-label a.ctools-use-modal {
    outline: var(--button-focus-outline, 1px auto Highlight) !important;
    outline: var(--button-focus-outline, 1px auto -webkit-focus-ring-color) !important;
    outline-offset: var(--button-focus-outline-offset) !important;
}

.button:active,
.button.active,
.doc-button:active,
.doc-button.active,
body:not(.node-type-document) .btn:not(label):active,
body:not(.node-type-document) .btn.active:not(label),
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;
}

/* fix wrong use of the float-based Grid bug in documents */
.node-type-document .main-container > section.col-sm-12[role="main"] {
    float: none !important;
    margin-bottom: 45px;
}

/* fix padding inconsistencies between documents and other pages */
.node-type-document .footer,
.main-container.container #page-header,
.node-type-document #page-header.container {
    padding: 0 15px;
}

.navbar.navbar-default .container {
    padding-left: 0;
    padding-right: 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 > li li .dropdown-menu {
        top: 0;
        left: 100%;
        right: auto;
    }

    #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;
    }
}

/* fix section header containers overflow */

.section-header-container > .entity > .content > .container {
    width: 100%;
}

@media screen and (min-width: 768px) {
    .section-header-container > .entity > .content > .container {
        max-width: 750px;
    }
}

@media screen and (min-width: 992px) {
    .section-header-container > .entity > .content > .container {
        max-width: 970px;
    }
}

@media screen and (min-width: 1200px) {
    .section-header-container > .entity > .content > .container {
        max-width: 1170px;
    }
}