@charset "utf-8";
/* CSS Document */


/************** General **************/

* {
	max-width: 100%;	
}

body {
	color: #333;	
	font-family: "Roboto", Arial, sans-serif;
	font-weight: 400;
	line-height: 1.3em;
	font-size: 1.1em;	
	margin: 0;
}


.container {
	width: 88%;
	max-width: 65em;
	margin: 0 auto;	
	clear: both;
	padding: 0.5em;
	position: relative;
}

.clearfix {
	clear: both;	
}

.clear-right {
	clear: right;	
}

.red {
	color: red;	
}

#scroll-marker {
	position: relative;	
	height: 1px;
	background-color: none;
	width: 100%;
}

hr {
	border-top: 3px solid #ccc;
}

a img {
	border: none;	
}

figure {
	margin: 1em 0;
}

figcaption {
	font-size: 0.8em;
	text-align: left;
	margin-bottom: 1em;
}

.case-study figure {
	margin-bottom: 0;	
}

.extra-space {
	padding-bottom: 2em;
	display:block;
}

.extra-space-small {
	padding-bottom: 1em;
	display:block;
}



/************** Typeface variations **************/
/* Narrow */
#left-nav ul li a, .large-circles li, .footer-links ul li a, .copyright, #footer-right p, #top-bar p, #top-bar p span, blockquote cite, .case-study h4, .case-study h5, .expandable h4, .expandable h5, .expandable h6, .video-container h4, #international-map h4, .inner-container .photo-box .caption p, figcaption, .video-container .caption, span.person-name, span.person-field, .expand-link, .map-details dt, .achieve-details {
	font-family: "Archivo Narrow", sans-serif;
}

/* Curly and italic */
.large-circles .highlight, blockquote q, ol.achievements .achieve-circle, .map-details dd {
	font-family: 'abril-display', 'Oleo Script', cursive;	
}
/* Curly and not italic */
.box ul li span.highlight, .box ul li strong {
	font-family: 'abril-display', 'Oleo Script', cursive;	
}

/************** Header **************/

#top-bar {
	width: 100%;
	background-color: #194171;
	color: #fffeff;
}

#top-bar .logo-home {
	height: 1.7em;
	width: auto;
	display: inline-block;
	margin-top: 0.2em;
}

#top-bar .logo-home img {
	height: 100%;	
}

#top-bar p {
	float: right;
	line-height: 2.3em;
	font-size: 1em;
	color: #fff;
	cursor: default;
	margin: 0;
}

#top-bar p span.highlight {
	color: #e0e830;
}


#hero-banner {
	width: 100%;
	background-color: none;
	margin-bottom: 2em;
	background-image:url(images/template-images/hero-image.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	position: relative;
}

#hero-banner-lowres {
	background-image:url(images/template-images/hero-image-lowres.jpg);	
	background-color: #8da7ab;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: -99;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

#hero-spacer {
	width: 100%;	
	max-height: 380px;
}

#hero-banner .on-spacer {
	position: absolute;
	top: 0;	
	left: 18%;
}

#hero-banner .text-circle {
	background-color: rgba(0,153,205,0.8);
	border-radius: 100%;
	text-align: center;
	padding: 1.9em;
	height: 8.2em;
	width: 8.2em;
	margin: 1em 0;
	position: relative;
	cursor: default;
	font-size: 1.4em;
	font-weight: 300;
}

#hero-banner h1 {
	color: #f7ffff;
	text-transform: uppercase;
	font-size: 1.2em;
	font-weight: 400;
	line-height: 1.1em;
}

#hero-banner h1 span.highlight {
	color: #03010c;
	font-weight: 600;
}

.hero-caption {
	color: #fff;
	font-size: 0.8em;
	opacity: 0.95;
	line-height: 1.3em;
	padding-top: 1em;	
}



/************** Left nav **************/

#left-nav {
	width: 18em;
	margin-right: 1em;
	display: inline-block;
	font-size: 0.9em;
	position: absolute;
	top: 0;
	padding-top: 0.5em;
	transition: opacity 0.3s;
	opacity: 1;
}

#left-nav.sticky {
	position: fixed;
}

#left-nav.anchored {
	opacity: 0;
}

#left-nav.anchored a {
	cursor: default;	
}

