@charset "UTF-8";
/* CSS Document */

html{
  font-size: 14px;
}

body{
    font-family: var(--mih-font-body);
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
	
	animation-name: animateBodyIn;
	animation-duration: .35s;
	animation-fill-mode: both;
	animation-timing-function: ease-in-out;
	
    font-synthesis-weight: none;
    font-synthesis-style: none; /* Safari 17+ supports these */
}

body *{
	min-width: 0;
}

@keyframes animateBodyIn {
	0% {
		padding-top: 24px;
		opacity: 0
	}

	to {
		padding-top: 0;
		opacity: 1
	}
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}








   /* Sitewide Text Styles ------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

a {
	text-decoration: none;
	transition: var(--mih-anim-normal);
}

a:hover{
    transition: var(--mih-anim-normal);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
	font-family: var(--mih-font-header);
	font-weight: var(--mih-fw-regular);
	line-height: var(--mih-lh-normal);
	font-optical-sizing: auto;
	color: var(--mih-black);
}

h1{font-size: var(--mih-fs-13);}
h2{font-size: var(--mih-fs-10);}
h3{font-size: var(--mih-fs-9);}
h4{font-size: var(--mih-fs-8);}
h5{font-size: var(--mih-fs-7);}
h6{font-size: var(--mih-fs-5);}

h1.display {font-size: var(--mih-fs-14);}
h2.display {font-size: var();}
h3.display {font-size: var();}
h4.display {font-size: var();}
h5.display {font-size: var();}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: var(--text-primary-hover);
    text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: var(--text-primary-hover);
    text-decoration: underline;
}

p.xl, p.lg, p, p.sm, span.xl, span.lg, span, span.sm {
    line-height: var(--mih-lh-expanded);
    font-weight: var(--mih-fw-light);
}

p.xl {font-size: var(--mih-fs-6);}
p.lg {font-size: var(--mih-fs-5);}
p {font-size: var(--mih-fs-4);}
p.sm {font-size: var(--mih-fs-3);}

p.xl a, p.lg a, p a, p.sm a {
	text-decoration: underline;
	color: var(--text-primary-hover);
}

strong, b {font-weight: var(--mih-fw-bold);}

@media (max-width: 870px) {
	h1{font-size: var(--mih-fs-11);}
	h2{font-size: var(--mih-fs-9);}
	h3{font-size: var(--mih-fs-8);}
	h4{font-size: var(--mih-fs-7);}
	h5{font-size: var(--mih-fs-6);}
	h6{font-size: var(--mih-fs-5);}
}








   /* Sitewide Image Styles ------ */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: var(--mih-spacing-9);
}








   /* Sitewide hr/rule Styles ---- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

hr {
	width: 100%;
	height: 2px;
	border: 0;
	border-radius: var(-mih-radius-round);
	background-color: var(--mih-brand-gray-500);
}








   /* Sitewide Icon Styles ------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.fill{transition: var(--mih-anim-normal);}
.fill:hover{transition: var(--mih-anim-normal);}

.fill--clr-1{fill: var(--text-primary);}
.fill--clr-2{fill: var(--text-primary-contrastText);}








   /* Button Styles -------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */




 /* Default Button --------------- */
/* ------------------------------ */

[type="button"], [type="reset"], [type="submit"], a.btn, .btn {
    display: inline-flex;
	position: relative;
	overflow: hidden; overflow: clip;
    column-gap: var(--mih-spacing-3);
    align-items: center;
    justify-content: center;
    padding: var(--mih-spacing-6) var(--mih-spacing-9);
    min-width: 24px;
    min-height: 24px;
    font-family: var(--mih-font-body);
	font-size: var(--mih-fs-4);
	font-weight: var(--mih-fw-regular);
    line-height: var(--mih-lh-dense);
    white-space: nowrap;
    text-decoration: none;
    color: var(--text-primary-contrastText);
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary);
    border-radius: var(--mih-radius-round);
	box-shadow: none;
	cursor: pointer;
    transition: var(--mih-anim-normal);
}

a.btn--icon-only, .btn--icon-only{
	padding: var(--mih-spacing-6);
	aspect-ratio: 1 / 1;
}

a.btn:hover, .btn:hover{
	color: var(--text-primary-contrastText);
    background: var(--btn-primary-hover);
    border: 1px solid var(--btn-primary-hover);
    transition: var(--mih-anim-normal) ;
}

a.btn:focus, .btn:focus{
    color: var(--text-primary-contrastText);
    background: var(--btn-primary-active);
    border: 1px solid var(--btn-primary-active);
	outline: 3px solid var(--btn-focusedBorder);
    transition: var(--mih-anim-normal);
}

button:focus, a:focus {
	outline: 3px solid var(--btn-focusedBorder);
	outline-offset: 1px;
	transition: var(--mih-anim-normal);
}

/*a.btn.btn:active, button.btn.btn:active{*/
a.btn:active, button.btn:active{
    color: var(--text-primary-contrastText);
    background: var(--btn-primary-active);
    border: 1px solid var(--btn-primary-active);
    transition: var(--mih-anim-normal);
}

.btn svg, .btn .icon{
	max-width: var(--mih-spacing-7); max-height: var(--mih-spacing-7);
}

a.btn .fill--clr-1, .btn .fill--clr-1{fill: var(--text-primary-contrastText);}




 /* Button Size Variants --------- */
/* ------------------------------ */

a.btn--xs, .btn--xs{
    font-size: var(--mih-fs-3);
    padding: 0.438rem var(--mih-spacing-5);
}

a.btn--xs.btn--icon-only, .btn--xs.btn--icon-only{
	padding: 0.438rem;
	aspect-ratio: 1 / 1;
}

.btn--xs svg, .btn--xs .icon{
	max-width: var(--mih-spacing-3); max-height: var(--mih-spacing-3);
}

a.btn--sm, .btn--sm{
    font-size: var(--mih-fs-3);
    padding: var(--mih-spacing-2) var(--mih-spacing-5);
}

a.btn--sm.btn--icon-only, .btn--sm.btn--icon-only{
	padding: var(--mih-spacing-2);
	aspect-ratio: 1 / 1;
}

.btn--sm svg, .btn--sm .icon{
	max-width: var(--mih-spacing-6); max-height: var(--mih-spacing-6);
}

a.btn--lg, .btn--lg{
    font-size: var(--mih-fs-5);
    padding: var(--mih-spacing-5) var(--mih-spacing-7);
	column-gap: var(--mih-padding-smedium);
}

a.btn--lg.btn--icon-only, .btn--lg.btn--icon-only{
	padding: var(--mih-spacing-5);
	aspect-ratio: 1 / 1;
}

.btn--lg svg, .btn--lg .icon{
	max-width: var(--mih-spacing-3); max-height: var(--mih-spacing-3);
}




 /* Primary Button --------------- */
/* ------------------------------ */
/* 
These classes are not needed as they are the same as the default btn class. Left here for reference.
*/




 /* Primary Reverse Button ------- */
/* ------------------------------ */

a.btn--primary-rev, .btn--primary-rev {
	color: var(--btn-primary-rev-contrastText);
    background: var(--btn-primary-rev);
    border: 1px solid var(--btn-primary-rev);
}

a.btn--primary-rev:hover, .btn--primary-rev:hover {
	color: var(--btn-primary-rev-contrastText);
    background: var(--btn-primary-rev-hover);
    border: 1px solid var(--btn-primary-rev-hover);
	box-shadow: var(--mih-shadow-xs);
}

a.btn--primary-rev:focus, .btn--primary-rev:focus {
	color: var(--btn-primary-rev-contrastText);
    background: var(--btn-primary-rev-active);
    border: 1px solid var(--btn-primary-rev-active);
	outline: 3px solid var(--btn-focusedBorder);
	box-shadow: var(--mih-shadow-xs);
}

a.btn.btn--primary-rev:active, button.btn.btn--primary-rev:active {
	color: var(--btn-primary-rev-contrastText);
    background: var(--btn-primary-rev-active);
    border: 1px solid var(--btn-primary-rev-active);
	box-shadow: var(--mih-shadow-xs);
}

a.btn--primary-rev .fill--clr-1, .btn--primary-rev .fill--clr-1 {fill: var(--btn-primary-rev-contrastText);}
a.btn--primary-rev:hover .fill--clr-1, .btn--primary-rev:hover .fill--clr-1 {fill: var(--btn-primary-rev-contrastText);}




 /* Primary Outlined Button ------ */
/* ------------------------------ */

a.btn--primary-outlined, .btn--primary-outlined{
    color: var(--btn-primary);
    background: transparent;
    border: 1px solid var(--btn-primary);
}

a.btn--primary-outlined:hover, .btn--primary-outlined:hover{
    color: var(--text-primary-contrastText);
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary);
}

a.btn--primary-outlined:focus, .btn--primary-outlined:focus{
    color: var(--text-primary-contrastText);
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary);
	outline: 3px solid var(--btn-focusedBorder);
}

a.btn.btn--primary-outlined:active, button.btn.btn--primary-outlined:active{
    color: var(--text-primary);
    background: var(--btn-primary);
    border: 1px solid var(--btn-primary);
}

