/* tlf.css */

:root {
    --blue-header-bg:#133691;
    --green-nav-text:#449900;
    --light-green-nav-bg:#f6fff6;
    /* --green-nav-hover: (opacity:0.7) */
    --heading-gray-text:#666666;
    --heading-blue-text:#2b1aad;
    --heading-blue-lines:#2ea3f2;
    --footer-link-text:#9cbf4b;
    
    /* body part dimensions */
    --blue-strip-height:54px;
    --header-height:80px;
    --total-header-height:calc(var(--blue-strip-height)  + var(--header-height));
    --header-transition-time:250ms;
    --img-fade-transition-time:250ms;

    /* fonts */
    --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) ) );
}

.outline-elements,
.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;
}

body .hide {
    display:none !important;
}
/* 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" */

input {
    -webkit-appearance: none;
    appearance: none;
}
embed, iframe, object, video {
	max-width: 100%;
}

/* custom tags that should render as block elements */
left-column, right-column,contact-row,
page-header-wrapper,page-top-blue-strip,page-header,
address-row,address-block,location-name,address-detail,map-link,
footer-columns {
    display: block;
}

.general-container {
    position:relative;
    width:80%;
    max-width:1080px;
    margin:auto;
}

/* --- H E A D E R --- */
page-header-wrapper {
    position: relative;
    z-index:1000;
    height:calc(var(--blue-strip-height) + var(--header-height));
}
page-header-wrapper + first-page-element {
    display:block;
    position: relative;
}
page-top-blue-strip {
    top:0px;
    left:0px;
    width:100%;
    height: var(--blue-strip-height);
    background-color: var(--blue-header-bg);
    color:white;
    font-weight: 600;
    display: flex;
    align-items:center;
}
/* logo and nav elements */
page-header  {
    width:100%;
    left:0px;
    top:var(--blue-strip-height);
    height:var(--header-height);
    /* background-color:white; */
    background-color:var(--light-green-nav-bg);
    box-shadow: 0 1px 0 rgba(0,0,0,.1);
    transition: height var(--header-transition-time) linear;
}
.header-logo-nav {
    display:flex;
    align-items: center;
    height:100%;
}
.header-logo-nav > a {
    display:block;
    height:80%;
}
.header-logo {
    height:100%;
    width: auto;
}
nav {
    margin-left:auto;
    font-size:18px;
}
nav nav-item {
    cursor:pointer;
    position:relative;
}

page-top-blue-strip .general-container {
    text-align:end;
}

@media only screen and (min-width:800.1px) {
    page-top-blue-strip,
    page-header {
        position:fixed; /* allow headers to scroll up the page */
    }
    .shrink-nav page-header.scrolled {
        --header-height:55px;
    }

    /* nav > nav-item > a,
    nav > nav-item > span > a {
        padding-bottom:30px;
        transition: padding var(--header-transition-time) linear;
    } */
    nav > nav-item:not(:last-of-type) a {
        padding-right:var(--nav-right-padding,15px);
        /* 800px need padding-right:10px;
        1350px need padding-right: 65px;
        How to do this with calc() in CSS?
        padding-right: max(10px,min(calc(10px + 0.2 * (1.25vw - 800px)),65px));
        padding-right: calc((100vw - 800px) / 550 * 3.56) */
    }
    .shrink-nav page-header.scrolled nav > nav-item > a,
    .shrink-nav page-header.scrolled nav > nav-item > span > a {
        padding-bottom:15px;
    }
}
@media only screen and (max-width:800px) {
    page-top-blue-strip .general-container {
        text-align:center;
    }
    :root {
        --header-height:65px;
    }
}

page-top-blue-strip {
    font-size:18px;
}

nav-item:hover > span,
nav-item:hover > a:link,
nav-item:hover > a:visited,
nav-item:hover > a:hover,
nav-item:hover > a:active,
nav-item.active,
nav-item > span.active {
    color:var(--green-nav-text);
}

