/* Hull Heat Network - updated 20/10/2026 */

:root {
    --primary: #53565A;
    --secondary: #B2BC26;
    --main-font: "omnes-pro", sans-serif;
    --default-weight: 500;
    --heading-weight: 800;
    --base-size: 19px;
    --arrow: url("https://www.hull.gov.uk/hullheatnetwork/images/arrow_circle_black_1.png");
    --site-logo: url("https://www.hull.gov.uk/hullheatnetwork/images/HullHeatNetwork_colour_on_black_with_caption_1.jpg");
    --invest-hull: url("https://www.hull.gov.uk/hullheatnetwork/images/header_logo.png");
}

/* Text */

h2.hero-heading {
    font: var(--heading-weight) 60px var(--main-font) !important;
}

h1 {
    font: var(--heading-weight) clamp(34px, 32.8px + 0.375vw, 40px) var(--main-font) !important;
    margin: 1em 0 0.5em;
}

h2 {
    font: var(--heading-weight) clamp(29px, calc(0.444vw + 27.667px), 33px) var(--main-font) !important;
}

h2:not(.landing h2) {
    margin: 1em 0 0.5em;
}

:is(h3, .js-accordion-header span) {
    font: var(--heading-weight) clamp(24px, calc(0.444vw + 22.667px), 28px) var(--main-font) !important;
    margin: 1em 0 0.5em;
}

h4 {
    font: var(--heading-weight) clamp(20px, calc(0.333vw + 19px), 23px) var(--main-font) !important;
    margin: 1em 0 0.5em;
}

:is(.timeline-container h3) {
    margin: 0.5em 0;
}

:is(h5, .listing__heading, button.expand-all-accordions, #navPanel nav a, .form__label) {
    font: var(--heading-weight) var(--base-size) var(--main-font) !important;
    margin: 0 0 0.5em;
}

:is(#main p:not(.summary), .listing__summary, strong, b) {
    font: var(--default-weight) var(--base-size) var(--main-font) !important;
    color: var(--primary);
}

.hero--text-dark p {
    color: white !important;
}

:is(h1, h2, h3, h4, h5, h6, a, input, .list--breadcrumb .list__item),
.js-menu-toggle a:hover {
    color: var(--primary);
    letter-spacing: 0.3px !important;
}

/* list and accordian */

:is(.editor, .accordion-content) ul {
    list-style: none !important;
    margin: 0.8em 0 0.8em 1em;
}

:is(.editor, .accordion-content) ol {
    margin: 0.8em 0 0.8em 1em;
}

:is(.editor, .accordion-content) ul li::before {
    content: '';
    display: inline-block;
    padding: 0.2em;
    border: 0 !important;
    outline: 4px solid var(--secondary);
    border-radius: 50%;
    margin: 0 1em 0 -2.1em;
}

:is(.editor, .accordion-content) ul li {
    margin-bottom: 0.5em;
    text-indent: 0.35em;
}

:is(.editor, .accordion-content) ol li {
    margin-bottom: 0.5em;
}

:is(#main ul, #main ol, .accordion-content p) {
    font: var(--default-weight) var(--base-size) var(--main-font) !important;
    color: var(--primary);
}

.editor ul:has(.button) {
    display: grid;
    grid-template-columns: auto auto auto;
}

.editor ul:has(.button),
.editor ul:has(.button) li {
    padding-left: 0;
}

@media only screen and (max-width:1399px) {
    .editor ul:has(.button) {
        grid-template-columns: auto
    }
}

.editor ul li:has(.button):before {
    display: none;
}

.editor ul li:has(.button) .button:before {
    margin: auto 0.5em auto -3.25em;
}

/* Body */

:is(.editor .button, .accordion-content .button, .timeline-content p a.button) {
    min-width: 250px !important;
}

.landing .widget-width:not(.widget-width--100) {
    padding-left: 2em;
    padding-right: 2em;
}

body.landing #main {
    margin-top: 0;
}

#main {
    padding: 0;
}

#main>header {
    margin: 3em 0 !important;
}

body:not(.landing) #main .box {
    border-top: solid 10px var(--secondary);
    border-radius: 0px;
}

body:not(.landing) #main {
    padding-top: 4em !important;
}

body:not(.news-list) div:is(.col-8, .col-4, .col-12) {
    width: 100% !important;
    padding: 2em 12em;
}

