/* mss_interior.css - a place for non-homepage, interior page content rules to go */

:root {
	--nav-to-panel-div-height:0px;
}

p {
	line-height: 1.65;
}

@media only screen and (max-width:768px) {
    h1.page-top-line-height,
    h2.page-top-line-height {
        line-height:1;
    }
}
h1.headline-text,
h2.headline-text {
    margin-bottom:1rem; /* enforce consistent headline spacing */
}
h3.body-headline {
    font-weight: bold;
    margin:1.5rem 0px;
}
h4.body-headline {
    margin-bottom:1rem;
}

/* interior-page-background group moved from core css file */
.interior-page-background {
    /* min-height: 25.16vw; /* 483/1920 */
    position:relative;
    display: flex;
    align-items: center;
    /* contain the hex-grid pattern image within this element so horizontal scroll does not occur */
    overflow: hidden;
}

.interior-page-background.no-img.no-padding {
    padding-top:0px;
}

@media only screen and (max-width:1020px) { /* only clear padding when no top-banner text is present */
    /*
        conditionally override padding-top to compensate for element with margin that (undesirably) shifts parent down by margin factor
        element class list was my-3 py-3 on first element *with spacing* below the .interior-page-background element
        there may be a better approach/solution to this case something-to-think-about
    */
    .pt-2rem {
        padding-top:2rem !important;
        margin-top:0px !important;
    }
}

.interior-page-background.no-img {
    padding:1em 0px 0px; /* why 1em padding on top? so text-only banner has v-centered text in the space */
    background-color:white; /* prevent parallax bg leak-through */
}

.interior-page-background:not(.no-img) {
    min-height: 19.53vw; /* 375/1920 was: min-height */
    height: 19.53vw;
}
.interior-page-background.taller-banner-image {
    min-height: min(39vw,500px);
	height:auto; /* lift constraint so container can expand */
}

@media only screen and (max-width:640px) {
	.hide-at-640px {
		display:none;
	}
}

.interior-page-background.no-img large-headline {
    margin:auto;
    color:var(--orange-header-bg);
}

.interior-page-background img {
    /* position: absolute;
    left:0px;
    top:0px;
    bottom:0px;
    right:0px; */
    display:block;
    flex:1 0 100%; /* is this even necessary for flex-child */
}
.interior-page-background.taller-banner-image > img {
    display:none;
    position:absolute;
    top: 0%;
    left:50%;
    translate:-50%;
    height:100%;
}
.interior-page-background.taller-banner-image {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-image:url('/assets/images/interior_headers/Training_1920px.jpg');
}
@media only screen and (max-width:360px) {
    .interior-page-background.taller-banner-image {
        background-image:url('/assets/images/interior_headers/Training_360px.jpg');
    }
}
.interior-page-background.no-img img {
    display:none;
}
.gray-overlay {
    position:absolute;
    left:0px;
    top:0px;
    bottom:0px;
    right:0px;
    background: rgba(0,0,0,0.2);
}
/* only make the title wrapper absolute when there's an image except for training page */
.interior-page-background:not(.no-img,.taller-banner-image) page-title-wrapper.general-container {
    position: absolute;
}
page-title-wrapper.general-container {
    display:flex;
    align-items: center;
    inset:0px;
}
.interior-page-background.taller-banner-image page-title-wrapper.general-container {
    align-items: start;
	padding-top:25px;
}
large-headline {
    color:white;
    font-size:calc(1.1 * var(--heading-text-size));
}

/* === INTERIOR TOP PANEL === */
/* override of earlier large-headline declaration, carry font-size from huge-headline */
large-headline {
    /* previous font-size:min(3.2vw,44px); */
    font-size:min(3.92vw,64px); /* is a minimum font size needed for this? */
    position:relative;
    font-weight: bold;
    text-transform: uppercase;
}
large-headline.show-subhead {
    line-height:1;
}
/* relocated subhead value into true DOM element rather than psuedo-element (:after)
    since page indexing may skip the important info in that psuedo-element, but won't skip what's in sub-head */
large-headline:not(.show-subhead) sub-head {
    display:none;
}
large-headline.show-subhead.no-shift sub-head,
large-headline.show-subhead.no-shift::after {
    position: absolute;
    top: 1em;
}
large-headline.show-subhead sub-head,
large-headline.show-subhead::after {
	content: attr(data-subheadline);
	color: white;
	font-size: 80%;
    line-height: 1.5; /* inherit; */
    display: block;
    white-space: nowrap;
    font-weight: normal;
    text-transform: none;
}

