/* BOOKMARKS */
/*
**	The first portion of each of the comments below is a unique identifier that you can search for to jump to the desired section
**
**
*/
/***************** edit-top-menu-mobile; ********************/
/* The main editable sections for the main menu are found below
** 	When editing, try to contain your changes to the divs
*/
/* ;edit-top-menu-marked; 				--  rules for the menu elements in the selected element's chain ie if a child element is the current page, it and it's parent are both 'marked'*/
/* ;edit-top-menu-hover; 				--  styles for 'on hover' , often the same rules as 'this-is-the-page' */
/* ;edit-top-menu-this-is-the-page; 		--  styles for the currently selected page (distinct from the currently selected chain of elements as defined above in marked*/

/* note that this style sheet is organized mobile first with descktop versions overriding mobile styles in a mediaquery */

/* ;edit-top-menu-parent-divs;			--  styles for top level elements (parent) */
/* ;edit-top-menu-child-divs; 			--  styles for nested elements (child) */
/* ;edit-top-menu-gchild-divs; 			--  styles for deepest nested elements (gchild) */

/* ;edit-top-menu-parent-divs-desktop; 	--	override mobile styles for top-row desktop presentation */

/******************** edit-side-menu; **************************/
/* sidebar-menu divs follow the above
**	I've included all the typical segments but many, by default, are likely empty. If still empty for a site, be sure to remove them before going live
**	;edit-top-menu-marked;				-- Note, the top row element is always marked on the sidebar; it acts as a heading in this context.
** 	;edit-top-menu-this-is-the-page;		
**	;edit-top-menu-parent-divs;
**	;edit-top-menu-child-divs; 
**	;edit-top-menu-gchild-divs;
*/

/* top menu structure 

<ul .menu-parent-row> (top row)
	<li .has-arrow>  		(child with gchildren)
		<div>
			<span> | <a>
			<span .menu-button>
		<ul .menu-child-row>
			<li>
				<div>
					<span> | <a>
			<li .has-arrow>
				<div>
					<span> | <a>
					<span .menu-button>
				<ul .menu-gchild-row>
					<li>
						<div>
							<span> | <a>
					<li>
						<div>
							<span> | <a>
				
	<li>					(leaf child)
		<div>
			<span> | <a>
Each li contains a 
	div - which contains the link (or protolink) and optionally a button
		It is this div that should be targeted for styling backgrounds, padding, margins, borders, etc
	ul 	- the ul only exists if the li is a parent to another tier of children
*/

/* color definitions found at the top of atf.core.css */
.cms-nav {
	/* menu arrows */
	--menu-top-arrow-color: black;
	--menu-top-arrow-background: transparent;

	--menu-side-arrow-color: var(--brand-b-color);
	--menu-side-arrow-background: transparent;

	--menu-child-arrow-color: var(--brand-b-color);
	--menu-child-arrow-background: transparent;

	--menu-background: var(--brand-b);
	--menu-color: var(--brand-b-color);
	--menu-background-highlight: var(--brand-b-hover);
	--menu-color-highlight: var(--brand-b-hover-color);

	--menu-side-heading-background: var(--brand-a);
	--menu-side-heading-color: var(--brand-a-color);
	z-index: 1;
}

.menu-state {
	/* used by js during resize to know if we are seeing the hamburger(0) or fullwidth(1) version. Set as 0 here and 1 in the media query later */
	/* this approach allows us to work of mediaquery values without js needing to know what widths are set here for the mediaqueries */
	min-width: 0px; /* false: not fullwidth */
}

/* DEFINE nav wrapper and hamburger */
/* nav wrapper */
#top-nav-wrap {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

#top-nav-wrap.hamburger-open {
	position: absolute;
	top: var(--min-header-height);
	justify-content: space-between;
	width: 100vw;
	box-sizing: border-box;
	right: 0;
	align-items: start;
	flex-direction: row-reverse;
	padding-left: 0;
	height: 100vh;
}

#top-nav {
	display: none;
}

/* Conceal sidebar navigation at mobile widths */
#side-nav {
	display: none;
}
@media only screen and (min-width: 900px) {
	/* ;sidebar-cutoff;  using 900px */
	#side-nav {
		display: unset;
	}
}

