.customizeMappingSection {
    --standard-left-margin		: 14%;
    --standard-juniper-orange	: #EA7600;
}
.customizeMappingSection {
    position	: relative;
    width		: 100%;
    height		: 576px;
    overflow	: hidden;
	
}

.customizeMappingBackground {
	position	: relative;
	width		: 100%;
	height		: 100%;
	object-fit	: cover;
	z-index		: -1; /* Puts image behind the content */
}

.customizeMappingCopy {
    position	: absolute;
    top			: 45%;
    left		: 55%;
    transform	: translate(-50%, -50%); /* Centers the content */
    z-index		: 1; /* Puts content in front of the image */
	max-width	: 42%;
}

.customizeMappingTitle{
	color: #FFFFFF;
	font-size: 30px !important;
}

.customizeMappingText{
	color: #FFFFFF;
	margin-bottom:64px
}

.customizeMappingButton{
	position: absolute;
    left: 45%;
	transform: translateX(-50%);	
	border: 2px solid #FFFFFF;
	border-radius: 5px;
	text-decoration: none; 

}

.customizeMappingButton p{
	text-transform: uppercase;
	color:#FFFFFF;	
	font-family: montserrat, sans-serif;
	margin-left: 64px;
	margin-top: 8px;
	margin-right: 64px;
	margin-bottom: 8px;
	white-space: nowrap; 

}
.customizeMappingButton:hover {
    background-color: #FFFFFF;
}

.customizeMappingButton:hover p {
    color: var(--standard-juniper-orange);  /* Set this to whatever color you want the text to be when hovered */
}


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

| xxs breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 320px) {
	.customizeMappingCopy {
		top: 5%;
		left: 10%;
		transform: translate(0, 0); /* Centers the content */
		max-width: 80%;
	}
}

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

| xs breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 321px) and (max-width: 480px) {
	.customizeMappingCopy {
		top: 15%;
		left: 10%;
		transform: translate(0, 0); /* Centers the content */
		max-width: 80%;
	}
}

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

| sm breakpoint

\*------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 481px) and (max-width: 768px) {
	.customizeMappingCopy {
		top			: 15%;
		left		: 20%;
		transform	: translate(0, 0); /* Centers the content */
		max-width	: 60%;
	}
}

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

| md breakpoint

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

}

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

| 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 */
}