@media screen and (max-width: 840px) {

    body:not(.news-list) div:is(.col-8:not(.listing .col-8), .col-4, .col-12) {
        padding: 1em 1em 0 3.5em !important;
    }
}

@media only screen and (min-width:840px) and (max-width:1060px) {

    body:not(.news-list) div:is(.col-8, .col-4, .col-12) {
        padding: 2em 3em !important;
    }
}

#page-wrapper {
    background-color: white;
}

.box {
    box-shadow: none;
    width: 100% !important;
    overflow: hidden;
}

p {
    margin: 0.8em 0;
}

@media screen and (max-width: 736px) {
    .box {
        margin: 0;
        padding: 2em 0 !important;
    }

    section:is(#main) .container {
        padding: 0 1em;
    }
}

@media screen and (max-width: 480px) {
    .box {
        padding: 3em 0 !important
    }
}

/* Links */

.container:not(#main) a {
    font: bold var(--base-size) var(--main-font) !important;
}

#main a {
    font-weight: bold;
}

a:not(.button, .logo, .list--skip-links a):hover,
a:not(.button, .logo, .list--skip-links a):focus {
    text-decoration-color: var(--secondary) !important;
}

#nav ul ul {
    margin-top: 1em !important;
}

#nav>ul>li>ul>li a {
    text-decoration: none;
    font: var(--heading-weight) 1.6em / 1.5em var(--main-font);
    color: var(--primary);
}

#nav>ul>li>ul>li a:hover,
#nav>ul>li>ul>li a:focus {
    background: var(--secondary);
    color: var(--primary) !important;
}

/* Buttons */

:is(.button, a.button.fit, .accordion-content .button, .button.primary, .timeline-content p a.button) {
    font: var(--heading-weight) clamp(20px, calc(0.333vw + 19px), 23px) var(--main-font) !important;
    margin: 0.5em 0 0 0.5em;
    padding: 0.5em 1em 0.5em 2em;
    background-color: white;
    color: var(--primary) !important;
    outline: solid 4px var(--secondary);
    border: 0 !important;
    border-radius: 5px;
    height: unset;
    width: unset;
    text-wrap: initial;
    text-align: left;
}

:is(#main .button):hover,
:is(#main .button):focus {
    border: 0 !important;
    background-color: var(--primary) !important;
    outline: solid 4px var(--primary) !important;
    color: white !important;
    outline-offset: -1px;
}

:is(.button, a.button.fit, .accordion-content .button, .button.primary, .timeline-content p a.button):before {
    content: "";
    position: relative;
    padding: 1em;
    background: no-repeat var(--arrow) center / contain;
    margin: auto 0.5em auto -3em;
    text-align: center;
}

.button.fit {
    width: unset;
}

/* Inputs */

:is(input[type="submit"], input[type="reset"], input[type="button"]) {
    outline: solid 4px var(--primary) !important;
    min-height: 3em;
    padding: 0 !important;
    background-color: white !important;
    border-radius: 5px !important;
    text-align: center !important;
}

input:not(.form__field):hover,
input:not(.form__field):focus {
    border: 0 !important;
    background-color: var(--primary) !important;
    outline: solid 4px var(--primary) !important;
    color: white !important;
}

input:is(.button) {
    margin: 0 auto !important;
    border: 0 !important;
}

input {
    border: 0 !important;
}

:is(input[type="submit"], input[type="reset"], input[type="button"]):hover,
:is(input[type="submit"], input[type="reset"], input[type="button"]):focus {
    background-color: var(--secondary) !important;
    outline: solid 4px var(--secondary) !important;
}

.form__field:focus,
.form__field:hover,
.form__field:active {
    outline: 4px solid var(--secondary) !important;
    outline-offset: -1px !important;
    box-shadow: none !important;
}

label.form__label {
    margin-top: 1em !important;
}

label.form__label span {
    color: darkred !important;
}

input[type="text"]:invalid,
input[type="password"]:invalid,
input[type="email"]:invalid,
input[type="date"]:invalid,
input[type="search"]:invalid,
select:invalid,
textarea:invalid,
.form__control--error input[type="text"],
.form__control--error input[type="password"],
.form__control--error input[type="email"],
.form__control--error input[type="type"],
.form__control--error input[type="search"],
.form__control--error input[type="date"],
.form__control--error select,
.form__control--error textarea {
    box-shadow: none !important;
}

.widget--granicus-form .form__field,
.widget--granicus-form .form__select,
.widget--granicus-form .form__textarea {
    border: solid 2px var(--primary) !important;
    box-shadow: none !important;
    border-radius: 5px !important;
    min-height: 45px;
    width: 100% !important;
    background-color: #f8f8f8 !important;
}

.widget--granicus-form .form__field:focus,
.widget--granicus-form .form__field:hover,
.widget--granicus-form .form__select:focus,
.widget--granicus-form .form__select:hover,
.widget--granicus-form .form__textarea:focus,
.widget--granicus-form .form__textarea:hover {
    outline: solid 3px var(--secondary) !important;
    outline-offset: -1px !important;
    box-shadow: 0 0 3px 0 var(--primary) !important;
}

input[type="submit"].fit,
input[type="reset"].fit,
input[type="button"].fit {
    width: 100% !important;
    margin-bottom: 1em !important;
}

/* Footer */

#footer {
    background-color: var(--primary) !important;
    margin-top: -2em;
    padding: 1em 0 2em;
}