nav-item.has-subnav.show-subnav subnav-item,
nav-item.has-subnav:hover subnav-item {
    display:block;
}
subnav-item {
    display:block;
    width:100%;
    min-width:200px;
    z-index:1;
    background-color:white;
    border-top:2px solid var(--green-nav-text);
    box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
    transition: top var(--header-transition-time) linear;

    /* hold default font size for dropdown nav items */
    font-size:var(--bs-body-font-size);
}
/* --- WIDTH > 800px --- */
@media only screen and (min-width:800.1px) {
    subnav-item {
        width:auto;
        display:none;
        position:absolute;
        top:51px;
        left:50%;
        translate:-50%;
    }
    nav > .has-subnav > subnav-item::before {
        content:'';
        position: absolute;
        width:100%;
        height:30px;
        top:-30px;
    }

    .shrink-nav page-header.scrolled subnav-item {
        top:36px;
    }
    subnav-item nav-item {
        /* padding:10px 20px; */
        display:block;
    }
    nav-item.has-subnav > span > a ::after {
        content:'>';
        transform-origin: center center;
        transform:rotate(90deg);
        margin-left: 5px;
        display: inline-block; /* needed to allow transform-rotate to work */
    }
}
subnav-item nav-item a {
    padding:10px 20px;
}

/* only apply subnav alt color in desktop view */
@media only screen and (min-width:800.1px) {
    subnav-item nav-item a:link,
    subnav-item nav-item a:visited,
    /* don't re-declare hover for green */
    subnav-item nav-item a:active {
        color:var(--heading-blue-text);
    }
}

nav-item a {
    text-decoration: none;
    color:inherit;
    display:inline-block; /* so padding is respected */
}
.phone-icon,
.email-icon {
    color:white; /* override a-tag css from BS */
    position:relative;
    top:-2px; /* fix position since vertical-align:middle doesn't actually center the elements */
}
.email-icon {
    margin-left:10px;
}

/* simulate phone ringing by shimmy of handset icon */
.phone-icon svg {
    animation:ringing 5s linear infinite;
    fill:var(--green-nav-text);
}
@keyframes ringing {
    0%, 20% {
        rotate:0deg;
    }
    2%,10%,18% {
        rotate:-10deg;
    }
    6%,14% {
        rotate:10deg;
    }
}

.nav-burger {
    --burger-border-color:var(--heading-blue-lines); /* black; */
    display: none;
    position: relative;
    margin-left:auto;
    /* suppress button properties */
    border:none;
    background-color: transparent;
    padding:0px; /* cancel inherent padding of button element */
}
.nav-burger svg {
    fill: var(--heading-blue-lines);
    fill-opacity: 0; /* turn off SVG visibility */
    visibility: hidden; /* also hide it this way */
    pointer-events: none; /* no clicks! */
}
.nav-burger i.third-burger-line,
.nav-burger::before,
.nav-burger::after {
	content: '';
	border-top: 3px solid var(--burger-border-color);
	width: calc(min(25px,80%));
	top: 20%;
    left:0px;
	position: absolute;
	/* translate: 0px 10px; */
    transition: 400ms ease;
}
.nav-burger::after {
    top:auto;
	bottom: 20%;
}
.nav-burger i.third-burger-line {
    top: 45%;
}
.nav-burger[aria-expanded="true"]::before {
    rotate:225deg;
    translate:0px 10px;
}
.nav-burger[aria-expanded="true"]::after {
    rotate:-225deg;
    translate:0px -6px; /* this helps both lines intersect evenly */
}
.nav-burger[aria-expanded="true"] i.third-burger-line {
    opacity:0;
}

/* --- ACTIVATE NAV-BURGER at/under 800px */
@media only screen and (max-width:800px) {
    .nav-burger,
    nav > nav-item {
        display: block;
    }
/*     nav {
        display: none;
        position: absolute;
        top:100%;
        width:100%;
        padding:15px 0px;
        background-color:white;
        border-top:2px solid var(--heading-blue-lines);
        box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
    } */
    nav {
        position: fixed;
        top:var(--total-header-height);
        left:-200px;
        bottom:0px;
        overflow:auto;
        width:0%;
        padding:15px 0px;
        background-color:white;
        border-top:2px solid var(--heading-blue-lines);
        box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
        -webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.1);
        transition:left 250ms ease-in-out, width 250ms ease-in-out;
    }
    .nav-burger[aria-expanded="true"] + nav {
        left:0px;
        width:100%;
    }
    html.no-scroll,
    body.no-scroll {
        overflow-y:hidden !important;
    }
    body.no-scroll page-header,
    body.no-scroll page-top-blue-strip {
        position:fixed; /* lock the header-elements in place, other page content can scroll still, whatever! */
    }
    nav subnav-item {
        display:block;
        position:relative;
        width:100%;
        top:0px;
        left:0px;
        translate: 0px 0px;
        border-top:none;
        /* padding-left:20px; */
        box-shadow: none;
        -webkit-box-shadow:none;
    }

    /* use aria toggle to control nav visibility */
    .nav-burger[aria-expanded="true"] + nav,
    .nav-burger[aria-expanded="true"] + nav subnav-item {
        display:block;
    }
    nav > nav-item > a,
    nav > nav-item > span > a,
    subnav-item nav-item a {
        padding:5px 25px;
        display:block;
    }
}