/* --- ABOUT US/WHO WE ARE PAGE / TESTIMONIALS PAGE --- */
/* .about-bes-page */ .testimonials-block {
	display: grid;
	gap:20px;
	--border-bg-gray:lightgray;
}
@media only screen and (min-width:1020.1px) {
	.testimonials-block {
		grid-template-columns: repeat(3,1fr);
	}
}
/* .about-bes-page */ .testimonials-block .fade-slider-cell {
	border:1px solid var(--border-bg-gray);
	padding:10px;
	transition: transform 250ms ease-in-out;
}
.testimonials-block.fade-slider {
	overflow: visible;
}
.testimonials-block .fade-slider-cell:hover {
	transform:scale(110%);
}
.testimonials-block .fade-slider-cell {
	background-color: white;
}
.testimonials-block .fade-slider-cell:nth-child(2n+1) {
	background-color: var(--border-bg-gray);
}
.testimonials-block .fade-slider-cell cell-heading {
	color:black;
	margin-top:0px;
	font-size: inherit;
}
/* .testimonials-block .show-more-button-zone {
	position: relative;
	opacity:1;
	background-image:none;
	grid-column: span 3;
	pointer-events:all;
} */
.about-bes-page .testimonials-block .view-all-testimonials {
	grid-column:span 3;
}
support-page-boxes,
about-bes-boxes,
case-study-boxes {
	grid-template-columns:repeat(4,1fr);
}
support-page-boxes .box-face:hover,
case-study-boxes .box-face:hover,
about-bes-boxes .box-face:hover {
	background-color: var(--maroon-from-logo);
	color: white;
}

.available-op-table {
	border-collapse: collapse;
	width:100%;
	margin-bottom:1rem;
	border-radius: 0px;
}
.available-op-table tbody,
.available-op-table thead,
.available-op-table tfoot {
	border:1px solid #f1f1f1;
	background-color: #fefefe;
}
.available-op-table tbody td,
.available-op-table tbody th {
	padding: 0.5 rem 0.625rem .0.625rem;
}
.available-op-table tr:nth-child(2n) {
	border-bottom:0px;
	background-color:#f1f1f1;
}

/* apply compensation for extra page header content only to the offset anchor elements */
body.has-nav-to-panel-block {
	--nav-to-panel-div-height:46px;
}
body.has-nav-to-panel-block .offset-anchor {
	--total-header-height:calc(var(--orange-strip-height) + var(--header-height) + var(--nav-to-panel-div-height));
}
.nav-to-panels {
	border:1px solid lightgray;
	background-color:white;
	/* padding:10px; */
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	position:sticky;
	top:var(--total-header-height);
	z-index: 999; /* less than 1000 assigned to white-bar nav so dropdowns will overlay this element */
}
@media only screen and (max-width:1020px) {
	.nav-to-panels {
		position:inherit; /* stop being sticky when page width less than wrap-risk width */
	}
	support-page-boxes,
	about-bes-boxes,
	case-study-boxes {
		grid-template-columns:repeat(3,1fr);
		/* need to adjust height factor in mss_sliders.css for the .spin-box rules to support difference in column width */
	}
}
@media only screen and (max-width:768px) {
	support-page-boxes,
	about-bes-boxes,
	case-study-boxes {
		grid-template-columns:repeat(2,1fr);
		/* need to adjust height factor in mss_sliders.css for the .spin-box rules to support difference in column width */
	}
}
.nav-to-panels a:link,
.nav-to-panels a.visited,
.nav-to-panels a.hover,
.nav-to-panels a.active {
	text-decoration: none;
}
.nav-to-panels .nav-to-panel-wrapper {
	padding:10px 0px;
}
.nav-to-panels a {
	padding:0px 10px;
}
.nav-to-panels .nav-to-panel-wrapper:not(:first-of-type) a {
	border-left:1px solid lightgray;
}

/* --- ABOUT US/WHO WE ARE PAGE --- */
.about-headline {
	display:flex;
	align-items: center;
	margin: 30px 0px 15px;
}
.five-reasons-icon-wrap {
	flex-basis: 91px;
	margin-right: 15px;
	flex-grow:0;
	text-align: center;
}
.five-reasons-icons {
	max-height:64px;
}
.five-reasons-icon-wrap + h4 {
	flex-grow:1;
	margin-bottom:0px;
}

