:root {
    --bs-primary: #F2EEEA;
    --bs-secondary: #F9F8F6;
    --bs-link-color: #2c262e;
    --bs-black: #2c262e;
}
h1 {
    font-family: "area-normal";
    font-weight: 600;
}
@media (min-width: 1200px) {
    .h1, h1 {
        font-size: calc(1.375rem + 1.5vw);
    }
}
body {
    font-family: "area-normal";
    font-weight: 400;
    line-height: 2;
    color: var(--bs-black);
}
.content {
    color: #2c262e;
    text-decoration: underline;
    text-underline-offset: 4px;
}
#sp-header {
    background-color: var(--bs-primary);
    box-shadow: none;
}
@media (max-width: 575px) {
    #sp-header {
        height: 96px;
}}
.bottom-menu {
    font-size: 1.3em;
    font-weight: 600;
    line-height: 2.5;
    color: var(--bs-primary);
}
a {
    text-underline-offset: 4px;
    color: var(--bs-black);
    /*color: #5b8ca1;*/
}
.link-under {
    text-decoration: underline;
}
a:hover {
    color: inherit;
    text-decoration: underline;
}
h2 {
    font-weight: 600;
}
.full-width-image {
    margin-left: calc( -50vw + 50% + 10px );
    margin-right: calc( -50vw + 50% );
    max-width: calc( 100vw - 20px );
    width: 100vw;
}

/*---------------------------------------------------- Logo ---------------------------------------------------------------*/

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    div#sp-logo {
    padding: 20px 0 0 20px;
}}
@media (max-width: 576px) {
    .logo-image {
        height: 49px !important;
}}
.home-page, .all-projects-page, .healthcare-page, .education-page, .interiors-page, .commercial-page, .community-page, .historic-page, .in-progress-page  {
    #sp-header .container {
    max-width: 100%;
}}
/*@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { */
    .home-page, .all-projects-page, .healthcare-page, .education-page, .interiors-page, .commercial-page, .community-page, .historic-page, .in-progress-page  {
       div#sp-logo {
    padding-left: 50px;
}}

@media only screen  and (min-width : 1224px) {
    .burger-icon {
        display: none;
}}
.home-page, .about-page {
    .burger-icon>span {
    background-color: white;
}}

/*----------------------------------------------------   Menu ----------------------------------------------------*/
.sp-megamenu-parent>li {
    text-transform: uppercase;
}
.sp-megamenu-parent > li > a {
    font-weight: 700;
    font-size: 15px;
    color: var(--bs-black) !important;
}
.sp-megamenu-parent>li.active>a {
    font-weight: 700;
}
.sp-megamenu-parent>li.active>a, .sp-megamenu-parent>li.active:hover>a {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.sp-megamenu-parent>li:hover>a {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.home-page, .about-page {
    .sp-megamenu-parent > li > a {
        color: #fff !important;
}}
.home-page, .about-page {
    .sp-megamenu-parent>li:hover>a {
        color: #FFF !important;
}}

/*----------------------------------------- Page Headings -----------------------------------------*/
.page-heading {
    font-size: 3.4rem;
    padding-top: 75px;
}
.page-subtitle {
    font-size: 2.5rem;
    font-weight: 600;
    margin: 40px 0 50px 0;
}
.year {
    color: #666766;
    font-size: 1.6rem;
    font-weight: 600;
    padding-bottom: 50px;
}
#sp-title {
    background-color: var(--bs-primary);
}
.section-heading {
    font-size: 3.4rem;
    font-weight: 600;
    margin-top: -30px;
}
/*----------------------------------------- History (50th) Page -----------------------------------------*/
.history-page {
    #sp-header {
    background: #0A323F;
    box-shadow: none;
    padding-bottom: 0;
}
    .sp-megamenu-parent > li > a {
        color: #fff !important;
}}
body.history-page {
    color: white;
}
.history-page a {color: #f1ce67;}

.history-page h3 {
    font-weight: 600;
}
@media (min-width: 1200px) {
    h3 {
        font-size: 2rem;
}}
.history-page {
    #sp-main-body {
        background-color: rgba(21,103,129,1);
}}
.history-page {
    .burger-icon>span {
    background-color: white;
}}