/* --- F O O T E R --- */
footer {
    position: relative;
}
.parallax-background {
    /* background-attachment: fixed; */
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    height:100%;
    display: block;
}
footer .parallax-background {
    background-image:url('/assets/images/f_bg_lite.jpg');
}
.parallax-background::after {
	content: '';
	position: absolute;
	inset: 0;
	background-color: black;
	opacity: 0.6;
}
.back-to-top {
    padding-top:20px;
    text-align: center;
}

footer-columns {
    /* margin-top:30px; */
    padding:2% 0px;
    display:flex;
    gap:20px;
    color:white;
}
footer-columns > right-column {
    margin-left:auto;
    flex-basis: 66%;
}
@media only screen and (max-width:800px) {
    footer-columns left-column {
        display:none;
    }
}
ul.no-padding {
    padding-left:0px;
    list-style-type: none;
}
footer a {
    color:var(--footer-link-text);
    text-decoration: none;
}
.footer-phone {
    font-size:26px;
    line-height: 1;
    margin-bottom:20px;
}
address-row {
    display:flex;
    flex-wrap: wrap;
}
location-name {
    color:var(--footer-link-text);
    text-decoration: underline;
    font-size:20px;
}
address-detail {
    font-size:17.333px;
}
address-block {
    flex:1;
}
/* header + footer */
.general-container a[href^=tel]:link {
    color:var(--footer-link-text);
    text-decoration: none !important;
}
address-block a[href^=tel]:link {
    color:white;
    text-decoration: none !important;
}
.green-text {
    color:var(--footer-link-text);
}
@media only screen and (max-width:800px) {
    footer-columns {
        flex-direction: column;
    }
    footer-columns > right-column {
        margin-left:0px;
    }
    address-block {
        min-width: 275px;
    }
}