a.btn--primary-outlined .fill--clr-1, .btn--primary-outlined .fill--clr-1 {fill: var(--btn-primary);}

a.btn--primary-outlined:hover .fill--clr-1, .btn--primary-outlined:hover .fill--clr-1 {fill: var(--text-primary-contrastText);}




 /* Primary Outlined Reversed Button ------ */
/* --------------------------------------- */

a.btn--primary-outlined-rev, .btn--primary-outlined-rev{
    color: var(--text-primary-contrastText);
    background: transparent;
    border: 1px solid var(--btn-primary-rev);
}

a.btn--primary-outlined-rev:hover, .btn--primary-outlined-rev:hover{
    color: var(--text-primary);
    background: var(--btn-primary-rev);
    border: 1px solid var(--btn-primary-rev);
}

a.btn--primary-outlined-rev:focus, .btn--primary-outlined-rev:focus{
    color: var(--text-primary);
    background: var(--btn-primary-rev);
    border: 1px solid var(--btn-primary-rev);
	outline: 3px solid var(--btn-focusedBorder);
}

a.btn.btn--primary-outlined-rev:active, button.btn.btn--primary-outlined-rev:active{
    color: var(--text-primary);
    background: var(--btn-primary-rev);
    border: 1px solid var(--btn-primary-rev);
}

a.btn--primary-outlined-rev .fill--clr-1, .btn--primary-outlined-rev .fill--clr-1 {fill: var(--text-primary-contrastText);}
a.btn--primary-outlined-rev:hover .fill--clr-1, .btn--primary-outlined-rev:hover .fill--clr-1 {fill: var(--text-primary);}




 /* Primary Text Button ---------- */
/* ------------------------------ */

a.btn--primary-text, .btn--primary-text{
    color: var(--mih-brand-red);
    background: transparent;
    border: 1px solid transparent;
	padding: var(--mih-spacing-4) 0;
}

a.btn--primary-text:hover, .btn--primary-text:hover{
    color: var(--text-primary-hover);
    background: transparent;
    border: 1px solid transparent;
	text-decoration: underline;
}

a.btn--primary-text:focus, .btn--primary-text:focus{
    color: var(--text-primary-hover);
    background: transparent;
    border: 1px solid transparent;
	outline: 3px solid var(--btn-focusedBorder);
	text-decoration: underline;
}

a.btn.btn--primary-text:active, button.btn.btn--primary-text:active{
    color: var(--text-primary-hover);
    background: transparent;
    border: 1px solid transparent;
	text-decoration: underline;
}

a.btn--primary-text .fill--clr-1, .btn--primary-text .fill--clr-1 {fill: var(--mih-brand-red);}
a.btn--primary-text:hover .fill--clr-1, .btn--primary-text:hover .fill--clr-1 {fill: var(--text-primary-hover);}




 /* Secondary Button ------------- */
/* ------------------------------ */

a.btn--secondary, .btn--secondary {
    color: var(--text-secondary);
    background: var(--btn-secondary);
    border: 1px solid var(--btn-secondary);
}

a.btn--secondary:hover, .btn--secondary:hover {
    color: var(--text-secondary);
    background: var(--btn-secondary-hover);
    border: 1px solid var(--btn-secondary-hover);
	box-shadow: var(--mih-shadow-xs);
}

a.btn--secondary:focus, .btn--secondary:focus {
    color: var(--text-secondary);
    background: var(--btn-secondary-hover);
    border: 1px solid var(--btn-secondary-hover);
	outline: 3px solid var(--btn-focusedBorder);
	box-shadow: var(--mih-shadow-xs);
}

a.btn.btn--secondary:active, button.btn.btn--secondary:active {
    color: var(--text-secondary);
    background: var(--btn-secondary-active);
    border: 1px solid var(--btn-secondary-active);
	box-shadow: var(--mih-shadow-xs);
}

a.btn--secondary .fill--clr-1, .btn--secondary .fill--clr-1 {
    fill: var(--text-secondary);
}

a.btn--secondary:hover .fill--clr-1, .btn--secondary:hover .fill--clr-1 {
    fill: var(--text-secondary);
}




 /* Secondary Outlined Button ---- */
/* ------------------------------ */

a.btn--secondary-outlined, .btn--secondary-outlined {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--btn-secondary);
}

a.btn--secondary-outlined:hover, .btn--secondary-outlined:hover {
    color: var(--text-secondary);
    background: var(--btn-secondary-hover);
    border: 1px solid var(--btn-secondary-hover);
}

a.btn--secondary-outlined:focus, .btn--secondary-outlined:focus {
    color: var(--text-secondary);
    background: var(--btn-secondary-hover);
    border: 1px solid var(--btn-secondary-hover);
	outline: 3px solid var(--btn-focusedBorder);
}

a.btn.btn--secondary-outlined:active, button.btn.btn--secondary-outlined:active {
    color: var(--text-secondary);
    background: var(--btn-secondary-active);
    border: 1px solid var(--btn-secondary-active);
}

a.btn--secondary-outlined .fill--clr-1, .btn--secondary-outlined .fill--clr-1 {fill: var(--text-secondary);}
a.btn--secondary-outlined:hover .fill--clr-1, .btn--secondary-outlined:hover .fill--clr-1 {fill: var(--text-secondary);}




 /* Secondary Text Button -------- */
/* ------------------------------ */

a.btn--secondary-text, .btn--secondary-text {
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid transparent;
	padding: var(--mih-spacing-4) 0;
}

a.btn--secondary-text:hover, .btn--secondary-text:hover {
    color: var(--text-secondary-hover);
    background: transparent;
    border: 1px solid transparent;
}

a.btn--secondary-text:focus, .btn--secondary-text:focus {
    color: var(--text-secondary-hover);
    background: transparent;
    border: 1px solid transparent;
	outline: 3px solid var(--btn-focusedBorder);
}

a.btn.btn--secondary-text:active, button.btn.btn--secondary-text:active {
    color: var(--text-secondary-active);
    background: var(--btn-secondary-active);
    border: 1px solid var(--btn-secondary-active);
}

a.btn--secondary-text .fill--clr-1, .btn--secondary-text .fill--clr-1 {fill: var(--text-secondary);}
a.btn--secondary-text:hover .fill--clr-1, .btn--secondary-text:hover .fill--clr-1 {fill: var(--text-secondary-hover);}




 /* Hidden Text Button ----------- */
/* ------------------------------ */

span.btn__hover-text{
	width: 0;
	opacity: 0;
	transition: var(--mih-anim-normal);
}

.btn:hover .btn__hover-text{
	width: auto;
	opacity: 1;
	transition: var(--mih-anim-normal);
}


 /* Stacked Buttons -------------- */
/* (only on homepage rn)--------- */

.btn.btn--stacked{
	background-color: var(--mih-white);
	border: 1px solid var(--mih-white);
	color: var(--mih-black);
	border-radius: 0;
	justify-content: space-between;
	width: 100%;
}

.btn.btn--stacked .fill{
	fill: var(--mih-brand-red);
}








   /* Dropdown Styles ------------ */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.dropdown{
	display: flex;
	position: relative;
	anchor-name: --dropdown-btn;
}

.dropdown__list{
	position-anchor: --dropdown-btn;
	display: flex;
	flex-direction: column;
	background-color: var(--mih-white);
	box-shadow: 0 20px 20px rgba(0, 0, 0, .1);
	z-index: 25;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	padding: var(--mih-spacing-7) 0;
	width: 308px;
	max-height: 90vh;
	max-height: 90svh;
	border: none;    
}

.dropdown__select{
	width: 100%;
	min-height: 180px;
	border: 0;
	padding: 0;
	font-family: var(--mih-font-body);
	font-size: var(--mih-fs-4);
	background: var(--mih-white);
}

.dropdown__select:focus{
	outline: none;
}

.dropdown__select option{
	padding: var(--mih-spacing-6) var(--mih-spacing-8);
}

.dropdown__select option:checked{
	background: var(--mih-brand-gray-200);
	color: var(--text-primary);
}

.dropdown__count-badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 .35rem;
	margin-left: var(--mih-spacing-2);
	border-radius: 999px;
	background: var(--mih-brand-red);
	color: var(--mih-white);
	font-size: var(--mih-fs-2);
	font-weight: var(--mih-fw-bold);
	line-height: 1;
}

.dropdown__checklist{
	display: flex;
	flex-direction: column;
}

.dropdown__check-item{
	display: flex;
	align-items: center;
	gap: var(--mih-spacing-5);
	padding: var(--mih-spacing-4) var(--mih-spacing-8);
	cursor: pointer;
}

.dropdown__check{
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin: 0;
	border: 1.5px solid var(--mih-brand-gray-500);
	background: var(--mih-brand-gray-200);
	border-radius: 3px;
	display: inline-grid;
	place-content: center;
}

.dropdown__check::after{
	content: "";
	width: 8px;
	height: 5px;
	border-left: 2px solid var(--mih-black);
	border-bottom: 2px solid var(--mih-black);
	transform: rotate(-45deg) scale(0);
	transform-origin: center;
	transition: transform 120ms ease-in-out;
}

