.PFA {
	background: var(--black);
	overflow: hidden;
}

.PFA .b-frame {
	padding-top: 60rem;
	padding-bottom: 60rem;
}

.PFA .b-frame::before,
.PFA .b-frame::after {
	content: "";
	display: block;
	overflow: hidden;
}

.PFA .content {
	position: relative;
}

.PFA .content p {
	max-width: 760rem;
}

.PFA .b-button:not(.alt-outline) {background: var(--orange);}
.PFA .b-button:hover {background: var(--white) !important; color: var(--black) !important;}
.PFA .b-button.alt-outline:not(:hover) {background: var(--dark-grey);}



/* no img */

.PFA[data-style="no-img"] .bg-deco {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-40rem, -50%);
	width: 730rem;
	height: 1050rem;
}

.PFA[data-style="no-img"] .bg-deco svg {
	fill: var(--orange);
	width: 100%;
	height: 100%;
}

.PFA[data-style="no-img"] .b-columns {min-height: 240rem;}



/* animation */

.PFA[data-style="animation"] .b-column:nth-child(2) {
	align-self: stretch;
}

.PFA[data-style="animation"] .image {
	margin: -60rem -100rem 0 0;
	position: relative;
	height: calc(100% + 120rem);
	overflow: hidden;
	min-height: 560rem;
}

.PFA[data-style="animation"] .image .deco {
	width: 660rem;
	height: 770rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.PFA[data-style="animation"] .image .deco svg {
	fill: var(--orange);
	width: 100%;
	height: 100%;
}

.PFA[data-style="animation"] .image .mask {
	width: 466rem;
	height: 477rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	clip-path: polygon(37.5% 0%, 62.5% 0%, 100% 100%, 0% 100%);
}

.PFA[data-style="animation"] .image img {
	width: 100%;
	height: 100%;
}


/* right side */

.PFA[data-style="right-side"] .image {
	margin: -60rem -380rem -60rem 100rem;
	position: relative;
}

.PFA[data-style="right-side"] .image::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 62rem;
	width: 100rem;
	height: 100%;
	background: var(--orange);
	transform: skewX(-21deg);
}