#left-nav ul {
	padding: 0 1em 1em 0;	
	list-style-type: none;
	text-align: right;
	text-transform: uppercase;
	margin: 0;
}


#left-nav ul li a {
	text-decoration: none;
	color: #1d0000;
	border-bottom: 1px solid #d9f0f7;
	display: block;
	padding: 0.7em 0.7em;
	transition: all 0.3s;
	font-weight: 400;
}

#left-nav ul li:first-child a {
	border-top: 1px solid #d9f0f7;	
}

#left-nav ul li a.active {
	font-weight: 700;
	background-color: #d9f0f7;
}

#left-nav ul li a:hover, #left-nav ul li a:focus {
	background-color: #efefef;
	
}


/************** Main **************/

#content-container {
	width: 100%;
	padding-left: 17em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
}

.inner-container {
	padding: 0;	
}

.inner-container p, .inner-container ul, .inner-container ol {
	font-size: 0.9em;	
}


.inner-container p.small {
	font-size: 0.8em;	
	line-height: 1.2em;	
	margin-top: 1.2em;
	margin-bottom: 0.2em;
}

.inner-container ul li ul {
	margin-top: 0.3em;
}



h2 {
	text-transform: uppercase;
	color: #0099cd;
	font-weight: 600;
	border-top: 4px solid #0099cd;
	padding: 0.3em 0 0.4em;
	font-size: 1.9em;
	margin-top: 1.5em;
	line-height: 1.2em;
	padding-bottom: 0;
}

#content-container .inner-container h2:first-child {
	margin-top: 0;	
}

h3 {
	color: #174786;
	font-weight: 500;
	font-size: 1.7em;
	line-height: 1.15em;
}

h4 {
	color: #009cde;
	font-weight: 400;
	font-size: 1.4em;
	margin: 1.6em 0 1em;
}

h5 {
	color: #484848;
	font-size: 1em;
	font-weight: 500;
	margin-bottom: 0.5em;
}

h6 {
	color: #174786;
	font-size: 0.8em;
	font-weight: 500;
	margin-bottom: 0.5em;
	margin-top: 0em;
}

.inner-container p {
	margin: 0.8em 0;	
}

.inner-container ul {
	margin: 0 0 1em 0;	
}

p.intro {
	font-size: 1em;	
}


.full-width {
	width: 100%;	
}


/************** Achievements **************/

ol.achievements {
	margin: 0 0 1em;
	background-color: #fafbe0;
	text-align: center;	
	padding: 1.5em 0;
}

ol.achievements li {
	display: block;
	width: 33%;
	float: left;
}

ol.achievements .achieve-circle a > span {
	transition: color 0.3s;	
}

ol.achievements .achieve-circle.blue a:hover > span, ol.achievements .achieve-circle.blue a:focus > span {
	color: #0099cd;
}

ol.achievements .achieve-circle.green a:hover > span, ol.achievements .achieve-circle.green a:focus > span {
	color: #81ca00;
}

ol.achievements .achieve-circle.yellow a:hover > span, ol.achievements .achieve-circle.yellow a:focus > span {
	color: #c0c900;
}

ol.achievements .achieve-circle {
	display: block;
	width: 90%;
	max-width: 9em;
	margin: 0 auto;
	position: relative;
}

ol.achievements .achieve-circle img {
	width: 100%;	
}

ol.achievements .achieve-text {
	display: block;
	position: absolute;
	top: 43%;
	left: 0;
	right: 0;
	bottom: 0;	
	font-size: 2.3em;
	color: #000021;
}

ol.achievements .achieve-details {
	display: block;
	width: 90%;
	max-width: 12em;	
	margin: 0.5em auto;
	text-transform: uppercase;
	font-size: 0.9em;
	line-height: 1em;
	font-weight: 600;
	color: #404040;
}

ol.achievements .achieve-details a {
	text-decoration: none;	
	color: #404040;
}

ol.achievements:after {
	display: block;
	content: "";
	clear: both;	
}


/************** Links **************/

.inner-container a {
	color: #517094;	
	text-decoration: underline;
	transition: all 0.3s;
}

.inner-container a:focus, .inner-container a:hover {
	color: #0099cd;	
}