/* hamburger */
#hamburger-wrap {
	background: transparent;
	cursor: pointer;
	margin: 0;
}

.hamburger-open #top-nav {
	flex-basis: auto;
	display: flex;
	flex-direction: column;
	height: 100vh;
	width: 80vw;
	overflow-y: auto;
	background-color: #3b3b3b;
	border: 1px solid #aaa;
}

.hamburger {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25px;
	height: 20px;
	cursor: pointer;
	overflow: hidden;
}

.hamburger-line {
	width: 100%;
	height: 4px;
	background: white;
	transition: transform 0.2s ease-in-out;
}

.hamburger .hamburger-line::before,
.hamburger .hamburger-line::after {
	content: "";
	position: absolute;
	width: 26px;
	height: 4px;
	left: 0;
	background: white;
	transition: transform 0.2s ease-in-out;
}

.hamburger .hamburger-line::before {
	transform: translateY(-8px);
}

.hamburger .hamburger-line::after {
	transform: translateY(8px);
}

/*  ANIMATION for Hamburger Menu  */
.hamburger-open .hamburger .hamburger-line {
	transform: translateX(-50px);
	background: transparent;
}
.hamburger-open .hamburger .hamburger-line::before {
	transform: rotate(45deg) translate(35px, -35px);
}
.hamburger-open .hamburger .hamburger-line::after {
	transform: rotate(-45deg) translate(35px, 35px);
}
.hamburger.openHamburgerMenu {
	position: absolute;
	top: -50px;
	right: 20px;
}
/* end hamburger */

.cms-nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.cms-nav li {
	padding: 0;
	margin: 0;
	position: relative;
}

/* unset all sitewide <a> and <span> styles to allow menu rules to take over */
.cms-nav a,
.cms-nav span {
	text-decoration: unset;
	color: unset;
	font-weight: unset;
	transition: unset;
	cursor: pointer;

	font-weight: 500;

	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent;
}

#top-nav.cms-nav ul.menu-parent-row {
	display: flex;
	flex-direction: column;
}

.hamburger-open #top-nav.cms-nav ul.menu-parent-row {
	flex: 1 1 auto;
	overflow-y: auto;
	width: 100%;
	background-color: #3b3b3b;
}

#top-nav.cms-nav li > ul {
	display: flex;
	flex-direction: column;
}

#top-nav.cms-nav ul.menu-child-row {
	min-width: 200px;
}
#top-nav.cms-nav ul.menu-child-row.only-mobile {
	background-color: #3b3b3b;
}

/* styling-divs-begin mobile*/
.hamburger-open #top-nav.cms-nav ul.menu-parent-row > li > div,
.hamburger-open #top-nav.cms-nav ul.menu-child-row > li > div,
.hamburger-open #top-nav.cms-nav ul.menu-gchild-row > li > div {
	background-color: #3b3b3b;
}

/* Nav footer should stick to bottom */
.hamburger-open #top-nav .nav-footer {
	flex-shrink: 0;
	margin-top: auto;
	padding-bottom: 30%;
	padding-left: 5px;
	background-color: #3b3b3b;
	max-width: 300px;
    width: 80%;
	color: #fff;
}
.hamburger-open #top-nav .menu-child-row.only-mobile .nav-footer {
	flex-shrink: 0;
	margin-top: auto;
	padding-bottom: 10%;
	padding-left: 5px;
	background-color: #3b3b3b;
	width: 100%;
	color: #fff;
}
.nav-footer p {
	color: #fff;
}
.nav-footer .social-media-container .fab {
	font-size: 20px;
}
.nav-footer .social-media-container {
	display: flex;
	justify-content: flex-start;
	background-color: #3b3b3b;
	gap: 12px;
	width: auto;
	flex-wrap: wrap;
}
#top-nav-wrap.hamburger-open .nav-footer .social-media-container a {
	display: inline-flex; /* Change from block to inline-flex */
	width: auto; /* Override the 100% width */
	flex: 0 0 auto; /* Don't grow or shrink */
	margin-right: 0;
	padding-right: 0;
}
.cms-nav .nav-footer a {
	width: auto !important;
	display: inline-flex !important;
}

