:root {
    --orange: #EA7600;
    --light-grey: #888B8D;
    --med-grey: #5F5F61;
    --dark-grey: #313131;
}

.inlineWithLogo {
    margin-left : 20%
}

.productDetailsBlurb{
    min-height: 100px;
}

.productImg{
    max-width: 685px;
	max-height: 685px;
    position: relative;
}

.commonText{
	font-family : 'Montserrat', sans-serif;
	color :#888B8D
}
.lh-150 {
    line-height: 1.5;
}
.lh-200 {
    line-height: 2;
}
.lh-250 {
    line-height: 2.5;
}

.global_subheader {
	font-size : 31px !important;
	color : #888b8d ;
	font-family: montserrat, sans-serif !important;
	font-weight: 500 !important;
	line-height : 36px;
	text-transform: uppercase;
	padding-bottom: 1rem;
	margin-bottom: 0.5rem;
	letter-spacing: 2px
}

.global_subheader_white {
	font-size : 31px !important;
	color : #ffffff ;
	font-family: montserrat, sans-serif !important;
	font-weight: 500 !important;
	line-height : 36px;
	text-transform: uppercase;
	padding-bottom: 1rem;
	margin-bottom: 0.5rem;
	letter-spacing: 2px
}

.global_body_text{
	font-family: montserrat, sans-serif;
    color: #5F5F5F;
    font-size: 13px;
    font-weight: 300;
    line-height: 26px;
}


.global_body_text_white{
	font-family: montserrat, sans-serif;
    color: #ffffff;
    font-size: 13px;
    font-weight: 300;
    line-height: 26px;
}



.whiteTransparentBtn{
	position: absolute;
    left: 50%;
	transform: translateX(-50%);	
	border: 2px solid #FFFFFF !important;
	border-radius: 5px;
	text-decoration: none; 
	padding-left: 64px;
	padding-right: 64px;

}

.whiteTransparentBtn p{
	text-transform: uppercase;
	color:#FFFFFF !important;
	font-family: montserrat, sans-serif;
	margin-top: 8px;
	margin-bottom: 8px;
	white-space: nowrap; 

}
.whiteTransparentBtn:hover {
    background-color: #FFFFFF !important;
}

.whiteTransparentBtn:hover p {
    color: var(--standard-juniper-orange) !important;  
}



#getQuoteNavBtn {
    padding: 2px 32px;
    border-radius: 5px;
    text-decoration: none; 
    margin-right: 16px;
    background: transparent; /* Transparent background by default */
    border: 2px solid #FFFFFF; /* White border */
}

#getQuoteNavBtn p {
    text-transform: uppercase;
    color: #FFFFFF; /* White text by default */
    font-family: montserrat, sans-serif;
    margin: 0;
}

#getQuoteNavBtn:hover {
    background: var(--orange); /* Orange background on hover */
	border: 2px solid var(--orange);
}



/*------------------------------------------------------------------------------------------------*\

| xxs breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 320px) {

	#scrollspy_nav #getQuoteNavBtn {
		display: none;
	}
}

/*------------------------------------------------------------------------------------------------*\

| xs breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 321px) and (max-width: 480px) {
	#scrollspy_nav #getQuoteNavBtn {
		display: none;
	}
}

/*------------------------------------------------------------------------------------------------*\

| sm breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 481px) and (max-width: 768px) {
	#scrollspy_nav #getQuoteNavBtn {
		display: none;
	}
}

/*------------------------------------------------------------------------------------------------*\

| md breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	#scrollspy_nav #getQuoteNavBtn {
		margin-left: auto;  
		padding: 2px 16px;
	}
}

/*------------------------------------------------------------------------------------------------*\

| lg breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
  /* Your CSS rules here */
}

/*------------------------------------------------------------------------------------------------*\

| xl breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1281px) and (max-width: 1440px) {
  /* Your CSS rules here */
}

/*------------------------------------------------------------------------------------------------*\

| xxl breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1441px) and (max-width: 1920px) {
  /* Your CSS rules here */
}

/*------------------------------------------------------------------------------------------------*\

| xxxl breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1921px) {
  /* Your CSS rules here */
}