.inner-container a.more {
	background-image: url(images/template-images/more-arrow.png);
	background-repeat: no-repeat;
	background-position: left;
	background-size: contain;
	padding-left: 1.4em;
	color: #373737;
	font-weight: 600;
	text-decoration: none;
}

.inner-container a.more:hover, .inner-container a.more:focus {
	color: #0099cd;	
}

/************** Videos and map box **************/

.video-container, #international-map {
	padding: 0.5em;
	background-color: #404040;	
	color: #fff;
}

.video-container h4, #international-map h4 {
	margin-top: 0;
	text-transform: uppercase;
	color: #fff;	
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1em;
	margin-bottom: 0.5em;
	padding: 0;
}

#international-map h4 span.lowercase {
	text-transform: none;
	font-weight: 500;
}

.video-embed {
    position: relative;
	padding-bottom:48%;
	padding-top: 25px;
	height: 0;
	text-align: center;
	
}
.video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.halfsize-container {
	width: 49.5%;
	float: left;
}

.halfsize-container.left {
	padding-right: 0.5%;	
}

.halfsize-container.right {
	padding-left: 0.5%;	
}

.video-container .caption {
	font-size: 0.8em;
	text-align: left;
	margin-top: 0.5em;
	margin-botton: 0px;
}



/************** Large circles **************/

.large-circles {
	margin: 0;
	padding-bottom: 0.5em;
	padding-left: 0;
	cursor: default;
}


.large-circles span.smaller {
	font-size: 0.75em;	
}

.large-circles li {
	display: inline-block;
	width: 24%;
	margin: 0 4%;
	text-align: center;
	color: #35353e;
	text-transform: uppercase;
	font-size: 0.7em;
	font-weight: 600;
	vertical-align: top;
	line-height: 1.1em;
}

.large-circles li span.highlight {
	text-transform: none;	
}

.float-right {
	float: right;
	padding-left: 1em;
	text-align: center;
}

figure.float-right {
	width: 40%;
	margin-top: 0;
}

.float-left {
	float: left;
	padding-right: 1em;
	text-align: center;
}

figure.float-left {
	width: 40%;
	margin-top: 0;
}

.large-circles.single {
	width: 10em;
	margin: 0.75em auto 1em;
}

.large-circles.single li {
	width: 100%;
	margin: 0;
}

.large-circles .highlight {
	display: block;
	width: 2.7em;
	height: 2.7em;
	line-height: 2.7em;
	border-radius: 100%;
	font-size: 3.1em;
	margin: 0 auto 0.2em;
}

.large-circles .highlight.blue {
	background-color: #019acd;
	color: #fff;
}

.large-circles .highlight.green {
	background-color: #a5d867;
	color: #000102;
}

.large-circles .highlight.yellow {
	background-color: #e0e830;
	color: #000308;
}


/************** Coloured boxes **************/

.box {
	padding: 1em;
	margin-top: 1em;
	margin-bottom: 1em;
}

.box ul {
	margin-bottom: 0px;	
	padding-left: 1.6em;
}

.box ul li {
	line-height: 1.3em;	
	margin-bottom: 0.3em;
}

.box ul li span.highlight, .box ul li strong {
	font-size: 1.05em;	
}

.box.yellow {
	background-color: #fafbe0;	
}

.box.blue {
	background-color: #e6f5fa;	
}

.expandable h4 {
	margin-top: 0;
	color: #174786;	
	font-size: 1.15em;
	font-weight: 600;
}

.expandable h5 {
	font-size: 1em;
	font-weight: 600;
	margin: 0;
}

.expandable h6 {	
	font-size: 0.9em;
	font-weight: 600;
	margin-top: 1.1em;
}

.expandable ul {
	margin: 1em 0;	
}

#nclinkages-table-container ul {
	margin-bottom: 2em;
	font-size: 0.8em;
}

.case-study h4 {
	margin-top: 0;
	color: #174786;	
	font-size: 1.3em;
	font-weight: 600;
	text-transform: uppercase;
}

.case-study h5 {
	font-weight: 600;	
	margin: 0;
	font-size: 1em;
}

.document-thumbnail {
	float: right;
	padding-bottom: 2em;
	padding-left: 1em;
	position: relative;
	width: 13em;
	max-width: 100%;
	text-align: center;
	background-image: url(images/template-images/drop-shadow.png);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: contain;
}

