/* mss_sliders.css - special slider content classes */

/* allow container to take full height of every child cell */
.sliding-form-steps {
    overflow-x:hidden;
    display: none;
    width:100%;
}
/* last cell contains form with hidden inputs holding values from earlier cells in the sequence */
.sliding-form-steps .sliding-cell,
.sliding-form-steps .sliding-cell form,
.sliding-form-steps + .post-submit-message {
    flex:0 0 100%;
    display:flex; /* for cell content benefit */
    flex-direction: column;
}

.sliding-form-steps + .post-submit-message {
    display:none; /* initial hidden state */
}
.sliding-form-steps.success + .post-submit-message,
.sliding-form-steps:not(.success) {
    display:flex;
}
/* @media only screen and (max-width:768px) { */
    .sliding-form-steps {
        flex-direction: column;
    }
    .sliding-form-steps .sliding-cell:not(:last-of-type) cell-nav-buttons {
        display: none;
    }
    .general-container.sliding-form-container {
        padding-bottom:2em;
    }
/* } */
@media only screen and (min-width:768.1px) {
    .not .sliding-form-steps > .sliding-cell:first-of-type {
        transition: margin 250ms ease-in-out;
        margin-left:calc(-100% * (var(--slider-step) - 1) );
    }
    .not .sliding-form-steps .sliding-cell {
        display:grid;
        grid-template-areas: "header input-item" "shuttle-buttons shuttle-buttons";
        grid-template-columns: auto 1fr;
        gap:10px;
    }
    .not cell-inputs-block {
        align-self: center; /* vertically align center with the headliner element */
    }
}

.slider-cell-heading /* generic class */
/* .sliding-cell cell-heading */ {
    display:flex;
    gap:20px;
    align-items: center;
    margin-top:1em;
    margin-bottom:1em;
    color:var(--orange-header-bg);
    font-size: 28px;
    /* font-family: 'Acumin Pro Bold',Arial, Helvetica, sans-serif; */
    font-weight: bold;
    position: relative;
}
heading-text {
    line-height: 1;
    position:relative;
    top:0.0675em; /* offset text to help center align with step-ball */
}
/* assistive alignment aid */
.not .slider-cell-heading:hover:after {
    content:'';
    position: absolute;
    left:0px;
    right:0px;
    top:50%;
    border-top:1px dotted black;
}
cell-inputs-block,
cell-nav-buttons {
    display:flex;
}
.slider-cell-heading,
cell-nav-buttons {
    flex-grow:0;
}
.post-submit-message .message-block,
cell-inputs-block {
    min-height:2em;
    gap:20px;
    padding-left:2px;
    /* flex-direction:column; */
    --bs-border-color:black; /* override gray shade control border */
}
cell-inputs-block .form-check-input {
    margin-top:0.125em; /* improve vertical align with label */
}
.sliding-cell cell-inputs-block {
    flex-wrap:wrap; /* prevent input labels from wrapping next to controls or from going past edge of container */
}

cell-nav-buttons {
    /* justify-content: center; */
    gap:10px;
    padding:10px 0px;
    grid-column:span 2;
}
/* prevent element contention matching event target for children of the buttons */
cell-nav-buttons button > * {
    pointer-events: none;
}
.form-error:not(.show) {
    display:none;
}
.form-error {
    padding:5px;
    text-align: center;
    background-color:pink;
    border: 1px solid red;
}

.nav-button {
    background-color: var(--maroon-from-logo);
    color:white;
    border:0px;
    border-radius: 5px;
    /* padding:0.25em 10px 4px; */
    padding:10px;
    font-size:18px;
    line-height: 1;
}
/* lighter color on hover and also when no user selection within the cell */
.sliding-cell:not(.user-selection) .nav-button.next-button,
.sliding-cell:not(.user-selection) .nav-button.submit-button,
.nav-button:not(:disabled):hover {
    /* background-color:hsl(345, 73%, 58%); */
    opacity:0.75;
}
.reset_slider_form_selections {
    position: relative;
    /* background-color:hsl(345, 73%, 44%); /* half-way between, for starters */
}
#reset_slider_form_selections {
    position:absolute;
    z-index: 100;
    bottom:10px;
    right:10px;
    padding-top:0.5em;
}

