/* tf.css */

:root {
    --blue-text:#1600dd;
    --red-text:red;
    --header-height:120px;
    --black-strip-height:48px;
    --header-transition-time:250ms;
    --heading-text-size: calc( max(20px, min(3.5vw, 52px) ) );
    --body-text-size: calc( max(16px, min(1.7vw, 26px) ) );
    --larger-body-text-size: calc( max(18px, min(2.5vw, 37px) ) );
}

body:not(.home) {
    /* LARGER INTERIOR HEADINGS PER M.S. */
    /* cancel larger interior headings per M.S. */
    /* --heading-text-size: calc( max( 24px, min(4vw, 60px) ) ); */
}
.show-outlines .outline-elements,
.show-outlines .outline-elements * {
    outline:1px solid rgba(255,0,0,0.25);
}

#scroll_position_monitor {
    position:fixed;
    left:0px;
    top:50%;
    z-index:1000001;
    background-color:white;
    color:black;
    padding:5px;
    left:5px;
}

.element-dimensions {
    position:absolute;
    bottom:5px;
    right:5px;
    color:white;
    background-color: black;
    padding:2px;
    font-family: Arial, Helvetica, sans-serif;
    font-size:18px;
}

/* site-wide web font */
body,
.wide-font {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body .hide {
    display:none;
}
/* disable text selection on specific elements */
.disable-text-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* also add attribute to element: unselectable="yes" */

/* custom tags which need to render as block elements */
page-header-wrapper, page-header, page-top-black-strip,
page-footer-wrapper, page-footer,
quote-panel-heading, big-text-block,
main-message-panel, about-us-panel,
products-panel, services-panel, 
contractors-panel, request-quote-panel,
panel-title, service-panel-item,
about-heading {
    display:block;
}

/* general panel */
.general-panel {
    width:90%;
    max-width:1300px;
    margin:0px auto;
}

page-header-wrapper {
    position: fixed;
    top:0px;
    z-index: 10;
    width: 100%;
}
page-header-wrapper.scrolled,
page-header-wrapper.sunlight {
    box-shadow: 0px 0px 15px 0px #A0A0A0;
}
@media screen and (max-width:1080px) {
    .not page-header-wrapper::after {
        position: absolute;
        content: 'Testing iPad Nav again...';
        padding: 2px;
        background-color: orange;
        left: 50%;
        translate: -50% 10px;
        box-shadow: 0px 0px 10px 5px orange;
    }
}

page-top-black-strip {
    background-color: black;
    color:white;
    height:var(--black-strip-height);
}
page-top-black-strip .general-panel {
    display:flex;
    justify-content: end;
    align-items: center;
    height:100%;
    gap:40px;
    font-size: 20px;
}

/* override auto-linked phone number style color */
page-top-black-strip contact-phone a[href^=tel]:link {
    color:white;
}
header-fb-logo img,
header-phone-logo img {
    height:25px;
}
header-phone-logo img {
    margin-right:5px;
    vertical-align: text-top;
    animation:ringing 5s linear infinite;
}
header-fb-logo img {
    position: relative;
    bottom:2px;
}
@keyframes ringing {
    0%,20% {
        rotate:0deg;
    }
    2%,10%,18% {
        rotate:-10deg;
    }
    6%,14% {
        rotate:10deg;
    }
}

page-header {
    position: relative;
    z-index: 1;
    color:black;
    transition: color var(--header-transition-time) linear, background-color var(--header-transition-time) linear, opacity var(--header-transition-time) linear;
}
/* special version */
page-header .header-panel {
    display:grid;
    grid-template-columns: 20% auto;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
}
/* sunlight is the switch to make the page header 'stay' lit from a visible dropdown */
page-header-wrapper.scrolled page-header,
page-header-wrapper.sunlight page-header {
    background-color:white;
}
page-header-wrapper.scrolled .nav-burger svg,
page-header-wrapper.sunlight .nav-burger svg {
    fill:#000;
}
/* page-header-wrapper.scrolled .nav-burger {
    --burger-border-color:black;
} */

header-logo img {
    display: block;
    width:100%;
}

request-quote-button button {
    color:white;
    background-image:linear-gradient(90deg, darkblue, blue, darkblue);
    border:none;
    /* font-size: 20px; */
    padding:4px 8px;
}

request-quote-button button:hover {
    background-image:linear-gradient(90deg, blue, darkblue, blue);
}

.panel-link {
    cursor: pointer;
}

/* NAV - GENERAL */
.nav-burger {
    --burger-border-color:black;
    display: none;
    border:none;
    background-color: transparent;
    position: relative;
    padding:0px; /* cancel inherent padding of button element */
}
.nav-burger::before,
.nav-burger::after {
	content: '';
	border-top: 3px solid var(--burger-border-color);
	width: calc(min(25px,80%));
	top: 33%;
	position: absolute;
	/* translate: 0px 10px; */
    transition: 400ms ease;
}
.nav-burger::after {
    top:auto;
	bottom: 33%;
}
.nav-burger svg {
    fill-opacity: 0;
}

nav-wrapper {
    --nw-font-size:22px;
    --nav-term-arrow-color:rgb(49, 48, 48);
    --nav-term-hover-color:var(--blue-text);
    display:flex;
    justify-content: end;
    align-items: center;
    gap:30px;
    font-size:var(--nw-font-size);
}

nav-wrapper nav {
    display:flex;
    gap:30px;
}
@media screen and (max-width:820px) {
    /* page-header .header-panel {
        grid-template-columns:auto 30% auto;
    } */
}
/* was 1050px breakpoint, now 1180px */
@media screen and (max-width:1050px) { /* 900px */
    page-header {
        background-color: white;
    }
    page-header .header-panel {
        grid-template-columns: auto 20% auto;
    }
    header-logo {
        position: absolute;
        display:block;
        left:50%;
        translate:-50%;
        top:7%;
        height:85%;
    }
    header-logo img {
        width: auto;
        height:100%;
        margin:0px auto;
    }
    nav-wrapper {
        --nav-term-arrow-color:white;
        --nav-term-hover-color:white;
        grid-column:3/3; /* relocate nav burger to right-end of header */
    }
    nav-wrapper, nav-wrapper nav {
        gap:10px;
    }
/* }
@media screen and (max-width:820px) { */
    nav-wrapper request-quote-button {
        display:none;
    }
    page-top-black-strip .general-panel {
        justify-content: space-between;
    }
}
nav-item {
    cursor: pointer;
    padding:42px 0px;
}
nav-term {
    position:relative;
    display:block;
}
.has-subnav nav-term::after {
	content: '';
	display: inline-block;
	border: 10px solid transparent;
	border-left-color: var(--nav-term-arrow-color);
	margin-left: 10px;
    position: relative;
    transform-origin:5px 15px;
    top:2px;
}
nav-item.active-page,
nav-item:hover {
    color:var(--nav-term-hover-color);
}
nav-item.active-page nav-term::after {
    border-left-color:var(--nav-term-hover-color);
}
nav-item:hover nav-term::after {
    rotate:90deg;
    border-left-color:var(--nav-term-hover-color);
    top:0px;
}
.has-subnav {
    touch-action: none; /* block drag-scroll action on mobile */
}

/* rely solely on pointer events to reveal subnav element */
/* .has-subnav:hover .sub-nav:not(.hide), */
.show-subnav .sub-nav {
    display:block;
}
/* .products-dropdown */
.sub-nav {
    position:absolute;
    background-color:transparent;
    transition:background-color var(--header-transition-time) linear;
    top:100%;
    width:100%;
    left:0px;
    right:0px;
    min-height:10px;
    display:none;
    box-shadow: 0px 10px 10px -5px #A0A0A0;
}
/* shorten header, show nav-burger, was 1050px */
@media screen and (max-width:1050px) { /* 530px */
    .nav-burger {
        grid-area: burger;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    nav {
        flex-direction: column;
        width: 100%;
        position: fixed;
        left:0px;
        top:calc(var(--black-strip-height) + var(--header-height));
        height:100%;
        max-height:calc(100% - (var(--black-strip-height) + var(--header-height)));
        overflow-y:scroll;
        z-index:10;
        background-color:var(--blue-text);
        color:white;
        opacity:0;
        visibility: hidden;
        scale:0.75;
        transform-origin: 150% 0;
        transition:300ms ease;
        padding:4vw 5%;
    }
    .nav-burger[aria-expanded="true"] {
        --burger-border-color:white;
        box-shadow: 0px 0px 0px 22px var(--blue-text);
        background-color: var(--blue-text);
    }
    /* use aria toggle to control nav visibility */
    .nav-burger[aria-expanded="true"] + nav {
        /* display: none; */
        opacity: 1;
        visibility: visible;
        scale: 1;
    }
    .nav-burger[aria-expanded="true"]::before {
        rotate:225deg;
        translate:0px 5px;
    }
    .nav-burger[aria-expanded="true"]::after {
        rotate:-225deg;
        translate:0px -5px;
    }
    .not nav.slide-and-fade {
        transition-duration: 300ms;
    }
    .has-subnav {
        touch-action: inherit;
    }
    .sub-nav {
        position: relative;
        top:0px; /* cancel offset from position-absolute */
        background-color: white;
        /* width:95%; */
        /* margin:0px auto; */
        margin:15px 0px;
    }
    nav-term::after {
        position: absolute;
        right:0px;
    }
    /* nav-item::after {
        display:none;
    } */
    :root {
        --header-height:80px;
    }
    nav-item {
        padding:12px 0px;
    }
    nav-item:not(:last-child) {
        border-bottom:2px solid white;
    }
    about-grid,services-grid {
        max-width: none;
    }
    /* indicate active dropdown in narrow view */
    .has-subnav.show-subnav {
        color:var(--nav-term-hover-color);
    }
    .has-subnav.show-subnav nav-term::after {
        rotate:90deg;
        border-left-color:var(--nav-term-arrow-color);
    }
}
page-header-wrapper.scrolled .sub-nav,
page-header-wrapper.sunlight .sub-nav {
    background-color:white;
}
/* apply white background when browser is over-wide to help clarity of navigation content */
@media only screen and (min-width:1300px) {
    page-header {
        background-color:white;
    }
}

/* NAV - ABOUT US */
/* NAV - PRODUCTS */
about-grid,
services-grid,
products-grid {
    display:flex;
    justify-content: center; /*  space-between; */
    color:black;
    padding:10px 0px;
}
about-grid,
services-grid {
    margin:0px auto;
}
/* was 1050px breakpoint */
@media screen and (min-width:1050.1px) {
    /* about-grid,
    services-grid {
        max-width:75%;
    } */
}
about-item,
service-item,
product-item {
    display:flex;
    flex-direction: column;
    align-items:center;
    position:relative;
    /* flex:1; */
    padding:15px 0px;
    flex-grow:0;
    flex-basis:16.667%; /* 1/6th column */
}
about-overlay,
service-overlay,
product-overlay {
    opacity:0;
    position:absolute;
    top:0px;
    width: 100%;
    height:100%;
    color:white;
    background-color:rgba(22, 0, 221, 0.9);
    transition:opacity 200ms linear;
    display:flex;
    text-align: center;
    justify-content: center;
    align-items: end;
}
.raise-on-hover {
    position: relative;
}
about-item:hover .raise-on-hover,
service-item:hover .raise-on-hover,
product-item:hover .raise-on-hover {
    z-index: 5;
    filter:invert(100%);
}
/* was 1050px breakpoint */
@media screen and (max-width:1050px) {
    about-item:hover,
    service-item:hover,
    product-item:hover {
        background-color: var(--blue-text);
    }
}
about-item .show-learn-more-text:before,
service-item .show-learn-more-text:before,
product-item .show-learn-more-text:before {
    /* content:'LEARN MORE'; */
    font-size:var(--nw-font-size);
    z-index:5;
    color:white;
    position: absolute;
    top:50%;
    left:50%;
    width: 100%;
    translate: -50% -50%;
    opacity: 0;
    transition: opacity 200ms linear;
}
about-item:hover about-overlay,
service-item:hover service-overlay,
product-item:hover product-overlay,
about-item:hover .show-learn-more-text:before,
service-item:hover .show-learn-more-text:before,
product-item:hover .show-learn-more-text:before {
    opacity:1;
}
about-icon img,
service-icon img,
product-icon img {
    width:48px;
    /* display: block; */
}
about-name,
service-name,
product-name {
    /* font-size:150%; */
    position: relative;
}
nav-item about-description,
nav-item service-description,
nav-item product-description {
    font-size:14px;
    line-height: 1;
    text-align: center;
    width:90%;
    position: relative;
    min-height:1em;
}
/* was 1050px breakpoint */
@media screen and (max-width:1050px) {
    /* breakpoint to display grid items in a column */
    about-grid, services-grid, products-grid {
        flex-direction:column;
    }
    about-item, service-item, product-item {
        display:grid;
        gap:10px;
        padding:10px 20px;
        grid-auto-flow:column;
        grid-template-columns: 48px 150px auto;
    }
    service-item {
        grid-template-columns: 48px 130px auto;
    }
    product-item {
        grid-template-columns: 48px 65px auto;
    }
    about-name, service-name, product-name,
    nav-item about-description,
    nav-item service-description,
    nav-item product-description {
        text-align:start;
    }
    /* hide description+overlay in mobile menu */
    nav-item about-description, nav-item about-overlay,
    nav-item service-description, nav-item service-overlay,
    nav-item product-description, nav-item product-overlay {
        display:none;
    }
}

/* use this to tell when first container has scrolled vertically */
#header_placeholder {
    position: absolute;
    top:0px; /* override flex centering */
    width: 1px; /* give element some dimension */
    height:var(--header-height);
}

page-top-panel {
    min-height: calc(max(30vw,300px));
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    padding-top:var(--black-strip-height);
    display:flex;
    flex-direction: column;
    justify-content: end;
}
page-top-panel.services-page {
    background-position-y:var(--black-strip-height);
    background-position-x:right;
}
@media only screen and (max-width:1050px) {
    page-top-panel.services-page {
        background-position-y:var(--header-height);
    }        
}
.heading-white-gradient,
.heading-white-gradient panel-title,
.heading-white-gradient div { /* this property lifts the element above the gradient-image */
    position: relative;
}
.heading-white-gradient panel-panel-inner {
    z-index:3; /* this element already had z-index, but must match value on products-panel.heading-white-gradient::before */
}
.heading-white-gradient::before {
    content: '';
    position: absolute;
    background-image: linear-gradient(90deg,transparent,white/* ,rgba(255,255,255,0) */);
    top: 0;
    height: 60%;
    display: block;
    width: 40%; /* only need to underlay to edge of text */
    left: 0;
    right: auto;
}
products-panel.heading-white-gradient::before {
    z-index:3;
    width:35%;
    top:13%;
    height:3em;
}
page-top-heading {
    --size-and-space:var(--heading-text-size);
    font-size:var(--size-and-space);
    padding-bottom:var(--size-and-space);
    display: block;
    font-weight:bold;
}
.double-size-font {
    font-size:1.50rem;
}
page-top-panel.services-page {
    background-image:url('/assets/images/Main_Services_Dyeing.jpg');
}
page-top-panel.products-page {
    background-image:url('/assets/images/Main_Products_Wood2.jpg');
}
page-top-panel.about-page {
    color:white;
    background-position: center top;
    padding-top:0px;
    min-height: calc(min(396px,27.3vw));
}
page-top-panel.about-page .general-panel {
    position: relative;
}
.team-image-wrapper {
    margin-top:calc(var(--black-strip-height) + var(--header-height));
    display:block;
    position: relative;
	/* background-image: linear-gradient(90deg,#dededc,#aeb4b4); */
}

.team-image-wrapper .general-panel {
    position: relative;
}
.team-image-wrapper page-top-heading {
    padding-bottom:0px;
    padding-top:2%;
    /* position: absolute;
    bottom:0px;
    left:5%;
    color:#dedede; */
}
.team-image-wrapper img {
    border:1px solid black;
    display:block;
    width:calc(100% + 2px);
    clip-path:inset(1px 2px); /* trim away border */
    margin:auto;
    margin-left:-1px;
    margin-right:-1px;
}
.side-gradient {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(max(5% + 2px, 50vw - 650px)); /* 650 = 50% of max-width for general-panel */
	background-image: linear-gradient(90deg,white,#dededc);
	/* z-index: 10; */
	/* outline: 1px solid red; */
	clip-path: inset(1px 0px);
}
.side-gradient:nth-child(2) {
	background-image: linear-gradient(90deg,#aeb4b4,#999);
	left: auto;
	right: 0;
}
/* rule mods for wider side-gradient elements */
.side-gradient.wider {
    left:-2.5%;
    /* 2nd part of width needs mod/fixed for this to work */
    width:calc(max(7.5% + 1px, 50vw - 650px));
}
.side-gradient.wider:nth-child(2) {
    right:-2.5%;
}

/* PANEL - MAIN */
main-message-panel {
    /* height:60vw; */
    min-height: 55vw; /* help background image position so white area remains behind header/nav elements */
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('/assets/images/FlooringMain_background.jpg');
    background-color: #b9babe; /* provide filler for contrast until image loads */
    position:relative;
    padding-top: var(--black-strip-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.main-message-wrap {
    padding:calc( 1.5 * var(--header-height)) 0px calc( 0.5 * var(--header-height));
}
big-text-block {
    color:white;
    text-align: center;
    font-size:calc( min(58px, 4.5vw) );
    line-height: 1.1;
    text-shadow: 2px 2px black;
}
buttons-row {
    display:flex;
    justify-content: center;
    gap:20px;
    margin-top:30px;
}
.blue-button {
    color:white;
    background-color: var(--blue-text);
    border:none;
    width:200px;
    font-size:20px;
    cursor: pointer;
    padding:5px 0px;
}
.blue-button:hover {
    color:var(--blue-text);
    background-color:white;
}
@media screen and (max-width:820px) {
    .wide-font {
        font-size:calc(min(50px,5.8vw));
    }
}

@media screen and (max-width:530px) {
    .blue-button {
        font-size:16px;
    }
}

/* PANEL - ABOUT US */
.about-us-wrap {
    display:flex;
    gap:20px;
    justify-content: space-between;
    min-height:300px;
    padding:50px 0px;
}
.text-column {
    margin-right: auto;
    max-width:66%;
}
about-heading {
    line-height: 1;
    font-size:var(--heading-text-size);
    margin-bottom: 15px;
}
.text-column p {
    line-height:1.3;
    font-size:var(--body-text-size);
}
.logo-column {
    flex-basis: 30%;
    max-width: 300px;
}
.logo-column img {
    width:100%;
}
/* override auto-linked phone number style color */
.black-phone a[href^=tel]:link {
    color:black;
}
@media screen and (max-width:700px) {
    .about-us-wrap {
        /* gap:10px; */
        flex-direction: column;
    }
    .text-column {
        max-width:none;
    }
    .logo-column {
        margin:0px auto;
        flex-basis: 1;
    }
    .logo-column img {
        max-width: 50vw;
    }
}

/* PANEL - PRODUCTS */
products-panel {
    position: relative; /* give feature frame a position anchor */
}
.products-wrap {
    display:block;
    position: relative;
}
product-feature-frame {
    display:block;
    margin-left:-10%; /* -20% */
    margin-right:20%;
    position: relative; /* give child imgs their anchor */
    position:absolute;
    top:0;
    left:0;
    right:0;
}
product-feature-frame img {
    display:block;
    width:100%;
    position: relative;
    max-height:465px;
}
product-feature-frame img:not(.active) {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    opacity:0;
}
product-feature-frame img.next {
    opacity:1;
}
product-feature-frame img.active {
    z-index:2;
}
product-category-frame product-category.active product-title {
    color:var(--blue-text);
}
/* example to use: */
.shutters-enter-active { animation: 1s shutters reverse; }
.shutters-leave-active { animation: 1s slats_sw_ne forwards; }

@keyframes shutters {
    0% {
        clip-path: polygon(0% 0%, 10% 0%, 10% 100%,
10% 100%, 10% 0%, 20% 0%, 20% 100%,
20% 100%, 20% 0%, 30% 0%, 30% 100%,
30% 100%, 30% 0%, 40% 0%, 40% 100%,
40% 100%, 40% 0%, 50% 0%, 50% 100%,
50% 100%, 50% 0%, 60% 0%, 60% 100%,
60% 100%, 60% 0%, 70% 0%, 70% 100%,
70% 100%, 70% 0%, 80% 0%, 80% 100%,
80% 100%, 80% 0%, 90% 0%, 90% 100%, 
90% 100%, 90% 0%, 100% 0%, 100% 100%, 
0% 100%);
    }
    100% {
        clip-path: polygon(10% 0%, 10% 0%, 10% 100%,
20% 100%, 20% 0%, 20% 0%, 20% 100%, 
30% 100%, 30% 0%, 30% 0%, 30% 100%, 
40% 100%, 40% 0%, 40% 0%, 40% 100%, 
50% 100%, 50% 0%, 50% 0%, 50% 100%,
60% 100%, 60% 0%, 60% 0%, 60% 100%, 
70% 100%, 70% 0%, 70% 0%, 70% 100%, 
80% 100%, 80% 0%, 80% 0%, 80% 100%, 
90% 100%, 90% 0%, 90% 0%, 90% 100%, 
100% 100%, 100% 0%, 100% 0%, 100% 100%, 
10% 100%);
    }
}
@keyframes slats_sw_ne {
    0% {
        clip-path: polygon(0% 0%, 0% 0%, 10% 0%, 0% 20%,
        0% 20%, 10% 0%, 20% 0%, 0% 40%,
        0% 40%, 20% 0%, 30% 0%, 0% 60%,
        0% 60%, 30% 0%, 40% 0%, 0% 80%,
        0% 80%, 40% 0%, 50% 0%, 0% 100%,
        0% 100%, 50% 0%, 60% 0%, 10% 100%,
        10% 100%, 60% 0%, 70% 0%, 20% 100%,
        20% 100%, 70% 0%, 80% 0%, 30% 100%,
        30% 100%, 80% 0%, 90% 0%, 40% 100%,
        40% 100%, 90% 0%, 100% 0%, 50% 100%,
        50% 100%, 100% 0%, 100% 20%, 60% 100%,
        60% 100%, 100% 20%, 100% 40%, 70% 100%,
        70% 100%, 100% 40%, 100% 60%, 80% 100%,
        80% 100%, 100% 60%, 100% 80%, 90% 100%, 
        90% 100%, 100% 80%, 100% 100%, 100% 100%, 
        0% 100%);
    }
    100% {
        clip-path: polygon(0% 20%, 10% 0%, 10% 0%, 0% 20%,
        0% 40%, 20% 0%, 20% 0%, 0% 40%,
        0% 60%, 30% 0%, 30% 0%, 0% 60%,
        0% 80%, 40% 0%, 40% 0%, 0% 80%,
        0% 100%, 50% 0%, 50% 0%, 0% 100%,
        10% 100%, 60% 0%, 60% 0%, 10% 100%,
        20% 100%, 70% 0%, 70% 0%, 20% 100%, 
        30% 100%, 80% 0%, 80% 0%, 30% 100%, 
        40% 100%, 90% 0%, 90% 0%, 40% 100%, 
        50% 100%, 100% 0%, 100% 0%, 50% 100%,
        60% 100%, 100% 20%, 100% 20%, 60% 100%, 
        70% 100%, 100% 40%, 100% 40%, 70% 100%, 
        80% 100%, 100% 60%, 100% 60%, 80% 100%, 
        90% 100%, 100% 80%, 100% 80%, 90% 100%, 
        100% 100%, 100% 100%, 100% 100%, 100% 100%, 
        0% 100%);
    }
}

product-panel-inner {
    position:absolute;
    z-index: 3; /* keep this element in front of content in product-feature-frame */
    top:8%;
    bottom:8%;
    left:0px;
    right:0px;
    display:flex;
}
panel-title-column {
    display:flex;
    flex-direction: column;
    padding:20px 0px;
    flex-basis:40%;
}
.top-align {
    display:flex;
    gap:10px;
}
panel-title-column p {
    line-height: 1.2;
    font-size:2vw;
}
product-category-frame {
    background-color:white;
    display:grid;
    grid-template-columns: repeat(2, calc(50% - 5px));
    gap:0px 10px;
    padding:20px 0px 20px 15px;
    flex:1;
}
product-category {
    display:flex;
    align-items:center;
}
product-category img {
    width:64px;
    height:64px;
}
category-text {
    display:flex;
    flex-direction: column;
}
category-text product-detail-column,
category-text product-description {
    font-size:12px;
    width:auto;
    text-align:start;
}
/* was 1050px breakpoint */
@media screen and (min-width:1050.1px) {
    panel-title-column {
        justify-content: center;
    }
    products-panel.heading-white-gradient::before {
        font-size: var(--heading-text-size);
        height:1.2em;
        top:49.5%; /* align with v-centered element */
        transform:translateY(calc(var(--heading-text-size) / -2));
        width:calc(35% + 1vw);
    }
    category-text product-title {
        line-height:0.9;
        padding-bottom:3px;
    }
    .products-wrap {
        height:37.4vw; /* stabilze panel from uneven images */
        max-height: 465px;
    }
}
@media screen and (min-width:1444px) {
    products-panel.heading-white-gradient::before {
        width:calc(35% + 1vw);
    }
}
/* was 1050px breakpoint */
@media screen and (max-width:1050px) {
    panel-title-column {
        flex:1;
    }
    .products-wrap {
        height:42.3vw; /* stabilize panel from uneven images */
    }
    product-feature-frame {
        margin-left:calc(50% - 50vw);
        margin-right:calc(50% - 50vw);
    }
    product-panel-inner {
        flex-direction:column;
        bottom:0px;
    }
    product-category-frame {
        grid-template-columns: 1fr;
        flex-grow:0;
        padding:5px;
        /* shift down to show more of material slide */
        transform:translate(0px,50%);
    }
    .top-align {
        align-items:center;
    }
    product-category:not(.active) {
        display:none;
    }
}
@media screen and (max-width:700px) {
    product-category img {
        height:48px;
        width:48px;
    }
}

/* PANEL - SERVICES */
.contractors-wrap,
services-panel .general-panel {
    padding:80px 0px;
}
services-panel .general-panel {
    padding-bottom:0px;
}

.services-wrap {
    --services-flex-gap:20px;
    display:flex;
    gap:var(--services-flex-gap);
    /* padding-bottom:20px; */
    flex-wrap:wrap;
    justify-content: center;
}
service-panel-column {
    display:flex;
    gap:var(--services-flex-gap);
    flex-wrap:wrap;
    justify-content: center;
    flex:1;
    min-width:500px;
    max-width:650px; /* = general-panel max-width / 2 */
}
/* service-panel-column:last-child {
    margin-bottom:20px;
} */

@media screen and (max-width:575px) {
    service-panel-column {
        min-width:auto;
        max-width: 320px;
    }
    service-panel-item {
        min-width:250px;
        max-width: 350px;
    }
}

service-panel-item {
    flex:1;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
panel-title {
    font-size:var(--heading-text-size);
}
services-panel panel-title {
    margin-bottom:25px;
}
@media screen and (max-width:820px) {
    panel-title:not(.with-toggle) {
        text-align:center;
    }
    /* explode font size on specific headings on home page within narrow view */
    panel-title, /* only on homepage */
    products-panel.heading-white-gradient { /* only on homepage */
        --heading-text-size:calc(max(20px,min(5.5vw, 52px)));
    }
    products-panel.heading-white-gradient::before {
        font-size: var(--heading-text-size);
        height:1.2em;
        top:17%;
        width:73%;
    }
}
@media screen and (max-width:700px) {
    /* explode font size on specific headings on home page within narrow view */
    about-heading { /* only on homepage */
        --heading-text-size:calc(max(20px,min(5.5vw, 52px)));
    }
    products-panel.heading-white-gradient::before {
        top:16vw; /* need scaling factor: -5.56px V / 250px H */
        display:none;
    }
    products-panel.heading-white-gradient panel-title {
        text-shadow:1px 1px white,-1px 1px white,-1px -1px white,1px -1px white;
    }
}
service-panel-item img {
    width:200%;
    transform:translate(-25%,0px);
}
service-panel-item:hover service-column-frame {
    background-color: rgba(0,0,0,0.5);
}
service-column-frame {
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    transition: background-color 250ms ease;
}
service-column-frame div {
    border:1px solid white;
    position: absolute;
    top:5%;
    bottom:5%;
    left:2%;
    right:2%;
    top:2%;
    bottom:2%;
}
service-column-frame img {
    width:100%;
    height:100%;
}
service-column-text {
    color:white;
    position: absolute;
    top: 0;
    left:0;
    height:100%;
    width: 100%;
    font-weight: bold;
    font-size:18px;
}
service-panel-item service-title, 
service-panel-item service-blurb {
    display: flex;
    align-items: center;
    justify-content: center;
}
service-panel-item:hover service-title {
    height:75%; /* position for appearent vertical centeredness */
}
service-panel-item:hover service-blurb {
    top:25%; /* position for appearent vertical centeredness */
    opacity:1;
}
service-panel-item service-title {
    position: absolute;
    top:0px;
    height:100%;
    width: 100%;
    font-size:150%;
    text-align: center;
    transition:height 250ms;
}
service-blurb {
    /* font-size:85%; */
    text-align: center;
    line-height: 1.2;
    pointer-events: none;
    position: absolute;
    width: 100%;
    padding:0px 5%;
    top:50%;
    bottom:0px;
    opacity: 0;
    overflow: hidden;
    transition: top 250ms, opacity 250ms;
}

/* PAGE - PRODUCTS/SERVICES/ABOUT */
product-page-panel,
service-page-panel,
about-page-panel {
    display:block;
    margin:50px 0px;
}
product-page-panel:not(.no-min-height),
service-page-panel:not(.no-min-height),
about-page-panel:not(.no-min-height) {
    min-height:calc(min(391px,26vw));
}
product-page-panel .general-panel,
service-page-panel .general-panel {
    display: flex;
}
product-feature-image,
product-detail-column,
service-feature-image,
service-detail-column {
    flex-basis:50%;
}

product-feature-image,
service-feature-image {
    /* margin:0px -55px 0 -55px; */
    flex-basis: 60%;
}
product-feature-image img,
service-feature-image img {
    width: 100%;
    height: 100%;
    aspect-ratio: 2;
}
product-detail-column,
service-detail-column {
    position:relative;
}
product-logo-title img,
service-logo-title img {
    height:calc(max(36px,min(5vw,87px)));
}
/* this effect was not satisfactory, must use true white font/imgs */
/* product-logo-title img,
product-logo-title product-title,
service-logo-title img,
service-logo-title service-title {
    filter:invert(100%);
} */
product-logo-title product-title,
service-logo-title service-title {
    font-size:var(--heading-text-size);
    font-weight: bold;
    color:white;
}
product-logo-title,
service-logo-title {
	display: flex;
	/* background-image: linear-gradient(90deg,rgba(0,0,0,0.75),white); */
	background-image: linear-gradient(90deg,var(--blue-text),white);
    padding:10px;
    gap:15px;
    margin-top:10px;
    align-items:center;
}
@media screen and (max-width:768px) {
    product-page-panel .general-panel,
    service-page-panel .general-panel {
        flex-direction: column;
    }
}
@media screen and (min-width:769px) {
    product-feature-image .image-wrapper,
    service-feature-image .image-wrapper {
        margin-left:calc(max(-5.2vw,-73px));
    }
    product-logo-title,
    service-logo-title {
        margin-left:calc(max(-6.4vw,-107px)); /* -7.9 */
    }
    product-page-panel:nth-of-type(2n) product-feature-image,
    product-page-panel:nth-of-type(2n) product-logo-title,
    product-page-panel:nth-of-type(2n) product-logo-title img,
    service-page-panel:nth-of-type(2n) service-feature-image,
    service-page-panel:nth-of-type(2n) service-logo-title,
    service-page-panel:nth-of-type(2n) service-logo-title img {
        order:2;
    }
    product-page-panel:nth-of-type(2n) product-feature-image .image-wrapper,
    service-page-panel:nth-of-type(2n) service-feature-image .image-wrapper {
        margin-left:auto;
        margin-right:calc(max(-5.2vw,-65px));
    }
    product-page-panel:nth-of-type(2n) product-logo-title,
    service-page-panel:nth-of-type(2n) service-logo-title {
        /* background-image: linear-gradient(90deg, white, rgba(0,0,0,0.75)); */
        background-image: linear-gradient(90deg, white, var(--blue-text));
        justify-content: end;
        margin-left:auto;
        margin-right:calc(max(-6.4vw,-107px)); /* -7.9 */
    }
}
product-page-panel product-description,
product-page-panel request-quote-link,
service-page-panel service-description,
service-page-panel request-quote-link {
    display:block;
    padding:10px;
}
product-page-panel product-description,
service-page-panel service-description {
    font-size:18px;
}
request-quote-link {
    color:var(--blue-text);
    font-size:150%;
    cursor: pointer;
}

@media only screen and (max-width:575px) {
    .products-page .heading-white-gradient:before,
    .services-page .heading-white-gradient:before {
        display:none;
    }
}

/* PAGE - ABOUT US */
team-row {
    gap:5vw;
    display:flex;
    margin-top:30px;
    justify-content: center;
}
team-member {
    flex-basis: calc(33% - 30px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:5px;
}
team-row img {
    width:100%;
    display:block;
    outline:1px solid black;
}
@media only screen and (max-width:900px) {
    team-row {
        flex-direction: column;
    }
    team-row img {
        width:auto;
        max-width:90%;
    }
}

#team_about_panel {
    padding:50px 0px;
    background-color:#DDD;
    margin-bottom:0px;
}
#company_about_panel p {
    font-size: var(--body-text-size);
}
member-name,
member-title {
    font-size:var(--body-text-size);
    line-height:1.2;
}
member-name {
    font-weight: bold;
    font-size:var(--larger-body-text-size);
}
name-title {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* PANEL - CONTRACTORS */
panel-title.with-toggle {
    position:relative;
}
.contractor-logo-view-toggle {
    position: absolute;
    top:50%;
    right:0px;
    transform: translate(0%,-50%);
    padding:2px;
    cursor: pointer;
    line-height: 1;
}
.contractor-logo-view-toggle.slider slider-view,
.contractor-logo-view-toggle.grid grid-view {
    display:none;
}
horizontal-slide-wrapper {
    position: relative;
    display:block;
    /* padding:calc( min(2.3vw, 30px) ) 0px; */
    touch-action:pan-x pan-y;
}
horizontal-slide-wrapper.show-all {
    margin-top:15px;
}
horizontal-slide-wrapper:not(.show-all) {
    overflow: hidden;
    height:calc( min(16vw, 208px) );
}
horizontal-slide-wrapper.capturing {
    outline:2px solid lightgreen;
}
horizontal-slide-wrapper.debug::after {
    content: attr(data-mouse-pos);
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translate(0%,-50%);
    padding: 2px;
    background: black;
    color: orange;
}

horizontal-slide {
    top:calc( min(2.3vw, 30px) );
    bottom:calc( min(2.3vw, 30px) );
    left:0px;
}
horizontal-slide-wrapper:not(.show-all) horizontal-slide {
    position: absolute;
    white-space: nowrap;
}
horizontal-slide-wrapper.show-all horizontal-slide {
    /* display:flex; */
    /* flex-wrap:wrap; */
    /* justify-content: space-between; */
    gap:40px;
    display:grid;
    grid-template-columns: repeat(4,1fr);
}
horizontal-slide img {
    max-height:100%;
    pointer-events: none;
}
horizontal-slide img.linked-slide {
    cursor: pointer;
    pointer-events: auto;
}
horizontal-slide-wrapper.show-all horizontal-slide img {
    /* min(11.6vw, 148px) */
    /* max-height:min(11.6vw, 95px); */
    width: 100%;
    height:auto;
    align-self: center;
}

horizontal-slide-wrapper:not(.show-all) horizontal-slide img:not(:last-child) {
    margin-right:80px;
}
@media only screen and (max-width:820px) {
    horizontal-slide-wrapper.show-all horizontal-slide {
        grid-template-columns: repeat(3,1fr);
    }
}
@media only screen and (max-width:575px) {
    horizontal-slide-wrapper.show-all horizontal-slide {
        grid-template-columns: repeat(2,1fr);
        gap:20px;
    }
    horizontal-slide-wrapper:not(.show-all) horizontal-slide img:not(:last-child) {
        margin-right:50px;
    }
}
#contractor_external {
    overflow: hidden;
    display:inline-block;
    height:0px;
    width:0px;
}
#contractor_external:link,
#contractor_external:visited,
#contractor_external:hover,
#contractor_external:active {
    text-decoration: none;
    color:transparent;
}
#pointer_capture_log {
    overflow:hidden;
    max-height:4em;
    padding:2px;
    font:12px/12px sans-serif;
    background-color:white;
    color:black;
    position:absolute;
    bottom:0px;
    right:0px;
    display:flex;
    align-items: end; /* keep last entry in view */
}

/* PANEL - REQUEST QUOTE + form */
request-quote-panel {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url('/assets/images/form_panel_background.png');
    position:relative;
}
/* overlay to darken background image a degree */
request-quote-panel::before {
    content:'';
    background-color:rgba(0,0,0,0.1);
    position: absolute;
    width: 100%;
    height: 100%;
}
request-quote-panel .general-panel {
    display:flex;
    gap:75px;
    padding:20px 0px;
    position: relative; /* needed to raise container above the pseudo element  on the parent */
}
/* override auto-linked phone number style color */
request-quote-panel a[href^=tel]:link {
    color:white;
}
request-quote-panel.success quote-panel-column,
request-quote-panel.success .quote-form,
request-quote-panel:not(.success) quote-success {
    display:none;
}
request-quote-panel.success quote-success {
    display:block;
}
quote-success button {
    cursor: pointer;
}
quote-panel-heading {
    font-size:var(--heading-text-size);
    /* color:var(--blue-text); */
    color:white;
}
quote-panel-heading::after {
	content: '';
	display: inline-block;
	border: 10px solid transparent;
	/* border-left-color: blue; */
	border-left-color: white;
	margin-left: 10px;
}
quote-success quote-panel-heading::after {
    display:none;
}
quote-success p,
quote-panel-column p {
    /* line-height: 1.2; */
    font-size: var(--body-text-size);
    color:white;
}

.quote-form {
    flex-shrink: 0;
    width:37%;
}
@media screen and (max-width:800px) {
    request-quote-panel .general-panel {
        flex-direction: column;
    }
    .quote-form {
        min-width:100%;
    }
}
quote-panel-form {
    /* background-color:rgba(255,255,255,0.7); */
    background-color:#EEE;
    position:relative; /* necessary to make background appear */
    /* border-radius:10px; */
    display:flex;
    flex-direction: column;
    padding:15px;
    gap:15px;
}
quote-panel-form input-wrapper {
    border:1px solid #404040;
    background-color: #EEE;
    /* border-radius:10px; */
    padding:5px;
    display:flex;
    position:relative;
}
quote-panel-form input-wrapper.required label::after {
    content:' *';
    color:red;
    margin-right:5px;
}
quote-panel-form input-wrapper label {
    position:absolute;
    height:100%;
    left:10px;
}
quote-panel-form input-wrapper:focus-within label {
    display:none;
}
quote-panel-form input,
quote-panel-form select,
quote-panel-form textarea {
    border:none;
    color:#404040;
    background-color:transparent;
    width:100%;
}
quote-panel-form input:focus::placeholder,
quote-panel-form textarea:focus::placeholder {
    opacity:0;
}
quote-panel-form input-wrapper input:valid /* + label */ {
    /* display:none; */
    background-color:#EEE;
}
quote-panel-form input-wrapper input {
    position: relative;
    z-index:1;
}
phone-number-block {
    display:flex;
    justify-content: space-between;
}
phone-number-block input-wrapper {
    width:20%;
}
phone-number-block input-wrapper.required {
    width:70%;
}

.quote-submit-button {
    border:none;
    background-color:var(--blue-text);
    color:white;
    width:50%;
    /* margin:0px auto; */
    padding:4px 0px;
    font-size:20px;
}

submit-button-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:10px;
}
red-text {
    font-size: 70%;
    color:var(--red-text);
}

.submit_result {
    color:black;
}
.submit_result:not(.show) {
    display:none;
}
.g-recaptcha > div {
    display:none; /* hide bottom corner 'bug' icon */
}

/* back to top appears only after page scrolls down slightly */
#go_to_top {
    display: none;
    position: fixed;
    bottom: 3em;
    right:1.5em;
    z-index:200;
    height:auto;
    width: 50px;
}
#go_to_top.show {
    display: block;
}

