/* CSS Document */

 body {
    width: 100vw;
    overflow-x: hidden;
}

#nlone, #nlone span {background-color:#603d75}
#nltwo,  #nltwo span {background-color:#e56a51}
#nlthree, #nlthree span {background-color:#0e334d}
#nlfour,  #nlfour span {background-color:#24a5dc}
#nlfive,  #nlfive span {background-color:#116271}
#nlsix,  #nlsix span {background-color:#5abdb5}

#menu li:hover #nlone, #menu li:hover #nlone span{background-color: #fff !important; color:#603d75 !important}
#menu li:hover #nltwo, #menu li:hover #nltwo span{background-color: #fff !important; color:#e56a51 !important}
#menu li:hover #nlthree, #menu li:hover #nlthree span{background-color: #fff !important; color:#0e334d !important}
#menu li:hover #nlfour, #menu li:hover #nlfour span{background-color: #fff !important; color:#24a5dc !important}
#menu li:hover #nlfive, #menu li:hover #nlfive span{background-color: #fff !important; color:#116271 !important}
#menu li:hover #nlsix, #menu li:hover #nlsix span{background-color: #fff !important; color:#5abdb5 !important}


#nlsix,  #nlsix span, #unfss h2, .unfss-boxes .boxes a, .unfss-boxes .boxes, #unfss .quote-holder{ background-color:#12897b}
	
@media only screen and (max-width : 768px) {
#navigation {display:none}
}	
	 
	#menu {
	margin:0px !important;
	padding: 0px !important;
	width: 1vw;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index:10000000;
    position: fixed;
    top: 50%;
    opacity: 1; list-style:none; line-height:1;
}

#menu li {margin:0px !important; padding: 0px !important; position:relative; line-height:1;}
#menu li a {
	width: 100%;
	min-height: 8vh;
	display: block; line-height:1;
}


#menu .mPS2id-highlight{
	width: 2vw;
	-webkit-box-shadow: inset -7px 0px 0px -3px rgba(255,255,255,0.4); 
box-shadow: inset -7px 0px 0px -3px rgba(255,255,255,0.4);
}
#menu:hover .mPS2id-highlight{ width: auto !important }


#menu li a {transition: opacity .5s ease-in-out !important;
   -moz-transition: opacity .5s ease-in-out !important;
   -webkit-transition: opacity .5s ease-in-out !important;}

#menu li a span {
	opacity:0;
	height:100%;
	position:absolute;
	left: -1000px;
	color:#fff;
	padding-left:0;
	padding-right:0;
	display: flex;
	align-items: center;
	font-size:1vw; font-weight:bold; text-transform:uppercase; transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;  line-height:1;
}
#menu:hover li a span { opacity:1; transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out; left:2vw }
   
#menu:hover {height:40vh; width:30vw}

.menu-cover {position:fixed; top: 0; bottom:0; left:0; right:0; z-index:1; opacity:0; transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out}

#menu:hover ~ .menu-cover {background-color:#000; opacity:0.6; transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out; display:block; z-index:999999}


.addthisholder {display:none}

.ar21-titlebg {
	background-position: center center;
	height: -moz-calc(100vh - 100px);
height: -webkit-calc(100vh - 100px);
height: -o-calc(100vh - 100px);
height: calc(100vh - 100px);
	width: 100vw;
	background-size: cover;
	position: relative;
	top:0px; padding-top:100px;
}
@media only screen and (max-width : 812px) {
.ar21-titlebg {
	background-position: center center;
	height: auto;
	width: 100vw;
	background-size: cover;
	position: relative;
	top:0px; padding-top:100px;padding-bottom: 30%;
	
}	
}

.ar21-cover {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px; background-color: #0e334d; opacity:0.4
}

.h1anddesc {position: absolute; -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
     top: 60%; left:5%; right:5%; z-index:99}

@media only screen and (max-width : 812px) {
	.h1anddesc {position: relative; -ms-transform: translateY(-0%);
    -webkit-transform: translateY(-0%);
    transform: translateY(-0%);
     top: auto; left:0; right:0; margin-top:5%;}
}

