/* ===== PAGE TITLE/HEADER  ============== */

/*div#sp-logo {
	padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}*/
.maven-categories-page-title{ /* contains the top items: title, "filter by project type".  use to pad area or set background */

}
.maven-categories-page-title .header-container{ /* immediately holds the title and subtitle.  used to add a line below this content. */
	border-bottom: none;
}
.maven-title-row h1{ /* the title of the page */
	font-weight: 500;

}
.maven-title-row .maven-project-count{ /* displays the number of projects currently displayed by the filter */

}
.maven-projects-subtitle {padding: 20px 0;}
.maven-projects-subtitle small{ display:none;/* the small text "Filter by product type" */

}

.maven-categories-page-title .header-container {
	display: none; /* this is if a module is used for the header instead, e.g. wave shape header */
}

/* ===== CATEGORY FILTER  ============== */
.filter-row{ /* the container row for the category filter.  Can set vertical padding */

}
.subcat-filter-link-box{ /* container for the cat dropdown box */

}
.subcat-filter-link{ /* contains the link that always displays for clicking to open/close the dropdown of filter options */

}
.subcat-filter-link .filter-link-text{ /* contains the arrow and text of the currently selected option. */

}
.subcat-filter-link .filter-link div#filter-link-text b {
	color: var(--bs-primary);
}
.subcat-filter-link-box .maven-select-list-placement{ /* the box that displays the dropdown content. allows you to adjust the placement of this box when it appears. */

}
.maven-select-list{ /* the div that displays the list of items in the dropdown */

}
.maven-select-list ul{ /* the unordered list of dropdown items */

}
/* the structure of the dropdown items is this: .maven-select-list div.subcat-item a li.sub-cat-filter-option */
.subcat-item a li.sub-cat-filter.option{ /* the linked text of an item displaying wihtin the dropdown */

}

/* ===== GRID, GRID ITEM  ============== */
.Projects-grid{ /* the flexbox containing the items.  Style the grid if needed, but changing its flexbox properties if probably best handled within the template file. */

}
.grid-item-frame{ /* the outer container that holds an item.  This includes padding */

}
.project-item{ /* the container for the image and text */

}
.maven-image-container{ /* div that holds the image */

}
.maven-image-container a img{ /* the placeholder (a tranparent png) that provides the proportion through which the project's image is displayed.  note: what the user sees is a background image behind the placeholder. */

}
.maven-title-container{ /* container for the area in which the title is displayed. */

}
.maven-title-container h2{ /* the title of the project.*/
	font-family: franklin-gothic-atf, sans-serif !important;
	font-weight: 400;
	color: var(--sppb-moa-text-gray);

}
.maven-title-container h2 a{ /* the link on the projects title */

}

/* -------------- reduce to two and one columns on mobile  ----------- */
/* -- set the screen's max width to set the points at which the gride reduces to two and to one columns  */
@media only screen  and (max-width : 1224px) {
	div.grid-item-frame{
		flex-basis: 48%;
	}
}
@media only screen  and (max-width : 640px) {
	div.grid-item-frame{
		flex-basis: 98%;
	}
}