.box:has(.site-search) a.list__link {
    padding: 0.5em;
}

.box:has(.site-search) a.list__link:focus {
    border: 0;
    outline: solid 4px white !important;
    border-radius: 10px;
    color: white !important;
}

@media only screen and (min-width:480px) {
    .col-9.col-12-mobilep:has(.form__field) {
        padding: 1em 0.3em 0 !important;
    }
}

.site-footer__social .nav--social-links .list__link:focus {
    outline: solid 4px white;
    box-shadow: none;
    border-radius: 5px;
}

/* Timeline Widget */

body:not(.landing) :is(div.timeline-left .left, div.timeline-left .right):last-child::after {
    display: none;
}

body:not(.landing) div.timeline-container:last-child .timeline-content {
    box-shadow: none !important;
    padding-left: 0;
}

body:not(.landing) div.timeline-container:last-child .timeline-content a {
    font: var(--heading-weight) clamp(24px, calc(0.444vw + 22.667px), 28px) var(--main-font) !important;
    margin-top: -0.4em;
}

div.timeline-left .timeline-container {
    max-width: 100%;
    padding-right: 0 !important;
}

div.timeline::after {
    background-color: var(--secondary) !important;
    width: 2.5% !important;
    margin: 0 0 -3em -1.8em !important;
}

div.timeline-container::after {
    background-color: var(--primary) !important;
}

.widget--element--timeline {
    margin-bottom: 2em;
}

:is(div.timeline-left .left, div.timeline-left .right)::after {
    left: -5px !important;
    margin-top: 2em;
}

div.timeline-container::after {
    padding: 0.45em !important;
    border: 6px solid white !important;
}

body:not(.landing) .timeline {
    margin: 0 !important;
}

body:not(.landing) div.timeline-container:last-child .timeline-content a {
    margin-top: -0.8em;
}

body:not(.landing) :is(div.timeline-left .left, div.timeline-left .right)::after {
    margin-top: 0.8em;
}

@media only screen and (min-width:600px) {

    div.timeline::after {
        margin: 0 0 -3em -1.75em !important;
    }

    div.timeline-container::after {
        padding: 0.6em !important;
        border: 8px solid white !important;
    }

    :is(div.timeline-left .left, div.timeline-left .right)::after {
        left: -6.5px !important;
    }

    body:not(.landing) div.timeline-container:last-child .timeline-content a {
        margin-top: -0.7em;
    }

}

@media screen and (max-width: 870px) {
    .landing div.timeline-container {
        padding: 0 !important;
    }

    body:not(.landing) div.timeline-container {
        padding-left: 40px !important;
        padding-right: 0 !important;
    }
}

@media only screen and (min-width:960px) {

    div.timeline-container::after {
        padding: 0.7em !important;
        border: 9px solid white !important;
    }

}

@media only screen and (min-width:1280px) {

    :is(div.timeline-left .left, div.timeline-left .right)::after {
        margin-top: 0.6em;
    }

    div.timeline::after {
        margin: 0 0 -3.3em -1.65em !important;
    }

    div.timeline-container::after {
        padding: 0.9em !important;
        border: 12px solid white !important;
    }

    :is(div.timeline-left .left, div.timeline-left .right)::after {
        left: -9px !important;
    }

    body:not(.landing) div.timeline-container:last-child .timeline-content a {
        margin-top: -0.7em;
    }

}