/* --- LEADERSHIP TEAM PAGE --- */
leader-panels-wrapper {
    display:block; /* just something to provide a way for the :last-of-type to work on the final .leader-panel element */
}
image-and-bio, bio-head-and-body {
    display:flex;
}
image-and-bio {
    gap:25px;
}
leader-image {
    flex:0 0 25%;
}
leader-image img {
    display: block;
    width:100%;
}
bio-head-and-body {
    flex-direction: column;
}
bio-heading {
    line-height: 1.1;
}
bio-title {
    font-style:italic;
}
bio-body {
    padding-top:1.5rem;
}
/* @media only screen and (max-width:1020px) { */
    .general-container.leader-panel.more-padding:last-of-type {
        padding-bottom:8%;
    }
/* } */
@media only screen and (max-width:768px) {
    image-and-bio {
        flex-direction:column;
    }
    leader-image {
        justify-content: center;
    }
}

/* --- CROWDSOURCED PAGE --- */
/* green and red check/ex marks for ul>li content */
ul.green-check { list-style-image: url('/assets/images/green-check.png'); list-style:none; }
ul.red-ex { list-style-image: url('/assets/images/red-ex.png'); list-style: none; }
/* or let's just color the stock marker dots */
.not ul.green-check li::marker { color: var(--green-nav-text); }
.not ul.red-ex li::marker { color: var(--maroon-from-logo); }
/* let's just do the easy thing and put the image as marker via ::before pseudoelement,
   ul needs to have list-style:none to disable stock dot/marker
*/
ul.green-check li::before,
ul.red-ex li::before {
	content: url('/assets/images/green-check.png');
	margin-left: -1.65em;
	margin-right: 0.5em;
	display: inline-block;
	vertical-align: middle;
}
ul.red-ex li::before {
    content:url('/assets/images/red-ex.png');
}
.spaced-list li:not(:first-of-type),
.green-check li:not(:first-of-type),
.red-ex li:not(:first-of-type) {
	margin-top: 1em;
}

@media only screen and (min-width:768.1px) {
    .crowdsourced-columns {
        display:flex;
        justify-content: space-around;
    }
}
.crowd-src-left-column,
.crowd-src-right-column {
    flex:0 1 360px;
}

/* --- SOCIAL MEDIA TRACKING PAGE --- */
@media only screen and (min-width:1020.1px) {
	.row-of-3.with-border .third-column:not(:first-of-type) {
		border-left:1px solid lightgray;
	}
}

.case-study-counters {
	background-color:var(--orange-header-bg);
	position: relative;
}
.not .case-study-counters::after {
	position:absolute;
	top:100%;
	width:100%;
	height:25%;
	content:'';
	background-color: var(--orange-header-bg);
	z-index: -1;
}

.social-media-monitoring column-body {
	font-size:1rem;
}

.smm-phone-panel {
	display:grid;
	grid-template-columns: 60% auto;
	/* min-height: min(36vw,430px); */
}
.smm-phone-panel .img-col {
	position:relative;
	margin-left:20px;
	margin-right:20px;
}
.smm-phone-panel .img-col > img {
	position:absolute;
	top:0px;
	right:50%;
	transform:translateX(50%);
	max-height:100%;
	max-width:100%;
}
@media only screen and (max-width:768px) {
	.smm-phone-panel .img-col {
		display:none;
	}
	.smm-phone-panel {
		grid-template-columns: none;
	}
}

.mini-testimonial {
    display:flex;
    gap:15px;
    border-top:1px solid lightgray;
    padding:2% 0px 0px; /* 30px */
    margin-top:2%; /* 30px */
}
.mini-testimonial.border-bottom {
    margin-top:0px;
    padding-top:0px;
    border-top:0px;
    border-bottom:1px solid lightgray;
    padding-bottom: 2%;
    margin-bottom:2%;
}
.mini-testimonial.more-margin {
    margin-top:4%;
}
.mini-testimonial.no-margin {
    margin-top:0%;
}
.mini-testimonial > img {
    flex-basis: 100px;
    display:block;
}
.mini-testimonial.no-border {
    border-top: 0px;
}
mt-body {
    flex:1 0 0%;
    display:flex;
    flex-direction:column;
    gap:15px;
    font:14px/1.5 Arial;
}
mt-text,mt-person {
    flex:1;
}
mt-person {
    text-align: end;
}
@media only screen and (max-width:768px) {
    .mini-testimonial {
        flex-direction:column;
    }
}