.history7525 {
    font-family: "area-normal", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 4rem;
    color: var(--bs-secondary);
}
@media only screen  and (max-width : 769px) { 
    .history7525 {
    font-size: 2.5rem;
}}
.history7525-end {
    font-family: "area-normal", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 4rem;
    color: #133f4f;
}
@media only screen  and (max-width : 769px) { 
    .history7525-end {
    font-size: 3.2rem;
}}
.celebrating {
    text-align: center;
    font-size: 3.5rem; 
    color: var(--bs-secondary); 
    font-weight: 600; 
    margin-bottom: 20px;
    line-height:1.2;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .celebrating {
        font-size: 2.8rem;
        margin-bottom: 18px;
}}
.celebrating-sub {
    text-align: center;
    font-size: 2.5rem; 
    color: var(--bs-secondary); 
    font-weight: 600; 
    margin-bottom: 0;
    line-height:1.2;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .celebrating-sub {
    font-size: 2rem; 
}}
.celebrating-sub-end {
    text-align: center;
    font-size: 2.5rem; 
    color: #133f4f; 
    font-weight: 600; 
    margin-bottom: 0;
    line-height:1.2;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
    .celebrating-sub-end {
    font-size: 2rem; 
}}
.year-main {
    font-family: "area-normal", sans-serif;
    font-weight: 900;
    font-style: normal;
    font-size: 7.4rem;
    color: #BDD1D9;
}
hr.history-line {
    color: var(--bs-secondary);
    opacity: 1;
    margin-bottom: 35px;
}
@media only screen  and (max-width: 769px) { 
hr.history-line { 
    display: none;
}}
.year-dots {
    background-image: url(/images/history/year-dot-background.svg), linear-gradient(180deg, rgba(21,103,129,1) 0%, rgba(17,77,97,1) 50%, rgba(19,63,79,1) 100%);
    background-repeat: no-repeat;
    background-size: 55% 340px, 100% 100%;
    background-attachment: inherit;
    background-position: top left !important;
}
.year-dots-long {
    background-image: url(/images/history/year-dot-background.svg), linear-gradient(180deg, rgba(21,103,129,1) 0%, rgba(17,77,97,1) 50%, rgba(19,63,79,1) 100%);
    background-repeat: no-repeat;
    background-size: 100% 340px, 100% 100%;
    background-attachment: inherit;
    background-position: top left !important;
}
.cos-school {
    background-color: #123f4fb3 !important;
}
.history-page .sppb-addon-image-overlay-icon {
    font-size: 36px;
    line-height: 25px;
}
.year-svg {width:500px;}

@media only screen and (min-device-width:300px) and (max-device-width:1023px) {
    .year-vertical {
     width: 29vw;
     margin: 0 auto;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}}
@media only screen and (min-device-width : 320px) and (max-device-width : 768px) {
    .randy-1982 {
    height: 250px;
    width: 29vw;
     margin: 0 auto;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}}
@media only screen and (min-device-width : 769px) {
    .randy-1982 {
    height: 380px;
}}
.anchors {
    font-size: .9rem;
    line-height: 2.2;
}
.anchors a:hover {
    font-weight: 800;
}
.randy-background {
    background-image: url(/images/history/dots-repeat.svg);
    background-repeat: repeat;
    background-attachment: inherit;
    background-position: top right;
    background-size: .5% 1.5%;
}
/*.randy-background-v2 {
    background-image: url(/images/history/dots-light-blue.svg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-position: 400%;
    background-size: 90% 75%;
}
.randy-background-v2 {
background-image: url(/images/history/dots.svg);
    right: 0;
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background-position: 49%;
    background-size: cover;
}*/

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .randy-background {background-image: none;}}