/* core styles, applies to top-nav and side-nav, all elements */
.cms-nav div {
	color: var(--brand-b-color);
	background: var(--brand-b);
	font-weight: 300;
}

.cms-nav a,
.cms-nav span {
	display: block;
	width: 100%;
	/* padding: 0.5rem 1rem; */
	padding: 15px;
	box-sizing: border-box;
}

.cms-nav ul.menu-child-row > li > div > a,
.cms-nav ul.menu-child-row > li > div > span {
	padding-left: 2rem;
}

.cms-nav li.with-arrow > div > span.menu-button {
	position: absolute;
	top: 15px;
	right: 10px;
	padding: 0;
}

.cms-nav li.with-arrow span.menu-button {
	padding: 0 !important;
}

.cms-nav li.with-arrow li.with-arrow {
	display: none;
}
.cms-nav li.with-arrow.arrow-clicked li.with-arrow {
	display: block;
}

.cms-nav .marked-group > div {
	color: var(--brand-b-hover-color);
}
.cms-nav div:hover,
.cms-nav li.this-is-the-page > div {
	color: var(--brand-b-hover-color);
}

/* fixed an issue with tapping '+' in drop-down menu for mobile vers., START */
.cms-nav li.with-arrow > div > a {
	width: calc(100% - 25px - 60px);
}

#top-nav-wrap.hamburger-open
	.cms-nav
	li.with-arrow
	> div
	span.menu-button
	> span {
	padding: 0;
	width: 25px;
	height: 25px;
}
/* fixed an issue with tapping '+' in drop-down menu for mobile vers., FINISH */

/* start expandable elements closed */
.cms-nav .menu-parent-row ul li > div {
	/* base rules, setting menu items in closed presentation: 0 for height, padding height, and line height */
	white-space: nowrap; /* prevent button wrapping to bottom */
	display: flex;
	justify-content: space-between;
	line-height: 0; /* appear closed when not clicked */
	overflow: hidden; /* appear closed when not clicked */
	padding-top: 0;
	padding-bottom: 0;
	height: 0; /* appear closed when not clicked */
	/* transition: color 0.25s, padding-top 0.5s, padding-bottom 0.5s; */
	line-height: 0.5;
	/* base styles */
	/* color: #0000; */
	/* while closed, transparent color for smooth fade-in */
}

/* elements with arrows */
/*
.cms-nav li.with-arrow > div {
  padding-right: 0.5rem;
}
*/
/* remove div padding because button has enough already */

/* force top level items to close instantly, prevents top level menu items retaining hover while opening one and closing another */
body:not(.is-mobile)
	#top-nav-wrap:not(.hamburger-open)
	#top-nav.cms-nav
	.menu-parent-row
	> li:not(.arrow-clicked)
	ul
	li
	> div {
	transition: unset;
}

/***************** edit-top-menu-mobile; ********************/

/* base open styles */
.cms-nav li.arrow-clicked > ul > li > div,
#side-nav.cms-nav .menu-parent-row > li > ul > li > div {
	/* with arrow clicked, regulate how it appears as open by setting padding and line heights and unsetting height. (animation occurs based on padding and line-height */
	height: unset;
	/* padding-top: 0.5rem;
  padding-bottom: 0.5rem; */
	line-height: 1.5rem;
	color: var(--brand-b-color);
}

/* ;edit-top-menu-marked; */
.cms-nav li.arrow-clicked > ul > li.marked-group > div {
	color: var(--brand-b-color);
}
/* ;edit-top-menu-hover; */
/* ;edit-top-menu-this-is-the-page; */
.cms-nav li.arrow-clicked > ul > li > div:hover,
.cms-nav li.arrow-clicked > ul > li.this-is-the-page > div {
	color: var(--brand-b-hover-color);
}

/* ;edit-top-menu-parent-divs; */
#top-nav.cms-nav .menu-parent-row > li > div {
	border-bottom: 1px solid #aaa;
}
#top-nav.cms-nav .menu-parent-row > li > div:hover {
}