.document-thumbnail.no-shadow {
	background-image: none;
	width: 18em;
	padding-left: 0;
}

.document-thumbnail img {
	width: 60% !important;
	height: auto !important;
	border: 1px solid #c8c8c8;	
}

.document-thumbnail.no-shadow img {
	border: none;	
	width: 100%;
}

.pie-chart {
	width: 100%;	
	text-align: center;
}

.pie-chart.single img {
	width: 100%;
	max-width: 30em;	
}

.pie-chart.double .single {
	width: 50%;
	float: left;
}

.pie-chart figcaption {
	text-align: center;
	font-size: 1em;	
	font-weight: 500;
	margin: 1em auto;
}

/************** Data table **************/

table {
	width: 100%;
	margin-bottom: 1em;	
	border-collapse: collapse;
}

table th, table td {
	border: 1px solid #174786;
	text-align: left;
	padding: 0.2em 0.4em;
	font-size: 0.8em;
	vertical-align: top;
}

table th {
	font-weight: normal;	
}

table thead th {
	font-size: 0.9em;	
	background-color: #019acd;
	color: #F8F8F8;
	font-weight: bold;
}

table .first-col {
	width: 40%;	
}

div.financials {
	overflow-x: scroll;
	background-color: #F8F8F8;
	padding: 1em 1em 0;
}

table.financial-table {
	border-collapse: collapse;	
	min-width: 600px;
}

table.financial-table thead th {
	text-align: center;	
	color: #333;
	font-size: 0.8em;
	padding-bottom: 0px;
}

table.financial-table tbody th {
	text-align: left;	
	color: #333;
}

table.financial-table td {
	text-align: right;	
}

table.financial-table th, table.financial-table td {
	width: 13%;	
	border: 0px;
	background-color: #F8F8F8 !important;
	padding: 0.5em 0;
}

table.financial-table th.first {
	width: 27%;	
}

table.financial-table .spacer {
	width: 8% !important;	
}

table.financial-table .total td {
	border-top: 1px solid black;
}

table.financial-table .result td {
	border-top: 1px double black;
}

table.financial-table .result td {
	padding: 0px;
}

table.financial-table .result td span {
	display:block;
	width: 100%;
	height: 100%;
	border-top: 1px solid black;	
	border-bottom: 1px solid black;	
	margin-top: 1px;
	padding: 0.5em 0;
}

table.financial-table .total td.spacer, table.financial-table .result td.spacer {
	border-top: none !important;
}

table.financial-table th.type {
	font-style: italic;
	font-weight: bold;
}



/************** International map and table **************/

#map-image {
	position: relative;	
	margin: 0;
	padding: 0;
	z-index: 1;
}

#map-legend {
	position: absolute;
	bottom: 0;
	left: 0;	
}

p.expand-link {
	padding-bottom: 0;
	margin-bottom: 0;	
}

.expand-link a {
	display: block;
	border: 1px solid #019acd;
	color: #019acd;
	text-decoration: none;
	text-transform: uppercase;
	padding: 0.4em;
	text-align: center;
	transition: all 0.3s;
	background-image:url(images/template-images/expander-arrow-down.png);
	background-repeat: no-repeat;
	background-position: right 10px center;
}

.expand-link a {
	text-decoration: none;	
}

.expand-link:hover, .expand-link:focus {
	background-color: #e6f5fa;
}

.expand-link.activated {
	background-image:url(images/template-images/expander-arrow-up.png);
	opacity: 0.9;
}

.expandable {
	margin-top: 0;	
}

.expandable h5 {
	margin-top: 0;	
}

.map-hotspot, .map-details, .map-animation {
	position: absolute;	
}

.map-hotspot {
	width: 2%;
	height: 4%;
	margin-left: -0.1%;
	margin-top: -0.1%;
	background-color: red;	
	opacity: 0;
	border-radius: 100%;
	transition: opacity 0.3s;
	cursor: pointer;
	z-index: 12;
}

#map-image:hover > .map-hotspot {
	
}

.map-hotspot:hover {
	background-color: red;
}

.map-details {
	display: none;
	margin-top: -10%;
	margin-left: 1.95em;
	padding: 0.9em 0.9em 0.1em 0.9em;
	width: 10em;
	max-width: 50%;
	background-color: rgba(23,71,134,0.8);
	z-index: 12;
}

