#page2{
	
}

#page2 .background{
	z-index: 1;
}

#page2 .background img{
	position: absolute;
	width: 100%;
	height: auto;
	top:0;
	left: 0;
}

#page2Hero {
	position: absolute;
	width: 100%;
	height: 1060rem; /*542rem;*/
	top:0;
	left: 0;
	overflow: hidden;
	border-radius: 0 0 120rem 0;
}

#page2 .background #page2HeroImage{
	position: relative;
	width: 100%;
	height: auto;
}

#page2 .background .sky {
    width: 100%;
    aspect-ratio: 1262/946;
    background-image: url(../images/HeroSkyPg2.jpg);
    background-size: 50% 100%;
    position: absolute;
    top: 0;
    left: 0%;
    animation: slide-left 100s linear infinite;
    z-index: 0;
}

#page2 h2{
	opacity: 0;
	position: relative;
	top:30rem;
}

#page2 .subHead{
	margin-top: 24rem;
	opacity: 0;
	position: relative;
	top:30rem;
}

#page2 .polyArrows {
    width: 100%;
    height: 96rem;
    margin: 32rem -5rem;
    position: relative;
}

#page2 .polyArrows .poly {
    height: 100%;
    aspect-ratio: 140/60;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-right: -18rem;
    opacity: 0;
    padding: 0 0 0 10rem;
    box-sizing: border-box;
}

#page2 .polyArrows .poly .text {
	position: absolute;
	font-weight: bold;
	text-align: center;
	pointer-events: none;
}

#page2 .polyArrows #poly1{
	padding: 0;
}

#page2 .polyArrows #poly5{
	padding: 0 0 0 20rem;
}

#page2 .polyArrows .poly.missing {
    height: 100%;
    width: 0rem;
    margin-left: 25rem;
    margin-right: -7rem;
    overflow: hidden;
    aspect-ratio: unset;
    padding: 0;
    
}

#page2 .polyArrows .poly img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: -1;
    pointer-events: all;
    cursor: pointer;
}

#page2 .polyArrows #page2Line {
    width: 0rem;
    height: 12.75rem;
    transform-origin: left center;
    rotate: -39deg;
    position: absolute;
    top: 32rem;
    left: 790rem;
    line-height: 0;
    overflow: hidden;
}

#page2 .polyArrows #page2Line img{
	height: 100%;
}

#page2 .polyArrows #page2Callout {
    position: absolute;
    top: -135rem;
    left: 858rem;
    width: 285rem;
    height: auto;
    opacity: 0;
}

#page2 .bottomSection{
	color: var(--darkGrey);
	margin-top:506rem;
	opacity: 0;
}

#page2 .bottomSection h3 span {
    font-weight: 500;
    letter-spacing: -.8rem;
}

#page2 .bottomSection .body {
    font-weight: 500;
    margin-top:25rem;
}

#page2 .bottomSection .bottomPoly {
    background: url(../images/BottomPolys.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 3rem;
    left: 417rem;
    width: 716rem;
    height: 252rem;
    padding: 11rem 0 0 32rem;
    box-sizing: border-box;
}

#page2 .bottomSection .bottomPoly .flex {
    width: 450rem;
    margin-top: 26rem;
    font-size: 16rem;
    font-weight: 600;
    margin-bottom: 40rem;
}

#page2 .bottomSection .bottomPoly .flex div{
	width:220rem;
}

#page2 .bottomSection .bottomPoly #pg2OrangeFlag {
    position: absolute;
    right: 22rem;
    bottom: 27rem;
    font-weight: 600;
    color: #fff;
    font-size: 16.5rem;
    line-height: 1.3;
}

#page2MiddleCTA {
	position: absolute;
	right: -218rem;
	top: 100rem;
	width: 126rem;
	white-space: wrap;
	text-align: center;
	cursor: pointer;
	pointer-events: all;
	text-shadow: 0px 0px 40rem #025;
	font-weight: bold;
	opacity: 0;
	font-size: 22rem;
	line-height: 1.2;
}

#page2 .DropDownData {
	position: absolute;
	top: 100%;
	background: var(--mediumGrey);
	padding: 0 12rem;
	width: 172rem;
	left: 3rem;
	border: solid 2.3rem;
	height: 0;
	overflow: hidden;
	transition: height .35s cubic-bezier(0,0,0,1);
	opacity: 0;

	-webkit-box-shadow: 0px 14px 15px 0px rgba(0,0,0,0.5); 
	box-shadow: 0px 14px 15px 0px rgba(0,0,0,0.5);
}

#page2 #poly5 .DropDownData {
	left:5rem;
	width: 186rem;
}

#page2 .DropDownData ul {
	font-size: 14rem;
	font-weight: 400;
}

#page2 .DropDownData li {
	margin: 10rem 0 0 0;
}

#page2 .DropDownData li::marker {
	color: var(--white);
	font-size: 16rem;
}


/*-----------------------------------------------------------------------*/

#page2.animate h2,#page2.animate .subHead{
	opacity: 1;
	top:0;
	transition: opacity .5s linear, top 1s cubic-bezier(0,0,0,1);
	transition-delay: .5s;
}
#page2.animate .subHead{
	transition-delay: .65s;
}

#page2.animate .polyArrows #poly1{
	opacity: 1;
	transition: opacity .25s linear;
	transition-delay: .7s;
}

#page2.animate .polyArrows #poly2{
	opacity: 1;
	transition: opacity .25s linear;
	transition-delay: .8s;
}

#page2.animate .polyArrows #poly3{
	opacity: 1;
	transition: opacity .25s linear;
	transition-delay: .9s;
}

#page2.animate #page2MiddleCTA{
	opacity: 1;
	transition: opacity .25s linear;
	transition-delay: 3s;
}

#page2.animate .polyArrows #poly4 {
	width: 260rem;
	opacity: 1;
	transition: width .5s cubic-bezier(.5,0,.25,1);
	transition-delay: 1s;
}

#page2.animate .polyArrows #poly5{
	opacity: 1;
	transition: opacity .25s linear;
	transition-delay: 1.5s;
}

#page2.animate .polyArrows #page2Line{
	width: 90rem;
	transition: width .1s cubic-bezier(.5,0,.25,1);
	transition-delay: 1.75s;
}

#page2.animate  .polyArrows #page2Callout{
	opacity: 1;
	transition: opacity .25s linear;
	transition-delay: 1.85s;
}

/*-----------------------------------------------------------------------*/

#page2.expand #page2Hero{
	transition: height .35s cubic-bezier(0,0,0,1);
	height: 542rem;
}

#page2.expand #page2MiddleCTA{
	display: none;
}

#page2.expand .bottomSection{
	opacity: 1;
	transition: opacity .5s linear;
}

/*-----------------------------------------------------------------------*/
#page2 .DropDownData.expand{
	opacity: 1;
}

#page2 #poly1 .DropDownData.expand{
	height: 255rem;
}
#page2 #poly2 .DropDownData.expand{
	height: 118rem;
}
#page2 #poly3 .DropDownData.expand{
	height: 137rem;
}
#page2 #poly5 .DropDownData.expand{
	height: 137rem;
}