.hibbard-background {
    background-image: url(/images/history/dots-repeat.svg);
    background-repeat: repeat;
    background-attachment: inherit;
    background-position: top right;
    background-size: .5% 1.5%;
}
.home-50-background {
    background: url(/jdayusa2025/images/icons/plus-sign-large-black-opacity.svg);
    background-repeat: no-repeat;
    background-attachment: inherit;
    background-position: -28%;
    background-size: 27% 100%;
}
@media only screen and (min-width: 320px) and (max-width: 1399px) {
    .home-50-background {
        background:none !important;
}}
.history-page .quote {
    font-size: 1.3rem;
    font-style: italic;
    line-height: 2.2;
    padding-left: 40px;
    color: #f2eeea;
    border-left: dotted;
    border-color: #5C8DA2;
    border-left-width: thick;
}
.zup {
    position: relative;
    z-index: 5000;
}
@media only screen and (min-width: 320px) and (max-width: 1024px) {
    .header-background {
    background-image: none !important;
}}
/* Anchor Links */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
span.sppb-accordion-icon-wrap {color: #0A323F !important;}}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.sppb-panel.sppb-panel-custom {background: #F2EEEA !important;}}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
p.anchors a {color: #0A323F !important; font-weight: 600}}


body.background-test  {
 color: white;
}

/*----------------------------------------- About Page -----------------------------------------*/

h3.about  {
    font-size: 3.5rem;
    font-weight: 600
}
.negative-margin {
    margin-top: -140px !important;
}
.about-p {
    font-weight: 600;
    font-size: 1.2rem;
}

/*----------------------------------------- Home Page -----------------------------------------*/
.home-page, .about-page {
    #sp-header {
    background: transparent;
    box-shadow: none;
    padding-bottom: 0;
}}
.home-title {
    color: #f2eeea;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}
@media only screen and (min-width : 1024px) { 
    .home-title {
        font-size: 3.9rem;
}}
/*-- Position of hero text overlaying slider --*/
.home-page div#sppb-addon-wrapper-a80bd4fa-c2d4-4d31-8880-f99ea1d666f2 {
    position: absolute;
    bottom: 10vh;
}

/*------------------------------------------- Home Page Philosophy --------------------------------------------*/

div#section-id-f62fab75-68f5-4ece-a823-7e7b149c387d {
    background: linear-gradient(to left, #f9f8f5 40%, #5b8ca1 40%);
}
@media only screen  and (max-width : 1024px) {
    div#section-id-f62fab75-68f5-4ece-a823-7e7b149c387d {
    background: linear-gradient(to left, #f9f8f5 0%, #5b8ca1 0%);
}}

/*----------------------------------------- Portfolio Pages   --------------------------------------------------------*/

div.tag-category h1 {
    text-transform: capitalize;
    margin: 50px 0;
}

button#show-more-button {
    background: transparent;
    color: #666766;
    padding: 20px 60px;
    border: 1px solid #666766;
    font-weight: 900;
}
button#show-less-items {
    background: transparent;
    color: #666766;
    padding: 20px 60px;
    border: 1px solid #666766;
    font-weight: 900;
}
.rta-categories-leadin {
    margin: 4rem auto !important;
}
.cat-leadin-slogan h3 {
    font-weight: 600;
}
.rta-categories-leadin .cat-leadin-text {
    font-size: inherit !important;
}
.grid-item-frame {
    padding: 0 1rem !important;
}
@media only screen  and (min-width : 1224px) {
    .portfolios-grid {
    padding: 0 36px
}}

.rta-title-container h2 {
    font-size: 20px;
    font-family: 'area-normal';
}
.rta-title-container h2 a {
    color: #333333;
}
#rta-profile-quote {
    padding: 50px 0px;
}
.related-project-title {
    color: #000;
}
#related-projects {
    padding: 40px 20px 20px 20px !important;
}
.project-row.limited-width {
    max-width: 90% !important;
}
.rta-title {
    font-size: 50px;
    font-family: "area-normal";
    line-height: 1.3;
    font-weight: 700;
}
span.rta-city-state {
    font-size: 1.5rem;
    font-weight: 600;
}
.project-row .item-column {
    padding: 0px;
}
.project-row .item-column.pc10 {
    width: 8% !important;
}
.project-row .item-column.pc30 {
    width: 45% !important;
}
#recognition-text-col {
    padding-top: 4rem;
}
#recognition-row {
    margin-top: -5rem !important;
}
h3.profile-subtitle {
    color: #000;
    font-size: 15.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}
.profile-text-block ul {
    padding-left: 1rem;
}
.profile-text-block ::marker {
    font-size: 13px;
}
.profile-text-block li {
    list-style-type: square;
    margin-bottom: 7px;
}
@media only screen  and (min-width : 1224px) {
    .title-on-top {
    padding-bottom: 3.5rem !important;
}}
.project-row.project-what.flush-img-right {
    padding: 50px 0 0 0;
}
.project-row.project-additional.row-reverse.flush-img-right {
    padding-bottom: 50px;
}
.rta-carousel-button#iq-t-prev {
    top: 500px;
}
.rta-carousel-button#iq-t-next {
    top: 500px;
}

/* ----------------------------------------  Portfolio Desktop Media  ----------------------------------------- */
@media only screen  and (min-width : 1624px) {
    .project-col-text.profile-text-block {
    font-size: .92vw;
    }
    .profile-text-block li {
    font-size: .92vw;
    }
    .profile-text-block p {
    font-size: .92vw;
    }
    .portfolio-text-col {
    max-width: 700px;
    }
}
#sp-top-bar {
    display: none;
}
.sp-page-title {
    background-color: rgb(118 118 118);
    padding: 80px 0;
    background-blend-mode: multiply;
    background-position: center;
    background-size: cover;
}