.dropdown__check:checked::after{
	transform: rotate(-45deg) scale(1);
}

.dropdown__list-item {
	list-style-type: none;
	padding: 0;
}

.dropdown__list-item .btn, option.dropdown__list-item{
	padding: var(--mih-spacing-6) var(--mih-spacing-8);
	border-radius: 0;
	width: 100%;
	justify-content: flex-start;
}

.dropdown__active-item{
	line-height: 1;
}


.dropdown__list-footer{
	background-color: var(--mih-white);
	display: flex;
	padding: var(--mih-spacing-4) var(--mih-spacing-7) 0 var(--mih-spacing-7);
}

.SearchFilterDropdown-applyFilters, .SearchFilterDropdown-clearFilters {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	color: var(--text-primary);
}

.SearchFilterDropdown-applyFilters {
	color: var(--mih-brand-red);
	margin-left: auto;
}

.dropdown-enter {
	opacity: 0;
	transform: scale(0.95);
}
.dropdown-enter-active {
	opacity: 1;
	transform: scale(1);
	transition: all 150ms ease-in-out;
}

.dropdown .btn[aria-expanded="false"] .icon{
    transform: rotate(0deg);
    transition: var(--mih-anim-normal);
}

.dropdown .btn[aria-expanded="true"] .icon{
    transform: rotate(180deg);
    transition: var(--mih-anim-normal);
}








   /* Badge Styles --------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.badge{
	font-size: var(--mih-fs-3);
	font-weight: var(--mih-fw-semibold);
	color: var(--mih-brand-red);
	border-radius: var(--mih-radius-round);
	margin: 0;
}

.badge--primary{
	padding: var(--mih-spacing-2) var(--mih-spacing-5);
	background-color: var(--mih-brand-gray-200);
}

.badge--primary-text{
	padding: var(--mih-spacing-2) 0;
}








   /* Card Styles ---------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.card{
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background-color: #fff;
	background-clip: border-box;
	border: 0;
	border: 1px solid var(--mih-brand-gray-200);
	border-radius: 0;
	overflow: hidden;
	overflow: clip;
	transition: var(--mih-anim-normal);
}

.card:hover{
	box-shadow: 0px 0px 12px rgba(49, 44, 42, 0.05);
	transition: var(--mih-anim-normal);
}

.card--no-hover:hover{
	box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
	transition: var(--mih-anim-normal);
}


.card__title{
	text-wrap: pretty;
    margin-top: var(--mih-spacing-4);
	transition: var(--mih-anim-normal);
}

.card__title:hover{
	color: var(--mih-brand-red);
	transition: var(--mih-anim-normal);
}

.card--resource p{
	color: var(--text-primary);
}

.card--resource .badge{
	color: var(--mih-brand-red);
}

.card--resource{
	align-items: flex-start;
	padding: var(--mih-spacing-9) var(--mih-spacing-9) var(--mih-spacing-25) var(--mih-spacing-9);
	background-color: white;
	text-align: left;
	border: 1px solid var(--mih-brand-gray-200);
	border-radius: 0;
}

.card--resource *{
	z-index: 2;
}

.card--resource .badge--primary{
	position: absolute;
	left: var(--mih-spacing-9);
	bottom: var(--mih-spacing-9);
}

.card--resource .btn--icon-only{
	width: 30px;
	height: 30px;
	padding: 0;
	border-radius: 50%;
}

/* .card--resource p.badge--primary:nth-child(6) {
	bottom: calc(var(--mih-spacing-9) + .5rem + 20px);
} */

.card--resource p.badge--primary:nth-of-type(2 of .badge--primary) {
    bottom: calc(var(--mih-spacing-9) + .5rem + 20px);
}

.asset-img{
	position: absolute;
	width: auto;
	object-fit: contain;
	z-index: 1;
	width: 90%;
	filter: drop-shadow(0px 0px 6px rgba(49, 44, 42, 0.125));
	transition: var(--mih-anim-normal);
}

.asset-img--pdf{
	right: 15px;
	bottom: -60px;
	height: 193px;
	width: 90%;
	max-width: 170px;
	transform: rotate(-8.18deg);
}

.card--resource:hover .asset-img--pdf{
	filter: drop-shadow(0px 0px 12px rgba(49, 44, 42, 0.1));
	transform: rotate(-7.18deg) scale(1.05);
	bottom: -57px;
	transition: var(--mih-anim-normal);
}

.asset-img--logo {
	right: var(--mih-spacing-9);
	bottom: var(--mih-spacing-9);
	height: auto;
	width: 90%;
	max-width: 150px;
}

.card--resource:hover .asset-img--logo{
	transform: scale(1.05);
	transform-origin: center;
	transition: var(--mih-anim-normal);
}

.asset-img--video {
	right: var(--mih-spacing-9);
	bottom: var(--mih-spacing-9);
	height: auto;
	max-width: 150px;
	transform: scale(1);
	transition: var(--mih-anim-normal);
}

.card--resource:hover .asset-img--video{
	transform: scale(1.05);
	transform-origin: center;
	transition: var(--mih-anim-normal);
}

.card--resource .icon--play-btn{
	display: none;
	transform: scale(1);
}

.icon--play-btn .fill{
	transition: var(--mih-anim-normal);
}

.icon--play-btn .fill-clr-2{
	fill: var(--mih-black);
}

.card--resource:has(.asset-img--video) .icon--play-btn{
	display: block;
	position: absolute;
    bottom: 3.125rem;
    right: 10rem;
    width: 20px;
	filter: drop-shadow(0px 0px 5px rgba(49,44,42,.125));
}

.card--resource:hover .icon--play-btn, .btn--modal-video:hover .icon--play-btn{
	transform: scale(1.03);
}

.card--resource:hover .icon--play-btn .fill-clr-2, .btn--modal-video:hover .icon--play-btn .fill-clr-2{
	fill: var(--mih-brand-red);
	transition: var(--mih-anim-normal);
}

.asset-img--video__thumb{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	overflow: hidden;					
}

.asset-img--website {
	right: 0rem;
	bottom: 0rem;
	height: 130px;
	width: 90%;
	max-width: 230px;
	object-fit: cover;
	object-position: center top;
	transform: scale(1);
	transition: var(--mih-anim-normal);
}

.card--resource:hover .asset-img--website{
	transform: scale(1.05);
	transform-origin: center;
	transition: var(--mih-anim-normal);
}


.card--tumor-type{
	position: relative;
	display: grid;
	grid-template-columns: 1fr minmax(220px, 38%);
	align-items: stretch;
	background: var(--mih-white);
	min-height: 240px;
	margin-bottom: var(--mih-spacing-9);
	overflow: hidden;
	overflow: clip;
}

.card--tumor-type__content{
	padding: var(--mih-spacing-15) var(--mih-spacing-15);
}

.card--tumor-type h2{
	color: var(--mih-brand-red);
	margin-bottom: var(--mih-spacing-8);
}

.card--tumor-type p{
	color: var(--text-primary);
	font-size: var(--mih-fs-5);
	max-width: 62ch;
}

.card--tumor-type__media{
	position: relative;
	background: var(--mih-brand-purple-100);
	min-height: 100%;
}

.card--tumor-type__media .background-img{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	overflow: hidden;
}

@media (max-width: 1010px) {
	.card--tumor-type{
		grid-template-columns: 1fr;
	}

	.card--tumor-type__content{
		padding: var(--mih-spacing-12) var(--mih-spacing-11);
	}

	.card--tumor-type__media{
		min-height: 210px;
	}

	.card--tumor-type p{
		max-width: none;
	}
}

@media (max-width: 640px) {
	.card--tumor-type__content{ padding: var(--mih-spacing-10) var(--mih-spacing-9); }

	.card--tumor-type h2{
		margin-bottom: var(--mih-spacing-7);
	}

	.card--tumor-type p{
		font-size: var(--mih-fs-4);
	}

	.card--tumor-type__media{
		min-height: 170px;
	}
}








   /* Modal Styles --------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.modal-dialog-centered {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(100% - 1rem);
}

.modal-content.card--resource, .modal-content.card--video{
	height: auto;
	/*max-height: 90vh;*/
	/*max-height: 90svh;*/
	width: 90vw;
	max-width: 650px;
	overflow: hidden;
	overflow: clip;
	padding: var(--mih-spacing-11);
	border: 0 transparent;
	border-radius: 0;
}

.modal--pdf .modal-content.card--resource, .modal--external .modal-content.card--resource{
	min-height: 500px;
    padding-bottom: 18rem;
    width: 100%;
    max-width: 650px;
}

.modal--video .modal-content.card--resource{
	height: auto;
	max-height: 90vh;
	max-height: 90svh;
	padding-bottom: var(--mih-spacing-20);
}

.modal-body {
	width: 100%;
	position: initial;
	padding: 0;
}

.btn-close{
	position: absolute;
	top: var(--mih-spacing-8);
	right: var(--mih-spacing-11);
}



.modal-content:hover .asset-img {
	transform: scale(1);
	transition: var(--mih-anim-normal);
}