/* --- C O N T A C T   F O R M --- */
.contact-form-wrapper {
    padding:4% 0px;
    background-color:#f7f7f7; /* make this section distinct from remainder of the page */
}
.contact-form-block.submitted,
.contact-form-block:not(.submitted) + .contact-submit-result {
    display: none;
}
.form_row {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
contact-form-column {
    flex-basis:47.5%;
    min-width: 300px;
}
@media only screen and (max-width:800px) {
    contact-form-column {
        flex-basis: 100%;
    }
}
.blue-heading {
    line-height: 1;
    text-align: center;
    color:var(--heading-blue-text);
    font-size:32px;
}
p.form-submit-result {
    font-size:18.667px;
}
/* hide placeholder when user clicks in input */
.contact-form-wrapper input:focus::placeholder {
    opacity:0;
}
.caption-wrapper,
.input-wrapper {
    padding-bottom: 1em;
}
.input-wrapper select,
.input-wrapper textarea,
.input-wrapper input {
    padding: 16px;
    font-size:14px;
    width:100%;
    background-color:white;
    color:gray;
    border: 1px solid #bbb;
}
.input-wrapper input.bad_value {
    border-color:#b44;
    background-color: pink;
}
buttons-row {
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.submit_btn {
    background-color:var(--heading-blue-text);
    font-size:20px;
    color:white;
    border:8px solid var(--heading-blue-text);
    border-radius:3px;
    padding:0.65em 1em;
    margin:0px auto;
    cursor:pointer;
}
.submit_btn[disabled] {
    background-color:var(--bs-gray);
    border-color:var(--bs-gray);
}
.submit_btn:not([disabled]):hover {
    background-color:var(--heading-blue-lines);
    border-color: var(--heading-blue-lines);
}
.g-recaptcha > div {
    display:none; /* hide bottom corner 'bug' icon */
}
.submit_result {
    padding:5px 0px;
    text-align: center;
}
.submit_result:not(.show) {
    display:none;
}

form-error {
    display:block;
    background-color: white;
    color:red;
    border:1px solid red;
    text-align: center;
    padding:5px;
    border-radius: 15px;
    position: absolute;
    width:210px;
    bottom:80px;
    left:50%;
    translate: -50%;
    z-index: 10;
}
form-error::after {
    content:'';
    left:calc(50% - 6px);
    border:6px solid transparent;
    border-top-color:inherit;
    position: absolute;
    bottom: -12px;
}
form-error:not(.show) {
    display:none;
}
i.form-alert-icon {
    display:block;
}

/* --- PAGE: HOME --- */
slider-element,
area-practice-column,
panel-headline,
meet-the-team {
    display: block;
    position: relative;
}

.slider-panel {
    position: relative;
    height:40.667vw;  /* taller than needed? */
    height:30.8vw;
    background-color: black;
}
slider-element {
    background-color: black;
    overflow: hidden;
}
slider-panel {
    display: flex;
    overflow: hidden;
}
slider-panel:not(.active) {
    display:none;
}
slider-left-side,
slider-right-side {
    flex-basis: 50%;
    position: relative;
    transform:translate(-100%);
    transition:transform 250ms linear;
}
slider-right-side {
    transform:translate(100%);
}
/* hide until shown */
.slider-side > img,
.slider-side text-block {
    opacity:0;
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
}
/* first images are visible */
.slider-side > img:first-of-type {
    opacity:1;
    position: relative;
}
.slider-side > img {
    height:auto;
}
.slider-side text-block {
    display: flex;
    gap:7.5%;
    flex-direction: column;
    justify-content: center;
    color:white;
    padding-left:15px;
    line-height:1.2;
    font-size: 1.3vw;
}
text-block p {
    margin-bottom:0px;
}
text-block .indent {
    padding-left:4%;
    position: relative;
}
text-block .headline {
    font-size:215%;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
.anchor-button,
text-block .small-sig-line {
    font-size:75%;
}
text-block .quotes:first-of-type {
    position:absolute;
    left:-0.5%;
}
/* the 2nd img.quotes was commented */
.not text-block .quotes:last-of-type {
	position: relative;
	top:-3px;
}
.small-sig-line {
    padding-right:8%;
    text-align: end;
}
.anchor-button {
    padding:0.75% 2%;
    text-decoration: none;
    border:1px solid white;
    border-radius: 6px;
}
.anchor-button:link,
.anchor-button:visited,
.anchor-button:active {
    color:white;
}
.anchor-button:hover {
    color:black;
    background-color:white;
}
.active.fade-out {
    transition:opacity 500ms ease-in-out;
    opacity:0;
}
.slide-in {
    transform:translate(0px);
}
.slider-side > img.show,
.slider-side text-block.show {
    transition: opacity 250ms linear;
    opacity:1;
}

/* special overlay of slider to announce new office location */
#moving_notice_section {
    z-index: 100;
    padding:12% 0px;
    position: absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    font-family: "Cambria",serif;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background-color: black;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('/assets/images/tlaw_movenoticeBG-01.jpg');
}

.white-moving-notice {
    color:white;
    font-size:3.5em;
    text-align:center;
}
.button_link {
    border: none;
    font-size:1rem;
    line-height: 1;
    background:transparent;
    color:white;
    text-decoration: underline;
}

panel-headline {
    font-size:27px;
    font-weight:bold;
    text-align: center;
    color:var(--heading-blue-text);
}
hr.single-rule {
    display:block;
    height:1px;
    border:0px;
    border-top:1px solid #eee;
    margin:1em;
    padding:0px;
}

.aop-columns {
    display:flex;
    flex-wrap:wrap;
}
area-practice-column {
    display:flex;
    flex-direction: column;
    gap:10px;
    flex-basis: 22.5%;
    margin-right:auto;
    margin-bottom:4%;
}
area-practice-column:nth-of-type(4n) {
    margin-right:0px;
}
area-practice-heading {
    text-align: center;
    line-height: 1;
}
#aop_viewall_btn,
area-practice-heading a {
    color:var(--footer-link-text);
    font-size:22px;
}
area-practice-column a {
    width:100%;
    text-decoration: none;
}

area-practice-column a img {
    width:100%;
    height:auto;
}
#aop_viewall_btn {
    width:100%;
    height:100%;
    padding:24% 0;
    text-align:center;
    color:#d3d3d3;
    border:2px solid #e0e0e0;
    background-color: white;
    border-radius: 3px;
    transition: all 300ms;
}
#aop_viewall_btn span {
    position:absolute;
    opacity:0;
    margin-left:5px;
}
#aop_viewall_btn:hover {
    background-color:#d3d3d3;
    color:white;
}
#aop_viewall_btn:hover span {
    opacity:1;
}