/* FOOTER */
page-footer {
    background-color:white;
    color:black;
    padding:40px 0px;
    /* footer content grid */
    grid-template-columns: 20% auto 5%;
    display:grid;
}
footer-column {
    font-size:calc(max(17px, min( 2.2vw, 28.6px ) ) );
    text-align:center;
}
.footer-logo {
    border-bottom:2px solid black;
    padding-bottom: 10px;
}
.footer-logo img,
.facebook-logo img {
    width:100%;
}
.footer-phone {
    font-size:127%;
}
/* override auto-linked phone number style color */
.footer-phone a[href^=tel]:link {
    color:black;
    text-decoration: none !important;
}
.footer-small-text {
    font-size:37%;
}
.footer-small-text br {
    display:none; /* only break line in narrow render */
}
.links-and-logos {
    display:flex;
    gap:20px;
    flex-direction:column;
    align-items:start;
    justify-content: space-between;
}
footer-column.center-column {
    display:flex;
    justify-content: center;
}
footer-links {
    --nav-term-hover-color:var(--blue-text);
    font-size:80%;
    padding-top:calc(min(11px,0.87vw));
}
footer-links a {
    text-decoration: none;
    color:black;
    margin:0px 0.5em;
}
footer-links a.active-page,
footer-links a:hover {
    color:var(--nav-term-hover-color);
}
footer-links a:first-child {
    margin-left:0px;
}
footer-logos {
    display:flex;
    gap:calc(min(70px,5vw));
    /* margin-left:calc(max(-65px,-5vw)); */
}
footer-logos img {
    height:6.5vw;
    margin:auto;
}

@media screen and (max-width:1050px) {
    footer-links {
        --nav-term-hover-color:white;
    }
}

@media screen and (max-width:768px) {
    page-footer {
        grid-template-columns: 1fr;
        gap:10px;
    }
    .footer-logo {
        width:100%;
    }
    .facebook-logo {
        max-width:50px;
        grid-row:2;
        margin:auto;
    }
    footer-column:nth-child(1) {
        margin:auto;
        width:35%;
        font-size:150%;
    }
    .footer-phone {
        font-size:calc(max(16px, 4.7vw) );
    }
    .footer-small-text br {
        display:block;
    }
    footer-column:nth-child(2) {
        grid-row:3;
        /* grid-column: span 2; */
        margin:auto;
    }
    footer-links {
        font-size:calc(max(14px, 2.6vw) );
        padding-top:0px;
    }
    footer-links a {
        margin:0px 0.25em;
    }
    footer-logos {
        margin-left:0px;
    }
    footer-logos img {
        height:12vw;
    }
}