@media only screen and (min-width:1620px) {

    :is(div.timeline-left .left, div.timeline-left .right)::after {
        margin-top: 0.3em;
    }

    div.timeline::after {
        width: 1.78em !important;
    }

    div.timeline-container::after {
        padding: 1em !important;
        border: 15px solid white !important;
    }

    body:not(.landing) div.timeline-container:last-child .timeline-content a {
        margin-top: -0.7em;
    }

}

@media only screen and (min-width:1650px) {

    div.timeline::after {
        width: 1.9em !important;
    }

    div.timeline-container::after {
        padding: 1.1em !important;
    }

    :is(div.timeline-left .left, div.timeline-left .right)::after {
        left: -0.75em !important;
    }

}

@media only screen and (min-width:1675px) {

    div.timeline::after {
        width: 2em !important;
    }

    div.timeline-container::after {
        padding: 1.1em !important;
    }

}

.timeline-content .button {
    margin-left: 1em !important;
}

/* Amends header and logo */

#header .logo .symbol img {
    display: block;
    height: 7em;
    margin: 0.3em 0 0 0.65em;
    min-width: 100%;
}

#header .logo:focus {
    outline: 4px solid #fff;
    box-shadow: none;
    margin-left: -1em;
    padding-left: 2.25em;
}

a:has(img) {
    text-decoration: none;
}

#header {
    min-height: 7.5em;
    background-color: var(--primary) !important;
}

.landing #header {
    position: fixed !important;
}

#header nav>ul {
    list-style: none;
    margin: 1.5em 2em 1em;
    min-width: 200px;
}

ul#js-menu-toggle {
    text-align: center;
}

#nav:hover ul ul,
#nav:focus ul ul,
#nav ul li:hover ul,
#nav ul li.hover ul,
#nav ul li a:hover ul,
#nav ul li a:focus ul {
    left: -4.5em;
    margin-top: -0.25em;
}

#nav ul li ul:before {
    display: none !important;
}

:is(#nav ul ul, #nav) {
    min-width: 250px;
}

div#navPanel {
    background-color: white;
}

nav:not(:has(#navButton)) #navPanel ul {
    margin-top: 2em;
    padding: 0;
}

#navButton .toggle:before {
    background: var(--primary);
}

#navPanel .link {
    height: unset;
    margin: 0 0 1em;
    border: none;
}

#header nav>ul>li {
    margin-top: 1em;
}

#header nav>ul>li:first-child a {
    text-decoration: none !important;
    min-height: 45px !important;
    font: var(--heading-weight) 1.6em var(--main-font);
}

#header nav>ul>li>ul>li a {
    text-decoration: none !important;
    min-height: 45px !important;
    font: var(--heading-weight) 1.6em var(--main-font);
}

ul#js-menu-toggle .list li a {
    color: var(--primary) !important;
}

#header nav>ul>li a:first-child a:hover {
    color: var(--secondary) !important;
}

#header #nav>ul>li>ul>li a:not(.button):focus {
    outline: solid 4px var(--secondary);
    outline-offset: -4px;
    box-shadow: none !important;
    background: white;
}

/* Breadcrumb */

.list--breadcrumb .list__item::after {
    padding: 0 1em;
}

.list--breadcrumb a {
    font-weight: bold;
    padding: 0.5em;
    border: 0;
    text-decoration: underline;
}

.list--breadcrumb a:focus {
    outline: solid 4px var(--primary);
    border-radius: 10px;
}

.list--breadcrumb .list__item span {
    font-weight: bold;
}

/* Site Information */

section:not(#main) .box:nth-child(1):before {
    content: 'Site Information';
    display: block;
    font: var(--heading-weight) clamp(2.4em, 1vw, 3.2em) var(--main-font);
    color: white !important;
    margin-bottom: 1em;
    letter-spacing: 0.3px;
    text-align: center;
}

:is(ul.alt li, ul.list--listing li) {
    border-top: unset;
    padding: 0.5em;
    display: inline-block;
    color: white !important;
}

#page-wrapper section {
    max-width: 100%;
    width: 100%;
}