@media only screen and (min-width:800.1px) {
    /* only mb-auto when desktop view */
    .aop-columns + .aop-columns area-practice-column:nth-of-type(3) {
        margin-bottom:auto;
    }
}

@media only screen and (max-width:800px) {
    area-practice-column {
        flex-basis:45%;
    }
    area-practice-column:nth-of-type(2n) {
        margin-right:0px;
    }
    .aop-columns + .aop-columns area-practice-column:nth-of-type(3) {
        flex-basis: 100%;
        display:block;
    }
    .aop-columns + .aop-columns area-practice-column:last-of-type {
        display: none;
    }
    /* run full width of row */

    #aop_viewall_btn {
        padding:0px;
        display:block;
    }
}
@media only screen and (max-width:615px) {
    area-practice-column {
        margin-right:0px;
        flex-basis:100%;
        margin-bottom:max(22px,6%);
    }
}

.testimonials {
    position:relative;
    background-color:rgba(129,215,66,0.07);
    padding:30px;
}
.not .testimonials::before {
    content:'\201D';
    font:64px sans-serif;
    position:absolute;
    left:50%;
    top:0px;
    transform:translate(-50%,-50%);
    line-height: 1;
    background-color:#f5f5f5;
    border-radius: 50%;
    border:2px solid #666666;
    z-index: 2;
    width:0.5em;
    height:0.5em;
    text-align:center;
}
.testimonials > .quoted {
    font-size:17px;
}

.member-columns {
    display: flex;
}
.team-member {
    flex-basis:30%;
    display: flex;
    flex-direction: column;
    gap:10px;
    margin-bottom:5%;
}
.team-member:not(:last-of-type) {
    margin-right:auto;
}
member-name-title,
member-bio-link {
    text-align: center;
}
member-bio-link a {
    /* color:var(--footer-link-text); */
    color:var(--green-nav-text);
    text-decoration: none;
    font-size:14px;
}

@media only screen and (max-width:980px) {
    .member-columns {
        flex-direction:column;
    }
    .team-member, .team-member .profile-image {
        margin-right:0px !important;
        text-align: center;
    }
    .team-member .profile-image img {
        width:auto;
        max-width:100%;
        margin:0px auto;
    }
    .team-member {
        margin-top: 1.5em;
    }
    .member-columns:first-of-type .team-member:first-of-type {
        margin-top:0px;
    }
}

@media only screen and (min-width:980.1px) {
    .member-columns.wrap-these {
        flex-wrap:wrap;
    }
    .member-columns.wrap-these .team-member:nth-of-type(3) {
        margin-right:0px;
    }
}

/* --- PAGE: FAQ --- */
ul,ol {
    padding-left:1rem;
}

/* --- PAGE:AREAS OF PRACTICE (what we do) --- */
.aop-panel {
    display: flex;
}
.aop-image {
    flex-grow:0;
    flex-basis: 31%;
    margin-right:auto;
}
.aop-image img {
    width:100%;
    height:auto;
    transition:all var(--img-fade-transition-time) linear;
}
.aop-image.faded img {
    opacity:0;
}
.aop-panel .aop-image.faded img {
    transform:translate(-25%);
}
.aop-text {
    flex-basis:64.5%;
}
aop-title {
    display: block;
}
aop-title h3 {
    font-size:22px;
    line-height: 1;
    margin-bottom:0px;
}
aop-text a.green-link {
    font-size:14px;
}

@media only screen and (max-width:800px) {
    .aop-panel {
        flex-direction:column;
        margin-top:15%;
    }
    .aop-image {
        margin-bottom:1.5em;
    }
}

/* --- PAGE: FIRM PROFILE --- */
.member-profile {
    display:flex;
}
.profile-image {
    flex-grow: 0;
    flex-basis: 31%;
    margin-right:auto; /* works to not need gap in parent container */
}
.profile-image img {
    width:100%;
    height:auto; /* maintain image proportion */
    transition: all var(--img-fade-transition-time) linear;
}
.profile-image.faded img {
    opacity:0;
}
/* apply img transform only on profile page */
.member-profile .profile-image.faded img {
    transform:translate(-25%);
}
.profile-bio {
    flex-basis:64.5%;
}
.profile-bio > span[id*="_bio"] {
    position: relative;
    top:calc(-1 * var(--total-header-height));
}
member-name,
member-title {
    display: block;
}
member-name {
    color:var(--heading-blue-text);
}
member-title {
    color:var(--green-nav-text);
}
member-name h3,
member-profile h5 {
    font-size:22px;
    line-height:1;
    margin-bottom:0px;
}
member-title h5 {
    font-size:16px;
}
a.green-link:link,
a.green-link:visited,
a.green-link:hover,
a.green-link:active {
    color:var(--footer-link-text);
    text-decoration: none;
}