/* --- OPINION POLLS PAGE --- */
/* some of these rules are applied to other pages on this site!! */
.two-col-75-percent { flex-basis:75%; }
.two-col-25-percent { flex-basis:25%; }
.two-col-65-percent { flex-basis:65%; }
.two-col-35-percent { flex-basis:35%; }
.two-col-60-percent { flex-basis:60%; }
.two-col-40-percent { flex-basis:40%; }
.two-col-two-thirds { flex-basis:66%; }
.two-col-one-third { flex-basis:33%; }
.two-col-half { flex-basis:50%; }

/* --- MYSTERY SHOPPER SOLUTIONS PAGE --- */
h1.mystery-shop-solutions-page-headline-size,
h2.mystery-shop-solutions-page-headline-size {
	font-size:calc(1.75 * var(--h2-headline-text-size));
}

/* --- CUSTOM/FULL QUOTE  PAGE --- */
.fi-type-of-services-other:not(.show) {
	display:none;
}

/* --- SOLUTIONS PAGE --- */
.left-padding-only-in-columns {
	padding-left:20px;
}
.left-border-only-in-columns {
	border-left:1px solid rgba(0,0,0,0.1);
}
h1.solutions-page-headline-size,
h2.solutions-page-headline-size {
	font-size:calc(1.75 * var(--h2-headline-text-size));
}
h1.shift-up-2em,
h2.shift-up-2em {
	margin-top:-0.2em;
}
#blue_light_blue_gradient {
	position: absolute;
	left: 0%;
	right: 0%;
	top: 0%;
	bottom: 0%;
	/* translate: 0% -51%; */
	background-image: linear-gradient(#03223e,#0a5495 30%,#031d34 88%);
	height: 100%;
}

/* --- PRICE AUDITS PAGE --- */
.two-col {
	display:flex;
	gap:20px;
}
/* .two-col > ul */
.two-col > p {
	flex-basis: 33%;
}
@media only screen and (max-width:768px) {
	.two-col {
		flex-direction: column;
	}
	.left-padding-only-in-columns {
		padding-left:0px;
	}
	.left-border-only-in-columns {
		border-left:none;
	}
}
.price-audits-video-bg {
	position: relative;
	overflow:hidden; /* prevent leak of content past container boundary */
}
.price-audits-video-bg .video-thumbnail {
	z-index:-1;
	position:absolute;
	height:auto;
	width: 100%;
	left:50%;
	translate:-50%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/* background-image:url('/assets/images/video-cover-img-price-audits.jpg'); */
}

/* --- TRAINING PAGE --- */
.charles-standing-figure {
	flex-basis:30%;
	flex-grow:0;
}
.charles-standing-figure img {
	/* max-height:400px; */
	height:auto;
	width:100%;
}
.text-blocks {
	flex-basis: 65%;
	flex-grow:0;
	display: flex;
	flex-direction: column;
}
.white-block {
	background-color:rgba(255,255,255,0.9);
	padding:20px;
}
@media only screen and (max-width:870px) {
	.white-block h3 {
		font-size:calc(1rem + 0.6vw);
	}
	.white-block p {
		font-size:80%;
	}
}
@media only screen and (max-width:640px) {
	.white-block {
		left:0px;
		bottom:15px;
		width:100%;
		position:absolute;
		padding:10px;
	}
	.charles-standing-figure,
	.text-blocks {
		flex-basis:49%;
	}
}
.green-bar {
	width: 100%;
	height:15px;
	background-color:#aaca29;
}
.training-columns {
	display:flex;
}
video-column {
	flex-basis:40%;
}
.column-video-wrapper {
	padding-top:67%;
	width:100%;
	position:relative;
	margin:2em 0px;
}
.column-video-wrapper iframe {
	position:absolute;
	top:0px;
	left:0px;
}
text-column {
	flex-basis:60%;
	padding-right:20px;
}
text-column > div {
	display:none;
}
#training_choice:checked ~ .training-columns text-column #training_category,
#consulting_choice:checked ~ .training-columns text-column #consulting_category,
#speeches_choice:checked ~ .training-columns text-column #speeches_category {
	display:block;
}
column-tabs label:hover,
#training_choice:checked ~ .general-container column-tabs label.training-choice,
#consulting_choice:checked ~ .general-container column-tabs label.consulting-choice,
#speeches_choice:checked ~ .general-container column-tabs label.speeches-choice {
	background-color:var(--dark-orange-text);
}
.raise-tabs {
	--shift-up-by:-45px; /* -83 @ 1920W, -71 @ 1340W */
	margin-top:var(--shift-up-by);
}
column-tabs {
	display:flex;
}
column-tabs label {
	flex:1;
	text-align:center;
	padding:10px 0px;
	color:white;
	background-color:var(--orange-header-bg);
	outline:1px solid var(--dark-orange-text);
	cursor:pointer;
	transition:background-color 250ms ease-in-out;
}
@media only screen and (max-width:1020px) { /* or 768px */
	.tabs-wrapper {
		padding-top:20px;
	}
	.raise-tabs {
		--shift-up-by:0px;
	}
	text-column, video-column {
		width:100%;
	}
	.training-columns {
		flex-direction:column;
	}
	text-column {
		padding-right:0px;
	}
}
@media only screen and (max-width:768px) {
	column-tabs {
		flex-direction:column;
	}
}