.one-fourth-column {
    flex-basis: 25%;
}
.fourthx3-column {
    flex:1 0 0%; /* let this container fill remaining width */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding:15px;
    padding-left:0px;
}
.cost-tally-wrapper {
    background-color:var(--green-button-icon);
    color:white;
    text-align: center;
    display:flex;
    align-items:center;
    justify-content: center;
}
/* during steps 2-4, present selected options in green box */
#options-selected {
    position:relative;
}
/* once all selections made, after entry of email address, then present: */
.total-label {
    font-size:60%;
}
.big-bucks,
.big-cost-value {
    font-size:min(64px, max(6.5vw,42px) );
    line-height: 1;
}
.lil-usd {
    font-size:30%;
}

.five-balls-dotted-lines {
    display:flex;
    align-items: center;
    gap:5px;
}
.progress-ball {
    flex-grow:0;
}
.step-ball,
.progress-ball {
    font-size:28px;
    --ball-size:1.3em;
    width:var(--ball-size);
    height:var(--ball-size);
    line-height:1.3; /* 1.45 */
    text-align: center;
    border-radius: 50%;
    color:white;
    background-color:var(--orange-header-bg);
}
.dotted-line-between-balls {
    flex-grow:1;
    height:1px;
    width:auto;
    border:1px dashed var(--orange-header-bg);
}
.on-state {
    background-color:var(--green-button-icon);
}
.on-state + div.dotted-line-between-balls {
    border-color:var(--green-button-icon);
}
/* .dotted-line-between-balls */
.off-state, .off-state + div {
    opacity:0.33;
}
/* larger version of the progress ball but same composition */
.step-ball {
    display:inline-block;
    font-size:48px;
}
/* @media only screen and (max-width:768px) { */
    .step-ball {
        flex-shrink:0; /* maintain shape of the ball */
    }
    .not cell-inputs-block {
        flex-direction: column; /* render vertically */
    }
    .fourthx3-column {
        padding-right:0px;
    }
    .cost-tally-wrapper {
        margin:0px auto;
        padding:0px 20px; /* maintain bg color along sides of container */
    }
/* } */
/* hide prev-button and the progress indicator */
.sliding-form-container.plain-form .five-balls-dotted-lines,
.sliding-form-container.plain-form .slider-cell-heading,
.sliding-form-container.plain-form .sliding-cell/* :not(.user-selection) */ .nav-button.prev-button,
.sliding-form-container:not(.plain-form) .input-label {
    display: none;
}
/* scoot "2nd" button to the left cuz 'gap' still 'see's an invisible figure in the doc flow */
.sliding-form-container.plain-form .sliding-cell .nav-button.next-button {
    margin-left:-10px;
}
.sliding-form-container.plain-form .sliding-cell + .sliding-cell {
    margin-top:2em;
}
.input-label {
    position: relative;
}

.nine-cubes-wrapper {
    display:none;
}
.contact-form-panel.form-submitted + .nine-cubes-wrapper,
.quote-form-wrapper.form-submitted + .nine-cubes-wrapper {
    display:block;
}

/* --- SPIN BOXES - 3D Rotation via CSS --- */
.spin-box {
    position:relative;
    perspective:300px;
    perspective-origin: center center;
}
.spin-within {
    --translate-factor:min(7.725vw,124px);
    /* static value is for when content gutter width max-out, read from computed transform matrix3d */
    /* --translate-factor:min(11.55vw,189.42px); */
    /* --translate-factor:min(11.7vw,189.42px); /* use for 2x3 vertical stack layout */
    position:relative;
    height:100%;
    transform-style:preserve-3d;
    /* push object back into the 3d space so there's no distortion of content - 
        https://3dtransforms.desandro.com/cube#un-fuzzing-3d-transformed-text
    */
    transform:translateZ( calc(-1 * var(--translate-factor) ) );
    transition: transform 500ms ease-in-out;
}
body:not(.home) .spin-within {
    /* this should fix the side-face position inside full-width content gutter INTERIOR PAGES*/
    --translate-factor:min(13vw,209px);
}