.ar21-titlebg h1 {
	font-size: 8.5vw !important;
	color: #FFF !important;
	z-index: 99;
	line-height:80%;
	display: inline-block;
	letter-spacing: 2px; margin-left:25%;  
	 margin-bottom:0;
}

@media only screen and (max-width : 812px) {
	.ar21-titlebg h1 {
	font-size: 16vw !important; margin-left: 17%;
}}

.ar21-titlebg h1 span {
    text-align: right;
    width: 100%;
    display: block;
    margin-top: 5%;
}

.h1anddesc-para {margin-left:15%; margin-right:15%; margin-top:4%}
@media only screen and (max-width : 812px) {
.h1anddesc-para {margin-left:10%; margin-right:10%; margin-top:10%;}	
}
.h1anddesc-para p {color:#FFF; margin-top:0; margin-bottom:0; font-size: 1.44vw !important;
}

.arslides21 {z-index:9; position:relative;}

.ar21-arrowdown {
    position: absolute;
    z-index: 99;
    right: 2%;
  	bottom: 30px;
    width: 6vw;
    height: 6vw;
    background: #5abdb5;
    border-radius: 50%;
    padding: 20px;
}
@media only screen and (max-width : 812px) {
.ar21-arrowdown {
	width: 10vw; height: 10vw; padding: 10px;
}}

.h1anddesc .ar21-arrowdown {-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
top: 32%; right:18%; z-index:9999}

a:hover .ar21-arrowdown, a:hover .ar21-arrowdownload {background-color:#e56a51 !important}
.ar21-arrowdown img, .ar21-arrowdownload img {width: 100%; height: auto;}
.ar21-arrowdownload {position:relative}
.ar21-arrowdownload a {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}
.ar21-arrowdownload:hover {background-color:#e56a51;}
.page-template-report2021 h2{font-size:4vw; font-family: 'Oswald', sans-serif;}
.page-template-report2021 #slide2 h2 {color:#116271; margin-bottom:0}
.page-template-report2021 #slide2 h2 span {color:#5abdb5}
.page-template-report2021 #slide2 h3 {
	color: #116271;
	font-size: 3vw;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	line-height: 1.2;
	margin-top: 4%;
	margin-bottom: 10px;
	font-style: normal;
}

@media only screen and (max-width : 812px) {
.page-template-report2021 h2{font-size:6vw; font-family: 'Oswald', sans-serif;}
.page-template-report2021 #slide2 h2 {color:#116271; margin-bottom:0}
.page-template-report2021 #slide2 h2 span {color:#5abdb5}
.page-template-report2021 #slide2 h3 {
	color: #e56a51;
	font-size: 5vw;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 10px;
	font-style: normal;
}	
}


#slide2, #slide4 {padding-left:5%; padding-right:5%; margin-top:-100px; padding-top:100px; padding-bottom:4%;}
@media only screen and (max-width : 812px) {
#slide2, #slide4 {padding-left:10%; padding-right:10%;	
}}

.intro {padding-left:15%; padding-right:15%; margin-bottom:5%; padding-top:2%;}
@media only screen and (max-width : 768px) {
.intro {padding-left:0; padding-right:0; margin-bottom:10%; padding-top:10%; }	
}
#infogz {margin-bottom:5%;}