.PFA[data-style="right-side"] .image .mask {
	clip-path: polygon(27% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/*with mobile image*/
.mobile-image {
  width: 70%;
  float: right;
  transform: translateX(16%);
  padding-bottom: 30rem;
}

.tablet-image {
	transform: translateX(18%);
}

/* accent */

.PFA[data-accent="orange"] .b-button:not(.alt-outline) {background: var(--orange); color: var(--black);}
.PFA[data-accent="orange"] .bg-deco svg {fill: var(--orange);}
.PFA[data-accent="orange"] .image .deco svg {fill: var(--orange);}
.PFA[data-accent="orange"] .image::after {background: var(--orange);}

.PFA[data-accent="green"] .b-button:not(.alt-outline) {background: var(--green); color: var(--black);}
.PFA[data-accent="green"] .bg-deco svg {fill: var(--green);}
.PFA[data-accent="green"] .image .deco svg {fill: var(--green);}
.PFA[data-accent="green"] .image::after {background: var(--green);}

.PFA[data-accent="blue"] .b-button:not(.alt-outline) {background: var(--blue); color: var(--white);}
.PFA[data-accent="blue"] .bg-deco svg {fill: var(--blue);}
.PFA[data-accent="blue"] .image .deco svg {fill: var(--blue);}
.PFA[data-accent="blue"] .image::after {background: var(--blue);}



@media screen and (min-width: 961px) {
	.PFA .content h1,
	.PFA .content .b-h1 {margin-right: -60rem;}
	.PFA .content p {margin: 1.5em 0; font-size: 22rem;}

	.PFA[data-style="right-side"] .content h1,
	.PFA[data-style="right-side"] .content .b-h1 {margin-right: -200rem;}
}

/* override for homepage header tablet sizes */
@media only screen and (min-width:701px) and (max-width:960px) { 
	.front-page-header.PFA .b-column:nth-child(1) {order: 1;}  
	.front-page-header.PFA 	.PFA .b-column:nth-child(2) {order: 2;}
	.front-page-header.PFA .b-button {width: auto;}

	.PFA .b-column:nth-child(1) {order: 2; width:40%;}
	.PFA .b-column:nth-child(2) {order: 1; width:60%;}
}

@media screen and (max-width: 700px) {
	.PFA .b-column:nth-child(1) {order: 2 !important;}
	.PFA .b-column:nth-child(2) {order: 1 !important;}
}

@media screen and (max-width: 960px) {
	.PFA .b-button {width: 100%; margin-right: 0 !important;}
	.PFA .b-button + .b-button {margin-top: 1em !important;}

	.PFA[data-style="no-img"] .bg-deco {display: none;}
	.PFA[data-style="no-img"] .b-columns {min-height: 0;}

	.PFA[data-style="animation"] .image {margin: 0; height: auto; min-height: 0;}
	.PFA[data-style="animation"] .image .deco {display: none;}
	
	.PFA[data-style="animation"] .image .mask {width: auto; height: auto; transform: none; position: static; clip-path: none;}

	.PFA[data-style="right-side"] .image {margin: 0;}
	.PFA[data-style="right-side"] .image::after {display: none;}
	.PFA[data-style="right-side"] .image .mask {width: auto; height: auto; transform: none; position: static; clip-path: none;}
}

/* override for homepage image with no decoration */

.front-page-header.no-deco .deco {
	display: none;
}

.front-page-header.no-deco .mask {
	clip-path: none !important;
}




/* ANIMATION */

@media screen and (min-width: 701px) {
	body .PFA[data-style="animation"] .mobile-image {display: none;}
}

@media screen and (max-width: 700px) { 
	body .PFA[data-style="animation"] .tablet-image {display: none;}
}

@media screen and (min-width: 961px) { 
	body .PFA[data-style="animation"] .tablet-image {display: none;}
}

@media screen and (max-width: 960px) {
	.PFA[data-style="animation"] .image.has-mobile {display: none;}
}

@media screen and (min-width: 961px) {
	body .PFA[data-style="no-img"] .bg-deco svg path {transition: transform 0.3s;}
	body .PFA[data-style="no-img"] .bg-deco svg path:nth-child(1),
	body .PFA[data-style="no-img"] .bg-deco svg path:nth-child(2) {transition-delay: 0.15s;}
	body.b-loading .PFA[data-style="no-img"] .bg-deco svg path:nth-child(1) {transform: translate(16%, 30%);}
	body.b-loading .PFA[data-style="no-img"] .bg-deco svg path:nth-child(2) {transform: translate(-16%, 30%);}
	body.b-loading .PFA[data-style="no-img"] .bg-deco svg path:nth-child(3),
	body.b-loading .PFA[data-style="no-img"] .bg-deco svg path:nth-child(4) {transform: translate(-16%, -30%);}
	body:not(.b-loading) .PFA[data-style="no-img"] .bg-deco svg path {transform: translate(0, 0);}



	body .PFA[data-style="animation"] .image .mask {transition: opacity 0.6s; transition-delay: 0.2s;}
	body.b-loading .PFA[data-style="animation"] .image .mask {opacity: 0;}
	body:not(.b-loading).PFA[data-style="animation"] .image .mask {opacity: 1;}

	

	body .PFA[data-style="animation"] .image .deco svg path {transition: transform 0.3s;}
	body.b-loading .PFA[data-style="animation"] .image .deco svg path:nth-child(1),
	body.b-loading .PFA[data-style="animation"] .image .deco svg path:nth-child(2) {transform: translate(-9%, -20%);}
	body.b-loading .PFA[data-style="animation"] .image .deco svg path:nth-child(3) {transform: translate(-35%, -81%);}
	body.b-loading .PFA[data-style="animation"] .image .deco svg path:nth-child(4) {transform: translate(35%, -81%);}
	body.b-loading .PFA[data-style="animation"] .image .deco svg path:nth-child(5),
	body.b-loading .PFA[data-style="animation"] .image .deco svg path:nth-child(6) {transform: translate(-9%, 20%);}
	body:not(.b-loading) .PFA[data-style="animation"] .image .deco svg path {transform: translate(0, 0);}




	body .PFA[data-style="right-side"] .image .mask {transition: opacity 0.4s; transition-delay: 0.2s;}
	body.b-loading .PFA[data-style="right-side"] .image .mask {opacity: 0;}
	body:not(.b-loading).PFA[data-style="right-side"] .image .mask {opacity: 1;}

	body .PFA[data-style="right-side"] .image::after {transition: transform 0.3s;}
	body.b-loading .PFA[data-style="right-side"] .image::after {transform: skewX(-21deg) translate(0, -100%);}
	body:not(.b-loading) .PFA[data-style="right-side"] .image::after {transform: skewX(-21deg) translate(0, 0);}
}