.spin-within.full-spin,
.spin-within:hover {
    transform:translateZ( calc(-1 * var(--translate-factor) ) ) rotateY(-90deg);
}
.spin-within.half-spin { /* simplify effort of determining prime scale factor for faces */
    transform:translateZ( calc(-1 * var(--translate-factor) ) ) rotateY(-45deg);
}
.box-face {
    background-color:#CCC;
    background-repeat: no-repeat;
    background-position: center center;
    background-clip: border-box;
    background-size: cover;
    height:100%;
    display:flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    transform:rotateY(0deg) translateZ(var(--translate-factor));
    user-select: none;
}
.box-face:nth-of-type(2) {
    transform:rotateY(90deg) translateZ(var(--translate-factor));
    padding:15px;
    line-height: 1.2;
}
.box-face:nth-of-type(2)::after {
    content:'';
    position: absolute;
    inset:0px;
    background-color: rgba(0,0,0,0.5);
    z-index: -1;
}
.face-mys-shop .box-face { background-image: url('/assets/images/cube_faces/CuF_MysShop.jpg'); }
.soc-med-tr .box-face { background-image: url('/assets/images/cube_faces/CuF_SocMedTr.jpg'); }
.crwd-src .box-face { background-image: url('/assets/images/cube_faces/CuF_CrwdSrc.jpg'); }
.int-aud .box-face { background-image: url('/assets/images/cube_faces/CuF_InAudit.jpg'); }
.ext-aud .box-face { background-image: url('/assets/images/cube_faces/CuF_ExtAud.jpg'); }
.pr-aud .box-face { background-image: url('/assets/images/cube_faces/CuF_PrAud.jpg'); }
.sat-surv .box-face { background-image: url('/assets/images/cube_faces/CuF_SatSurv.jpg'); }
.dig-com-crd .box-face { background-image: url('/assets/images/cube_faces/CuF_DigComCrd.jpg'); }
.consult .box-face { background-image: url('/assets/images/cube_faces/CuF_Consult.jpg'); }
.op-polls .box-face { background-image: url('/assets/images/cube_faces/CuF_OpPolls.jpg'); }
.research .box-face { background-image: url('/assets/images/cube_faces/CuF_Research.jpg'); }

/* client requested similar behavior for case studies so here-we-go */
.competitor-lending .box-face { background-image: url('/assets/images/cube_faces/CuF_CompLend.jpg'); }
.fine-jewelry-stores .box-face { background-image: url('/assets/images/cube_faces/CuF_FineJewelry.jpg'); }
.franchise-groups .box-face { background-image: url('/assets/images/cube_faces/CuF_FranchiseGrp.jpg'); }
.pet-stores-ecommerce .box-face { background-image: url('/assets/images/cube_faces/CuF_PetStore.jpg'); }
.retail-franchise-group .box-face { background-image: url('/assets/images/cube_faces/CuF_FranchiseGrp.jpg'); }
.womens-fine-clothing .box-face { background-image: url('/assets/images/cube_faces/CuF_WomenFineCl.jpg'); }
.casino-page .box-face { background-image: url('/assets/images/cube_faces/CuF_Casino.jpg'); }
.casual-dining .box-face { background-image: url('/assets/images/cube_faces/CuF_CasualDining.jpg'); }
.convenience-stores .box-face { background-image: url('/assets/images/cube_faces/CuF_ConvStore.jpg'); }
.fast-food-restaurants .box-face { background-image: url('/assets/images/cube_faces/CuF_FastFood.jpg'); }
.hardware-stores .box-face { background-image: url('/assets/images/cube_faces/CuF_HardwareStore.jpg'); }

/* provide contrast between text and background images on cube faces */
.box-face::before {
	content: '';
	position: absolute;
	inset: 0px;
	background-color: rgba(0,0,0,0.4);
	z-index: -1;
}

