/*Portfolio*/


/*Layouts Comparison Table*/

details {margin-top: 30px;}
summary {display: block; list-style: none; cursor: pointer; outline: none; color: #00F; position: relative; padding-left: 22px;}
summary div {display: inline; font-weight: 400; text-decoration: underline;}
details summary::-webkit-details-marker {display: none;}

/* arrow */
details summary:before {content: "\276F"; color: #EA1500; display: inline-block; position: absolute; left: 0; top: .35em; transition: .4s; line-height: 1;}
details[open] summary:before {transform: rotate(450deg); transition-timing-function: ease;}


.layouts {margin: 40px auto 20px auto; font-size: .85em; max-width: 1200px; background-color: #FCF5D8;}
.layouts, .layouts * {border: 1px solid #000; border-collapse: collapse; padding: 5px 7px; line-height: 1.35;}
.layouts th {font-weight: 600; background-color: #F9D15E;}
.layouts td:first-child {font-weight: 500; background-color: #FEE9A8;}
@media (max-width: 770px) {.layouts1 {font-size: .75em;} .layouts, .layouts * {padding: 4px 6px;}}
@media (min-width: 626px) {.layouts2 {display: none;} .layouts td:not(:first-child) {text-align: center;}}
@media (max-width: 625px) {.layouts1 {display: none;}}

/*---------------------------------------*/

section .bodyarea {text-align: center; width: 95%; max-width: 100%; padding: 40px 0 20px 0;}
#budglay {background-color: #F5D17D;}
#budglayhead {margin-bottom: 20px; padding: 0 20px; font-weight: 500; font-size: 1.2em; line-height: 1.4;}
@media (max-width: 740px) and (min-width: 405px) {#budglayhead span {display: block;}}
@media (max-width: 350px) {section .bodyarea {width: 98%;}}
#budglay {padding: 10px 0 40px 0;}

.port {display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; margin: auto; padding: 0 40px;}
.port img {display: block; border-radius: 6px 6px 0 0; border-bottom: 1px solid #CCC;}
.port a {text-decoration: none;}

.port .card {background-color: #FFF; border-radius: 8px; box-shadow: .5px 1px 3.5px rgba(0,0,0,0.3);}

.port .card:hover {border: 2px solid #BA1000;}
.port .card a:hover img {filter: brightness(110%) saturate(110%);}
.port .card a:hover .cardconame, .port .card a:hover .cardlink {color: #DE1200;}

.port .cardconame::after, .port .cardconame2::after {position: relative; display: inline; white-space: nowrap; content: "\00a0\203A"; top: 2px; font-size: 1.6em; line-height: 0; font-family: Arial, Helvetica, sans-serif;} /*arrow after coname*/

.port .sitetype {display: inline-block; margin: 10px 2px 0 2px; text-align: center; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #888; border-radius: 7px;}
.port .sitetype span {display: block; margin: 3px 4px; text-align: center; height: 25px; padding: 0 9px; font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: #FFF; border-radius: 7px;}
.port .sitetype span::before {display: grid; align-content: center; height: 25px;}

.prem .lay span::before {content: "Premium";} .prem .lay span {background-color: #962EFB;}
.plus .lay span::before {content: "Plus";} .plus .lay span {background-color: #FFC000; color: #000;}
.std .lay span::before {content: "Standard";} .std .lay span {background-color: #2073BE;}
.out .lay span::before {content: "Retired";} .out .lay span {background-color: #AAA;}

.const .ind span::before {content: "Construction";} .const .ind span {background-color: #6F6CC8;}
.roof .ind span::before {content: "Roofing";} .roof .ind span {background-color: #937947;}
.outdoor .ind span::before {content: "Outdoor";} .outdoor .ind span {background-color: #6CA128;}
.clean .ind span::before {content: "Cleaning";} .clean .ind span {background-color: #72FBB2; color: #000;}
.pav .ind span::before {content: "Paving";} .pav .ind span {background-color: #666;}
.elec .ind span::before {content: "Electrical";} .elec .ind span {background-color: #FFA438;}
.mech .ind span::before {content: "Mechanical";} .mech .ind span {background-color: #6488A8;}
.auto .ind span::before {content: "Automotive";} .auto .ind span {background-color: #973E01;}
.water .ind span::before {content: "Water";} .water .ind span {background-color: #02C0BF;}
.misc .ind span::before {content: "Misc";} .misc .ind span {background-color: #000;}

.port .card {position: relative; display: flex; flex-direction: column; margin: 12px 15px; vertical-align: top; transition: .15s; border: 2px solid transparent; padding-bottom: 10px; background-color: #FFF;}
.port .card > a {display: flex; flex-direction: column; height: 100%;}
.port .cardtext {display: flex; flex-direction: column; flex: 1;}
.port .cardmeta {margin-top: auto; white-space: nowrap;}

.port .cardconame {display: block; width: 100%; box-sizing: border-box; margin: 12px 0 5px 0; padding: 0 15px; text-align: center; font-weight: 500; line-height: 1.3; color: #444;}
.port2 .cardlink {display: none;}

.port .cardnote {font-size: .8em; line-height: 1.25; font-weight: 400; margin: 0 auto 10px auto; color: #888;}
.port .progress {font-size: .9em; font-weight: 500; color: #24A301;}

@media (min-width: 1076px) {.port .card, .port img {width: 285px;} .port img {height: 230px;}}
@media (max-width: 1075px) {.port {padding: 0 30px;} .port .card, .port img {width: 255px;} .port img {height: 206px;}}

@media (min-width: 976px) {.port .cardconame {font-size: 20px;}}
@media (max-width: 975px) and (min-width: 851px) {
.port .card, .port img {width: 225px;} .port .card {margin: 12px 10px 12px;} .port img {height: 182px;} .port .cardconame {font-size: 19px;}
.port .ind, .port .lay {padding: 0 !important; margin-left: 0; margin-right: 0;} .port .sitetype span {padding: 0 5px; letter-spacing: .2px;}
}
@media (max-width: 850px) {.port .card, .port img {width: 285px;} .port img {height: 230px;} .port .cardconame {font-size: 20px;}}
@media (max-width: 725px) {
.port .card, .port img {width: 225px;} .port .card {margin: 12px 15px 12px 15px;} .port img {height: 182px;} .port .cardconame {font-size: 19px;}
.port .ind, .port .lay {padding: 0 !important; margin-left: 0; margin-right: 0;} .port .sitetype span {padding: 0 5px; letter-spacing: .2px;}
}
@media (max-width: 615px) and (min-width: 561px) {
.port .card, .port img {width: 200px;} .port .card {margin: 12px 10px 12px 10px;} .port img {height: auto /*sdf*/;}
.port .sitetype span {padding: 0 8px; letter-spacing: .2px; text-transform: none;}
}
@media (max-width: 560px) {.port .card, .port img {width: 285px;} .port .card {margin: 15px 0;} .port img {height: auto /*sdf*/;}}
@media (max-width: 390px) {
.port .card, .port img {width: 225px;} .port img {height: auto /*sdf*/;}
.port .sitetype span {padding: 0 8px; letter-spacing: .2px; text-transform: none;}
}
/*@media (max-width: 120px) {.port .longlink {overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; font-size: 13px !important;}}
@media (max-width: 160px) {.port .card {width: 100%; max-width: 289px;} .port img {width: 285px; height: 230px;}}
@media (max-width: 130px) {.port .card {width: 259px;} .port img {width: 255px; height: 206px;} .port .cardconame {font-size: 20px !important;}}
@media (max-width: 120px) {.port .longlink {font-size: 4vw !important;}}*/

/*--------------------------*/

/* FILTER AREA */

.portfolio-layout {position: relative; /*min-height: 100vh; background: #fff; color: #111827;*/}

.portfolio-filters *, .portfolio-filters *::before, .portfolio-filters *::after {box-sizing: border-box;}

.pf-mobile-strip {position: sticky; top: 115px; z-index: 1000; display: inline-flex; justify-content: center; align-items: center; gap: 0; width: 100%; min-height: 52px; margin: 0 auto 30px auto; padding: 13px 18px; border: 0; background: #FEE9A8; box-shadow: 0 4px 16px rgba(0,0,0,.18); color: #fff;*/ font-size: 1rem; line-height: 1.2; font-weight: 600; text-transform: uppercase;}

.pf-mobile-strip {position: sticky; z-index: 1; left: 0; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-bottom: 30px; padding: 0; background: #F5C000; text-align: center;}

.pf-mobile-open {display: flex; justify-content: center; align-items: center; gap: 0 8px; min-height: 52px; margin: 0; padding: 13px 18px; border: 0; background: #1265d8; box-shadow: 0 4px 16px rgba(0,0,0,.18); color: #fff; font-size: 1rem; line-height: 1.2; font-weight: 600; letter-spacing: .7px; text-transform: uppercase; cursor: pointer;}

.pf-overlay {position: fixed; inset: 0; z-index: 1001; display: block; background: rgba(15,23,42,.55); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, visibility .18s;}

.portfolio-filters {position: fixed; left: 50%; top: 50%; z-index: 1002; width: min(92vw, 760px); height: auto; max-height: 86vh; padding: 0; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 14px 45px rgba(0,0,0,.28); overflow: hidden; text-align: left; transform: translate(-50%, -50%) scale(.96); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s, visibility .18s, transform .18s;}

body.portfolio-filter-open .pf-overlay {opacity: 1; visibility: visible; pointer-events: auto;}
body.portfolio-filter-open .portfolio-filters {opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1);}

.pf-head {display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 20px 22px 16px 22px; border-bottom: 1px solid #e5e7eb;}
.pf-head div {margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; color: #111827; text-transform: uppercase; letter-spacing: .02em;}
.pf-close {display: block; width: 34px; height: 34px; padding: 0; border: 0; background: none; color: #8a9099; font-size: 2rem; line-height: 1; cursor: pointer;}

.pf-scroll {max-height: calc(86vh - 178px); padding: 20px 22px 0 22px; overflow-y: auto;}

.pf-group {margin: 0 0 22px 0; padding: 0 0 18px 0; border: 0; border-bottom: 1px solid #CCC;}
.pf-group legend {display: block; width: 100%; margin: 0 0 14px 0; padding: 0; font-size: .95rem; line-height: 1.2; font-weight: 600; color: #111827; text-transform: uppercase;}

.pf-layout-options {display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 18px;}
.pf-industry-options {display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 18px;}

.pf-option {display: block; margin: 0; cursor: pointer;}
.pf-option input {position: absolute; opacity: 0; pointer-events: none;}

.pf-option span {position: relative; display: flex; align-items: center; min-height: 34px; padding: 8px 6px 6px 28px; border-radius: 7px; font-size: .95rem; line-height: 1.2; color: #111827; transition: background-color .15s, color .15s;}
.pf-option span::before {content: ""; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid #a7aeb8; border-radius: 50%; background: #fff;}
.pf-option span::after {content: ""; position: absolute; left: 5px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #1265d8; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .15s;}

.pf-option:hover span {background: #f1f5fb;}
.pf-option input:focus + span {outline: 2px solid #1265d8; outline-offset: 2px;}
.pf-option input:checked + span {color: #111827; font-weight: 600;}
.pf-option input:checked + span::before {border-color: #1265d8;}
.pf-option input:checked + span::after {opacity: 1; transform: scale(1);}

.pf-bottom {margin: 0; padding: 14px 22px 20px 22px; background: #FFF;}
.pf-apply {display: block; width: 100%; min-height: 48px; margin: 0 0 12px 0; padding: 13px 16px; border: 0; border-radius: 5px; background: #1265d8; color: #fff; font-size: .98rem; line-height: 1.2; font-weight: 600; text-transform: uppercase; cursor: pointer;}
.pf-clear {display: block; width: 100%; margin: 0; padding: 7px 8px; border: 0; background: none; font-size: .92rem; line-height: 1.2; font-weight: 700; color: #1265d8; cursor: pointer;}
.pf-clear:hover {text-decoration: underline;}

.portfolio-main {margin: auto; padding: 0 0 40px 0; text-align: center;}
.portfolio-main h1 {margin: 0 0 8px 0; font-size: 2rem; line-height: 1.1; font-weight: 600; color: #111827; text-transform: uppercase;}
.portfolio-intro {margin: 0 auto 28px auto; padding: 0 20px; max-width: 760px; font-size: 1rem; line-height: 1.5; color: #374151;}

.pf-showing {margin: 0 0 26px 0; padding-top: 22px; border-top: 1px solid #F5D17D; font-size: 1rem; line-height: 1.4; color: #111827;}
.pf-showing strong {color: #1265d8;}

/*Clear Filters link on page (not popup)*/
.pf-clear-page {display: table; margin: -12px auto 26px auto; padding: 0; border: 0; background: none; color: #1265d8; font-size: 16px; line-height: 1.2; font-weight: 600; text-align: center; text-decoration: underline; cursor: pointer;}
.pf-clear-page:hover {color: #BA1000;}
.pf-clear-page[hidden] {display: none !important;}

.port .card[hidden] {display: none !important;}

@media (min-width: 1256px) {.pf-mobile-strip {top: 115px;}}
@media (max-width: 1255px) {.pf-mobile-strip {top: 164px;}}
@media (max-width: 755px) {.pf-mobile-strip {top: 105px;}}

@media (max-width: 900px) {
    /*.portfolio-main {margin: auto; padding-top: 0; border: 1px solid red}
    .portfolio-main h1 {font-size: 1.7rem; border: 1px solid blue}
    .portfolio-intro {margin-bottom: 22px; font-size: .98rem; border: 1px solid green}
    .pf-showing {margin-bottom: 20px; border: 1px solid magenta}*/

    .portfolio-filters {width: min(92vw, 430px);}
    .pf-scroll {max-height: calc(86vh - 178px); padding: 18px 20px 0 20px;}
    .pf-head {padding: 20px 20px 16px 20px;}
    .pf-group {margin: 0 0 18px 0; padding: 0 0 18px 0;}
    .pf-group legend {margin-bottom: 10px; font-size: 16px;}
    .pf-layout-options {grid-template-columns: repeat(2, 1fr); gap: 4px 12px;}
    .pf-industry-options {grid-template-columns: repeat(2, 1fr); gap: 4px 12px;}
    .pf-option span {font-size: .92rem; padding: 8px 6px 6px 24px;}
    .pf-bottom {padding: 14px 20px 20px 20px;}
}

@media (max-width: 750px) {.pf-mobile-strip {top: 105px;}}
@media (max-width: 480px) {.pf-mobile-strip {top: 0;} .pf-mobile-open {width: 100%;}}
@media (max-width: 340px) {.pf-option span {padding: 8px 4px 6px 22px;}}