#page-wrapper section:not(#main) .box {
    box-shadow: none;
    width: 100% !important;
    margin: 0;
    padding: 8vw 6.5vw 0vw !important;
    border-radius: 0px;
}

@media only screen and (min-width:1023px) {
    #page-wrapper section:not(#main) .box {
        padding: 4vw 17vw 0vw !important;
    }
}

:is(#page-wrapper section:not(#main):nth-child(4)>div>div>div, #page-wrapper section:not(#main) .box, #page-wrapper section:not(#main) .box div) {
    background-color: var(--primary);
}

:is(.row>.col-3:has(.list), #page-wrapper section:not(#main):nth-child(4)>div>div>div) {
    margin: auto;
}

@media only screen and (min-width:767px) {

    :is(.row>.col-3:has(.list), #page-wrapper section:not(#main):nth-child(4)>div>div>div) {
        padding-left: 3em;
    }

}

#page-wrapper section:not(#main):is(.box .row, .box .row div:not(.col-12-mobilep, .hero-content)) {
    width: 100%;
}

.col-12-mobilep .list__link {
    color: white;
    text-decoration: underline;
    border: 0;
}

.col-12-mobilep .list__link:hover,
.col-12-mobilep .list__link:focus {
    color: var(--secondary) !important;
    text-decoration-color: var(--secondary);
    outline: none !important;
}

#footer .copyright {
    font: bold var(--base-size) var(--main-font);
    color: white;
}

/* Footer Image */

section:not(#main).container:before {
    margin-bottom: -0.2em;
    content: '';
    width: 100%;
    height: 350px;
    position: relative;
    display: block;
    background: url("https://www.hull.gov.uk/hullheatnetwork/images/Banner_2.png") no-repeat center left / cover;
}

@media only screen and (max-width:500px) {

    section:not(#main).container:before {
        height: 150px;
    }

}

@media only screen and (max-width:867px) {

    section:not(#main).container:before {
        height: 200px;
    }

}

@media only screen and (min-width:867px) and (max-width:1600px) {

    section:not(#main).container:before {
        height: 300px;
    }

}

/* Converts Timeline to infographic on Landing page */

.landing .widget--element--timeline {
    margin-bottom: 0;
}

.landing div.timeline-content {
    padding: 20px 30px;
    background-color: var(--primary);
    border-radius: 40px;
    position: relative;
    text-align: center;
    width: 100%;
    height: 100%;
}

.landing div.timeline-left .timeline-container {
    padding: 0;
    margin: 1.5em 0;
}

.landing div.timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    gap: 1em;
}

.landing div.timeline-content p:has(img) {
    top: -2.5em;
    position: absolute;
    width: 90px;
    left: 2em;
    height: 0;
    margin: 0;
}

.landing :is(div.timeline-content p, div.timeline-content h3) {
    color: white !important;
    margin-bottom: 0;
}

.landing div.timeline-content h3 {
    margin-top: 1.5em;
}

.landing .timeline-heading {
    text-align: center;
}

@media screen and (max-width: 685px) {

    .landing div.timeline-left .timeline-container {
        max-width: 300px;
        justify-self: center;
    }

    .landing div.timeline {
        grid-template-columns: repeat(1, 1fr);
    }

    .landing div.timeline-content p:has(img) {
        left: 0;
        right: 0;
        justify-self: center;
    }
}

/* Fixes Hero Image */

.landing #main .box {
    padding-top: 0 !important;
}

h2.hero-heading {
    color: white !important;
    text-align: center;
}

.landing .hero {
    background-position: top right;
    display: flex;
}

/* CTA Banner */

.cta-banner__title {
    text-align: center;
    margin-bottom: 0 !important;
}

.cta-banner__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cta-banner figure {
    margin: unset;
    height: 100%;
    min-height: 16em;
}

.cta-banner__content {
    text-align: left;
    display: flex !important;
    flex-direction: column;
}

.cd-padding-sm {
    padding: 2em !important;
    order: 1;
}

.cta-banner__description {
    font-size: unset;
    color: var(--primary);
    text-align: left;
    margin-bottom: 0;
}

.cta-banner__btns {
    text-align: center;
    display: inline-block !important;
    margin: 0.5em 0;
    padding: 0 !important;
}

@media (min-width: 64rem) {
    .cta-banner:not(.cta-banner--text-center\@md) .cta-banner__content {
        padding: unset !important;
    }
}