.box-face .general-button {
	text-transform: none;
	background-color: rgba(170, 202, 41,0.75);
	line-height: 1;
	padding-bottom: 3px;
	padding-top: 7px;
}

/* render balanced vertical aligned button content within this container */
case-study-boxes .box-face .general-button {
    padding-bottom:5px;
    padding-top:5px;
}

support-page-boxes .box-face,
about-bes-boxes .box-face,
case-study-boxes .box-face {
    background-color:var(--orange-header-bg);
    color:white;
}
case-study-boxes .green-spin-box .box-face {
    background-color:var(--green-button-icon);
}

@media only screen and (min-width:1020.1px) {
    /* only change height of cubes on home page at this width */
    body.home .spin-box {
        /* maintain square render in multi-column panel layout */
        height:min(15.166vw,209.333px);
        /* height:min(23.45vw,379px); /* use for 2x3 vertical stack layout */
    }
    /* cubes render full-width on interior pages */
    body:not(.home) .spin-box {
        /* min-height:25.85vw; */
        height:min(420px,25.85vw); /* switch to hard-sizing, and limit height to content-gutter proportion */
    }

    /* case study cubes are NOT conforming so apply alternate factor value set */
    body:not(.home) case-study-boxes .spin-within {
        --translate-factor:min(9.6vw,156px);
    }

    .box-face {
        font-size: var(--body-text-size);
    }
    body:not(.home) .box-face {
        --larger-font-factor:1.25;
        font-size:calc(var(--body-text-size) * var(--larger-font-factor));
    }
    body:not(.home) support-page-boxes .spin-box,
    body:not(.home) about-bes-boxes .spin-box,
    body:not(.home) case-study-boxes .spin-box {
        /* min-height:12.975vw; */
        height:min(312px,19.277vw); /* switch to hard-sizing, and limit height to content-gutter proportion */
    }
}
@media only screen and (max-width:1020px) {
    /* flip to vertical in mobile view */
    .general-container.solutions-panel {
        flex-direction: column;
    }
    .spin-within { /* this rule MUST accompany the preceeding one to maintain current positions of cube faces in 3d perspective */
        --translate-factor: 12.9vw;
        /* --translate-factor: 19.5vw; /* use for 2x3 vertical stack layout */
    }
    .spin-box {
        min-height:25.85vw;
        /* min-height:38.9vw; /* use for 2x3 vertical stack layout */
    }
    body:not(.home) support-page-boxes .spin-box,
    body:not(.home) about-bes-boxes .spin-box,
    body:not(.home) case-study-boxes .spin-box {
        /* min-height:12.975vw; */
        min-height:19.25vw; /* override generic with these special cases */
        height:min(312px,26vw); /* switch to hard-sizing, and limit height to content-gutter proportion */
        /* 26vw due to 3-col rendering */
    }

    /* case study cubes are NOT conforming so apply alternate factor value set */
    body:not(.home) case-study-boxes .spin-within {
        --translate-factor:12.7vw;
    }
}
@media only screen and (max-width:768px) {
    .spin-within {
        --translate-factor:12vw;
        /* --translate-factor:19.5vw; /* use for 2x3 vertical stack layout */
    }
    /* case study cubes are NOT conforming so apply alternate factor value set */
    body:not(.home) case-study-boxes .spin-within {
        --translate-factor:19vw;
    }
    .spin-box {
        min-height:25.348vw;
        /* min-height:38.47vw; /* use for 2x3 vertical stack layout */
    }
    body:not(.home) support-page-boxes .spin-box,
    body:not(.home) about-bes-boxes .spin-box,
    body:not(.home) case-study-boxes .spin-box {
        /* min-height:12.975vw; */
        min-height:19.25vw; /* override generic with these special cases */
        height:min(312px,39.3vw); /* switch to hard-sizing, and limit height to content-gutter proportion */
        /* 39.3vw due to 2-col rendering */
    }
}
/* try font-reduction for all widths, then fix for specific widths as needed */
.box-face:nth-of-type(2) {
    --smaller-font-factor:0.75;
    font-size:calc(var(--body-text-size) * var(--smaller-font-factor));
}
.box-face:nth-of-type(2) .general-button:hover {
    background-color:var(--orange-header-bg);
}
.box-face:nth-of-type(2) .general-button {
    font-size:calc(var(--body-text-size) * var(--smaller-font-factor));
    padding-bottom:7px;
    margin-bottom:0px;
    margin-top:30px;
}
.box-face .general-button.larger {
	--smaller-font-factor: 1.5;
}
/* refinement of rules for case-study-boxes */
case-study-boxes .box-face:nth-of-type(2) {
    --smaller-font-factor:1; /* cancel reduced font */
}
case-study-boxes .box-face:nth-of-type(2) .general-button {
    margin-top:0px; /* no margin needed */
}