.modal-content .asset-img--pdf{
	right: 15px;
	bottom: -60px;
	height: 293px;
	width: 90%;
    max-width: 420px;
}

.modal-content:hover .asset-img--pdf{
	right: 15px;
	bottom: -60px;
	height: 293px;
	transform: rotate(-8.18deg) scale(1);
}

.modal-content .asset-img--logo {
	right: var(--mih-spacing-11);
	bottom: var(--mih-spacing-11);
	height: auto;
	width: 90%;
	max-width: 300px;
}

.modal-content .asset-img--website {
	max-width: 350px;
	height: auto;
	transition: var(--mih-anim-normal);
}


.modal__header-banner{
	background-color: var(--mih-brand-red);
	color: var(--mih-white);
	padding: var(--mih-spacing-4);
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	max-width: 650px;
}

.modal__header-banner a{
	color: var(--mih-white);
	font-weight: var(--mih-fw-semibold);
	text-decoration: none;
}

/*
.modal-body .card__title{
	max-width: 25ch;
}
*/

.modal-body .card__title:hover{
	color: var(--mih-black);
}

/*
.modal-body p{
	max-width: 50ch;
}
*/

.modal-body p.sm{
	max-width: 70ch;
}

.modal-body .badge--primary{
	left: var(--mih-spacing-11);
	bottom: var(--mih-spacing-11);
}

.btn-row{
	display: flex;
	gap: var(--mih-spacing-5);
	margin-top: 2rem;
	
}

@media (min-width: 576px) {
	.modal-dialog-centered {
		min-height: calc(100% - 3.5rem);
		min-width: calc(100% - 3.5rem);
	}
}

#withMeModal .modal-content.card--resource{
	padding-bottom: var(--mih-spacing-11);
}

#withMeModal .btn-row {
    margin-top: 3rem;
}



 


   /* Navigation/Header Styles --- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.logo-header{
    background-color: var(--mih-white);
	box-shadow: var(--mih-shadow-xs);
	border-bottom: 1px solid var(--mih-brand-gray-200);
}

.logo-header .container-fluid{
	display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

.mih-logo-container{
    display: grid;
    justify-items: flex-start;
}

.mih-logo, .logo--mih{
    display: grid;
    justify-content: flex-start;
	width: 100%;
    max-width: 110px;
}

.joint-logos{
    display: grid;
      grid-template-columns: auto auto auto;
      grid-gap: 2rem;
      justify-self: flex-end;
      align-items: center;
}

.janssen-logo{
    width: 170px;
}

.joint-logos hr{
	height: 35px;
	width: 2px;
	background: var(--mih-brand-red);
	border: none;
	margin: 0;
	opacity: 1;
}

.apsho-logo{
    width: auto;
    max-height: 50px;
}

@media (max-width: 768px) {
    .logo-header .container-fluid {
      grid-template-columns: 1fr;
      justify-items: center;
    }

    .mih-logo {
      margin-bottom: 2rem;
    }

    .joint-logos {
      display: none;
    }
}   








   /* Resource Grid Styles ------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */


.action-bar, .action-bar__filters, .active-filters {
	display: flex;
	gap: var(--mih-spacing-9);
}

.action-bar{
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: var(--mih-spacing-9);
}

.action-bar .dropdown, .action-bar .action-bar__filters .btn, .action-bar .action-bar__sort .btn{
	height: 100%;
	min-height: 44px;
}

.app-resources--subpage .action-bar .action-bar__sort .btn{
	min-width: 12rem;
}

.action-bar__filters{
	align-items: stretch;
	gap: var(--mih-spacing-4) var(--mih-spacing-7);
	order: 1;
}


.action-bar__search{
	display: flex;
	flex: 1 1 400px;
	order: 2;
}

.action-bar__search form{
	display: flex;
	width: 100%;
	position: relative;
}

.action-bar__search .form-control {
	position: relative;
	padding: .7rem 3.25rem .7rem 2.75rem;
    border-radius: 0;
	border: 1px solid var(--mih-brand-gray-200);
	background-color: var(--mih-white);
	z-index: 1;
}

.action-bar__search .search-prefix-icon{
	pointer-events: none;
	position: absolute;
	z-index: 2;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.form-control::placeholder {
	font-family: var(--mih-font-body);
	color: var(--mih-brand-gray-500);
	font-size: var(--mih-fs-6);

}

.action-bar__search .search-submit-btn{
	position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
	z-index: 3;
}

.action-bar__search .search-prefix-icon .fill--clr-1{
	fill: var(--mih-brand-red);
}

.action-bar__search .search-submit-btn .fill--clr-1{
	fill: var(--mih-white);
}

.icon--mih-search{
	transform: scale(1.1);
	transition: var(--mih-anim-normal);
}

.action-bar__search .search-submit-btn .icon--arrow-right{
	transition: var(--mih-anim-normal);
}

/* .action-bar__search .search-submit-btn:hover .icon--arrow-right{
	transform: translateX(1px);
} */

.action-bar__sort{
	order: 3;
}

.app-resources--home .action-bar__sort .btn{
	background-color: var(--mih-brand-red);
	border-color: var(--mih-brand-red);
	color: var(--mih-white);
	padding: .65rem 1.25rem;
}

.app-resources--home .action-bar__sort .btn:hover,
.app-resources--home .action-bar__sort .btn:focus{
	background-color: var(--mih-brand-red-700);
	border-color: var(--mih-brand-red-700);
}

.app-resources--home .action-bar__sort .btn .fill--clr-1{
	fill: var(--mih-white);
}

.action-bar__sort .dropdown__list{
	left: auto;
	right: 0;
	width: 12rem;
}

.active-filters {
	position: relative;
	display: flex;
	align-items: center;
    gap: 0;
    box-sizing: border-box;
    width: calc(100% + var(--body-padding));
    margin-top: calc(-1 * var(--mih-spacing-6));
    margin-right: calc(-1 * var(--body-padding));
    margin-bottom: var(--mih-spacing-4);
/*    overflow: hidden;*/
}

.active-filters p{
	position: absolute;
    top: 0;
    right: auto;
    bottom: 0.875rem;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    padding-right: 1.5rem;
    padding-bottom: .325rem;
    color: var(--mih-brand-gray-800);
    background: linear-gradient(90deg, rgba(249, 248, 247, 1) 80%, rgba(249, 248, 247, 0) 100%);
	white-space: nowrap;
}

.active-filters__btn-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0.5rem;
	padding: 1rem .5rem 1rem 7rem;
	position: relative;

	overflow-x: scroll;
	overflow-y: hidden;

	width: calc(100% + var(--mih-body-padding));
	margin-right:  calc(-1 * var(--mih-body-padding));
	box-sizing: border-box;

	-webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
	scrollbar-width: thin;             /* For Firefox */
}

.active-filters__btn-wrapper::-webkit-scrollbar {
	height: 8px;
	border-radius: 10px;
}

.active-filters__btn-wrapper::-webkit-scrollbar-track {
	background: transparent;
	border-radius: 10px;
	border: 0px transparent;
}

.active-filters__btn-wrapper::-webkit-scrollbar-thumb {
	background-color: var(--mih-brand-gray-500);
	border-radius: 10px;
}

.active-filters__btn-wrapper > * {
	flex: 0 0 auto;   /* Don't shrink */
	white-space: nowrap; /* Prevent line breaks */
	margin: 0; 
}

.active-filters__btn-wrapper .btn {
    flex: 0 0 auto;
}


@media (max-width: 992px) {
	.action-bar, .action-bar__filters, .active-filters{
		gap: var(--mih-spacing-6) var(--mih-spacing-9);
	}
	
	.action-bar__filters{
		order: 2;
		gap: var(--mih-spacing-5);
	}

	.action-bar__search{
		flex: 1 1 100%;
		order: 1;
	}
	
	.app-resources--home .action-bar__search{
		flex: 1 1 50%;
	}

	.action-bar .action-bar__filters .btn{
		padding: var(--mih-spacing-4) var(--mih-spacing-7);
	}
}








   /* Search Styles -------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.no-results-wrapper{
    grid-column: 1 / 4;
    display: grid;
    justify-items: center;
}

.no-results{
    text-align: center;
    padding: 2rem 2rem 0 2rem;
    color: var(--mih-brand-gray-700);
}








   /* Footer Styles -------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.footer--jnj{
	background-color: var(--mih-black);
	color: var(--mih-white);
	padding-top: var(--mih-spacing-16);
	padding-bottom: var(--mih-spacing-16);
}

.footer--jnj .container-fluid{
	display: grid;
	grid-gap: var(--mih-spacing-13);
}

.footer__top, .footer__bottom{
	display: grid;
	grid-template-columns: 381px 1fr;
	transition: var(--mih-anim-normal);
}

.footer__top{
	grid-gap: var(--mih-spacing-13) var(--mih-spacing-15);
	align-items: flex-start;
	justify-items: flex-start;
}

.footer__logos{
	display: grid;
	grid-template-columns: auto auto auto;
	grid-gap: var(--mih-spacing-16);
	align-items: center;
}

.footer__logos hr{
	width: 1px;
	background-color: var(--mih-white);
	border: none;
	height: 100%;
}

.footer__desc p:last-child{
	margin-bottom: 0;
}

.footer__bottom{
	grid-gap: var(--mih-spacing-13) var(--mih-spacing-15);
	padding-top: var(--mih-spacing-13);
	border-top: 1px solid var(--mih-white);
}

.btn.btn--footer-link{
	color: var(--mih-white);
}

a.btn.btn--footer-link:hover, .footer--jnj a.btn.btn--footer-link:active, .footer--jnj a.btn.btn--footer-link:focus{
	color: white;
}

@media (max-width: 920px) {
	.footer__top, .footer__bottom{
		grid-template-columns: 1fr;
		transition: var(--mih-anim-normal);
	}
}








   /* Misc Styles ---------------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */

.container-fluid {
    max-width: var(--mih-max-width);
    padding-left: var(--mih-body-padding, 2.5rem);
    padding-right: var(--mih-body-padding, 2.5rem);
	transition: var(--mih-anim-normal);
}

.max-width{
	max-width: var(--mih-max-width);
}

.header-row{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 1.5rem;
}

.header-row{
	margin-bottom: var(--mih-spacing-9);
}

.header-row h2{
	margin-bottom: 0;
}

@media (max-width: 576px) {
    .container-fluid{
        max-width: var(--mih-max-width);
        padding-left: var(--mih-body-padding, .5rem);
        padding-right: var(--mih-body-padding, .5rem);
		transition: var(--mih-anim-normal);
    }  
}








   /* Page Specific Styles ------- */
  /* ---------------------------- */
 /* ---------------------------- */
/* ---------------------------- */


/* Home Hero Styles --------- */

.hero--home{
	background-color: var(--mih-brand-red);
}

.hero--home h1, .hero p{
	color: white;
}

.hero-text-container .btn{
	margin-top: 1.5rem;
}

.swiper{
	width: 100%;
}

.hero .swiper-slide{
	height: auto;
}

.hero .swiper-slide .flex{
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 5rem;
	max-width: var(--mih-max-width);
	height: 100%;
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--mih-body-padding);
	padding-left: var(--mih-body-padding);
	padding-bottom: var(--mih-spacing-15);
	/*	padding-bottom: 4.5rem;*/
	transition: var(--mih-anim-slow);
}

.hero--home .hero-text-container{
	flex: 1 1 350px; 
	padding-top: 4.5rem;
	padding-bottom: 3.5rem;
	align-content: center;
	position: relative;
	opacity: 0;
	left: -10rem;
	order: 1;
	transition: var(--mih-anim-slow);
}

.swiper-slide-active .hero-text-container{
	opacity: 1;
	left: 0;
	transition: var(--mih-anim-xslow);
}

.hero--home .hero__thumb{
	flex: 1 1 380px;
	width: 100%;
	min-height: 450px;
	position: relative;
	top: -10rem;
	opacity: 0;
	order: 2;
	transition: var(--mih-anim-xslow);
}

.hero--home .hero__thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	overflow: hidden;
	transition: var(--mih-anim-xslow);
}

.swiper-slide-active .hero__thumb{
	opacity: 1;
	top: 0;
	transition: var(--mih-anim-xslow);
}

.swiper-horizontal > .swiper-pagination-bullets {
    bottom: 12px;
}

.swiper-pagination-bullet:hover {
/*	background: var(--mih-white);*/
	opacity: .25;
	transition: var(--mih-anim-normal);
}

.swiper-pagination-bullet-active {
	width: var(--mih-spacing-11);
	transition: var(--mih-anim-normal);
}

.swiper-pagination-bullet-active:hover {
    background: var(--mih-white);
	opacity: .85;
}

@media (max-width: 870px) {
	.hero .swiper-slide .flex{
		align-items: flex-start;
		align-content: flex-start;
		transition: var(--mih-anim-slow);
	}

	.hero--home .hero-text-container{
		flex: 1 1 100%;
		order: 2;
		padding-top: 0;
		padding-bottom: 1rem;
		padding-right: 0;
		align-content: flex-start;
		transition: var(--mih-anim-slow);
	}

	.hero--home .hero__thumb{
		order: 1;
		flex: 1 1 100%;
		min-height: 40vh;
		max-height: 500px;
		transition: var(--mih-anim-slow);
	}
}
@media (max-width: 560px) {
	.hero--home .hero__thumb{
		width: calc(100% + (var(--mih-body-padding) * 2));
		position: relative;
		margin-left: calc(-1 * var(--mih-body-padding));
		margin-right: calc(-1 * var(--mih-body-padding));
	}
	
	.hero .swiper-slide .flex{
		gap: 1.5rem 5rem;
	}
}




/* Subpage Hero Styles --------- */ 

.hero--subpage{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding: var(--mih-spacing-15) 0;
	min-height: 200px;
	position: relative;
	overflow: hidden; overflow: clip;
	transition: var(--mih-anim-normal);
}

.hero--subpage .hero-text-container{
	padding-right: 18rem;
}

.hero--subpage h1{
	color: var(--mih-brand-red);
}

.hero__subpage-bg{
	height: 100%;
	position: absolute;
	top: 0;
	right: auto;
	bottom: 0;
	left: calc(100% - 40vw);
}

.hero__subpage-bg::after{
	content:'';
	display: block;
	position: absolute;
	top: 0;
	right: -1000%;
	bottom: 0;
	left: 100%;
	background-color: var(--mih-brand-red);
}

.hero__subpage-bg img{
	display: flex;
	height: 100%;
	width: auto;
	object-fit: cover;
	object-position: left center;
}

@media (max-width: 768px) {
	.hero--subpage{
		min-height: 175px;
		padding: var(--mih-spacing-9) 0;
		transition: var(--mih-anim-normal);
	}
}




/* Home All Section Styles --------- */

.app-resources, .about-mih, .oce-connect, .advocacy-resources {
	padding: var(--mih-spacing-15) 0;	
}




/* Home Primary Resource Styles --------- */

.app-resources{
	background-color: var(--mih-bg-grey);
	overflow: hidden;
	overflow: clip;
}

.app-resources__primary{
	display: grid;
	margin-bottom: var(--mih-spacing-15);
}

.app-resources--subpage .app-resources__primary{
	margin-bottom: 0;
}

.app-resources__primary .action-bar{
	margin-bottom: var(--mih-spacing-9);
}

.main-resources{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	width: 100%;
	grid-gap: var(--mih-spacing-9);
/*    overflow-y: scroll;*/
}

.app-resources--subpage .main-resources{
	align-items: stretch;
/*    margin-bottom: -5rem;*/
}

.resources__grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: var(--mih-spacing-9);
	transition: var(--mih-anim-normal);
	position: relative;
	z-index: 1;
}

.main-resources__scroll {
	overflow-x: scroll;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
    padding-top: 5px;
	padding-bottom: 1.5rem;
	padding-left: calc((100vw - 100%) / 2);
    padding-right: calc((100vw - 100%) / 2);
    margin-left: calc(((100vw - 100%) / 2) * -1);
    margin-right: calc(((100vw - 100%) / 2) * -1);
    width: calc(100% + (100vw - 100%));
}

.main-resources__scroll::-webkit-scrollbar {
	height: 8px;
	border-radius: 10px;
}

.main-resources__scroll::-webkit-scrollbar-track {
	background: var(--mih-brand-gray-200);
	border-radius: 10px;
	margin-left: calc(((100vw - var(--mih-max-width)) / 2) + var(--mih-body-padding));
    margin-right: calc(((100vw - var(--mih-max-width)) / 2) + var(--mih-body-padding));
}

@media (max-width: 1320px) {
	.main-resources__scroll::-webkit-scrollbar-track {
		margin-left: var(--mih-body-padding);
		margin-right: var(--mih-body-padding);
	}
}

.main-resources__scroll::-webkit-scrollbar-thumb {
	background-color: var(--mih-brand-gray-500);
	border-radius: 10px;
}

.scroll-controls{
	display: flex;
	gap: .5rem;
	width: 100%;
	justify-content: flex-end;
}

.scroll-btn {
	z-index: 10;
	transition: background-color 0.3s ease;
}

.scroll-btn:hover {
	background-color: var(--mih-brand-gray-400);
}

.scroll-btn--left {
	position: absolute;
	left: 0;
	top: 40%;
	transform: translateY(-50%);
}

.scroll-btn--right {
	position: absolute;
	right: 0;
	top: 40%;
	transform: translateY(-50%);
}

.scroll-btn:disabled {
	background-color: var(--mih-brand-gray-200);
	color: var(--mih-brand-gray-500);
	cursor: not-allowed;
	opacity: 0.6;
}

@media (min-width: 1010px) {
	.app-resources .main-resources {
		display: grid;
		grid-gap: var(--mih-spacing-1);
		
	}

	.app-resources .scroll-controls .btn {
		display: none;
	}

	.app-resources .main-resources__scroll {
		overflow: visible;
	}
}

.load-more-row{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-gap: var(--mih-spacing-6);
    align-items: center;
    position: relative;
    z-index: 2;
    padding-bottom: .5rem;
}

