#page7 {
	background: var(--offWhite);
}


#page7 .textBlock {
	color:var(--darkGrey);
}

#page7 .textBlock .head {
	width: 100%;
	text-align: center;
	position: relative;
	top: -10rem;
}

#page7 .textBlock .head h4 {
	font-weight: 400;
	font-size: 28rem;
	text-transform: none;
}


#page7 .textBlock .head h2 {
	font-size: 32.5rem;
	display: block;
	margin: 10rem 0 0;
}

#page7 .boxLeft ,#page7 .boxRight, #page7 .boxBottom {
	position: absolute;
	top: 123rem;
	left: -2rem;
	width: 230rem;
	height: 645rem;
	box-sizing: border-box;
	border: solid 2px var(--offWhite);
	border-radius: 20rem;
	padding: 30rem 15rem 20rem;
	white-space: wrap;
	text-align: center;
	font-weight: 500;
	line-height: 1.35;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}



#page7 .header {
	position: absolute;
	top: -15rem;
	left: 15rem;
	background: var(--offWhite);
	font-weight: 900;
	font-size: 20rem;
	padding: 0 13rem;
	letter-spacing: .1rem;
}

#page7 .colorBox {
	white-space: wrap;
	padding: 34rem 0;
	text-align: center;
	font-weight: 500;
	line-height: 1.35;
	border-radius: 20rem;
}

#page7 .boxLeft .header {
	color: var(--aquaGreen);
}

#page7 .boxLeft .colorBox{
	background: var(--lightAquaGreen);
}
#page7 ul{
	text-align: left;
	font-size: 14rem;
	padding: 0 0 0 22rem;
	letter-spacing: .3rem;
}

#page7 li::marker{
	color: inherit;
	font-size: inherit;
}

#page7 li{
	margin-top: 8rem;
}

#page7 .citation {
	text-align: left;
	font-size: 10rem;
	line-height: 1.2;
}

#page7 .boxRight {
	left: 246rem;
	width: 886rem;
	height: 482rem;
	flex-direction: row;
}

#page7 .boxRight .header {
	color: var(--orange);
	left:46rem;
}

#page7 .boxRight .arrow {
	position: absolute;
	left: 0;
	top: 61rem;
	width: 43rem;
	height: 88rem;
	overflow: hidden;
	transform: scale(1,1.4);
	transform-origin: top left;
}

#page7 .boxRight .arrow::after {
	content: "";
	display: block;
	width: 74rem;
	height: 75rem;
	background-color: var(--orange);
	transform-origin: center;
	transform: rotate(45deg);
	position: absolute;
	right: 16rem;
	top: 6rem;
}

#page7 .boxRight .colorBox, #page7 .boxBottom .colorBox{
	background: var(--lightOrange);
	width: 468rem;
	font-size: 19rem;
}

#page7 .boxBottom .colorBox {
	width: 320rem;
	padding: 20rem 34rem;
	box-sizing: border-box;
	line-height: 1.1;
	text-align: left;
}

#page7 .boxBottom .colorBox span {
	font-size: 16rem;
}

#page7 .boxRight .colorBox.white{
	background: #ffffff;
	display: flex;
	justify-content: space-evenly;
}

#page7 .boxRight .colorBox .boxSection {
	text-align: left;
	width: 185rem;
	font-size: 14.5rem;
}

#page7 .boxRight h2{
	color: var(--orange);
}

#page7 .boxBottom h2 {
	color: var(--orange);
	display: block;
	font-size: 24rem;
}

#page7 .boxRight h2 span{
	font-size: 30rem;
	font-weight: 900;
}

#page7 h5 {
	display: block;
	font-size: 18rem;
	padding: 4rem 0;
	margin: 10rem 0;
}

#page7 .boxRight .colorBox .boxSection h5{
	letter-spacing: .8rem;
	margin: 4rem 0;
	line-height: 1;
}


#page7 .boxRight .leftSide, #page7 .boxBottom .leftSide{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#page7 .boxRight .rightSide{
	width:362rem;
	position: relative;
}

#page7 .boxBottom .rightSide {
	width: 100%;
	position: relative;
	display: flex;
	font-size: 16rem;
	padding: 26rem 0;
}

#page7 .boxBottom .rightSide div{
	width:25%;
}

#page7 table {
	font-size: 12rem;
	font-weight: 500;
	border-collapse: collapse;
	margin: 10rem 0 12rem;
	width: 100%;
}

#page7 table th{
	background: var(--lightGrey);
}
#page7 table th,#page7 table td{
	border: solid 1px var(--darkGrey);
	vertical-align: middle;
	text-align: center;
	white-space: nowrap;
	padding: 6rem 3rem;
}

#page7 table .column1{
	width:40%;
}

#page7 table .column2{
	width:30%;
}

#page7 table .column3{
	width:30%;
}

#page7 table td.column3{
	background: var(--lightOrange);
}

#page7 .boxRight .rightSide .citation{
	padding-top: 8rem;
	font-size: 9.5rem;
	line-height: 1.2;
}

#page7 .boxBottom {
	top: 616rem;
	left: 246rem;
	width: 886rem;
	height: 153rem;
	flex-direction: row;
	padding: 15rem;
	gap: 15rem;
}

#page7 sup{
	font-size: 10rem;
}

#page7 #page7PopUp1 {
	top: 465rem;
	left: 195rem;
}
#page7 #page7PopUp2 {
	top: 212rem;
	left: 357rem;
}
#page7 #page7PopUp3 {
	top: 446rem;
	left: 357rem;
}
#page7 #page7PopUp4 {
	top: 520rem;
	left: 357rem;
}
#page7 #page7PopUp5 {
	top: 597rem;
	left: 976rem;
}

/*=============================================== Animations ================================================*/