/*----------------------------------------- Staff Page Grid  ----------------------------------------- */
.staff-grid {
    padding: 10px;
}
.staff-intro-name {
    font-weight: 600;
    line-height: 130%;
    font-size: 1.4rem;
    margin-top: 10px;
}
.staff-title {
    text-transform: uppercase;
    font-size: .8rem;
}
/* removes list and grid options from layout */
.elsiso_display_header {
    display: none;
}
#easylayouts.isotope .elsiso_item {
    border: none;
}
.name-list {
    padding: 30px;
    border: 1px solid darkgray;
}

/*-------------------------------------  Template Overrides ------------------------------------- */

#sp-main-body {
    padding: 30px 0;
    background-color: var(--bs-secondary);
}
.page-header {
    padding-bottom: 30px;
}
@media (max-width: 900px) {
    .phone-center {
    text-align: center;
}}
.sp-contact-info li {
    font-size: 100%;
}
ul.social-icons {
    margin: 5px 0px 0px 0px;
}
@media (min-width: 1200px){ 
    #sp-top-bar .sp-module {
    margin: 0 30px 0 0;
}}

/*------------------------------- News Page ---------------------------------------------------*/

.pagination>.active>span {
    border-color: #dddbda;
    background-color: #dddbda !important;
}
div.pagination .pull-right {
    margin-top: 8px;
    margin-right: 20px;
}
.page-item:not(:first-child) .page-link {
    color: var(--bs-black);
    background-color: #f2eeea;
    border: 1px solid #f2eeea;
    margin: 0 4px;
}
.disabled>.page-link, .page-link.disabled {
    color: var(--bs-black);
}
.page-item:first-child .page-link {
    background-color: #f2eeea;
    border: 1px solid #f2eeea;
    margin: 0 4px;
}
.pagination {
    justify-content: center;
}
.news-link {
    color: var(--bs-black);
}
.news-link a {
    text-decoration: underline;
}
.tag-category {
    margin-right: 25px;
}
.tag-links h3.sp-module-title {
        font-size: 0.75rem;
        font-weight: 600;
}
.tag-links ul {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 0;
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
ul.news-menu li {
    margin: 20px 15px 10px 0px;
    background: var(--bs-primary);
    padding: 10px;
}
ul.menu.news-menu li.current {
        background-color: #DDDBDA;
        text-decoration: underline;
        text-underline-offset: 4px;
}
.itemid-124, .itemid-1986, .itemid-1987, .itemid-1992, .itemid-1994 {
    #sp-title {
    background-color: var(--bs-secondary);
}}
.sp-module ul.news-menu>li>a {
    font-weight: 600;
}
 .sp-module ul.news-menu>li>a:hover {
        color: #133f4f;
        text-decoration: underline;
}
.itemid-124 .sp-module-content-top.clearfix {
    padding-bottom: 0;
}
.article-list .article .article-header h2 {
    color: var(--bs-black);
    font-weight: 600;
}
#sp-left .sp-module ul>li>a, #sp-right .sp-module ul>li>a {
    line-height: 27px;
    font-size: 15px;
}
.tags>li a {
    padding: 0.3rem;
    border-radius: 0;
    background: #e7e5e5;
    color: var(--bs-black);
}
.tags>li a:hover {
    background: #dddbda;
}
ul.tags.mb-4 {
    margin-bottom: 0 !important;
}
span.icon-chevron-right {
    display: none;
}
span.icon-chevron-left {
    display: none;
}
a.btn.btn-sm.btn-secondary.previous {
    background: transparent;
    border: none;
    color: var(--bs-black);
    padding: 0;
}
a.btn.btn-sm.btn-secondary.previous:hover {
    text-decoration: underline;
}
a.btn.btn-sm.btn-secondary.next {
    background: transparent;
    border: none;
    color: var(--bs-black);
    padding: 0;
}
a.btn.btn-sm.btn-secondary.next:hover{
    text-decoration: underline;
}
.article-list .article {
    margin-bottom: 30px;
    padding: 20px 0px;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid gray;
}
.article-info>span {
    font-size: 1rem;
    font-weight: bold;
}
#sp-footer {
    font-size: 1rem;
    font-weight: 600;
}
.readmore {
    text-decoration: underline;
    text-underline-offset: 4px;
    font-size: smaller;
}
.btn-default {
    color: #fff;
    background-color: #a34b44;
    border-color: #a34b44;
}