/* ;edit-top-menu-child-divs; */
/* child specific rules for padding, color, background, etc */
/* child closed */
.cms-nav ul.menu-child-row > li > div {
	/* padding must be set in closed position so it doesn't jank when opening */
}
/* child open */
.cms-nav li.arrow-clicked > .menu-child-row > li > div {
	border-bottom: 1px solid #aaa; /* border-bottom must be set on open case so it doesn't display when closed */
}
/* child hover */
.cms-nav li.arrow-clicked > .menu-child-row > li > div:hover {
}

/* edit-top-menu-gchild-divs; */
/* grand-child specific rules for padding, color, background, etc */
/* child closed */
.cms-nav ul.menu-gchild-row > li > div {
	/* background set in closed case so it doesn't flicker on slide open */
	/* color with zero opacity so it can fade into opaque */
	padding-left: 2rem; /* indent grand-children */
}
/* gchild open */
.cms-nav li.arrow-clicked > .menu-gchild-row > li > div {
	border-bottom: 1px solid #aaa;
}
/* gchild hover */
.cms-nav li.arrow-clicked > .menu-gchild-row > li > div:hover {
}

/********************** edit-side-menu; *******************/
/* Typically, the sidemenu is not displayed on mobile. If a site requires them on mobile, the rules presented here are for mobile with desktop overrides in the media query below */

/*	;edit-side-menu-marked; */
#side-nav.cms-nav .menu-parent-row > li > ul > li.marked-group > div,
#side-nav.cms-nav li.arrow-clicked > ul > li.marked-group > div {
	color: var(--brand-b-color);
}

/* 	;edit-side-menu-this-is-the-page;		*/
#side-nav.cms-nav .menu-parent-row > li > ul > li.this-is-the-page > div,
#side-nav.cms-nav li.arrow-clicked > ul > li.this-is-the-page > div {
	color: var(--brand-b-hover-color);
}

/*	;edit-side-menu-parent-divs; */
#side-nav.cms-nav .menu-parent-row > li > div {
	border-bottom: 1px solid #aaa;
	background: var(--brand-a);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--brand-a-color);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}
#side-nav.cms-nav .menu-parent-row > li > div:hover {
	/* currently uses same as top-menu, set above */
}

/*	;edit-side-menu-child-divs; */
#side-nav.cms-nav .menu-child-row > li > div {
	border-bottom: 1px solid #aaa;
}
#side-nav.cms-nav .menu-child-row > li > div > a,
#side-nav.cms-nav .menu-child-row > li > div > span {
	padding-left: 1.5rem;
}
#side-nav.cms-nav .menu-child-row > li > div:hover {
	/* currently uses same as top-menu, set above */
}
/*	;edit-side-menu-gchild-divs; */
#side-nav.cms-nav .menu-gchild-row > li > div {
	/* don't set border here, it is set when opened, only */
	padding-left: 2rem;
}
#side-nav.cms-nav .menu-gchild-row > li > div:hover {
	/* currently uses same as top-menu, set above */
}

/* DEFINE Menu Buttons +/- */
.cms-nav .menu-button {
	position: relative;
	float: right;
	color: #ecf0f1;
	background: #e74c3c;
	width: 1.5rem;
	height: 1.5rem;
	border: 0;
	position: relative;
	display: inline-block;
}
/* END: DEFINE Menu Buttons +/- */

/* Style the chevron icon */
.menu-button i.fa-chevron-right {
	transition: transform 0.3s;
	font-size: 1.2em;
	vertical-align: middle;
}

/* Rotate chevron when open */
li.arrow-clicked > div > .menu-button i.fa-chevron-right {
	transform: rotate(90deg);
}

/* set colors for buttons */
#top-nav .menu-parent-row > .with-arrow > div > .menu-button,
#top-nav .menu-child-row > .with-arrow > div > .menu-button {
	background: var(--menu-child-arrow-background); /* button background */
}
#top-nav .menu-parent-row > .with-arrow > div > .menu-button > span::before,
#top-nav .menu-parent-row > .with-arrow > div > .menu-button > span::after,
#top-nav .menu-child-row > .with-arrow > div > .menu-button > span::before,
#top-nav .menu-child-row > .with-arrow > div > .menu-button > span::after {
	background: var(--menu-child-arrow-color); /* button color */
}