.map-triangle {
	display: none;
	margin-top: -1%;
	margin-left: 1em;
	position: absolute;
	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent;
	border-right: 1em solid rgba(23,71,134,0.8);
	z-index: 10;
}

.map-details.flipped {
	margin-left: -12.95em;
}

.map-triangle.flipped {
	border-top: 1em solid transparent;
	border-bottom: 1em solid transparent;
	border-left: 1em solid rgba(23,71,134,0.8);
	border-right: none;
	margin-left: -1.16em;
}

.map-details img {
	max-width: 5em;
	margin: 0 auto;
}

.map-details dt {
	font-size: 0.9em;
	line-height: 0.9em;
	text-transform: uppercase;
}

.map-details dt:after {
	content: ":";	
}

.map-details dd {
	font-size: 1.6em;
	line-height: 1em;
	color: #eefaa0;
	margin-left: 0;
	margin-top: 0.2em;
	margin-bottom: 0.4em;
}


/************** Map animations **************/

.map-animation {
	background-color: none;
	border: 1px solid #fff;
	width: 2%;
	height: 4%;
	margin-top: -0.25%;
	margin-left: -0.25%;
	border-radius: 100%;
	z-index: 1;
	transition: all 0.2s;
	opacity: 0;
}

.map-animation.active {
	animation-name: active-radar;
    animation-duration: 2s;	
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	opacity: 0.8;
}

.map-animation.blip {
	animation-name: passive-radar;
    animation-duration: 1s;	
	animation-iteration-count: once;
	animation-timing-function: ease-in-out;
}



@keyframes active-radar {
	0% {
		width: 2%;
		height: 4%;
		margin-top: -0.25%;
		margin-left: -0.25%;
	}
    50%  {
		width: 4%;
		height: 8%;
		margin-top: -1.25%;
		margin-left: -1.25%;	
	}
    100% {
		width: 2%;
		height: 4%;
		margin-top: -0.25%;
		margin-left: -0.25%;	
	}
}

@keyframes passive-radar {
	0% {
		width: 2%;
		height: 4%;
		margin-top: -0.25%;
		margin-left: -0.25%;
		opacity: 0;
	}
    50%  {
		opacity: 1;	
	}
	80% {
		opacity: 1;	
	}
    100% {
		width: 4%;
		height: 8%;
		margin-top: -1.25%;
		margin-left: -1.25%;	
		opacity: 0;
	}
}

/************** Map element positions **************/

#hotspot-australia, #details-australia, #triangle-australia, #animation-australia {
	top: 82.4%;
	left: 44.4%;
}

#details-australia {
	margin-top: -30%;	
}

#hotspot-netherlands, #details-netherlands, #triangle-netherlands, #animation-netherlands {
	top: 30.5%;
	left: 6.5%;
}

#hotspot-finland, #details-finland, #triangle-finland, #animation-finland {
	top: 23.4%;
	left: 11.47%;	
}

#hotspot-india, #details-india, #triangle-india, #animation-india {
	top: 48%;
	left: 26.2%;	
}

#hotspot-southkorea, #details-southkorea, #triangle-southkorea, #animation-southkorea {
	top: 41.5%;
	left: 39.2%;	
}

#hotspot-germany, #details-germany, #triangle-germany, #animation-germany {
	top: 31.5%;
	left: 8%;
}

#hotspot-czechrepublic, #details-czechrepublic, #triangle-czechrepublic, #animation-czechrepublic {
	top: 32.8%;
	left: 9.25%;
}

#hotspot-france, #details-france, #triangle-france, #animation-france {
	top: 33.5%;
	left: 5.9%;	
}

#hotspot-uk, #details-uk, #triangle-uk, #animation-uk {
	top: 31.5%;
	left: 4.65%;	
}

#hotspot-taiwan, #details-taiwan, #triangle-taiwan, #animation-taiwan {
	top: 48.75%;
	left: 37.5%;
}

#hotspot-indonesia, #details-indonesia, #triangle-indonesia, #animation-indonesia {
	top: 66%;
	left: 33.8%;	
}

#details-indonesia {
	margin-top: -16%;	
}

#hotspot-japan, #details-japan, #triangle-japan, #animation-japan {
	top: 42%;
	left: 42.35%;	
}