.app-resources--subpage .load-more-row{
    position: absolute;
    padding-bottom: .5rem;
    bottom: 2rem;
    width: 100%;
}

.load-more-row .btn, .load-more-row hr{
	position: relative;
	z-index: 3;
}

.app-resources--subpage .load-more-row::after{
	content: '';
    position: absolute;
    top: auto;
    right: 0;
    bottom: -110%;
    left: 0;
    height: 22rem;
    background: linear-gradient(180deg, rgba(249, 248, 247, 0.00) 0%, #F9F8F7 60%);
    backdrop-filter: blur(.35px);
}

@media (max-width: 1010px) {
	.app-resources--home .resources__grid{
		display: flex;
		overflow-y: visible;
		width: max-content;
		/*padding-right: calc((100vw - 100%) / 2);*/
		transition: var(--mih-anim-normal);
	}

	.app-resources--home .card--resource{
		display: flex;
		flex: 1 0 300px;
		width: 33%;
		max-width: 350px;
	}
	
	.app-resources--home .load-more-row{
		display: none;
	}
	
	.resources__grid{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.resources__grid{
		grid-template-columns: repeat(1, 1fr);
	}
}




/* Home Highlighted Resource Styles --------- */

.app-resources__highlights{
	display: grid;
	gap: var(--mih-spacing-9);
	margin-bottom: var(--mih-spacing-9);
}

.app-resources__highlights .app-resources__tumor-highlights, 
.app-resources__highlights .app-resources__audience-highlights{
	display: flex;
	align-items: stretch;
/*	gap: var(--mih-spacing-9);*/
}

.app-resources__highlights, 
.app-resources__highlights .app-resources__tumor-highlights, 
.app-resources__highlights .app-resources__audience-highlights {
	gap: var(--mih-spacing-6);
}

.app-resources__tile{
	display: grid;
	grid-template-columns: 1fr 35%;
	padding: 0;
	position: relative;
	flex: 1 1 250px;
	align-items: stretch;
	overflow: hidden;
	overflow: clip;
	background-color: var(--mih-brand-red);
	border-radius: 0;
	min-height: 70px;
	transition: box-shadow var(--mih-anim-normal);
}

.app-resources__tile:hover, .app-resources__tile:focus, .app-resources__tile:focus-visible{
	box-shadow: 0px 0px 12px rgba(49, 44, 42, 0.05);
}

.app-resources__tumor-highlights .app-resources__tile{
	justify-content: flex-start;
}

.app-resources__audience-highlights .app-resources__tile{
	justify-content: flex-start;
}

.app-resources__audience-highlights .app-resources__tile p{
	text-align: left;
}

.app-resources__tile p{
	grid-column: 1;
	font-weight: var(--mih-fw-semibold);
	line-height: var(--mih-lh-dense);
	text-align: left;
	color: var(--mih-white);
	background: transparent;
	backdrop-filter: none;
    margin: 0;
    padding: var(--mih-spacing-5) var(--mih-spacing-7);
	position: relative;
	z-index: 2;
	align-self: center;
	transform: none;
	transform-origin: center left;
	transition: none;
}

.app-resources__tile p::after{
	content: none;
}

.app-resources__tile:hover p, .app-resources__tile:focus p, .app-resources__tile:focus-visible p{
	text-decoration: underline;
}

.app-resources__tile:hover p::after, .app-resources__tile:focus p::after{
	opacity: 1;
	transition: var(--mih-anim-normal);
}

.app-resources__tile-media{
	grid-column: 2;
	overflow: hidden;
	overflow: clip;
}

.app-resources__tile img{
	position: static;
	object-fit: cover;
	z-index: 1;
	height: 100%;
	width: 100%;
	opacity: 1;
	transform: scale(1);
	transform-origin: center center;
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.app-resources__tile:hover img, .app-resources__tile:focus img, .app-resources__tile:focus-visible img{
	transform: scale(1.1);
}

.app-resources__audience-highlights .app-resources__tile img{
	object-position: right center;
}

.app-resources__tumor-highlights .app-resources__tile img{
	max-height: 75px;
	margin: auto 0 auto auto;
}

.app-resources__audience-highlights .app-resources__tile img{
	max-height: 100px;
	margin: auto 0 auto auto;
}

.app-resources__audience-highlights .app-resources__tile p{
	transform-origin: left center;
}

@media (max-width: 820px) {
	.app-resources__highlights .app-resources__tumor-highlights{
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.app-resources__tile {
		padding: 0;
		flex: 1 1 40%;
	}
	
	.app-resources__audience-highlights .app-resources__tile img {
		object-position: right;
		background-color: #8571C9;
	}
}

@media (max-width: 560px) {
	.app-resources__highlights, .app-resources__highlights .app-resources__tumor-highlights, .app-resources__highlights .app-resources__audience-highlights {
		gap: var(--mih-spacing-4);
	}
	
	.app-resources__highlights{
    	margin-bottom: var(--mih-spacing-9);
	}
	
	.app-resources__highlights .app-resources__audience-highlights{
		flex-wrap: wrap;
	}
	
	.app-resources__tumor-highlights .app-resources__tile {
		justify-content: flex-start;
	}
	
	.app-resources__tile p, .app-resources__audience-highlights .app-resources__tile p {
    	/* text-align: center; */
		width: 100%;
		transform: none;
		/* transform-origin: center center; */
	}
}




/* Home Secondary Resource Styles --------- */

.secondary-header{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--mih-spacing-9);
	margin-bottom: var(--mih-spacing-9);
}

.secondary-header h2{
	margin-bottom: 0;
}

.secondary-resources{
	/* display: flex;
	flex-wrap: wrap;
	gap: var(--mih-spacing-9);
	align-items: stretch; */
	display: grid;
	grid-template-areas: 
		"resource-title-1 	resource-title-2"
		"resource-list		resource-highlight";
	grid-gap: var(--mih-spacing-3) var(--mih-spacing-9);
	grid-template-columns: 7fr 10fr;
}


.secondary-resources .h2:first-of-type{
	grid-area: resource-title-1;
}

.secondary-resources .h2:last-of-type{
	grid-area: resource-title-2;
}

.secondary-resources .external-resources-list{
	grid-area: resource-list;
	flex: 1 1 400px;
	display: grid;
	grid-gap: 3px;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.secondary-resources .external-resources--lg-card{
	grid-area: resource-highlight;
	flex: 4 1 500px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	background-color: var(--mih-white);
	overflow: clip;
}

@media (max-width: 940px) {
	.secondary-resources{
		grid-template-areas: 
			"resource-title-1"
			"resource-list" 	
			"resource-title-2"
			"resource-highlight";
		grid-template-columns: 1fr;
	}

	.secondary-resources .h2:last-of-type{
		margin-top: var(--mih-spacing-15);
	}
}

.external-resources .btn--stacked{
	font-family: var(--mih-font-header);
	font-size: var(--mih-fs-5);
}

.external-resources .btn--stacked:hover, .external-resources .btn--stacked:focus,
.external-resources-list .btn--stacked:hover, .external-resources-list .btn--stacked:focus{
	background-color: var(--mih-brand-red);
	border: 1px solid var(--mih-brand-red);
	color: var(--mih-white);
	transform: scale(1.01);
	box-shadow: 0px 0px 12px rgba(49, 44, 42, 0.05);
}

.external-resources .btn--stacked:hover .fill, .external-resources .btn--stacked:focus .fill,
.external-resources-list .btn--stacked:hover .fill, .external-resources-list .btn--stacked:focus .fill{
	fill: var(--mih-white);
}

.external-resources__body-text{
	padding: var(--mih-spacing-11);
}

.logo--with-me{
	width: 100%;
	max-width: 150px;
	margin-bottom: 1.5rem;
}

.external-resources__body-text p{
	margin-bottom: 1.5rem
}

.external-resources__img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.secondary-header{
		grid-template-columns: 1fr;
	}
}




/* About MIH Section Styles --------- */

.about-mih__flex{
	display: flex;
	flex-wrap: wrap;
	gap: var(--mih-spacing-11);
}

.about-mih__links{
	flex: 1 1 250px;
}

.about-mih__links .header-row h2 {
	padding-right: 6.5rem;
}

@media (max-width: 768px) {
    .about-mih__links .header-row h2 br{
        display: none;
    }
}

.about-mih__resources .btn--stacked{
	background: transparent;
	padding: var(--mih-spacing-9) 0;
	border: 0;
	border-top: 1px solid var(--mih-brand-gray-200);
}

.about-mih__resources .btn--stacked:last-child{
	border-bottom: 1px solid var(--mih-brand-gray-200);
}

.about-mih__resources .btn--stacked:hover, .about-mih__resources .btn--stacked:focus, .about-mih__resources .btn--stacked:active{
	background: transparent;
	color: var(--mih-brand-red);
	padding-left: var(--mih-spacing-4);
	border: 0;
	border-top: 1px solid var(--mih-brand-gray-200);
	transition: var(--mih-anim-normal);
}

.about-mih__resources .btn--stacked:focus, .about-mih__resources .btn--stacked:active{
	padding-right: var(--mih-spacing-4);
	transition: var(--mih-anim-normal);
}

.about-mih__resources .btn--stacked:last-child:hover{
	border-bottom: 1px solid var(--mih-brand-gray-200);
}

.app-impact{
/*	background-color: var(--mih-brand-gray-200);*/
	background-color: transparent;
	flex: 5 1 400px;
    display: flex;
    flex-direction: column;
}

.app-impact .header-row{
	background-color: transparent;
	padding: 0 0 var(--mih-spacing-7) 0;
	border-bottom: 1px solid var(--mih-brand-gray-200);
	margin-bottom: 0;
}

.app-impact .header-row h2{
	color: var(--mih-brand-red);
}

.app-impact .accordion{
	overflow: hidden;
	height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.accordion-item, .accordion-button {
	height: 100%;
	background-color: transparent;
	border: 0px solid transparent;
	transition: var(--mih-anim-normal);
}

.accordion-item{
	position: relative;
	border-bottom: 1px solid var(--mih-brand-gray-200);
}

.accordion-button.collapsed:hover{
	background-color: transparent;
}

.accordion-button.collapsed:active{
	background-color: transparent;
}

.accordion-button:not(.collapsed) .accordion-button, .accordion-item:focus .accordion-button, .accordion-item:has(.accordion-button:focus) {
	background-color: transparent;
	border-radius: 0;
}

.accordion-item:has(.accordion-button:focus) {
	outline: 3px;
}

.accordion-item:last-of-type, .accordion-item:last-of-type .accordion-button.collapsed{
	border-radius: 0;
}

.accordion-button {
	background-color: transparent;
	padding: var(--mih-spacing-11) 0;
	border-radius: 0;
	gap: 1.5rem;
}

.accordion-button:focus {
	background: transparent;
	/* outline: 3px solid var(--btn-focusedBorder); */
	outline: 3px solid rgba(13,110,253,.25);
	outline-offset: -3px;
}

.accordion-button .title, .accordion-button p{
	color: var(--mih-black);
	transition: var(--mih-anim-normal);
}

.accordion-button .title{
	margin-bottom: 0;
}

.accordion-button:hover .title, .accordion-button:focus .title{
	color: var(--mih-brand-red);
	transition: var(--mih-anim-normal);
}

.accordion-button p{
	display: none;
	visibility: hidden;
	opacity: 0;
}

.accordion-button p:first-of-type{
	margin-top: .5rem;
}

.accordion-button p:last-child, .accordion-body__hidden-txt p:last-child{
	margin-bottom: 0;
}

.accordion-button:not(.collapsed) .title{
	color: var(--mih-brand-red);
	transition: var(--mih-anim-normal);
}

.accordion-button:not(.collapsed) p {
	display: block;
	visibility: visible;
	opacity: 1;
	transition: var(--mih-anim-normal);
}

.accordion-item:first-of-type .accordion-button {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.accordion-button__copy{
	display: flex;
	flex-direction: column;
}

.accordion-button:not(.collapsed){
/*	height: 92.3px;*/
	align-items: flex-start;
	overflow: visible;
    background-color: transparent;
    box-shadow: none;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.accordion-button:not(.collapsed) .accordion-button__copy{
	align-self: flex-start;
	max-width: 50%;
	padding-right: var(--mih-spacing-11);
}

.accordion-body {
	padding: 0;
	margin: var(--mih-spacing-11) calc(1.25rem + 17px) var(--mih-spacing-11) 0;
/*	margin-top: calc(-1 * 92.3px);*/
	display: flex;
	align-items: flex-start;
    gap: var(--mih-spacing-9);
}

.accordion-body__hidden-txt{
	flex: 1 1 50%;
	opacity: 0;
}

.accordion-item .accordion-collapse {
/*	background-color: var(--mih-brand-red);*/
	/*margin-top: calc(-1 * 80px);*/
	margin-top: 0;
	position: relative;
    z-index: 2;
    pointer-events: none;
}

.accordion-item .accordion-collapse .btn--modal{
	pointer-events: visible;
	flex: 1 1 50%;
	padding: 0;
    border: 0;
	position: relative;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='10' fill='%23EB1700'/%3e%3cpath d='M10 5.5v9M5.5 10h9' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3e%3c/svg%3e");
}

.accordion-button.collapsed:hover::after, .accordion-button.collapsed:focus::after, .accordion-button.collapsed:active::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='10' fill='%23CC1400'/%3e%3cpath d='M10 5.5v9M5.5 10h9' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='10' fill='%23EB1700'/%3e%3cpath d='M5.5 10h9' stroke='%23FFFFFF' stroke-width='1.6' stroke-linecap='round'/%3e%3c/svg%3e");
}


#appImpactVid1Modal .modal-content.card--resource,
#appImpactVid2Modal .modal-content.card--resource,
#appImpactVid3Modal .modal-content.card--resource{
	padding: 0;
}

#appImpactVid1Modal .modal-content.card--resource .asset--video,
#appImpactVid2Modal .modal-content.card--resource .asset--video,
#appImpactVid3Modal .modal-content.card--resource .asset--video{
    display: flex;
    margin-bottom: -1px;
}


#appImpactVid1Modal .btn-close,
#appImpactVid2Modal .btn-close,
#appImpactVid3Modal .btn-close{
	background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFF'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
    z-index: 3;
}

.btn--modal-video .icon--play-btn{
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	width: 32px;
	filter: drop-shadow(0px 0px 5px rgba(49, 44, 42, .25));
	transform: scale(1);
	height: auto;
}



@media (max-width: 560px) {
	.accordion-button:not(.collapsed) .accordion-button__copy{
		max-width: 100%;
		border-right: 0;
	}

	.accordion-body {
		flex-wrap: wrap;
	}
}





/* OCE Connect Section Styles --------- */

.oce-connect{
	background-color: var(--mih-bg-grey);
}

.oce-connect__card{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: var(--mih-spacing-11) 1fr var(--mih-spacing-11);
	grid-gap: 0 var(--mih-spacing-11);
	transition: var(--mih-anim-normal);
}

.oce-connect__card-copy{	
	background-color: var(--mih-brand-red);
	padding: var(--mih-spacing-11);
	width: 100%;
	grid-column: 1 / 10;
	grid-row: 2 / 4;
	padding-right: 60%;
	transition: var(--mih-anim-normal);
}

.oce-connect__card-copy .title, .oce-connect__card-copy p{
	color: var(--mih-white);
}

.oce-connect__img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	grid-column: 5 / 13;
	grid-row: 1 / 3;
	transition: var(--mih-anim-normal);
}

#oceModal .modal-content{
	max-width: 550px;
}

