
/* Open in place stuff */


html.oipContainerOpen
{
	overflow: hidden !important;
}

html.oipContainerOpen::after
{
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
	display: block;
	width: 100%;
	height: 100%;
	background: #000000;
	opacity: .7;

}


#oipContainer
{
	position: fixed;
	top: 0;
	left: -90%;
	background: #ffffff;
	width: 90%;
	max-width: 1486px;
	height: 100%;
	z-index: 9999;

	padding: 0 0 50px;
	box-sizing: border-box;

	--fluid-start: 1280;
	--fluid-end: 1920;
	overflow-y: scroll;

	transition: all 750ms ease 200ms;


}


#oipContainer::-webkit-scrollbar
{
	display: none;
}

#oipContainer
{
  -ms-overflow-style: none;
  scrollbar-width: none;


	padding: 0
			max(30px,
				min(95px, 30px + (95 - 30) * ((100vw - 767px) / (1800 - 767))
			))
			100px;
}

html.oipContainerOpen #oipContainer
{
	left: 0%;
}


#oipContainer h1#contentTitle
{
	margin-top: 0;
}

#oipContainer header
{
	position: sticky;
	top: 0;
	left: 0;
	height: 110px;
	padding-top: 57px;
	margin-bottom: max(30px,
			 min(50px, 30px + (50 - 30) * ((100vw - 767px) / (1600 - 767))
	));
	border-bottom: 1px solid #D6CFCF;
	background: #ffffff;
	box-sizing: border-box;
	z-index: 100;
}

#oipContainer header #headerTitle
{
	font-size: 17px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--dark-blue);
}

#oipContainer nav button:not(#closeoipContainer)
{
	position: relative;
	padding-right: 18px;
	background: none;
	border: none;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	text-transform: uppercase;
	color: var(--dark-blue);
	letter-spacing: 1px;
}

#oipContainer nav button + button:not(#closeoipContainer)::after
{
	position: absolute;
	right: 0;
	top: 13px;
	content: '›';
	font-size: 30px;
	font-weight: 300;
	line-height: 0;
}

#oipContainer nav button:not(#closeoipContainer):first-child
{
	padding-right: 0;
	padding-left: 18px;
}

#oipContainer nav button:not(#closeoipContainer):first-child::after
{
	content: '|';
	margin: 0 10px 0 15px;
	color: #ADA9A9;
}

#oipContainer nav button:not(#closeoipContainer):first-child::before
{
	position: absolute;
	left: 0;
	top: 13px;
	content: '‹';
	font-size: 30px;
	font-weight: 300;
	line-height: 0;
}

#oipContainer nav button.hideMe:not(#closeoipContainer) span,
#oipContainer nav button.hideMe:not(#closeoipContainer)::before,
#oipContainer nav button + button.hideMe:not(#closeoipContainer)::after
{
	opacity: .1;
	cursor: default;
}

#oipContainer nav
{
	display: flex;
	position: absolute;
	top: 15px;
	right: 5px;
}

#oipContainer nav button#closeoipContainer
{
	/*position: absolute;
	top: 20px;
	right: 20px;*/
	position: relative;
	width: 30px;
	height: 30px;
	background: none;
	border: none;
	padding: 0;
	margin-left: 45px;
	margin-right: 12px;
	cursor: pointer;

}

button#closeoipContainer::after,
button#closeoipContainer::before
{

	position: absolute;
	left: calc(50% - 15px);
	top: calc(50% - 1px);

	transform: rotate(45deg);

	content: '' !important;
	display: block;
	width: 30px;
	height: 1px;
	background: var(--dark-blue);
}

button#closeoipContainer::before
{
	transform: rotate(-45deg);
}

#oipContainer #mainContentWrapper
{
	padding: 0 0 200px;
}

#oipContainer .newTabLink
{
	position: sticky;
	right: 0;
	bottom: 0px;
	width: calc( 100% + max(30px,
				min(95px, 30px + (95 - 30) * ((100vw - 767px) / (1800 - 767))
			)));
	text-align: right;
}

#oipContainer .newTabLink a
{
	padding: 12px 18px 12px 13px;
	font-size: 15px;
	line-height: 1;
	background: var(--Deep-Teal);
	text-transform: uppercase;
	color: #ffffff;
	letter-spacing: 1px;
}

#oipContainer .newTabLink a:is(:hover,:focus)
{
    background: var(--SG-Blue);
}

#oipContainer .newTabLink a svg
{
	position: absolute;
	right: 13px;
	top: 5px;
	fill: currentColor;
}

#itemImage
{
	margin: 40px 0;
}

#itemImage img
{
	display: block;
	width: 100%;
	height: auto;
}



#itemButtons > .view_more,
#itemButtons > .view_more a
{
	margin: 0;
}

#itemButtons
{
	margin: 20px 0;
	overflow: hidden;
}

#itemButtons > div
{
	float: left;
	margin-right: 10px !important;
	margin-bottom: 10px !important;
}

#itemInfo
{
	overflow: hidden;
}

#itemInfo > div
{
	float: left;
	--max-font-size: 19;
	text-transform: uppercase;
	letter-spacing: 1.52px;
	color: var(--Navy);
	font-weight: 400;
}

#itemInfo > div:not(:last-child)::after
{
	content: '|';
	margin: 0 15px;
	color: var(--Deep-Teal);
}

@media (min-width: 920px)
{
	#oipContainer nav
	{
		top: 54px;
	}

	#oipContainer nav button#closeoipContainer
	{
		margin-left: 55px;

	}
}



/*------------------------------------------------------------
--------------------- END HERE -------------------------------
--------------------------------------------------------------*/