/* --- Crawler Slider --- */
hero-crawler, crawler-cell {
    display:block;
    inset: 0px;
    position:absolute;
    overflow:hidden;
}
hero-crawler {
    position: absolute; /* appear within homepage hero container */
    display:flex;
    --background-transition-length:1.5s;
    --vertical-slice-transition-length:1.5s;
    --left-sliding-transition-length:12s; /* 12s for 6 tiles, 15s for 7 tiles */
}
hero-crawler.hustle {
    --left-sliding-transition-length:5s; /* switched acceleration to ease inter-slide transition audit */
}
crawler-cell {
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 0;
}
/* 3rd cell */ .chef-bg .hero-background,
/* 4th cell */ .market-bg .hero-background {
    transition:transform var(--background-transition-length) linear;
}
/* add instant class to either the crawler cell (parent) or the img (child) itself to cancel any transitions.
    IMPORTANT: remember to take this class off both of them so normal transitions resume!!
*/
crawler-cell.instant img.hero-background,
img.hero-background.instant {
    transition: none; /* instant transformation */
}
.chef-bg.finish:not(.show) .hero-background,
.market-bg.finish:not(.show) .hero-background {
    transform:translate(-100%);
}
/* 3rd + 4th slide, starts on the right-side of the view area, not the left */
.chef-bg:not(.show) .hero-background,
.market-bg:not(.show) .hero-background {
    transform:translate(100%);
}

.segment-images {
    display:flex;
}
.segment-images .segment-img {
    /* flex:0 0 20%; /* flex:0 0 14.28%; */
    transition:transform var(--vertical-slice-transition-length) linear,
        left var(--left-sliding-transition-length) linear;
    display: block;
    width:30.25vw;
    height: auto;
    position:relative;
    left:var(--left-crawl,0%);
}
.segment-div {
    position: relative;
}
/* reveal the segment images wrapper width measurement */
#slider_width_element:not(.show) {
    display:none;
}
#slider_width_element {
    position:absolute;
    background-color:white;
    color:black;
    bottom:10px;
    padding:10px 15px;
    left:10px;
    z-index:2000;
}

/* signal when crawling is in effect */
.crawling .segment-img {
	outline: 1px solid gold;
    --left-sliding-transition-length:1000ms;
}
/* use this to bring the images back to original positions swiftly */
.segment-images.fast-return /* > .segment-img */ {
    --left-sliding-transition-length:200ms;
}
.segment-images.slow-crawl {
    --left-sliding-transition-length:3600s;
}
.segment-images:not(.close-jaw,.show) .segment-div:nth-of-type(2n+1) img {
    transform:translateY(100%);
}
.segment-images:not(.close-jaw,.show) .segment-div:nth-of-type(2n) img {
    transform:translateY(-100%);
}