.form--oce{
	margin-bottom: var(--mih-spacing-11);
}

.form--oce fieldset{
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1rem;
}

.form--oce div.form-group:nth-of-type(1), 
.form--oce div.form-group:nth-of-type(2), 
.form--oce div.form-group:nth-of-type(5), 
.form--oce div.form-group:nth-of-type(6){
	flex: 1 1 48%;
	min-width: 0;
}

.form--oce div.form-group:nth-of-type(3),
.form--oce div.form-group:nth-of-type(4){
	flex: 1 1 100%;
}

.form-group{
	display: flex;
	flex-direction: column;
	gap: .125rem;
	min-width: 0;
}

.form-group label,
.form-group input {
	width: 100%;
	flex: 0 0 auto;
}

label{
	font-weight: var(--mih-fw-light);
	color: var(--mih-brand-gray-800);
}

input{
	border-radius: 4px;
	border: 1px solid var(--mih-brand-gray-300);
}

.g-recaptcha{
	flex: 1 1 100%;
	margin-top: 1rem;
}

@media (max-width: 992px) {
	.oce-connect__card{
		grid-template-rows: 1fr 100px 350px;
		transition: var(--mih-anim-normal);
	}

	.oce-connect__card-copy {
		max-width: 100%;
		display: grid;
		grid-template-columns: 2fr 3fr;
		justify-items: flex-start;
		grid-gap: 0 2rem;
		grid-column: 1 / 12;
		grid-row: 1 / 3;
		padding-right: var(--mih-spacing-11);
		padding-bottom: calc(100px + var(--mih-spacing-11));
		transition: var(--mih-anim-normal);
	}

	.oce-connect__card .title{
		grid-column: 1/2;
		transition: var(--mih-anim-normal);
	}

	.oce-connect__card p, .oce-connect__card .btn{
		grid-column: 2/3;
		transition: var(--mih-anim-normal);
	}

	.oce-connect__img {
		grid-row: 2 / 4;
		grid-column: 2 / 13;
		transition: var(--mih-anim-normal);
	}
}

@media (max-width: 738px) {
	.oce-connect__card .title, .oce-connect__card p, .oce-connect__card .btn{
		grid-column: 1/3;
		transition: var(--mih-anim-normal);
	}
	.oce-connect__card .title br:first-of-type{
		display: none;
	}
}




/* Home Advocacy Resource Styles --------- */

.advocacy-resources{
/*	padding-top: 0;*/
	background-color: var(--mih-bg-grey);
}