/* --- DATA ANALYTICS PAGE --- */
.alternate-accordion summary,
.alternate-accordion details {
	border: 1px solid lightgray;
	margin-bottom: -1px;
}
.alternate-accordion summary {
	padding: 10px;
    border:none;
    border-bottom:1px solid lightgray;
}
.alternate-accordion details[open=""] + details-wrap p {
    margin-bottom:2px;
}
.alternate-accordion details + details-wrap {
	display: block;
	transition: height 250ms ease-in-out;
	overflow-y:hidden;
}
.alternate-accordion details:not([open=""]) + details-wrap {
	height:0px;
}
.alternate-accordion p {
	margin:0px;
	padding:20px; /* maybe less on narrow platform? */
}
.alternate-accordion details + details-wrap p {
	border:1px solid lightgray;
}
/* .alternate-accordion details-wrap p {
	padding:0px 20px;
} */

/* --- SEARCH PAGE --- */
.full-site-search .search-input-box {
	display: inline-block;
	width:100%;
	border:2px solid lightgray;
	padding:10px;
	font-size:20px;
	line-height: 2;
	margin-right:auto;
}
.search-box-wrapper.show-search-btn .search-input-box {
	width:calc(100% - 105px);
}
.search-box-wrapper .search-btn {
	display: inline-block;
	border:1px solid black;
	padding:5px;
	width:100px;
	height:64px;
	position: relative;
	top:-1px;
}
.search-box-wrapper:not(.show-search-btn) .search-btn {
	display:none;
}
@media only screen and (max-width:1020px) {
	.search-box-wrapper .search-input-box {
		max-width:100%;
	}
}
.search-box-wrapper.general-container {
	max-width:66vw;
}
#clear_entry_btn {
	position: absolute;
	top:50%;
	translate:-150% -50%;
}
#search-input-box:placeholder-shown + #clear_entry_btn {
	display: none;
}
#search_result_box {
	display:none;
	position: absolute;
	border:2px solid darkgray;
	border-radius: 5px;
	background-color: white;
	margin-top:5px;
	width:100%;
	min-height: 30px;
	z-index: 99;
}
#search_result_box.show {
	display:block;
}
.search-result-item /* a */ {
	display:block;
	padding:10px;
	line-height: 1.5;
}
.search-result-item:hover {
	background-color:#EEE;
}
.search-result-item a:link,
.search-result-item a:visited,
.search-result-item a:hover,
.search-result-item a:active {
	text-decoration: none;
}
.formal-search-results {
	padding:15px;
}
.formal-search-results .search-result-item:nth-child(2n) {
	background-color:#EEE;
}

/* --- NEWSLETTER PAGE --- */
/* override the generic header/headline properties */
body.newsletter page-title-wrapper {
    justify-content: center;
}
body.newsletter .newsletter-archive .headline-text.orange-text,
body.newsletter large-headline.orange-text {
    color:black;
}
.newsletter-archive {
    position: relative;
}
.general-container.newsletter-archive:not(.signed-up)::after {
	content: 'To access this content, use the sign-up form above to submit your information.';
	text-align: center;
	width: 100%;
	position: absolute;
	height: 75%;
	top: 25%;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(transparent,white 60%);
	align-items: end;
	display: flex;
	justify-content: center;
}

/* make form submit button only as big as content-width, and center */
.newsletter-signup-form .buttons-row button {
    width:auto;
    margin:0px auto;
}