/*-------------------------------------------- Icons -------------------------------------------------------*/

.fa-square-full:before {
    content: "\f45c";
    font-size: 10px;
    position: relative;
    vertical-align: middle;
    margin-right: 5px;
    color: #b32317;
}
span.sppb-row-action-btn span.fas.fa-ellipsis-v {
    background-color: darkred;
}

/*-------------------------------------  Awards (redesign 2024)  -------------------------------------*/

div.no_more.btn.btn-default.btn-info {
    display: none !important;
}
div#elsiso_articlesloading {
   background-color: #5b8ca1;
   border-color: #5b8ca1;
}
.award-source {
    line-height: 1.6;
    font-size: 0.95rem;
}
.presented-to {
    font-size: 0.8rem
}
.awards-project-link {
    font-size: 0.95rem;
    font-weight: 600;
}

/*------------------------------------- Employment (redesign 2024) -------------------------------------*/
.careers-page #sp-main-body {
    padding: 0;
}
.careers-page .article-details .article-can-edit {
    margin-bottom: 0;
}
.careers-page .uk-scope a {
    color: inherit;
    font-weight: 600;
}
.careers-page ul.uk-list li.uk-active {
    text-decoration: underline;
    text-underline-offset: 4px;
}
.careers-page ul#wk-eda.uk-switcher.uk-text-left {
    text-decoration: none !important;
}

.careers-page li.uk-active a#uk-switcher  {
    text-decoration: underline;
}
.careers-page .uk-scope a:hover {
    color: inherit;
}
.careers-page .uk-scope .uk-list {
    border-top: 1px solid #666766;
    padding: 30px 0;
}
.careers-page .uk-scope .uk-panel {
    border-top: 1px solid #666766;
}
.careers-page h3.uk-h3.uk-margin-remove-top {
    display: none;
}

.careers-page nav.pagenavigation {
    display: none;
}
.no-positions-message-container {
    border-top: 1px solid #666766;
   } 
@media (min-width: 1200px){ 
    .no-positions-message-container {
    padding: 4% 5% 4% 33%;
}}

/*------------------------------------- Responsive iFrame -------------------------------------*/

.iframe-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.iframe-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

/*------------------------------------- Sitemap -------------------------------------*/

#jmap_sitemap div.jmapcolumn>ul>li>span.folder {
    line-height: 30px;
}

/*------------------------------------- Public Planning -------------------------------------*/

.itemid-1401 .btn {
    background-color: #f5f5f5;
    border: 1px solid #bbb;
    font-weight: 500;
    font-size: 0.9rem;
}

.itemid-1401 .btn-success {
    color: #fff;
    background-color: #198754;
    border-color: #198754;
}
.itemid-1401 .btn.disabled {
    text-underline-offset: 6px;
    text-decoration: underline;
    color: #b32317;
}
.itemid-1401 .btn-success.disabled {
    color: white;
}
.itemid-1033 .btn {
    background-color: #f5f5f5;
    border: 1px solid #bbb;
    font-weight: 500;
}
.itemid-1179 .btn {
    background-color: #f5f5f5;
    border: 1px solid #bbb;
    font-weight: 500;
}
.itemid-1179 .btn-primary {
    color: #fff;
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
    font-weight: 600;
}
.uk-scope .uk-h3, .uk-scope h3 {
    color: black !important;
}
/*-------------------------- 2023 Public Planning --------------------------*/

.horizontal-links ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    justify-content: flex-start;
}
.horizontal-links .category-module li {
    padding: 9px 0;
}
.horizontal-links a {
    background-color: #b32317;
    color: #fff !important;
    padding: 8px;
    border-radius: 6px;
    margin-right: 20px;
}
.sp-module-content-top.clearfix {
    padding-bottom: 25px;
}
.horizontal-links-center ul {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    justify-content: center;
}
.horizontal-links-center .category-module li {
    padding: 9px 0;
}
.horizontal-links-center a {
    background-color: #b32317;
    color: #fff !important;
    padding: 8px;
    border-radius: 6px;
    margin-right: 20px;
}
.public-planning a.mod-articles-category-title.active {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 5px;
} 
.green a {
    background: green;
    font-size: 1rem;
    padding: 6px 9px;
    margin-right: 12px;
}
.link-block-padding {
    padding-top: 20px;
}
.project-title-block {
    border: 1px solid #000;
    background: #e4e4e4;
    padding: 20px;
}