@media (max-width: 80rem) {
    .cta-banner__grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

@media (min-width: 80rem) {
    .cta-banner__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.cta-banner__grid {
    gap: 0 !important;
}

/* Removes Word-wrap */

body {
    word-break: auto-phrase;
    letter-spacing: 0.3px;
    overflow-x: hidden !important;
}

/* Hero Widget */

.widget.widget--element--hero-image {
    min-height: 42em;
    margin: -3em 0 5em;
}

.hero {
    min-height: 40em;
    left: 0 !important;
    position: absolute !important;
    margin-top: -2rem;
    min-width: 101% !important;
    overflow-x: hidden;
}

.hero-content {
    margin: auto !important;
}

.hero-content .flex-container {
    justify-self: center;
}

@media only screen and (max-width:900px) {

    .widget.widget--element--hero-image {
        min-height: 42em;
        margin: -3em 0 1em;
    }

}

@media only screen and (min-width:900px) {

    .hero {
        margin-top: 5rem !important;
    }

}

/* Accordion */

.accordion-content {
    padding: 1em 1em 0.5em 0.5em !important;
}

.js-accordion-header span {
    color: var(--primary) !important;
    margin: 0;
}

.js-accordion-header svg {
    fill: var(--primary) !important;
}

button.expand-all-accordions {
    color: var(--primary) !important;
    text-decoration: none !important;
    outline: 4px solid var(--secondary);
    border: 0 !important;
    border-radius: 5px;
}

button.expand-all-accordions:focus {
    outline: 4px solid var(--primary);
}

.widget.widget--element--accordion {
    margin-bottom: 2em !important;
}

.accordion-wrap.main-wrap,
.js-accordion {
    border: 0 !important;
}

.accordion-controls {
    margin-bottom: 1em;
}

html .js-accordion-header:focus,
html .js-accordion h3:focus-within,
html .js-accordion h4:focus-within,
html button#expand-all-accordions:focus {
    outline: 4px solid white !important;
    box-shadow: none !important;
}

.js-accordion-header:focus .acc-open,
.js-accordion h3:focus-within .acc-open,
.js-accordion h4:focus-within .acc-open,
button#expand-all-accordions:focus .acc-open,
.acc-open {
    outline: 4px solid var(--secondary) !important;
    box-shadow: none !important;
    border-radius: 5px;
}

/* Mobile Menu */

#navPanel nav:before {
    content: '';
    background: var(--site-logo) no-repeat center / contain;
    display: inline-block;
    min-height: 8em;
    width: 100%;
}

html #navPanel {
    background-color: var(--primary);
}

#navPanel .link {
    color: white;
    padding: 0.25em 1em 0;
}

html #navPanel .link:hover {
    background-color: var(--secondary);
    color: var(--primary);
    border: 0;
}

html #navPanel .link:focus {
    border: 0;
    outline: solid 4px var(--secondary);
    background: 0;
    color: white;
}

/* Adds circle to header */

body:not(.landing) #main header:after {
    content: '';
    padding: 0.8em;
    position: absolute;
    display: flex;
    border: 0 !important;
    outline: solid 8px white;
    border-radius: 100%;
    background-color: var(--primary);
    left: 90%;
    margin-top: 2.5em;
}

@media only screen and (max-width:736px) {
    body:not(.landing) #main header:after {
        left: 80%;
    }
}

/* News Articles */

a.listing__link:hover {
    text-decoration-color: var(--secondary);
}

a.listing__link:focus {
    outline: solid 4px var(--primary);
    outline-offset: 10px;
    border-radius: 1px;
}

.listing__content {
    margin-bottom: 1em;
}

body:is(.news-article) .summary {
    font: bold 1.5em var(--main-font) !important;
    color: var(--primary);
    width: 100%;
}

@media only screen and (max-width:1060px) {

    body:is(.news-article) span.image.right {
        width: 100% !important;
    }

    body:is(.news-article) span.image img {
        max-height: 300px !important;
    }

}

@media only screen and (min-width:1060px) {

    body:is(.news-article) span.image.right,
    body:is(.news-article) img {
        object-fit: cover;
        height: 300px;
        width: 50%;
    }

    body:is(.news-article) .summary {
        min-height: 300px;
        width: 50%;
        padding: 0 0.5em 0 0;
        display: flex;
        align-items: end;
        margin-bottom: 1em;
        line-height: 1.2em;
    }

    .image.right {
        width: 50%;
    }
}

