#page3{

}

#page3 .background img{
	position: absolute;
	width: 100%;
	height: auto;
	bottom:-390rem;
	left: 0;
}

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

#page3 .textBlock .orange{
	color: var(--orange);
	opacity: 0;
}


#page3Header {
	width: 700rem;
	display: flex;
	white-space: wrap;
	margin-bottom: 67rem;
}

#page3 h2{
	font-size: 29rem;
	display: block;
	width: 180rem;
}

#page3 .textBlock h2.orange {
	font-size: 34rem;
	padding: 0 0 10rem 0;
	opacity: 0;
}



#page3 h1{
	font-size: 100rem;
}

#page3 h4 {
	font-size: 30rem;
	letter-spacing: 1rem;
	line-height: 1.3;
}

#page3 h4 span{
	position: relative;
	left: 30rem;
	opacity: 0;
}

#page3Question{
	opacity: 0;
	position: relative;
	top:20rem;
}

#page3 .topRightBox {
	position: absolute;
	top: 0;
	right: -440rem;
	width: 440rem;
	height: 620rem;
	background: var(--lightGrey);
	border-radius: 0 0 0 120rem;
}

#page3 .topRightContent {
	position: absolute;
	top: -20rem;
	right: -440rem;
	width: 311rem;
	white-space: wrap;
	height: 460rem;
}

#page3 .topRightContent h5 {
	font-size: 24.5rem;
	text-transform: none;
	line-height: 1.3;
}

#page3 ul {
	padding-left: 32rem;
	margin: 24rem 0;
}

#page3 li {
	margin: 16rem 0 0 0;
}

#page3 .topRightContent h2 {
	width: auto;
	margin-bottom: 24rem;
}

#page3 .dot{
	width:10rem;
	height: 10rem;
	background: var(--orange);
	border-radius: 5rem;
	position: absolute;
	opacity: 0;
}

#page3 .dot .line{
	width: 2rem;
	position: absolute;
	left: 4rem;
	bottom: 5rem;
}
#page3 .dot .line::after{
	content: "";
	display: block;
	width: 100%;
	height: 0%;
	background: var(--orange);
	position: absolute;
	bottom: 0;
	left: 0;
}

#page3 .dot .line .content {
	display: inline-block;
	position: absolute;
	bottom: calc(100% + 10rem);
	line-height: 1.2;
	left: -5rem;
	letter-spacing: -.1rem;
	opacity: 0;
}

#page3 #page3Dot1{
	top: 545rem;
	left: -2rem;
}

#page3 #page3Dot1 .line{
	height: 160rem;
}

#page3 #page3Dot2 {
	top: 576rem;
	left: 160rem;
}

#page3 #page3Dot2 .line{
	height: 138rem;
}

#page3 #page3Dot3 {
	top: 560rem;
	left: 368rem;
}

#page3 #page3Dot3 .line {
	height: 176rem;
}

#page3 #page3Dot4 {
	top: 577rem;
	left: 580rem;
}

#page3 #page3Dot4 .line{
	height: 140rem;
}

#page3 #page3Dot4 .line .content{
	left: -20rem;
}

#page3 #page3PopUp1{
	top: 124rem;
	left: 488rem;
}

#page3 #page3PopUp2 {
	top: 84rem;
	left: 780rem;
}

#page3 .moreInfo {
	position: absolute;
	background: #fff;
	width: 350rem;
	border: solid 4rem var(--orange);
	z-index: 1;
	left: -15rem;
	bottom: -15rem;
	border-radius: 12rem;
	padding: 22rem;
	white-space: wrap;
	opacity: 0;
	pointer-events: none;
	/* outline: solid 10rem #fff; 
	-webkit-box-shadow: 20rem 15rem 0rem -8rem #fff;
	box-shadow: 20rem 15rem 0rem -8rem #fff;*/
}


#page3 .moreInfo ul {
	font-size: 14rem;
	padding-left: 16rem;
}

#page3 .moreInfo.visible{
	opacity: 1;
	pointer-events: auto;
}

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

#page3.animate .background img{
	bottom: 0;
	transition: bottom .5s cubic-bezier(0,0,0,1);
	transition-delay:.25s;
}

#page3.animate .topRightBox, #page3.animate .topRightContent {
	right: 0;
	transition: right .5s cubic-bezier(0,0,0,1);
	transition-delay: .25s;
}

#page3.animate .textBlock .orange{
	opacity: 1;
	transition: opacity 1s linear;
	transition-delay: .5s;
}

#page3.animate h4 span{
	opacity: 1;
	transition: opacity 1s linear;
}

#page3.animate h4 .a{
	transition-delay: .65s;
}

#page3.animate h4 .b{
	transition-delay: .8s;
}

#page3.animate h4 .c{
	transition-delay: .95s;
}

#page3.animate #page3Question{
	opacity: 1;
	top:0;
	transition: opacity .5s linear, top .5s cubic-bezier(0,0,0,1);
	transition-delay: 1.5s;
}

#page3.animate .dot{
	opacity: 1;
	transition: opacity .1s linear;
}

#page3.animate .dot .line::after{
	height: 100%;
	transition: height .5s cubic-bezier(.5,0,0,1);
}

#page3.animate .dot .line .content{
	transition: opacity .25s linear;
	opacity: 1;
}

#page3.animate #page3Dot1{
	transition-delay: 1.75s;
}
#page3.animate #page3Dot1 .line::after{
	transition-delay: 1.75s;
}
#page3.animate #page3Dot1 .line .content{
	transition-delay: 2.05s;
}

#page3.animate #page3Dot2{
	transition-delay: 1.95s;
}
#page3.animate #page3Dot2 .line::after{
	transition-delay: 1.95s;
}
#page3.animate #page3Dot2 .line .content{
	transition-delay: 2.25s;
}

#page3.animate #page3Dot3{
	transition-delay: 2.15s;
}
#page3.animate #page3Dot3 .line::after{
	transition-delay: 2.15s;
}
#page3.animate #page3Dot3 .line .content{
	transition-delay: 2.45s;
}

#page3.animate #page3Dot4{
	transition-delay: 2.35s;
}
#page3.animate #page3Dot4 .line::after{
	transition-delay: 2.35s;
}
#page3.animate #page3Dot4 .line .content{
	transition-delay: 2.65s;
}