
.fullTitleContainer {
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
    overflow: hidden;
}

#section-01 .photo {
	background: #fff url(../imgs/photo-01.jpg) no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
}

#section-01 .photo:after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px;
    display: block;
    background: linear-gradient(to bottom, rgba(14,43,99,0.95), rgba(14,43,99,0));
}

#section-02 .photo {
	background: #fff url(../imgs/photo-02.jpg) no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
}

#section-03 .photo {
	background: #fff url(../imgs/photo-03.jpg) no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
}

#section-04 .photo {
	background: #fff url(../imgs/photo-04.jpg) no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
}

#section-05 .photo {
	background: #fff url(../imgs/photo-05.jpg) no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
}

#section-06 .photo {
	background: #fff url(../imgs/photo-06.jpg) no-repeat center center;
	background-attachment: fixed;
	background-size: cover;
}

.backgroundScroll {
  background-attachment: scroll !important;
}

.noFixedBackground .photo {
  background-attachment: scroll !important;
}


.fullTitleBox {
	width: 50%;
	margin-left: auto;
	height: 100%;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	padding: 40px 5.5555556vw;
	background: rgba(14, 43, 99, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	justify-content: center;
}

.fullTitleBox:after{
	content: "";
	position:absolute;
	bottom:0;
	left:0;
    height: 6.5px;
    width: 100%;
    display: block;
    background: linear-gradient(90deg, #0e2b63 30.4785%, rgba(0, 0, 0, 0) 30.4785%),
	linear-gradient(90deg, #004f9f 52.15788%, rgba(0, 0, 0, 0) 52.15788%), 
	linear-gradient(90deg, #00b1eb 64.72807%, rgba(0, 0, 0, 0) 64.72807%), 
	linear-gradient(90deg, #ef7d00 73.22551%, rgba(0, 0, 0, 0) 73.22551%), 
	linear-gradient(90deg, #ffbb00 79.62792%, rgba(0, 0, 0, 0) 79.62792%), 
	linear-gradient(90deg, #50af47 86.69237%, rgba(0, 0, 0, 0) 86.69237%), 
	linear-gradient(90deg, #afca0b 92.0305%, rgba(0, 0, 0, 0) 92.0305%), 
	linear-gradient(90deg, #5a328a 97.0083%, rgba(0, 0, 0, 0) 97.0083%), 
	linear-gradient(90deg, #e72582 100%, rgba(0, 0, 0, 0) 100%);
}

.fullTitleBox h3{
	color: #fff;
	font-size: 38px;
	font-weight: bold;
	line-height: 110%;
}


#pageContent .fullTitleBox p{ 
	color: #fff;
	font-size: 18px;
	line-height: 140%;
	font-weight: 300;
}

#pageContent  .fullTitleBox .intro p{
	font-size:22px;
	font-weight:normal;
}

.floatingTitleBoxContainer{
	height: 100vh;
	display:flex;
	align-items: flex-end;
}

.floatingTitleBox{
	padding: 40px 5.5555556vw;
	background: rgba(14, 43, 99, 0.44);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
	justify-content: center;
	margin-bottom: 120px;
	width: 47.222222vw;
	box-sizing:border-box;
	margin-left: 11.1111111vw;
}

.floatingTitleBox:after{
	content: "";
	position:absolute;
	bottom:0;
	left:0;
    height: 6.5px;
    width: 100%;
    display: block;
    background: linear-gradient(90deg, #0e2b63 30.4785%, rgba(0, 0, 0, 0) 30.4785%),
	linear-gradient(90deg, #004f9f 52.15788%, rgba(0, 0, 0, 0) 52.15788%), 
	linear-gradient(90deg, #00b1eb 64.72807%, rgba(0, 0, 0, 0) 64.72807%), 
	linear-gradient(90deg, #ef7d00 73.22551%, rgba(0, 0, 0, 0) 73.22551%), 
	linear-gradient(90deg, #ffbb00 79.62792%, rgba(0, 0, 0, 0) 79.62792%), 
	linear-gradient(90deg, #50af47 86.69237%, rgba(0, 0, 0, 0) 86.69237%), 
	linear-gradient(90deg, #afca0b 92.0305%, rgba(0, 0, 0, 0) 92.0305%), 
	linear-gradient(90deg, #5a328a 97.0083%, rgba(0, 0, 0, 0) 97.0083%), 
	linear-gradient(90deg, #e72582 100%, rgba(0, 0, 0, 0) 100%);
}
.floatingTitleBox h4{
	color: #fff;
	font-size: 38px;
	font-weight: bold;
	line-height: 120%;
}

#pageContent .floatingTitleBox p{ 
	color: #fff;
	font-size: 22px;
	line-height: 140%;
	font-weight: 300;
}

.contentPanel{
	max-width: 840px;
	padding: 0 2.777777vw;
	margin: 120px auto;
}

#pageContent .contentPanel p, #pageContent .contentPanel li{
	font-size: 16px;
	font-weight:300;
	line-height:150%;
	color: #0e2b63;
}

#pageContent .contentPanel .intro p{
	font-size: 22px;
	font-weight:bold;
	line-height:150%;
	color: #0e2b63;
}

.content-cols{
	display: flex;
	gap: 40px;
}

.contentPanel .footnote{
	margin-top: 20px;
}

#pageContent .contentPanel .footnote p, #pageContent .contentPanel .footnote li{
	font-size:14px;
}

.content-col{
	width: 50%;
}

.content-span-centre{
	display:flex;
	margin: 20px 0;
	align-items: center;
	justify-content: center;
}

.bulletImage{
	position: relative;
    width: 100%;
    height: 450px;
}

.bulletImage img{
	object-fit: cover;
    width: 100%;
    height: 450px;
    object-position: 50% 50%;
    display: block;
}

.bulletContent{
	margin: -250px 5.55555vw 0;
	position: relative;
}

#pageContent .bulletContent p{
	font-size: 28px;
	color: #fff;
	font-weight: bold;
	line-height: 110%;
}

#pageContent .bulletContent ul{
	list-style: none;
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
	justify-content: center;
}

#pageContent .bulletContent li{
	display:block;
	padding:40px;
	display:flex;
	min-height:200px;
	background:rgba(0,79,159,0.66);
	color: #fff;
	align-items: center;
	justify-content: center;
	margin: 0;
	width: 20%;
	backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
#pageContent .bulletContent li:before{
	content: none;
}

#pageContent a.link.arrowLinkLozenge{
    display: inline-block;
    padding: 8px 38px;
    border: 1px solid #0e2b63;
    background: #fff;
    border-radius: 30px;
    transition: 0.3s;
    color: #0e2b63;
}

#pageContent a.link.arrowLinkLozenge:hover{
   background: #0e2b63;
   color: #fff;
}

@media only screen and (max-width: 759px){
	.fullTitleContainer{
		height: auto;
	}
	.fullTitleBox{
		width: 100%;
		margin-top: 400px;
		padding-left: 4.1666667vw;
		padding-right: 4.1666667vw;
	}
	.fullTitleBox h3{
		font-size: 32px;
	}
	#pageContent .fullTitleBox .intro p{
		font-size: 16px;
	}
	.floatingTitleBox{
		margin-left: 8.3333333vw;
		width: 83.333333vw;
	}
	.floatingTitleBox h4{
		font-size: 32px;
	}
	.floatingTitleBox p{
		font-size: 16px;
	}
	.contentPanel{
		margin-top: 60px;
		margin-bottom: 60px;
		padding: 0 4.1666667vw;
	}
	#pageContent .contentPanel .intro p{
		font-size: 18px;
	}
	.content-cols{
		flex-direction: column;
		gap: 0;
	}
	.content-col{
		width: 100%;
	}
	.bulletContent{
		margin-left: 4.1666667vw;
		margin-right: 4.1666667vw;		
	}
	#pageContent .bulletContent p{
		font-size: 20px;
	}
	#pageContent .bulletContent ul{
		flex-wrap: wrap;
	}
	#pageContent .bulletContent li{
		font-size: 14px;
		width: 40%;
		box-sizing: border-box;
		flex-grow: 1;
		padding: 30px 20px;
	}
}