body:is(.news-article) img {
    width: 100% !important;
}

body:is(.news-article) span.image.right {
    padding: 0 0 1em !important;
}

blockquote {
    border-left: solid 6px var(--secondary);
    background-color: #FEFFF5;
    padding: 2em;
    font-style: unset;
}

blockquote:after {
    content: '';
    border: solid 12px white;
    background-color: var(--primary);
    margin: 0 0 -3em -3.8em;
    border-radius: 100%;
    padding: 1em;
    display: inline-block;
}

.col-8.col-12-narrow:has(.alt) {
    order: 2;
}

/* Search */

.col-12.col-12-narrow .alt .list__item {
    display: block !important;
}

ul.icons .button {
    display: flex;
    align-items: center;
    padding: 1em 2em;
}

ul.icons li .icon::before {
    font-size: 1em;
    margin-top: -0.5em;
}

/* Duo image */

@media only screen and (max-width:1500px) {
    .widget-row:has(.widget--element--duotone-image) {
        flex-direction: column;
    }

    .widget-row:has(.widget--element--duotone-image) .widget-width:has(.widget--element--duotone-image) {
        order: 0;
        width: 100%;
        max-height: 250px;
    }

    .widget-row:has(.widget--element--duotone-image) .widget-width:not(:has(.widget--element--duotone-image)) {
        order: 1;
        width: 100%
    }

    .widget--element--duotone-image .img-wrapper img {
        max-height: 250px;
    }
}

.widget--element--duotone-image,
.widget-row:has(.widget--element--duotone-image) {
    display: flex !important;
}

.widget.widget--element--duotone-image {
    height: 100% !important;
}

.widget--element--duotone-image .img-wrapper {
    background-color: unset !important;
    margin: unset !important;
}

.widget--element--duotone-image .img-wrapper img {
    filter: unset !important;
    object-fit: scale-down !important;
}

.widget--element--duotone-image .img-wrapper::before {
    content: unset !important;
}

.widget-row:has(.widget--element--duotone-image) div:is(.widget-width, .widget.widget--content, .widget-content, .editor) {
    height: 100%;
    margin: auto 0 auto;
}

/* News Widget */

.widget-latest-news .col-8,
.widget--external-feed .col-8 {
    padding: 0 1.5em !important;
}


.widget-latest-news .col-4,
.widget--external-feed .col-4 {
    display: none;
}

/* Invest Hull */

ul.list.alt.list--navigation li:nth-child(3) a {
    visibility: hidden;
    display: inline-block;
    margin-bottom: -2em;
}

:is(ul.alt li, ul.list--listing li) {
    padding: 0 0.5em;
}

ul.list.alt.list--navigation li:nth-child(3) a:before {
    content: '';
    padding: 2em;
    background: var(--invest-hull) no-repeat center / contain;
    display: flex;
    visibility: visible;
    margin-bottom: -1.5em;
}