/* same breakpoint shared by video-wrapper in mss_nav.css*/
@media only screen and (max-width:1150px) {

    /* switch to vw units to properly position these elements */
    .chef-bg.finish:not(.show) .hero-background,
    .market-bg.finish:not(.show) .hero-background {
        transform:translate(-100vw);
    }
    /* 3rd + 4th slide, starts on the right-side of the view area, not the left */
    .chef-bg:not(.show) .hero-background,
    .market-bg:not(.show) .hero-background {
        transform:translate(100vw);
    }

    /* constrain vertical position to the fixed height of the container */
    hero-crawler .segment-images:not(.close-jaw,.show) .segment-div:nth-of-type(2n+1) img {
        transform:translateY(500px);
    }
    hero-crawler .segment-images:not(.close-jaw,.show) .segment-div:nth-of-type(2n) img {
        transform:translateY(-500px);
    }
    .segment-images .segment-img {
        /* width:auto; */
        height:100%; /* anchor dimensions of image to vertical axis of constraint */
    }
}

/* DEBUG/DIAGNOSTIC OUTPUT */
delays-report {
    display:none;
    position: absolute;
    right:10px;
    bottom:40px;
    font:18px/18px Arial;
    color:white;
    background-color:rgba(0,0,0,0.4);
    padding:3px;
    z-index: 1;
    text-align: end;
}
.show-delays-report delays-report {
    display:block;
}

/* USER INTERACTION WITH CRAWLER SLIDER */
button.crawler-advance {
    position: absolute;
    bottom:10px;
    left:10px;
    z-index: 200;
    padding:5px 15px;
    font:18px/18px Arial;
    cursor: pointer;
    border:none;
    background-color:var(--heading-blue-lines);
    color:block;
}
button.crawler-advance:disabled {
    background-color: var(--maroon-background);
    pointer-events: none;
    opacity:0; /* when disabled, just hide the button entirely */
}
crawler-user-controls {
    position:absolute; /* makes element display:block */
    bottom:50px;
    left:50%;
    transform:translate(-50%);
    z-index:1;
    display:flex;
    gap:1em;
}
crawler-user-controls pick-slide {
    --dot-color:white;
    display:inline-block;
    height:1em;
    width:1em;
    border-radius:50%;
    border:1px solid white; /* var(--dot-color); */
    background-color:transparent;
    opacity: 0.5;
    cursor: pointer;
}
crawler-user-controls.inert pick-slide {
    --dot-color:darkred;
    pointer-events: none;
    opacity:0.25;
}
/* crawler-user-controls.viewing-1 pick-slide:nth-of-type(1),
crawler-user-controls.viewing-2 pick-slide:nth-of-type(2),
crawler-user-controls.viewing-3 pick-slide:nth-of-type(3),
crawler-user-controls.viewing-4 pick-slide:nth-of-type(4), */
pick-slide.active {
    pointer-events: none;
    background-color:var(--dot-color);
}

/* --- Fade Slider (Testimonials) --- */
.fade-slider {
    position:relative;
    /* margin:2% 0px; */
    min-height: 250px;
    overflow:hidden;
    z-index: 100; /* help this content overlap subsequent panels */
}
body:not(.testimonials-page,.about-bes-page) .fade-slider-cell,
.four-lines-tall {
    position: absolute;
    top:0px;
    left:0px;
}
.fade-slider-cell,
.four-lines-tall {
    transition:opacity 1s linear; /* apply same transition to both slider cells and the special end element */
}
/* body.home .four-lines-tall {
    display: none;
} */
.not body.home .fade-slider-cell {
    background-color: #E2E2E2;
    border-radius: 10px;
    padding:5px;
}

.testimonials-panel-bg .testimonials-block-wrapper {
    --testimonial-block-bg-color: #F3F3F3;
	background-color: var(--testimonial-block-bg-color);
	padding: 20px;
	border-radius: 10px 10px 10px 50px;
}