.slide-right-ig {background-color:#fff; width:70%; position:relative; overflow:hidden; padding-bottom:24%; float:right; margin-bottom:20px }
.slide-left-ig {background-color:#fff; width:70%; position:relative; overflow:hidden; padding-bottom:24%; float:left; margin-bottom:20px }

@media only screen and (max-width : 768px) {
.slide-right-ig {padding-bottom:40%; width:100%}
.slide-left-ig {padding-bottom:40%; width:100%}
}

#slide4 .slide-left-ig, #slide4 .slide-right-ig  {background-color: #9eadb7!important}

.ig-circle {
	border-radius: 50%;
	width: 35%;
	position: absolute;
	top: 0px;
	bottom: 0px; z-index:99; text-align:center;
}
@media only screen and (max-width : 768px) {
	.ig-circle {
	border-radius: 50%;
	width: 40%;}
}
.ig-circle img { position:absolute;
-ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
     top: 50%;
width: 66%;
height: auto;
left: 17%;}
	 
.slide-right-ig .ig-circle {right: 0px;}
.slide-left-ig .ig-circle {left: 0px;}

.slide-right-ig, .slide-left-ig {margin-bottom:2%;}

.ig-circle-cover {z-index:88; background-color: #Fff;
	width: 19%;
	position: absolute;
	top: 0px;
	bottom: 0px; }
	
#slide4 .ig-circle-cover {background-color: #9eadb7 !important}

.slide-right-ig .ig-circle-cover {right: 0px; }
.slide-left-ig .ig-circle-cover {left: 0px;}
	
.slide-right-ig  .ig-circle:hover ~ .ig-content{right:17%;} 
.slide-left-ig  .ig-circle:hover ~ .ig-content{left:17%;} 

.ig-content img {width:100%; height:auto}
.ig-circle a:hover { cursor:pointer}

.ig-content {
	position: absolute;
	width: 79%;
	bottom: 8px;
	top: 8px;
	z-index: 9;
	padding-right: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.slide-right-ig .ig-content {
	-webkit-border-top-left-radius: 2vw;
	-webkit-border-bottom-left-radius: 2vw;
	-moz-border-radius-topleft: 2vw;
	-moz-border-radius-bottomleft: 2vw;
	border-top-left-radius: 2vw;
	border-bottom-left-radius: 2vw;
	animation: slidebox 2s 0s ease;
	-webkit-animation: slidebox 2s 0s ease;
	 moz-animation: slidebox 2s 0s ease;
  -o-animation: slidebox 2s 0s ease;
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards; 
 }
 
.slide-left-ig .ig-content {
	-webkit-border-top-right-radius: 2vw;
	-webkit-border-bottom-right-radius: 2vw;
	-moz-border-radius-topright: 2vw;
	-moz-border-radius-bottom-right: 2vw;
	border-top-right-radius: 2vw;
	border-bottom-right-radius: 2vw;
	animation: slideboxleft 2s 0s ease;
	-webkit-animation: slideboxleft 2s 0s ease;
	 moz-animation: slideboxleft 2s 0s ease;
  -o-animation: slideboxleft 2s 0s ease;
   -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards; 
	}

.cleardiv {clear:both}

	
@keyframes slideboxleft {0% {left: -200%;}100% {left: 20%;}}
@-moz-keyframes slideboxleft {0% {left: -200%;}100% {left: 20%;}}
@-webkit-keyframes slideboxleft {0% {left: -200%;}100% {left: 20%;}}
@-o-keyframes slideboxleft {0% {left: -200%;}100% {left: 20%;}}
@-ms-keyframes slideboxleft {0% {left: -200%;}100% {left: 20%;}}

.come-in {
	visibility: visible !important;
  animation: fadeIn 1s 0s ease;
  -webkit-animation: fadeIn 1s 0s ease;
  -moz-animation: fadeIn 1s 0s ease;
  -o-animation: fadeIn 1s 0s ease;
  -ms-animation: fadeIn 1s 0s ease;
}

.ig-content-cent {-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%); top:50%; position:absolute; padding:5%; width:70%; z-index:9999}
@media only screen and (max-width : 812px) {
.ig-content-cent {width:65%;}
.h1anddesc .ar21-arrowdown {position:relative; margin:10%; -ms-transform: translateY(-0%);
-webkit-transform: translateY(-0%);
transform: translateY(-0%);
top:auto;
right: auto; bottom: auto;}
}

#igcontent3 .ig-content-cent {padding-left:7% !important;}
#igcontent3 .ig-content-cent p {line-height:1.3}
.slide-left-ig .ig-content-cent {right:0}
.slide-right-ig .ig-content-cent {left:0}

	
.ig-content-col1 {background-color:#dde4ec}
.ig-content-col3 {background-color:#8ecfd1}
.ig-content-col4 {background-color:#87619a}

#slide4 .ig-content-col1 {background-color:#dde4ec}
#slide4 .ig-content-col3 {background-color:#24a5dc}
#slide4 .ig-content-col4 {background-color:#603d75}

.circle1 {background-color: #55c4c3;background-image: url(images/info-circle-one.jpg); background-size:cover;}
.ig-content-col2 {background-color:#448097; }
.circle2 {background-color: #115c72;}
.circle3 {background-color: #4dbbba;}
.circle4 {background-color: #542e74;}

.ig-circle a {position:absolute; top:0; left: 0; right:0; bottom: 0;}

/* */

#slide3 {overflow:hidden; margin-top:-100px; padding-top: 100px; clear:both; margin-bottom:4%;}
#slide3 h2 {color:#5abdb5; margin-top:2%; }
#slide3 h3 {
	color: #0e334d;
	font-size: 2.5vw;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	line-height: 1.2;
	margin-top: 0;
	margin-bottom: 10px;
	font-style: normal;
}
@media only screen and (max-width : 812px) {
	#slide3 h3 {
	font-size: 3.5vw;}
	.page-template-report2021 p {
    font-size: 3.5vw !important;
}
}


.threeleft,.threecent,.threeright {margin-bottom: -100%; display: table-cell;}
.threeleft, .threeright  {
	width: 25%;
	background-size: auto 60%; background-repeat:no-repeat; position:relative;
	
}
.threecent p {color: #333;}
.threeleft {background-position: center top;}
.threeright {background-position: center bottom;}
.threecent, .quoteholder-2021 {width:50%; padding-left:0; padding-right:0; margin-left:auto; margin-right:auto; position: relative;
z-index: 9999;}
@media only screen and (max-width : 812px) {
	.threecent, .quoteholder-2021 {width:70%; padding-left:10%; padding-right:10%;}
}
.three-holder {padding-bottom:4%; display: table-row;}

@media only screen and (max-width : 768px) {
.threecent img {width: 100%; height:auto}}

@media only screen and (max-width : 812px) {
.ar20-robox1-slider {right: 0px !important;}
.quotebg {opacity: 0.6 !important;}}


.page-template-report2021 H2 { margin-top:0;}
.threeleft:after, .threeright:after {content:"\a0"; display: table}

#slide3 .ar21-arrowdown {
    left: -moz-calc(50% - 6vw);
	left: -webkit-calc(50% - 6vw);
	left: -o-calc(50% - 6vw);
	left: calc(50% - 6vw);
	bottom: 0;
    width: 6vw;
    height: 6vw;
    background: #5abdb5;
    border-radius: 50%;
    padding: 20px;
    -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in;
}

.quoteholder-2021 .ar20-robox1 {
    width: 50%;
    padding-bottom: 50%; background-color:transparent; -moz-transition: all .2s ease-in;
    -o-transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in; margin-top: -10%; float:left;
}

@media only screen and (max-width : 812px) {
	.quoteholder-2021 .ar20-robox1 {
    width: 100%;
    padding-bottom: 100%; margin-bottom: 8%; margin-top:0; }
	
}




.ar-quote2021-holder {padding-top:14%; padding-bottom:10%}
.quoteholder-2021 .ar21qt2 {float:right !important; margin-left:50% !important}
.quoteholder-2021 .ar20-robox1:hover .quotebg {opacity: 1; }
#download {
	background-position: center center;
	min-height: 65vh;
	width: 100vw;
	background-size: cover;
	position: relative;
	padding-top:100px; margin-top:-100px; z-index:2;
}
@media only screen and (max-width : 812px) {
	#download {
	min-height: 50px; padding-top:120px;
}}
.slide4image {background-position: center center; background-size: cover; position: absolute;
	left: 0px;
	top: 100px;
	right: 0px;
	bottom: 0px;}
#slide4 .ar21-cover {top:100px}

.quotebg {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px; background-color:#24a5dc; opacity:0; transition: opacity .25s ease-in-out !important;
   -moz-transition: opacity .25s ease-in-out !important;
   -webkit-transition: opacity .25s ease-in-out !important;
}

#slide4 h2 {text-align:center; margin-top: 4%;}

#slide4 .ar20-robox1-slider p {text-align: center; font-size: 1.3vw !important;}
@media only screen and (max-width : 812px) {
#slide4 .ar20-robox1-slider p {text-align: center; font-size: 3vw !important;}	
}

#igcontent3 p {color: #fff}
#igcontent2 p, #igcontent4 p  {color: #fff}


#slide4 .ar20-robox1-slider p strong {margin-top:1.3vw; display:block;}
#slide5 {
	width: 100vw;
	position: relative;
	top:0px; padding-top:100px; margin-top: -100px;}
	
#slide5 h2 {margin-top:0; color: #116271; text-align:center;}

.ar20-robox1 {background-size:cover; background-position:center center;}

.lookingahead-2021 {position:relative; top:0;  padding-left:25%; padding-right:25%; padding-top:4%; padding-bottom:4%;}

@media only screen and (max-width : 812px) {
.lookingahead-2021 {position:relative; top:0;  padding-left:10%; padding-right:10%; padding-top:10%; padding-bottom:10%;}}

#slide5 .lookingahead-2021  {background-color: #e56a51;}
#slide6 .lookingahead-2021 {background-color: #fff;}

.lookingahead-2021 p {color: #fff;}
#slide6 .lookingahead-2021 p {color: #333;}
.lookingahead-2021 p:last-of-type {margin-bottom:4%;}

#slide6 {
	width: 100%;
	position: relative;
	top:0px; padding-top:100px; margin-top: -100px;}
@media only screen and (max-width : 812px) {
	#slide6 {padding-bottom: 30%;}
}
#slide6 .lookingahead-2021 img {width:70%; margin-left:auto; margin-right:auto; height:auto; display:block; margin-bottom: 2%;}
	
#slide5 h2 {margin-top:0; color: #24a5dc; text-align:center;}

.ar21-arrowdownload {
    position: relative;
    z-index: 99;
    width: 6vw;
    height: 6vw;
    background-color: #5abdb5;
    border-radius: 50%;
    padding: 20px; float:left;
}

.ar21-arrowdownload {float:left; line-height:1}

.download2021right {
    color: #fff;
    font-size: 1.5vw;
    position: relative;
    width: 9vw;
	font-family: 'Oswald', sans-serif;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
    position: absolute;
    top: 50%;
	left: 10vw;
}

@media only screen and (max-width : 812px) {
.download2021right {
    right: auto;
	left:20vw; font-size: 100%; width:40vw}	
	
}



.download-holder {position:relative; float:left; width:25%;}
@media only screen and (max-width : 812px) {
.download-holder {float:none; width:100%; margin-bottom:10%;}	
}
.download-holder-ab {
-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
    position: absolute;
    top: 75%;
left: 12.5%; width:75%;}
.dh2-2001 {float: left;}
@media only screen and (max-width : 812px) {
.dh2-2001 {float: none !important;}	
.download-holder-ab { -ms-transform: translateY(0%);
	-webkit-transform: translateY(0%);
	transform: translateY(0%); position:relative; top:auto; left: 0;}
}
@media only screen and (max-width : 812px) {
#slide4 p, #slide4 a {font-size:45% !important}
}

.dl2021-cover {top:100px}
.ar2021-thirtysix {width:100%; height:auto; margin-bottom:4%;}

.section2intro p{
    color: #5abdb5;
    font-size: 1.8vw !important; margin-top: 4%;
}

.quotemarks {
    opacity: 0.2;
    position: absolute;
    width: 100px !important;
    top: 10px;
    left: 10px;
    z-index: 9;
}

.fom {color:#FFF !important; text-decoration:underline; display:block; line-height:1.3; padding:0; margin:0; opacity:1;}
.fom:hover {opacity:0.6}

.lookaheadzi {z-index:99; position:relative}
#slide5 .dl2021-cover {top:0 !important; opacity:0.8 !important}

div { z-index:2}
.navigation {z-index:1}

.threecent {padding-left: 2% !important; padding-right: 2% !important;}
@media only screen and (max-width : 812px) {
.threecent {padding-left: 10% !important; padding-right: 10% !important;}	
}

.finalp2022 {margin-top:3vw !important; margin-bottom: 3vw !important}