@media only screen and (max-width: 767px) {
    ul.list.alt.list--navigation {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    :is(ul.alt li, ul.list--listing li) {
        margin: 1em 0;
        text-align: center;
    }

    li.list__item:nth-child(3) {
        margin: auto auto;
        grid-row: 3 / 3;
        grid-column: 1 / 3;
    }
}

/* Pricing Widget */

:is(#footer>ul>li:nth-child(2), [class*="panel-link"], .pd6-margin-top-auto, .pd6-justify-center, li::marker, #page-wrapper section:not(#main) .box .col-3 h2, #navPanel .link.depth-0, .header-wrapper .logo span:not(.symbol),
    .list__item:not(.col-4>nav>.icons>.list__item).button, body:not(.landing) div.timeline-container:last-child h3, #banner),
.landing div:is(.timeline, .timeline-left .left, .timeline-left .right, .timeline-content)::after {
    display: none !important;
    visibility: hidden !important;
}

:is(ul.p-table__features, .fa-icon-list-description, .p-table__features li) {
    margin-left: 0 !important;
    padding: 0;
}

.p-table__features .fa-icon {
    align-items: unset;
}

.p-table__features .fa-circle:before {
    content: "";
    display: inline-block;
    padding: 0.2em;
    text-align: center;
    border: 4px solid var(--secondary);
    border-radius: 50%;
    left: 0;
    position: relative;
    visibility: visible;
}

.p-table__features i.fa-icon.far.fa-circle {
    visibility: hidden;
}

.p-table__features i:not(.fa-circle) {
    transform: scale(1.2);
    color: var(--secondary);
}

@media only screen and (max-width:1400px) {
    .pd6-grid {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

.col-3:has(.list) {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
}

.p-table__item {
    background-color: #fafafa;
}

input#search-site-header {
    height: 4.2em;
}

:is(select):focus {
    outline: 6px solid var(--secondary) !important;
    outline-offset: 3px !important;
}

.widget-row:has(h2.widget__heading) {
    display: grid;
    grid-template-columns: 100%;
    gap: 1em;
}

.widget-width--25:has(h2.widget__heading),
.widget-width--25:has(h2.widget__heading) .widget--content {
    height: 100%;
    width: 100%;
}

.widget-row:has(h2.widget__heading) .widget--content {
    background-color: #f9f9f9;
}

@media only screen and (min-width:1400px) {

    .widget-row:has(.widget--content h2.widget__heading) {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        gap: 0;
    }

}

.widget-width--25:has(h2.widget__heading) {
    padding: 0 0.5em;
}

.widget--content h2.widget__heading {
    background: var(--primary);
    padding: 1em;
    font: bold 1.4em "omnes-pro", sans-serif !important;
    color: white;
    margin-top: 0;
    min-height: 100px;
    align-content: center;
    text-align: center;
}

.widget-width--25:has(h2.widget__heading) .editor {
    font: var(--default-weight) var(--base-size) var(--main-font) !important;
    color: var(--primary);
    border-top: solid 4px white;
    margin-top: -0.5em;
    padding: 0 1em 1em;
    height: 100%;
}

table th {
    background: var(--primary) !important;
    padding: 1em;
    font: bold 1.4em "omnes-pro", sans-serif;
    color: white;
    border-bottom: solid 4px white;
}

table td {
    width: 25%;
    font: var(--default-weight) var(--base-size) var(--main-font) !important;
    color: var(--primary);
    border: solid 4px white;
}

table td:last-child {
    border: none;
    border-top: solid 4px white;
}

table tbody tr {
    border: none !important;
}

.widget-row:has(table) {
    background-color: #f9f9f9;
    margin: 1em 0 0;
}

.widget-width:has(table) {
    padding: 0 !important;
}

@media only screen and (max-width:1400px) {

    .widget-width--29:has(table),
    .widget-width--28:has(table),
    .widget-width--27:has(table),
    .widget-width--26:has(table),
    .widget-width--25:has(table),
    .widget-width--24:has(table),
    .widget-width--23:has(table),
    .widget-width--22:has(table) {
        width: 100% !important;
    }

    td {
        width: 100% !important;
    }

}

.hero--overlay-layer-dark::after {
    background-color: hsl(0deg 0% 9.45% / 70%) !important;
}

.widget-row:has(.editor .button, h1, h2, h3, h4, h5, h6) {
    margin-top: 1em !important;
}

hr:before {
    content: '';
    padding: 0.8em;
    width: 0.8em;
    background-color: var(--primary);
    display: block;
    position: absolute;
    border-radius: 100%;
    border: solid 0.5em white;
    left: 0;
    right: 0;
    margin: -1em auto;
}

hr {
    border: 0;
    border-bottom: solid 9px var(--secondary);
    margin: 2em 0;
}

.widget-width.widget-width--25:not(:has(.widget--element--duotone-image)) img {
    max-height: 100px;
    max-width: 200px;
    object-fit: contain;
    padding: 0 0.5em;
    margin-bottom: 1em;
}

@media only screen and (min-width:400px) {

    .widget-row:has(.widget-width.widget-width--25 img) {
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: end;
    }

}

@media only screen and (min-width:700px) {

    .widget-row:has(.widget-width.widget-width--25 img) {
        grid-template-columns: 33% 33% 33%;
    }

}

@media only screen and (min-width:1280px) {

    .widget-row:has(.widget-width.widget-width--25 img) {
        grid-template-columns: 25% 25% 25% 25%;
    }

}

.widget-width.widget-width--25 p:has(img) {
    margin-bottom: 0 !important;
}

.form__help {
    color: var(--primary);
    font: 400 var(--base-size) var(--main-font);
}