.advocacy-resources .resources__grid {
	display: flex;
	width: max-content;
	transition: var(--mih-anim-normal);
	/*padding-right: calc((100vw - 100%) / 2);*/
}

.advocacy-resources .card--resource {
	display: flex;
	flex: 1 0 300px;
	width: 33%;
	max-width: 350px;
}




/* Collection Feature Styles --------- */

.card--selectable{
	cursor: pointer;
}

.card-select-indicator{
	position: absolute;
	top: var(--mih-spacing-7);
	right: var(--mih-spacing-7);
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--mih-brand-gray-300);
	background: var(--mih-white);
	box-shadow: var(--mih-shadow-xs);
	display: grid;
	place-items: center;
	z-index: 3;
	transition: var(--mih-anim-normal);
}

.card-select-indicator::before{
	content: "";
	position: absolute;
	inset: -1rem;
	background: transparent;
	border-radius: 50%;
	z-index: 2;
}

.card--selectable:hover .card-select-indicator{
	border-color: var(--mih-brand-red);
	transition: var(--mih-anim-normal);
}

.card--selectable.is-selected .card-select-indicator{
	background: var(--mih-brand-red);
	border-color: var(--mih-brand-red);
	transition: var(--mih-anim-normal);
}

.card--selectable.is-selected .card-select-indicator::after{
	content: "✓";
	border-radius: 50%;
	color: var(--mih-white);
	transition: var(--mih-anim-fast);
}

.card--selectable:hover:not(.is-selected) .card-select-indicator{
	animation: card-select-pulse 1.4s ease-in-out infinite;
}

@keyframes card-select-pulse{
	0%{
		transform: scale(1);
	}
	50%{
		transform: scale(1.08);
		/* border: 1.5px solid var(--mih-brand-red); */
	}
	100%{
		transform: scale(1);
	}
}

.collection-bar{
	position: fixed;
	left: 50%;
	transform: translate(-50%, 12px);
	bottom: 16px;
	width: min(1100px, calc(100% - 32px));
	background: var(--mih-bg-grey);
	box-shadow: 0 18px 45px rgba(0,0,0,0.2);
	border: 1px solid var(--mih-brand-gray-300);
	border-radius: var(--mih-radius-2xl);
	z-index: 1040;
	padding: var(--mih-spacing-9);
	display: flex;
	flex-direction: column;
	/* gap: var(--mih-spacing-7); */
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;
	will-change: transform, opacity;
}

.collection-bar.is-visible{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
	transition-delay: 0s;
}

.collection-bar-backdrop{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: min(25svh, 100px);
	background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0) 100%);
	z-index: 1035;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
	will-change: opacity;
	pointer-events: none;
}

.collection-bar-backdrop.is-visible{
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

.collection-bar__header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mih-spacing-7);
}

.collection-bar__title{
	display: flex;
	align-items: center;
	gap: var(--mih-spacing-4);
}

.collection-bar__title h4{
	margin: 0;
}

.collection-bar__title-input{
	border: 1px solid var(--mih-brand-gray-300);
	border-radius: 999px;
	padding: .35rem .85rem;
	font-size: 1rem;
	line-height: 1.2;
	min-width: 220px;
	max-width: 500px;
    width: 100%;
}

.collection-bar__actions{
	display: flex;
	gap: var(--mih-spacing-4);
	align-items: center;
}

.collection-bar__count{
	color: var(--mih-brand-gray-800);
}

.collection-bar__expand{
	display: grid;
	/* gap: var(--mih-spacing-6); */
	max-height: 0;
	opacity: 0;
	transform: translateY(8px);
	overflow: hidden visible;
	margin: 0 -5px;
    padding: var(--mih-spacing-7) 5px 0 5px;
    width: calc(100% + 10px);
	visibility: hidden;
	pointer-events: none;
	transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.collection-bar.is-expanded .collection-bar__expand{
	max-height: 420px;
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.collection-preview-grid{
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mih-spacing-6);
	overflow: scroll;
    max-height: 250px;
	padding: var(--mih-spacing-7) 5px var(--mih-spacing-7) 5px;
    margin: 0 -5px 0 -5px;

	--fade-t: var(--mih-spacing-7, 8px);
    --fade-b: var(--mih-spacing-7, 8px);

	mask-image: linear-gradient(to bottom, transparent 0, #000 var(--fade-t), #000 calc(100% - var(--fade-b)), transparent 100%);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-mode: match-source;
}

.collection-preview-card{
	border: 1px solid var(--mih-brand-gray-200);
	background: var(--mih-white);
	padding: var(--mih-spacing-6);
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--mih-spacing-6);
	align-items: start;
	cursor: pointer;
}

.collection-preview-card:hover{
	box-shadow: 0px 0px 12px rgba(49, 44, 42, 0.05);
	transform: scale(calc(1.005));
    transition: var(--mih-anim-normal);
}


.collection-preview-card .badge--primary-text{
	padding-top: 0;
}

.collection-preview-card h6{
	margin: var(--mih-spacing-1) 0 var(--mih-spacing-4) 0;
}

.collection-remove{
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1px solid var(--mih-brand-gray-300);
	background: var(--mih-white);
	display: grid;
	place-items: center;
	color: var(--mih-brand-gray-800);
}

.collection-bar__footer{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--mih-spacing-6);
	border-top: 1px solid var(--mih-brand-gray-200);
	padding-top: var(--mih-spacing-6);
}

.collection-bar__footer .btn{
	padding: .6rem 1.25rem;
}

.collection-modal{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.4);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1060;
	padding: var(--mih-spacing-11);
}

.collection-modal.is-open{
	display: flex;
}

.collection-modal.is-behind{
	z-index: 1045;
}

.collection-modal__panel{
	background: var(--mih-white);
	box-shadow: var(--mih-shadow-md);
	width: min(900px, 100%);
	padding: var(--mih-spacing-11);
	position: relative;
	max-height: 90vh;
    overflow-y: scroll;
}

.collection-modal__close{
	position: absolute;
	top: var(--mih-spacing-11);
	right: var(--mih-spacing-11);
}

.collection-modal__list{
	display: grid;
	gap: var(--mih-spacing-6);
	margin: var(--mih-spacing-7) 0;
}

.collection-modal__item{
	border: 1px solid var(--mih-brand-gray-200);
	padding: var(--mih-spacing-6);
	cursor: pointer;
}

.collection-modal__item .card__title{
	margin-top: var(--mih-spacing-1);
}

.collection-modal__share{
	display: grid;
	gap: var(--mih-spacing-4);
}

.collection-modal__share-row{
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--mih-spacing-4);
	align-items: center;
}

.collection-modal__share input{
	padding: .8rem 1rem;
	border: 1px solid var(--mih-brand-gray-300);
	width: 100%;
}

.collection-modal__share .btn{
	padding: .8rem 1.5rem;
}

.collection-name{
	margin-right: 4rem;
}

.collection-name__display,
.collection-name__edit{
	display: grid;
    
    gap: var(--mih-spacing-6);
    align-items: center;
}

.collection-name__display{grid-template-columns: max-content max-content;}
.collection-name__edit{grid-template-columns: 1fr max-content;}

#collectionModalTitle{
	margin: 0;
}

.collection-name input{
	padding: .8rem 1rem;
	border: 1px solid var(--mih-brand-gray-300);
	width: 100%;
}

@media (max-width: 820px) {
	.collection-preview-grid{
		grid-template-columns: 1fr;
	}

	.collection-bar__footer{
		flex-direction: column;
		align-items: stretch;
	}

	.collection-bar__actions{
		justify-content: flex-end;
	}
}



/* About MIH Page Styles --------- */

.about-mih--subpage {
	background-color: var(--mih-bg-grey);
}

.about-mih__grid {
	display: grid;
	grid-template-columns: auto auto;
	grid-gap: var(--mih-spacing-24);
}

.about-mih__col {
	width: 100%;
}

.about-mih__col-l {
	max-width: 694px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mih-spacing-9);
}

.about-mih__col-r {
	max-width: 350px;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--mih-spacing-9);
}

.about-mih__grid .header-row {
    margin-bottom: 0;
}

.card--about {
	align-items: flex-start;
	padding: var(--mih-spacing-11) var(--mih-spacing-11) var(--mih-spacing-11) var(--mih-spacing-11);
	text-align: left;
	background: linear-gradient(0deg, #f9f8f7 0%, #f9f8f7 100%), linear-gradient(90deg, #FFF 50%, rgba(255, 255, 255, 0.35) 100%);
	background-blend-mode: color, normal;
}

.card__badge-row {
	display: flex;
	gap: .5rem;
	margin-right: 196px;
	flex-wrap: wrap;
}

.badge--secondary-text{
	color: var(--mih-brand-gray-700);
	font-weight: var(--mih-fw-regular);
}

@media (max-width: 992px) {
	.about-mih__grid {
		grid-template-columns: 1fr;
		grid-gap: var(--mih-spacing-11);
	}

	.about-mih__col-l {
		max-width: 694px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--mih-spacing-7);
	}
}
/* About Page styling : END */