#side-nav .menu-child-row > .with-arrow > div > .menu-button {
	background: var(--menu-side-arrow-background); /* button background */
}
#side-nav .menu-child-row > .with-arrow > div > .menu-button > span::before,
#side-nav .menu-child-row > .with-arrow > div > .menu-button > span::after {
	background: var(--menu-side-arrow-color); /* button color */
}

#side-nav.cms-nav a {
	font-size: 0.85rem;
	font-weight: 400;
}

#side-nav.cms-nav .menu-parent-row > li > div a {
	font-size: 1.1rem;
	font-weight: 600;
}

#top-nav.cms-nav a,
#top-nav.cms-nav span {
	white-space: nowrap;
}

.menu-child-row a,
.menu-child-row span,
#top-nav-wrap.hamburger-open a,
#top-nav-wrap.hamburger-open span {
	white-space: normal;
	padding-right: 25px;
}

/* BANNER PRODUCTS, start */
.div-banner-products {
	position: absolute;
	width: 100%;
	top: 55%;
	left: 50%;
	transform: translate(-50%, calc(-50% - 4rem));
}

.div-banner-products .column-text,
div.osensa-slider-container {
	grid-gap: 2rem;
	justify-content: center;
}

.div-banner-products .column-text > div,
div.osensa-slide {
	align-items: center;
	max-width: 360px;
	min-width: 360px;
	width: 360px;
	max-height: 360px;
	min-height: 360px;
	height: 360px;
	border: 3px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.1);
	position: relative;
	/* transition: background .35s ease, cursor .35s ease; */
}

.div-banner-products .column-text > div:nth-of-type(1) img,
.osensa-slide img {
	max-width: 200px;
	min-width: 200px;
	width: 200px;
}

.osensa-slide:nth-of-type(1) img {
	max-width: 180px;
	min-width: 180px;
	width: 180px;
}

.div-banner-products .column-text > div:nth-of-type(2) img {
	max-width: 250px;
	min-width: 250px;
	width: 250px;
}
.div-banner-products .column-text > div:nth-of-type(3) img {
	max-width: 230px;
	min-width: 230px;
	width: 230px;
}

.div-banner-products .column-text > div a {
	display: block;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0);
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 12px;
	z-index: 10;
	/* transition: background .35s ease; */
}
.div-banner-products .column-text > div:hover {
	background: rgba(0, 0, 0, 0.4);
	border: 3px solid rgba(255, 255, 255, 0.8);
	cursor: pointer;
	/* transition: background .35s ease, cursor .35s ease; */
}

.div-banner-products .column-text > div a > span {
	display: none;
	color: white;
	/* font-size: 0.75rem;
	font-weight: 800;
	line-height: 1; */
	background: rgba(0, 0, 0, 0.6);
	padding: 1rem 1rem 0.5rem 1rem;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	bottom: 0;
	position: absolute;
	flex-direction: column;
	width: calc(100% - 2rem);
	min-height: 40px;
	align-items: left;
}
.div-banner-products .column-text > div a:hover > span {
	display: flex;
}
.div-banner-products .column-text > div a > span small {
	/* font-size: 11px;
	font-weight: 400; */
	margin-top: 4px;
}

.div-banner-products .column-text > div.width160 img {
	max-width: 160px;
	min-width: 160px;
	width: 160px;
}
/* BANNER PRODUCTS, finish */

.div-banner-products-grid.grid-products-products,
.div-banner-products-grid.grid-products-appl,
.div-banner-products-grid.grid-products-about {
	display: none;
}

/* Banner for PRODUCTS, start */
.div-banner-products-grid.grid-products-products {
	background: rgba(0, 0, 0, 0.9);
	border-radius: 12px;
	padding: 0.75rem;
	/* width: 65%; */
	position: relative;
	/* left: calc(40% - 1.5rem); */
	margin-top: 0;
	width: 100%;
	max-width: 980px;
}

.div-banner-products-grid.grid-products-products .column-text,
div.osensa-slider-container {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(calc(25% - 1rem), 1fr));
	justify-items: center;
}
div.osensa-slide {
	display: flex;
}