#hotspot-usa, #details-usa, #triangle-usa, #animation-usa {
	top: 40.5%;
	left: 80.85%;	
}

#hotspot-brazil, #details-brazil, #triangle-brazil, #animation-brazil {
	top: 74%;
	left: 88.8%;	
}

#details-brazil {
	margin-top: -20%;	
}

#hotspot-china, #details-china, #triangle-china, #animation-china {
	top: 39.4%;
	left: 35.82%;
}

/************** Blockquote **************/

blockquote {
	display: block;
	max-width: 27em;	
	margin: 1em 0;
}

blockquote.wider {
	max-width: 37em;	
}

.lowercase {
	text-transform: lowercase;	
}

blockquote q {
	display: block;
	color: #0099cd;
	font-size: 1.3em;
	line-height: 1.1em;
	margin-bottom: 0.3em;
}

blockquote cite {
	text-transform: uppercase;
	display: block;	
	font-size: 0.7em;
	font-style: normal;
}

blockquote q:before {
	content: "‘";	
}

blockquote q:after {
	content: "’";	
}


/************** Photo boxes **************/

.photo-box {
	width: 100%;
}
.caption {
	clear: both;
	width: 100%;
}

.inner-container .caption p {
	margin: 0.5em 0 0 0 !important;	
	font-weight: 500;
	font-style: italic;
	font-size: 0.85em;
	line-height: 1.2em;
}


/************** Person images **************/

ul.person-list {
	list-style-type: none;
	margin: 0;
	padding: 0;
	margin-bottom: 2em;
}

.person-list li {
	list-style-type: none;
	display: inline-block;
	width: 100%;
	text-align: left;
	margin: 1em 0;
	position: relative;
}

.person-list.two-per-row li {
	width: 50%;
	float: left;	
}

.person-list img {
	border-radius: 100%;	
	width: 6.5em;
	height: 6.5em;
	float: left;
	margin-right: 1em;
	position: absolute;
	top: 0;
	left: 0;
}

.person-list .person-single {
	padding-left: 8.5em;	
	clear: both;
	padding-top: 1em;
	margin-bottom: 1.5em;
}

.person-list .person-name, .person-list .person-field {
	display: inline-block;
	text-transform: uppercase;
	font-weight: 600;
	margin-right: 0.2em;
	font-size: 0.95em;
}


.person-list.two-per-row .person-name, .person-list.two-per-row .person-field  {
	float: none;
	display: block;	
}

.person-list.two-per-row .person-name {
	font-size: 1.1em;	
}

.person-list .person-field {
	color: #0099cd;	
}


.person-list p {
	display: inline;
	margin-top: 0.5em;
}

/************** Footer **************/


footer {
	background-color: #0099cc;
	position: relative;
	background-image:url(images/template-images/footer-gradient.jpg);
	background-repeat: repeat-y;
	background-size: contain;
}

footer, #footer-outer {
	min-height: 10em;
}

#footer-outer {
	display: block;
	width: 100%;
	height: 100%;
	background-image:url(images/template-images/footer-bg.jpg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right top;
}

#footer-left, #footer-right, .copyright, #footer-right p {
	color: #fff;
}

#footer-left {
	width: 15.5em; /* should match left-nav */
	margin-right: 1em;
	display: inline-block;	
	position: absolute;
}

#footer-left .logo-home {
	height: 2.8em;
	width: auto;
	margin: 1em 0 0.5em;
}

#footer-left .logo-home img {
	height: 100%;	
}

#footer-left .copyright {
	margin-bottom: 1em;
}

.footer-links ul {
	padding-left: 0;
	list-style-position: inside;
	margin-bottom: 1em;
	color: #000;
}

.footer-links ul li a {
	color: #000;	
	font-weight: 700;
	transition: all 0.3s;
}

.footer-links ul li a:hover, .footer-links ul li a:focus {
	color: #a5d867;	
}

#footer-right {
	display: block;
	margin-top: 0.5em; 
	padding-left: 17em;
	text-align: right;
	margin-bottom: 1.5em;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#footer-right p {
	display: inline-block;
}

#footer-right p, #footer-right p span {
	text-transform: uppercase;
	font-weight: 600;	
}

#footer-right p .green {
	color: #a5d867;	
}

#footer-right p .black {
	color: #000;	
}