@media only screen and (min-width:768px) {
    /* body.home .fade-slider {
        columns:2;
    }
    body.home .fade-slider-cell {
        break-inside: avoid;
    } */
}
/* output any sizing info placed as data attribute on the cell element */
.fade-slider-cell::after {
	content: attr(data-tbody-height);
	position: absolute;
	right: 0px;
	top: 0px;
	padding: 2px;
	font: 16px/16px Arial,sans-serif;
	background-color: rgba(255,255,255,0.5);
}
body:not(.testimonials-page,.about-bes-page) .fade-slider-cell:not(.active,.content-div),
.not body.home .fade-slider-cell:not(.show) {
    opacity:0;
    pointer-events: none;
}
body:not(.no-home) .fade-slider-cell.overflow testimonial-body {
    max-height: var(--max-tbody-height,6em); /* 6em 1=16px, lineheight=24 * 4 = 96 */
    overflow: hidden;
}
.four-lines-tall .testimonial-frag-link:link,
.four-lines-tall .testimonial-frag-link:visited,
.four-lines-tall .testimonial-frag-link:hover,
.four-lines-tall .testimonial-frag-link:active {
    text-decoration: none;
    color:black;
}
.about-link-wrapper,
.four-lines-tall .testimonial-frag-link {
    /* background color of parent to obscure the text in the 4th line of the cell */
    /* background-color: #e2e2e2; */
    /* background-color: white; */
    background-color: var(--testimonial-block-bg-color);
}
.four-lines-tall .about-link-wrapper {
    margin-left:50%;
}
/* scoot this element to the left so it appears centered within the parent cell element */
.four-lines-tall .about-link-wrapper .testimonial-frag-link {
	display: inline-block;
	transform: translate(-50%);
}
.four-lines-tall cell-heading {
    line-height: var(--double-line,1.5);
    visibility: hidden;
    user-select: none;
    pointer-events: none;
}
.four-lines-tall cell-heading,
.fade-slider-cell cell-heading {
    display:block;
    margin-top:1em;
    margin-bottom:1em;
    color:var(--orange-header-bg);
    font-size: 18px;
    /* font-family: 'Acumin Pro Bold',Arial, Helvetica, sans-serif; */
    font-weight: bold;
}
.not .fade-slider-cell + .fade-slider-cell {
    margin-top:1em;
}
.four-lines-tall testimonial-body,
.fade-slider-cell testimonial-body {
    display:block; /* FLT body needs set to block just like body under FSC! */
}
.fade-slider-cell sig-block {
    display:block;
    margin-top:1em;
}
.fade-slider-cell sig-block .author,
.fade-slider-cell sig-block .author-title {
    /* display:block; */
    color:black;
    /* font-family: 'Acumin Pro Bold',Arial, Helvetica, sans-serif; */
    font-weight: bold;
}
.four-lines-tall {
    opacity:0;
    pointer-events: none;
    width:100%;
}
.four-lines-tall b {
    opacity: 0;
    pointer-events: none;
}
.fade-slider.show-button .four-lines-tall {
    opacity: 1;
    pointer-events: all;
}
.hover-buttons {
    position:absolute;
    bottom:0px;
    left:0%;
    width:100%;
    opacity: 0.4;
    transition:opacity 250ms linear;
    pointer-events: none;
}
.testimonials-block:hover .hover-buttons {
    opacity: 1;
    pointer-events: all;
}
.hover-buttons .general-button {
    cursor:pointer;
    font-size:inherit;
    margin-top:0px;
    margin-bottom:5px;
    padding:0px 0px 0px 1px;
    text-align: center;
    width:30px;
    height:30px;
    border-radius:50%;
}
.hover-buttons .next-cell {
    margin-left:auto;
    margin-right:0px;
    right:0px;
    bottom:0px;
    position:absolute;
    padding-left:2px;
}
.testimonials-block.changing-slide .hover-buttons .general-button {
    background-color:gray;
    pointer-events: none;
}
body/* .testimonials-page */ .hover-buttons {
    display:none;
}

/* previous approach where an overlay across the whole bottom was presented */
.fade-slider .show-more-button-zone {
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s linear;
    pointer-events: none;
    position: absolute;
    bottom:0px;
    left: 0px;
    width:100%;
    text-align: center;
    background-image: linear-gradient(transparent 20%, #E2E2E2);
}
.fade-slider.show-button .show-more-button-zone {
    opacity: 1;
    pointer-events: all;
}
.show-more-button-zone button {
    border:1px solid gray;
    background:#E6E6E6;
    padding:2px 10px;
    font:18px/18px sans-serif;
    margin:10px 0px;
}
/* end: previous overlay approach */