.div-banner-products-grid.grid-products-products .column-text > div,
div.osensa-slide {
	border-radius: 12px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	max-width: 230px;
	min-width: 230px;
	position: relative;
}

.div-banner-products-grid.grid-products-products
	.column-text
	> div
	.pr-grid-img-cont {
	max-height: 200px;
	min-height: 200px;
	display: flex;
	align-items: center;
	z-index: 8;
	width: 100%;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.div-banner-products-grid.grid-products-products .column-text > div span {
	display: block;
	width: calc(100% - 2rem);
	flex: 1;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	color: white;
	font-size: 1.25rem;
	font-weight: 500;
	padding: 1rem;
	z-index: 7;
}

.div-banner-products-grid.grid-products-products .column-text > div > a {
	display: block;
	width: 100%;
	height: 100%;
}

.div-banner-products-grid.grid-products-products .column-text > div:hover {
	border: 1px solid rgba(255, 255, 255, 0.8);
}

.div-banner-products-grid.grid-products-products .column-text > div:hover > a {
	/* transition: opacity .75s ease; */
}
/* Banner for PRODUCTS, finish */

/* Banner for APPLICATIONS, start */
.div-banner-products-grid.grid-products-appl {
	background: rgba(0, 0, 0, 0.9);
	border-radius: 12px;
	padding: 0.75rem;
	/* width: 70%; */
	position: relative;
	/* left: calc(30% - 1.5rem); */
	margin-top: -2px;
	width: fit-content;
}

.div-banner-products-grid.grid-products-appl .column-text {
	display: grid;
	grid-gap: 1rem;
	xxgrid-template-columns: repeat(auto-fit, minmax(calc(25% - 1rem), 1fr));
	grid-template-columns: repeat (5, 1fr);
	justify-items: center;
}

.div-banner-products-grid.grid-products-appl .column-text > div {
	border-radius: 12px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	max-width: 186px;
	min-width: 186px;
	position: relative;
}

.div-banner-products-grid.grid-products-appl .column-text > div:nth-of-type(1),
.div-banner-products-grid.grid-products-appl .column-text > div:nth-of-type(6),
.div-banner-products-grid.grid-products-appl .column-text > div:nth-of-type(10),
.div-banner-products-grid.grid-products-appl .column-text > div:nth-of-type(11),
.div-banner-products-grid.grid-products-appl
	.column-text
	> div:nth-of-type(15) {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.div-banner-products-grid.grid-products-appl
	.column-text
	> div
	.pr-grid-img-cont {
	max-height: 157px;
	min-height: 157px;
	display: flex;
	align-items: center;
	z-index: 8;
	width: 100%;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.div-banner-products-grid.grid-products-appl .column-text > div span {
	display: block;
	width: calc(100% - 2rem);
	flex: 1;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	color: white;
	font-size: 1rem;
	font-weight: 500;
	padding: 1rem;
	min-height: calc(79px - 2rem);
	z-index: 7;
}

.div-banner-products-grid.grid-products-appl
	.column-text
	> div:nth-of-type(1)
	span,
.div-banner-products-grid.grid-products-appl
	.column-text
	> div:nth-of-type(6)
	span,
.div-banner-products-grid.grid-products-appl
	.column-text
	> div:nth-of-type(11)
	span {
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.45em;
}

.div-banner-products-grid.grid-products-appl
	.column-text
	> div
	.banner-appl-title
	span {
	background: transparent;
	width: 100%;
	padding: 0;
}

.div-banner-products-grid.grid-products-appl
	.column-text
	> div
	.banner-appl-title {
	margin: 0 auto;
	padding: 0;
	width: calc(100% - 2rem);
}

.div-banner-products-grid.grid-products-appl .column-text > div > a {
	display: block;
	width: 100%;
	height: 100%;
}

.div-banner-products-grid.grid-products-appl .column-text > div.header > a {
	display: flex;
	align-items: center;
}

.div-banner-products-grid.grid-products-appl .column-text > div:hover {
	border: 1px solid rgba(255, 255, 255, 0.8);
}


.div-banner-products-grid.grid-products-appl .column-text > div:nth-of-type(10),
.div-banner-products-grid.grid-products-appl
	.column-text
	> div:nth-of-type(15) {
	cursor: auto;
	border: 1px solid rgba(255, 255, 255, 0.2);
}

.div-banner-products-grid.grid-products-appl .column-text > div:hover > a {
	/* transition: opacity .75s ease; */
}

/* Banner for APPLICATIONS, finish */

/* Banner for ABOUT, start */
.div-banner-products-grid.grid-products-about {
	background: rgba(0, 0, 0, 0.9);
	border-radius: 12px;
	padding: 0.75rem;
	/* width: 70%;  */
	position: relative;
	left: calc(30% - 1.5rem);
	margin-top: -2px;
	width: fit-content;
}

.div-banner-products-grid.grid-products-about .column-text {
	display: grid;
	grid-gap: 1rem;
	xxgrid-template-columns: repeat(auto-fit, minmax(calc(33.33% - 1rem), 1fr));
	grid-template-columns: repeat (5, 1fr);
	justify-items: center;
}

.div-banner-products-grid.grid-products-about .column-text > div {
	border-radius: 12px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.2);
	max-width: 186px; /* Changed from 230px to 186px */
	min-width: 186px; /* Changed from 230px to 186px */
	position: relative;
}

.div-banner-products-grid.grid-products-about
	.column-text
	> div
	.pr-grid-img-cont {
	max-height: 200px;
	min-height: 200px;
	display: flex;
	align-items: center;
	z-index: 8;
	width: 100%;
	justify-content: center;
	background: rgba(255, 255, 255, 0.2);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.div-banner-products-grid.grid-products-about .column-text > div span {
	display: block;
	width: calc(100% - 2rem);
	flex: 1;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	color: white;
	font-size: 1.25rem;
	font-weight: 500;
	padding: 1rem;
	min-height: calc(79px - 2rem);
	z-index: 7;
}

.div-banner-products-grid.grid-products-about .column-text > div > a {
	display: block;
	width: 100%;
	height: 100%;
	/* transition: opacity .75s ease; */
}

.div-banner-products-grid.grid-products-about .column-text > div:hover {
	border: 1px solid rgba(255, 255, 255, 0.8);
}

.div-banner-products-grid.grid-products-about .column-text > div:hover > a {
	/* transition: opacity .75s ease; */
}
/* Banner for ABOUT, finish */

/****************************** MEDIA QUERIES ***************************************/

/* all declarations for transition to desktop */
/* adjust this value to change when desktop nav starts */
/* ;nav-transition-from-mobile; */
@media (min-width: 1600px) {

	#top-nav.cms-nav .menu-parent-row > li:nth-of-type(3) > div > a {
		padding-right: 130px!important;
	}
}

@media only screen and (min-width: 1024px) {
	.menu-state {
		/* used by js during resize to know if we are seeing the hamburger(0) or fullwidth(1) version. */
		min-width: 1px; /* true: fullwidth menu version*/
	}

	#top-nav-wrap.hamburger-open {
		position: unset;
		top: unset;
		width: unset;
		right: unset;
		justify-content: right;
	}

	#top-nav-wrap.hamburger-open #top-nav {
		flex-basis: unset;
		background: unset;
		max-height: unset;
		overflow-y: unset;
	}

	#top-nav {
		display: unset;
	}

	#top-nav.cms-nav ul.menu-parent-row {
		display: flex;
		flex-direction: row;
		margin-right: -1rem;
	}

	#top-nav.cms-nav ul.menu-child-row {
		position: absolute;
		display: none; /* sub-menus were hidden */
	}
	/* right adjust for right most element(s) */
	/* the number of elements to include here will depend on the width of the elements */
	#top-nav li:nth-last-child(-n + 5) > .menu-child-row {
		right: 0;
	}

	#hamburger-wrap {
		display: none;
	}

	body:not(.is-mobile)
		#top-nav.cms-nav
		.menu-parent-row
		> .with-arrow
		> div
		> .menu-button {
		display: none;
	}

	/* parent row open/close button on desktop */
	.cms-nav .menu-parent-row > li > div > .menu-button:before,
	.cms-nav .menu-parent-row > li > div > .menu-button:after {
		background: black;
	}

	.cms-nav .menu-parent-row > li.with-arrow > div > span.menu-button {
		position: absolute;
		top: 50%;
		right: -0.45rem;
		padding: 0;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	.cms-nav .menu-parent-row > li > div > .menu-button:before,
	.cms-nav .menu-parent-row > li > div > .menu-button:after {
		background: black;
	}

	.cms-nav .menu-parent-row > li.with-arrow > div > span.menu-button {
		position: absolute;
		top: 50%;
		right: -0.45rem;
		padding: 0;
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}

	/* ;edit-top-menu-parent-divs-desktop; */
	#top-nav.cms-nav .menu-parent-row > li > div {
		border-bottom: none;
		background: transparent;
		color: white;
		font-size: 1rem;
		font-weight: 600;
	}

	#top-nav.cms-nav .menu-parent-row > li:last-child > div {
		padding-right: 0;
	}

	#top-nav.cms-nav .menu-parent-row > li.marked-group > div:after,
	#top-nav.cms-nav .menu-parent-row > li:hover > div:after {
		width: calc(100% - 2rem - 2px);
		content: "";
		position: absolute;
		left: 50%;
		top: 0.4rem;
		transform: translateX(-50%);
		height: 2.5px;
		background: var(--brand-a);

		display: none;
	}

	/*  Added styles for the active menu item, START  */
	#top-nav.cms-nav .menu-parent-row > li > div > a {
		position: relative;
		/*
    font-size: 1.25rem;
    font-weight: 700;
    */
		font-size: 1rem;
		font-weight: 600;
		width: fit-content;
		/* transition: color .6s ease; */
	}
	#top-nav.cms-nav .menu-parent-row > li:nth-of-type(3) > div > a {
		/* padding-right: 6rem; */
		padding-right: 8vw;
	}

	#top-nav.cms-nav .menu-parent-row > li.marked-group > div > a {
		color: var(--brand-a-hover);
	}

	#top-nav.cms-nav .menu-parent-row > li:hover > div > a {
		/* text-decoration: underline; */
		/* color: var(--brand-b-color); */
		color: var(--brand-a-hover);
		/* transition: color .6s ease; */
	}
	/*  Added styles for the active menu item, FINISH  */

	/* set colors for buttons */
	#top-nav .menu-parent-row > .with-arrow > div > .menu-button {
		background: var(--menu-top-arrow-background); /* button background */
	}
	#top-nav .menu-parent-row > .with-arrow > div > .menu-button > span::before,
	#top-nav .menu-parent-row > .with-arrow > div > .menu-button > span::after {
		background: var(--menu-top-arrow-color); /* button color */
	}

	.cms-nav ul.menu-child-row > li > div a,
	.cms-nav ul.menu-child-row > li > div > span {
		padding-left: 1rem;
	}

	#top-nav .menu-parent-row > li.with-arrow > div span.menu-button {
		display: none;
	}
}

@media only screen and (max-width: 1400px) {
	#top-nav.cms-nav .menu-parent-row > li > div > a,
	#top-nav.cms-nav .menu-parent-row > li > div {
		font-size: 1rem;
	}

	#top-nav.cms-nav .menu-parent-row > li:nth-of-type(3) > div > a {
		padding-right: 1rem;
	}
}

@media only screen and (max-width: 1400px) {
	.div-banner-products .column-text > div,
	div.osensa-slide {
		max-width: 280px;
		min-width: 280px;
		width: 280px;
		max-height: 280px;
		min-height: 280px;
		height: 280px;
	}
}

@media only screen and (max-width: 375px) {
	#mobileMenu {
		margin: 0 0.5rem 0 0;
	}
}

/* Overriding */
#top-nav-wrap #top-nav .menu-parent-row li:nth-child(1) .menu-button,
#top-nav-wrap #top-nav .menu-parent-row li:nth-child(2) .menu-button,
#top-nav-wrap #top-nav .menu-parent-row li:nth-child(3) .menu-button {
	display: none;
}