#page7 .head{
	transform: scale(.5);
	opacity: 0;
}

#page7.animate .head{
	transform: scale(1);
	opacity: 1;
	transition: opacity .5s linear, transform 1s cubic-bezier(0,.5,0,1);
	transition-delay: .25s;
}

#page7 .header span, #page7 .colorBox, #page7 .boxBody, #page7 .rightSide{
	opacity: 0;
}

#page7.animate .boxLeft .header span{
	opacity: 1;
	transition: opacity 1s linear .5s;
}

#page7.animate .boxLeft .colorBox{
	opacity: 1;
	transition: opacity 1s linear .75s;
}

#page7.animate .boxLeft .boxBody{
	opacity: 1;
	transition: opacity 1s linear 1s;
}

#page7.animate .boxRight .header span{
	opacity: 1;
	transition: opacity 1s linear .75s;
}

#page7.animate .boxRight .colorBox{
	opacity: 1;
	transition: opacity 1s linear 1s;
}

#page7.animate .boxRight .colorBox.white{
	opacity: 1;
	transition: opacity 1s linear 1.25s;
}

#page7.animate .boxRight .rightSide{
	opacity: 1;
	transition: opacity 1s linear 1.5s;
}

#page7.animate .boxBottom .colorBox{
	opacity: 1;
	transition: opacity 1s linear 1.75s;
}

#page7.animate .boxBottom .rightSide{
	opacity: 1;
	transition: opacity 1s linear 2s;
}

#page7 .boxRight .arrow::after{
	right: 60rem;
}

#page7.animate .boxLeft.boxOutline::before{
	border: solid 2px var(--aquaGreen);
	animation-delay: .5s;
	animation-name: animateLeftBoxBorder;
	clip-path: polygon(50% 50%, -1% -20%, 101% -20%, 101% -20%, 101% -20%, 101% -20%);
}

#page7.animate .boxRight.boxOutline::before{
	border: solid 2px var(--orange);
	animation-delay: .75s;
	animation-name: animateRightBoxBorder;
	clip-path: polygon(50% 50%, -1% -20%, 49% -1%, 49% -1%, 49% -1%, 49% -1%);
}
#page7.animate .boxBottom.boxOutline::before{
	border: solid 2px var(--orange);
	animation-delay: 1.25s;
	animation-name: animateBottomBoxBorder;
	clip-path: polygon(50% 50%, 101% -1%, 101% -1%, 101% -1%, 101% -1%, 101% -1%);
}

#page7.animate .boxOutline::before{
	content: "";
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	top:-1rem;
	left: -1rem;
	border-radius: 20rem;

	animation-duration: 1.5s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	animation-timing-function:linear;
	pointer-events: none;
}

@keyframes animateLeftBoxBorder{
	0%{
		clip-path: polygon(50% 50%, -1% -20%, 101% -20%, 101% -20%, 101% -20%, 101% -20%);
		animation-timing-function: cubic-bezier(.4,0,.75,.25);
	}
	45%{
		clip-path: polygon(50% 50%, -1% -20%, 101% -1%, 101% 101%, 101% 101%, 101% 101%);
		animation-timing-function:linear;
	}
	55%{
		clip-path: polygon(50% 50%, -1% -20%, 101% -1%, 101% 101%, -1% 101%, -1% 101%);
		animation-timing-function: cubic-bezier(.3,.85,.36,1);
	}
	100%{
		clip-path: polygon(50% 50%, -1% -20%, 101% -1%, 101% 101%, -1% 101%, -1% -20%);
	}
}

@keyframes animateRightBoxBorder{
	0%{
		clip-path: polygon(50% 50%, -1% -20%, 49% -1%, 49% -1%, 49% -1%, 49% -1%);
		animation-timing-function: cubic-bezier(.4,0,.75,.25);
	}
	30%{
		clip-path: polygon(50% 50%, -1% -20%, 101% -1%, 101% -1%, 101% -1%, 101% -1%);
		animation-timing-function:linear;
	}
	40%{
		clip-path: polygon(50% 50%, -1% -20%, 101% -1%, 101% 101%, 101% 101%, 101% 101%);
		animation-timing-function:linear;
	}
	55%{
		clip-path: polygon(50% 50%, -1% -20%, 101% -1%, 101% 101%, -1% 101%, -1% 101%);
		animation-timing-function: cubic-bezier(.3,.85,.36,1);
	}
	100%{
		clip-path: polygon(50% 50%, -1% -20%, 101% -1%, 101% 101%, -1% 101%, -1% -20%);
	}
}

@keyframes animateBottomBoxBorder{
	0%{
		clip-path: polygon(50% 50%, 101% -1%, 101% -1%, 101% -1%, 101% -1%, 101% -1%);
		animation-timing-function: cubic-bezier(.4,0,.75,.25);
	}
	25%{
		clip-path: polygon(50% 50%, 101% -1%, 101% 101%, 101% 101%, 101% 101%, 101% 101%);
		animation-timing-function:linear;
	}
	50%{
		clip-path: polygon(50% 50%, 101% -1%, 101% 101%, -1% 101%, -1% 101%, -1% 101%);
		animation-timing-function:linear;
	}
	55%{
		clip-path: polygon(50% 50%, 101% -1%, 101% 101%, -1% 101%, -1% -1%, -1% -1%);
		animation-timing-function: cubic-bezier(.3,.85,.36,1);
	}
	100%{
		clip-path: polygon(50% 50%, 101% -1%, 101% 101%, -1% 101%, -1% -1%, 101% -1%);
	}
}

#page7.animate .boxRight .arrow::after{
	right:16rem;
	transition: right 1s cubic-bezier(0,.6,0,1) 2.5s;
	pointer-events: none;
}