@media only screen and (max-width:800px) {
    .member-profile {
        flex-direction:column;
        margin-top:min(30px,5%);
    }
    .profile-bio {
        margin-top:20px;
    }
    /* .profile-image {
        margin-bottom:1.5em;
    } */
}

/* --- PAGE: (GROUP) Areas of Practice pages --- */
aop-flex-wrap {
    display:flex;
}
aop-side-menu {
    --aop-blue-block:#1a31bd;
    --aop-green-block:#458c00;
    display: block;
    flex-grow:0;
    flex-basis: 21.5%;
    margin-right:auto;
}
aop-main {
    display: block;
    flex-basis: 72.5%;
}
a.side-menu-item {
    display: block;
    position:relative;
    margin-bottom:10px;
}
.side-menu-item img {
    max-width:100%;
}
.side-menu-item img:first-of-type {
    display:block; /* consistent alignment */
}
/* initial state of additional sidebar image layers */
.overlay,.on-state {
    display:none;
    position: absolute;
    top:0px;
    left:0px;
}

@media only screen and (min-width:800.1px) {
    a.side-menu-item:hover .overlay,
    .ep-page .tlf-ep img.on-state,
    .el-page .tlf-el img.on-state,
    .trust-page .tlf-trust img.on-state,
    .probate-page .tlf-probate img.on-state,
    .snt-page .tlf-snt img.on-state,
    .rec-page .tlf-rec img.on-state {
        display:block;
    }
}

@media only screen and (max-width:800px) {
    aop-flex-wrap {
        flex-direction: column;
    }
    aop-side-menu aop-main .heading, /* heading in main block is redundant under category tab */
    aop-side-menu + aop-main {
        display:none;
    }
    aop-side-menu {
        margin-bottom:30px;
        flex-basis: 100%;
        margin-right:0px;
    }
    a.side-menu-item {
        text-decoration: none;
        margin-bottom:15px;
    }
    a.side-menu-item > img {
        visibility: hidden;
    }
    a.side-menu-item::before {
        content:attr(data-aop);
        background-color: var(--aop-green-block);
        position: absolute;
        inset: 0px;
        text-align: center;
        color: white;
        line-height: 40px;
        font-size: 20px;
    }    
    a.side-menu-item::after {
        position:absolute;
        border:15px solid transparent;
        border-top-color: var(--aop-blue-block);
        bottom:-28px;
        left:50%;
        transform:translate(-50%);
    }
    /* off=green, roll=blue, on=blue with arrow */
    a.side-menu-item:hover::before,
    .ep-page .tlf-ep::before,
    .el-page .tlf-el::before,
    .trust-page .tlf-trust::before,
    .probate-page .tlf-probate::before,
    .snt-page .tlf-snt::before,
    .rec-page .tlf-rec::before {
        background-color:var(--aop-blue-block);
    }
    .ep-page .tlf-ep::after,
    .el-page .tlf-el::after,
    .trust-page .tlf-trust::after,
    .probate-page .tlf-probate::after,
    .snt-page .tlf-snt::after,
    .rec-page .tlf-rec::after {
        content:'';
    }
}

/* --- PAGE: CONTACT US --- */
map-column {
    display: flex;
    /* min-width: 500px; */
    width:47%;
    flex-direction: column;
    align-items: center;
}
.maps-to-offices {
    display:flex;
    gap:20px;
    flex-wrap: wrap;
}
map-heading {
    display: block;
    text-align: center;
}
map-address-block {
    text-align: center;
    line-height: 1.25;
}
p.heading {
    color:var(--heading-blue-text);
}
p.heading,
map-heading,
map-address-block {
    font-size:24px;
}
.embedded-map {
    width:100%;
    margin:6% 0px;
}
.pad-top-2percent {
    padding-top:2%;
}
.pad-bottom-2percent {
    padding-bottom:2%;
}
.pad-top-4percent {
    padding-top:4%;
}
.pad-bottom-4percent {
    padding-bottom:4%;
}
@media only screen and (max-width:800px) {
    .maps-to-offices {
        flex-direction: column;
        align-content: center;
    }
    map-column {
        width: auto;
    }
    map-column:not(:last-of-type) {
        margin-bottom:6%;
    }
}