#footer-right .share {
	list-style-type: none;
	padding-left: 0;
	float: right;
	margin-left: 1em;
}

#footer-right .share li {
	display: inline-block;	
}

#footer-right .share li a {
	display: block;
	height: 1.6em;
	width: 1.6em;
	padding: 0.3em;
	margin-left: 0.15em;
	background-color: #fff;
	border-radius: 100%;
	transition: all 0.3s;
}

#footer-right .share li a:focus, #footer-right .share li a:hover {
	background-color: #a5d867;
}

#footer-right .share li img {
	height: 100%;
	width: 100%;
}





/************** Responsive **************/

/* Medium */

@media (max-width: 1230px) {	
	.halfsize-container {
		width: 100%;
		padding-left: 0px;
		padding-right: 0px;
		margin-bottom: 1em;
	}
}

@media (max-width: 1230px) {
	ol.achievements .achieve-text {
		font-size: 1.9em;
	}

	#footer-right {
		text-align: left;	
		margin-top: 0;
	}
	#footer-right .share {
		float: none;
		margin-left: 0;	
		margin-top: -1em;
	}
	#hero-banner .text-circle {
		font-size: 1em;
	}
	#footer-right p {
		padding-bottom: 1em;
	}
	#hero-banner .text-circle {
		font-size: 1.1em;	
	}
	.person-list .person-single {
		padding-top: 0;
	}
	
}


/* Medium-small */
@media (max-width: 930px) {

	
	
	.person-list .person-name, .person-list .person-field  {
		float: none;
		display: block;	
	}
	#footer-right p {
		padding-bottom: 0;
	}
	
	#hero-spacer {
		display: none;	
	}

	#hero-banner .on-spacer {
		left: 0;
		position: relative;
		width: 100%;
		
	}
	
	#hero-banner .text-circle {
		text-align: left;
		height: auto;
		background-image: none;
		border-radius: 0;
		margin: 0;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0;
	}
	
	#hero-banner .text-circle {
		font-size: 1.5em;	
	}
	
	#hero-banner h1 {
		padding: 0.7em 0;
		width: 90%;
		display: block;
		margin: 0 auto;	
	}
	
	#hero-banner .text-circle .highlight {
		display: block;	
	}
	
	#left-nav, #footer-left {
		width: 14em;	
	}
	#content-container, #footer-right {
		padding-left: 13.5em;
	}
	footer, #footer-outer {
		background-image: none;	
	}
	#footer-right p {
		font-size: 0.9em;
		line-height: 1em;	
	}
	#footer-left {
		width: 100%;
		position: relative;	
	}
	#footer-right, #footer-left {
		text-align: center;	
	}
	#footer-left .footer-links li {
		display: inline-block;	
	}
	#footer-left .footer-links li:after {
		content: "|";	
		margin: 0 1em;
	}
	#footer-left .footer-links li:last-child:after {
		content: none;	
	}
	#footer-right {
		padding-left: 0em;	
	}
	#footer-right .share {
		margin-top: 1em;
	}
	
	.person-list.two-per-row li {
		width: 100%;
		display: block;
	}
	
	
}

/* Small */
@media (max-width: 730px) {
	#top-bar p {
		display: none;	
	}
	
	ol.achievements .achieve-text {
		font-size: 2.2em;
	}

	.person-list img {
		display: block;
		margin: 0 auto 1em;
		position: relative;
		float: none;
	}
	
	#left-nav {
		display: none;
	}
	#content-container {
		padding-left: 0em;
	}
	.large-circles li {
		width: 100%;
		margin: 2em 0;
		padding: 0;
	}
	.float-right {
		float: none;
		padding: 0;
		width: 100%;
	}
	figure.float-right {
		width: 100%;	
	}
	.large-circles.single.float-right {
		
		width: inherit;
		margin-top: inherit;
	}
	
	.pie-chart.double .single {
		width: 100%;
		float: none;	
	}
	
	
	
	
	.person-list .person-name, .person-list .person-field, .person-list p {
		display: block;
		text-align: center;
	}
	
	.person-list .person-single {
		padding-left: 0px;	
	}


	
}

/* Extra small */
@media (max-width: 500px) {
	ol.achievements li {
		width: 100%;
		float: none;
		margin-bottom: 2em;
	}

}