/* Minification failed. Returning unminified contents.
(838,37): run-time error CSS1039: Token not allowed after unary operator: '-j'
(916,52): run-time error CSS1039: Token not allowed after unary operator: '-i'
(927,52): run-time error CSS1039: Token not allowed after unary operator: '-i'
(938,53): run-time error CSS1039: Token not allowed after unary operator: '-i'
(949,53): run-time error CSS1039: Token not allowed after unary operator: '-i'
(960,53): run-time error CSS1039: Token not allowed after unary operator: '-i'
(971,53): run-time error CSS1039: Token not allowed after unary operator: '-i'
(982,53): run-time error CSS1039: Token not allowed after unary operator: '-i'
(993,52): run-time error CSS1039: Token not allowed after unary operator: '-i'
(1005,52): run-time error CSS1039: Token not allowed after unary operator: '-i'
(1027,46): run-time error CSS1039: Token not allowed after unary operator: '-i'
(1035,26): run-time error CSS1039: Token not allowed after unary operator: '-i'
(1060,52): run-time error CSS1039: Token not allowed after unary operator: '-i'
(1074,37): run-time error CSS1039: Token not allowed after unary operator: '-j'
(1097,52): run-time error CSS1039: Token not allowed after unary operator: '-i'
(1110,53): run-time error CSS1039: Token not allowed after unary operator: '-i'
 */
/* ----------------
dsap.css
Author: Ivan Ganchev, Kathrin Panitz
Version: 1.00
------------------- */

.tab-content {
	overflow-y: hidden;
	padding-top: 10px;
}

#dsap header {
	max-width: 100%;
	overflow: hidden;
}

#dsap header img {
	max-width: 100%;
}

#dsap header {
	position: static;
	height: auto;
	width: auto;
	z-index: auto;
	box-shadow: none;
	background-image: none;
	background-color: transparent;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	transition: none;
}



#dsap header.shrink {
	position: static;
	height: auto;
	width: auto;
	z-index: auto;
	box-shadow: none;
	background-color: transparent;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	transition: none;
}

#dsap .content {
	margin-top: 0px;
}

#dsap .fa-external-link {
	display: none;
}

#dsap footer {
	background-color: transparent;
	min-height: 10px;
	max-width: 100%;
	padding: 0px;
	margin: 0px;
	height: auto;
}

#dsap footer.shrink {
	background-color: transparent;
	min-height: 10px;
	max-width: 100%;
	padding: 0px;
	margin: 0px;
	height: auto;
}

#dsap .nav>li>a {
	font-size: 14px;
}

.dsap-banner {
	background-color: #000000;
	position: relative;
	overflow: hidden;
	margin-top: 150px;
	
}

.dsap-banner img {
	width: 100%;
	height: 250px;
	max-height: 350px;
	-ms-object-fit: cover;
	-webkit-object-fit: cover;
	-moz-object-fit: cover;
	object-fit: cover;
	opacity: 0.8;
	display: block;
	filter: brightness(55%);
}

.dsap-banner h1 {
	position: absolute;
	left: 0;
	right: 0;
	top: 40%;
	margin-top: -5.0rem;
	text-align: center;
	color: #ffffff;
	font-size: 3.5rem;
	line-height: 1.3
}

.dsap-banner p {
	position: absolute;
	left: 30%;
	right: 30%;
	top: 50%;
	max-width: 40%;
	margin-top: -2.6rem;
	text-align: center;
	color: #ffffff;
	font-size: 1.5rem;
	line-height: 1.3
}

@media ( max-width : 991px) {
	.dsap-banner {
		margin-top: 0px;
	}
	.carousel-title{
		justify-self: center !important;
	}
	.dsap-banner h1 {
		top: 30%;
	}
	.dsap-banner p {
		left: 10%;
		right: 10%;
		top: 40%;
		max-width: 80%;

	}
}

@media ( max-width : 428px) {
	.dsap-banner {
		margin-top: 0px;
	}
	.dsap-banner h1 {
		top: 20%;
		font-size: 2.3rem;
	}
	.dsap-banner p {
		left: 10%;
		right: 10%;
		top: 30%;
		max-width: 80%;
		font-size: 1.4rem;
	}
}

.dsap-overlay {
	background-image: url("/userfiles/image/dsap-overlay.png");
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: cover;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 96px;
	margin-bottom: -5px;
}

/*************************************/
/******************************************************
	Name: SCSS Specific to DSAP Navigation
*******************************************************/
.dsap-nav {
	margin-top: 0px;
}

.dsap-nav .row {
	margin: 10px 0px;
	display: flex;
	flex-wrap: wrap;
}

.dsap-nav ul {
	list-style: none;
	padding: 0;
}

.dsap-nav ul li {
	width: calc(100%/ 7.1);
}

.dsap-nav a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 0 0 20px;
	text-decoration: none;
}

.dsap-nav a .text {
	display: block;
	padding: 10px 0;
}

.dsap-nav a span[class^=dsapicon] {
	font-size: 6rem;
}

.dsap-nav a.current, .dsap-nav a.current-parent {
	color: #427314;
}

.tile-nav-item {
	background-image: none !important;
	padding-bottom: 0px !important;
}

.tile-nav-item:not(.active) a>span>img {
	background-color: #427314;
	border-radius: 120px;
}

.youtube-video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.youtube-video-container {
	position: relative;
	overflow: hidden;
	width: 100%;
}

.youtube-video-container::after {
	display: block;
	content: "";
	padding-top: 56.25%;
}

.video-container>h2 {
	margin-top: 0px !important;
}

#pictureBox {
	background-color: #EEF2E7;
}

/****************/
/***dsap icons***/
/****************/
.dsapicon {
	display: inline-block;
	height: 100px;
	width: 100px;
}

.title-icon {
	width:29px;
	height: auto;
	margin-right: 5px;
	display: inline;
}

.dsap-feedback, .dsap-pdf {
	min-width: 200px !important;
	border-radius: 5px;
	margin: 0px;
	padding-left: 0px;
	padding-right: 0px;
	text-transform: none !important;
}

.responsive-tabs-wrapper {
	margin-top: 10px !important;
	margin-bottom: 10px !important;
}

.dsap-pdf-image {
	float: left;
	width: 100%;
	height: 100%;
}

.tab-content .dsap-tab .responsive-tabs__panel .responsive-tabs__panel--active[style]
	{
	display: inline-block !important;
}


.dsap-project-table {
	margin-bottom: 0px;
	height: 100%;
}

.dsap-project-table thead tr th {
	text-align: left !important;	
}

#projectThemeHeader {
	text-align: center !important;	
}

table.dsap-project-table.table.table-hover tbody tr {
	border-left: 2px solid transparent;
}

.dsap-project-table tbody tr td.progress {
	padding: 0px;
}

.dsap-project-table tbody tr td.progress .progress-bar {
	border-radius: 4px;
	background-color: #427314;
}


.content-box-info {
	display:flex;
	display: -webkit-flex;
	flex-wrap: wrap;
}

.bg-lblue {
	background-color: #CFE5FA;
}

.bg-lgreen {
	background-color: #EEF2E7;
}

.bg-lWhite {
	background-color: rgb(255, 255, 255);
}

.bg-lgreen a:not(.btn-u), .bg-lgreen a:not(.btn-u):visited {
	color: #427314;
}

.bg-lgreen a:not(.btn-u):hover, .bg-lgreen a:not(.btn-u):focus,
	.bg-lgreen a:not(.btn-u):visited:hover, .bg-lgreen a:not(.btn-u):visited:focus
	{
	color: #427314;
}

.bg-lorange {
	background-color: #FAE8CF;
}

.bg-lorange a:not(.btn-u), .bg-lorange a:not(.btn-u):visited {
	color: #C55002;
}

.bg-lorange a:not(.btn-u):hover, .bg-lorange a:not(.btn-u):focus,
	.bg-lorange a:not(.btn-u):visited:hover, .bg-lorange a:not(.btn-u):visited:focus
	{
	color: #933b01;
}




.block {
  padding: 30px;
  width: 100%; 
  height: 100%;}
  .block h1:first-child, .block h2:first-child, .block h3:first-child, .block h4:first-child, .block h5:first-child, .block h6:first-child, .block p:first-child {
    margin-top: 0; }
  .block header {
    padding-bottom: 1rem; }
  .block footer {
    padding-top: 1rem; }
    .block footer.ctas {
      _display: flex;
      _justify-content: flex-end;
      _flex-wrap: wrap; 
      text-align:right;
    }
      .block footer.ctas a, .block footer.ctas a:visited {
        margin-top: 1rem;
        margin-left: 5px;
        min-width: 100%;
        padding: 0.61em 3em;
        text-transform: none; }

#chart_div {
	display: none;
}
#chart_div.visible {
	display: block;
}
/* chart bar colors */
g:nth-child(7) rect:nth-of-type(3n+3) { fill: #5c881a;}

g:nth-child(7) rect:nth-of-type(3n+2) { fill: #5c881a; }

g:nth-child(7) rect:nth-of-type(3n+1){ fill: #5c881a; }

g:nth-child(7) rect:nth-of-type(1){ display: none;}

/* chart text colors */
g:nth-child(9) text:nth-of-type(3n+3) { fill: #5c881a; }

g:nth-child(9) text:nth-of-type(3n+2) { fill: #5c881a; }

g:nth-child(9) text:nth-of-type(3n+1) { fill: #5c881a;}

g:nth-child(9) text:nth-of-type(1)	{ fill: #0063ba;}


g:nth-child(10) {
	display:none;
}

@-moz-document url-prefix() {
  g:nth-child(10) {
	display:block;
  }
}

g:nth-child(7) rect:focus {
	filter: brightness(125%);
}
g:nth-child(7) rect:hover {
	filter: brightness(125%);
}

#action-plan.visible {
	display: block;
}

#action-plan {
	display: none;
}

#project-carousel {
	display: none;
}
#project-carousel.visible {
	display: block;
}

#theme-personas {
	display: none;
}
#theme-personas.visible {
	display: block;
}

#theme-key-focus-areas {
	display: none;
}
#theme-key-focus-areas.visible {
	display: block;
}

.personaCard {
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	border-radius: 5px;
	width: 90px;
	background-color: white;
	height: 140px;
	margin-top: 5px;
	margin-right: 5px;
	display: inline-block;
	position: relative;
	vertical-align: top;
	border-style: solid;
	border-width: 1px;
	border-color: #427314;
}

.personaCard:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.personaCard img {
	height: 50px!important;
	width: 50px!important;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 5px;
}

.personaContainer {
	padding: 2px 2px;
	height: 50px!important;
	text-align: center;
}

.personaContainer p {
	font-size: 13px; /*
	color: #427314; */
}

.personaContainer:hover p{
	font-weight: bold;
}

.personaBox {
	display: block;
	width: 100%;
	position: relative;
}

.subHeading {
	/*
	color: #427314; */
	font-weight: bold;
}


  /******************************************************
	Name: Popover Modifications
*******************************************************/
.dsap-popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: none;
  max-width: 350px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 2px solid #008000;
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.dsap-popover.top {
  margin-top: -10px;
}
.dsap-popover.right {
  margin-left: 10px;
}
.dsap-popover.bottom {
  margin-top: 10px;
}
.dsap-popover.left {
  margin-left: -10px;
}
.popover-title {
  padding: 3px 6px;
  margin: 0 !important;
  font-size: 14px;
  font-style: italic;
  font-weight: normal;
  line-height: 18px;
  background-color: #EEF2E7;
  border-bottom: 1px solid #ebebeb;
  border-radius: 5px 5px 0 0;
}
.popover-content {
  padding: 9px 14px;
}
.popover-footer {
	font-size: 10px;
	font-style: italic;
	text-align: end;
}
.dsap-popover > .arrow,
.dsap-popover > .arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  content: "";
  border-width: 10px;
}
.dsap-popover > .arrow {
  border-width: 11px;
}
.dsap-popover.top > .arrow {
  bottom: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-color: #008000;
  border-bottom-width: 0;
}
.dsap-popover.top > .arrow:after {
  bottom: 1px;
  margin-left: -10px;
  content: " ";
  border-top-color: #fff;
  border-bottom-width: 0;
}
.dsap-popover.right > .arrow {
  top: 50%;
  left: -11px;
  margin-top: -11px;
  border-right-color: #008000;
  border-left-width: 0;
}
.dsap-popover.right > .arrow:after {
  bottom: -10px;
  left: 1px;
  content: " ";
  border-right-color: #fff;
  border-left-width: 0;
}
.dsap-popover.bottom > .arrow {
  top: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-width: 0;
  border-bottom-color: #008000;
}
.dsap-popover.bottom > .arrow:after {
  top: 1px;
  margin-left: -10px;
  content: " ";
  border-top-width: 0;
  border-bottom-color: #fff;
}
.dsap-popover.left > .arrow {
  top: 50%;
  right: -11px;
  margin-top: -11px;
  border-right-width: 0;
  border-left-color: #008000;
}
.dsap-popover.left > .arrow:after {
  right: 1px;
  bottom: -10px;
  content: " ";
  border-right-width: 0;
  border-left-color: #fff;
}

@media only screen and (max-width: 530px) {
	.dsap-nav ul li {
		width: calc(100%/ 2);
	}
}


@media only screen and (min-width: 768px) {
	.dsap-overlay {
		height: 156px;
	}
}

@media only screen and (max-width: 915px) {
	.dsap-nav ul li:nth-of-type(1) {
		margin-left: calc(100%/3);
		margin-right: calc(100%/3);
	}
	.dsap-nav ul li {
		width: calc(100%/ 3);
	}
}

@media only screen and (min-width: 916px) {
	.dsap-overlay {
		height: 176px;
	}
}

@media only screen and (min-width: 1030px) {
	.dsap-overlay {
		height: 250px;
	}
	.dsap-nav a span[class^=dsapicon] {
		font-size: 11.9rem;
	}
}

/*********************************************/
/*****pre-existing style from index page******/
/*********************************************/
.fact-card {
	margin-top: 30px;
	margin-bottom: 35px;
}

.fact-card-a .fact-card:hover {
	/* IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	/* IE 5-7 */
	filter: alpha(opacity = 70);
	/* Netscape */
	-moz-opacity: 0.7;
	/* Safari 1.x */
	-khtml-opacity: 0.7;
	/* Good browsers */
	opacity: 0.7;
}

.title-ornament::after {
	content: "";
	display: block;
	width: 100%;
	height: 10px;
	position: relative;
	top: 12px;
}

.tabs-colours .responsive-tabs__list__item--active {
	background: #ffffff;
	border: 1px solid #dddddd8f;
}

.tabs-colours .responsive-tabs__list__item--active {
	background: #ffffff !important;
}

.tabs-colours .responsive-tabs__list__item--active {
	outline: none;
}

.tabs-colours .tab-content h2 {
	margin-top: 40px !important;
	margin-bottom: 30px !important;
}

.tabs-colours table {
	background-color: #ffffff;
}

.section-title {
	margin-top: 42px !important;
}

.left-col {
	width: 33%;
}

.row-resume {
	margin-top: 60px;
	margin-bottom: 85px;
}

.row-resume p {
	font-size: 20px;
}

.title-header-exp {
	font-weight: 300;
	position: relative;
	top: 10px;
	margin-top: 30px;
	display: block;
}

.row-resume img {
	margin: 0 auto;
}

.colour-list {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
	padding: 60px;
}

.info-text {
	margin-top: 13px !important;
	font-size: 14px;
	text-align: center;
	color: #696969;
}

.strategy-div {
	height: 99%;
	padding-top: 15px;
	padding-bottom: 10px;
	min-height: 310px;
}

@media only screen and (min-width: 320px) and (max-width: 450px) {
	.strategy-div {
		height: 102%;
	}
}


/***************************************************************
	PDF Card Stack
	
***************************************************************/

.cardContainer {
	position: relative;
	width: inherit;
	height: inherit;
}

.cardContainer .pdfCard .cardContent {
	color: #444;
	opacity: 1; 
	transition: 0.5s;
	transform: translateY(0px);
	padding: 0px;
	text-align: center;
	height: 100%;
	width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
}

.cardTitle { 
	opacity: 1;
	color: #427314;
}

/* Responsiveness for phones */ 
/* iPhone 5 */ 
@media only screen and (min-width: 320px) {
.cardContainer {
	height: 290px;
}
	
.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {

}

.cardContainer .pdfCard .cardContent {
	opacity: 1;
	transform: translateY(0px);
	transition-delay: calc(0.2s * var(--j));
}

.cardContainer .pdfCard:nth-child(1), 
.cardContainer .pdfCard:nth-child(2), 
.cardContainer .pdfCard:nth-child(3) {
	opacity: 1;
}

.cardTitle { 
	font: 12rem;
	opacity: 1;
}
}

/* Responsiveness */ 
@media only screen and (min-width: 353px) and (max-width: 868px) {
.linksList{
	display: none;
};	
	
.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {
}
}

/* Galaxy S5, Moto G4 */ 
@media only screen and (min-width: 360px) {

.linksList{
	display: none;
};
.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {
}
}

/* iPhone 6, 7, 8, X */ 
@media only screen and (min-width: 390px) {
.linksList{
	display: none;
};

.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {
}
}

/* iPhone 6 7 8 PLUS and Pixel (XL) */ 
@media only screen and (min-width: 414px) {	
.linksList{
	display: none;
};

.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {
	
	}
}

/* Small tablets */ 
@media only screen and (min-width: 450px) {
.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {
	position: absolute;
	margin: 0 auto;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 25px 25px 100px rgba(0, 0, 0, 0.2);
	z-index: 1;
	transition: 0.5s;
	opacity: 1;
	top: 130px;
	height: 75px;
	width: 75px;
	left:65%;
	transform: translate(calc(-20% + calc(77px * var(--i))), -50%);top: 160px;}
}

/* Small tablets */ 
@media only screen and (min-width: 515px) {
.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {
	top: 130px;
	height: 75px;
	width: 75px;
	left:65%; 
	transform: translate(calc(-20% + calc(90px * var(--i))), -50%);}
}

/* Small tablets */ 
@media only screen and (min-width: 625px) {
.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {
	top: 130px;
	height: 75px;
	width: 75px;
	left:65%; 
	transform: translate(calc(-20% + calc(100px * var(--i))), -50%);}
}

/* Small tablets */ 
@media only screen and (min-width: 710px) {
.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {
	top: 130px;
	height: 80px;
	width: 80px;
	left:65%; 
	transform: translate(calc(-20% + calc(120px * var(--i))), -50%);}
}

/* iPad */ 
@media only screen and (min-width: 768px) {
.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {
	top: 155px; 
	height: 80px;
	width: 80px;
	left:65%; 
	transform: translate(calc(-20% + calc(130px * var(--i))), -50%);}
}

/* Bigger tablets */ 
@media only screen and (min-width: 820px) {
.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {
	top: 135px; 
	height: 85px;
	width: 85px;
	left:65%;
	transform: translate(calc(-20% + calc(120px * var(--i))), -50%);;}
}

/* Bigger tablets */ 
@media only screen and (min-width: 880px) {
.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {
	top: 150px;
	height: 90px;
	width: 90px;
	left: 65%;
	transform: translate(calc(-20% + calc(120px * var(--i))), -50%);}
};

/* Bigger tablets */ 
@media only screen and (min-width: 992px) {
.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {
	top: 135px; 
	height: 90px;
	width: 90px;
	left:65%;
	transform: translate(calc(-20% + calc(80px * var(--i))), -50%);}
}

/* iPad Pro */ 
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
.cardContainer .pdfCard, 
.cardContainer:hover .pdfCard {
	top:calc(65% - 25px);
	left: 65%; 
	height: 75px;
	width: 75px;
	opacity: 1;
	transform: translate(calc(-20% + calc(80px * var(--i))), -50%);}

.cardTitle { /* may not be needed */ 
	font: 10rem;
	opacity: 1;}

.cardContainer .pdfCard:nth-child(1), 
.cardContainer .pdfCard:nth-child(2), 
.cardContainer .pdfCard:nth-child(3) {
	opacity: 1;}
}

/* Bigger screens */ 
@media only screen and (min-width: 1030px) {
.cardContainer {
	height: inherit;
}

.cardContainer .pdfCard {
	position: absolute;
	top: calc(75% - 25px);
	left: 50%;
	transform: translate(-30%, calc(35px * var(--i))) rotate(40deg) skew(-20deg, -10deg);
	width: 90px;
	height: 90px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 25px 25px 100px rgba(0, 0, 0, 0.2);
	z-index: calc(-1 * var(--i));
	transition: 0.5s;
}

.cardContainer .pdfCard:nth-child(1) {
	opacity: 1;
}

.cardContainer .pdfCard:nth-child(2) {
	opacity: 0.8;
}

.cardContainer .pdfCard:nth-child(3) {
	opacity: 0.6;
}

.cardContainer:hover .pdfCard {
	position: absolute;
	top: 140px; 
	left: 65%; 
	z-index: 1;
	height: 75px;
	width: 75px;
	opacity: 1;
	box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.2);
	transform: translate(calc(-20% + calc(90px * var(--i))), -50%) rotate(0deg) skew(0deg, 0deg);}

.cardContainer .pdfCard .cardContent {
	color: #444;
	opacity: 1; 
	transition: 0.5s;
	transform: translateY(0px);
	padding: 0px;
	text-align: center;
	height: 100%;}

.cardContainer:hover .pdfCard .cardContent .cardTitle {
	opacity: 1;
	transform: translateY(0px);
	transition-delay: calc(0.2s * var(--j));}

.cardTitle { 
	opacity: 0;}
}

/* */ 
@media only screen and (min-width: 1120px) {
.cardContainer .pdfCard {
	top: calc(65% - 40px);
	left: 50%;
	width: 85px;
	height: 85px;}

.cardContainer:hover .pdfCard {
	position: absolute;
	top: 150px; 
	left: 65%; 
	z-index: 1;
	width: 85px;
	height: 85px;
	opacity: 1;
	box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.2);
	transform: translate(calc(-20% + calc(90px * var(--i))), -50%) rotate(0deg) skew(0deg, 0deg);}
}

/* Normal Laptop Screen and Desktop */ 
@media only screen and (min-width: 1200px) {
.cardContainer .pdfCard {
	top: calc(75% - 40px);
	left: 50%;
	width: 90px;
	height: 90px;}

.cardContainer:hover .pdfCard {
	top: 170px; 
	transform: translate(calc(-20% + calc(100px * var(--i))), -50%) rotate(0deg) skew(0deg, 0deg);
	height: 90px;
	width: 90px;
	left: 65%;
	
}};

/* Large Monitors */ 
@media only screen and (min-width: 1400px) {
.cardContainer:hover .pdfCard {
	top: 130px; }
}

/* Large Monitors */ 
@media only screen and (min-width: 1800px) {
.cardContainer:hover .pdfCard {
	top: 160px; }
}


/****************************************************************
   Carousel (taken from the Zero Carbon Communities Code)

****************************************************************/

/****************************************************************
    Module: tags 
    Viewport: base 
****************************************************************/
.tags {
  list-style: none;
  margin: 10px -5px;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start; }

.tags li {
  flex-grow: 1;
  padding: 5px 5px; }
  .tags li:last-child .tag {
    width: auto; }

.tag {
  background: #4F8A2E; /* used to be #eee */ 
  color: white;
  border-radius: 3px 0 0 3px;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 12px 0 15px;
  position: relative;
  margin: 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  font-size: 1.4rem;
  width: 100%;
  text-align: center; }

.tag:hover {
	font-weight: bold;
}

.tag::before {
  background: #EEF2E7;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 5px;
  position: absolute;
  width: 6px;
  top: 10px; }

.tag::after {
  background: #EEF2E7;
  border-bottom: 13px solid transparent;
  border-left: 10px solid #4F8A2E;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0; }

.tags li:nth-of-type(5n+2) .tag {
  background-color: #0063ba; } /* used to be #CFE5FA */ 
  .tags li:nth-of-type(5n+2) .tag::after {
    border-left-color: #0063ba; }

.tags li:nth-of-type(5n+3) .tag {
  background-color: #C55002; /* used to be #EEF2E7 */ 
 }
  .tags li:nth-of-type(5n+3) .tag::after {
    border-left-color: #C55002; }

.tags li:nth-of-type(5n+4) .tag {
  background-color: #29480c; } /* used to be #FAE8CF */ 
  .tags li:nth-of-type(5n+4) .tag::after {
    border-left-color: #29480c; }

.tags li:nth-of-type(5n+5) .tag {
  background-color: #4a7cbe; } /* used to be #d5efe3 */ 
  .tags li:nth-of-type(5n+5) .tag::after {
    border-left-color: #4a7cbe; }


.carousel-description, 
.carousel-description-standard {
	position: relative;
	background-color: #EEF2E7; 
	height: 180px;
	padding: 5px;
	overflow: hidden;
	max-width:360px;
	
}

.carousel-description::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 300px; 
	border-top: 50px;
	background: linear-gradient(transparent 75%, #EEF2E7); 
}

.carousel-description p, 
.carousel-description-standard p {
	padding: 5px;
	height: 120px;
	margin: 0px 0px;
	transition: all 0.5s;
}

.carousel-description.active p {
	height: auto;
}

.carousel-description.active {
	background-color: #EEF2E7; 
	height: auto;
	padding: 5px;
}

.carousel-description.active::before {
	display: none;
}

.carousel-description .more {
	position: relative;
	padding: 10px 15px;
	background: #427314;
	margin-top: 5px;
	display: block;
	cursor: pointer;
	width: 150px;
	text-align: center;
	margin: auto;
}

.carousel-description.active .more {
	background: #29480c;
	color: white;
	margin-top: 10px;
	
}

.carousel-description .more::before {
	content: "Read more";
	color: white;
	
}

.carousel-description.active .more::before {
	content: "Read less";
	color: white;
}

.carousel-title {
	justify-self: left;
	color: #427314;
	padding-left: 5px;
	max-width:360px
}
  
/******************************************************
	Default Button Colours
*******************************************************/
.btn-u-carousel,
a.btn-u-carousel {
  background-color: #ffffff;
  color: #427314;
  border: 1px solid #427314;
  border-radius: 0;
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 300;
  display: inline-block;
  text-align: center;
  padding: 0.61em 3.37em;
  min-width: 250px;
  text-decoration: none; }
  .btn-u-carousel:hover,
  .btn-u-carousel:focus,
  a.btn-u-carousel:hover,
  a.btn-u-carousel:focus {
    border-color: #0063BA;
    color: #0063BA;
    text-decoration: none; }
  .col-sm-4 .col-sm-4
  .btn-u-carousel, .col-sm-4
  a.btn-u-carousel, .col-sm-4

.btn-fill-green,
a.btn-fill-green {
  background-color: #427314;
  border-color: #427314;
  color: #ffffff;
  text-transform: none; }
  .btn-fill-green:hover, .btn-fill-green:focus,
  a.btn-fill-green:hover,
  a.btn-fill-green:focus {
     background-color: #29480c;
    color: #ffffff;
    border-color: #29480c; }


/* Feedback / Request boxes and buttons */ 
.btn-fill-colours,
.btn-fill-colours-request,
a.btn-fill-colours,
a.btn-fill-colours-request {
  background: linear-gradient(90deg, #4F8A2E, #29480c, #4F8A2E, #A5BD1B, #4F8A2E); 
  background-size: 400%;
  background-color: rgb(255, 255, 255);
  border-color: #427314;
  color: rgb(255, 255, 255);
  text-transform: none; 
  width: 280px;
  margin: 0 auto;
  text-align: center;
  display: block;
  font-size: 1.5rem;
  border-radius: 4px;
}


.btn-fill-colours-request, 
a.btn-fill-colours-request {
	/* background: linear-gradient(90deg, #4F8A2E, #A5BD1B, #4F8A2E, #29480c, #4F8A2E); */
	 background: linear-gradient(90deg, #427314, #29480c, #427314, #A5BD1B #427314);  
	  background-size: 400%;
  background-color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  text-transform: none; 
  width: 280px;
  margin: 0 auto;
  text-align: center;
  display: block;
  font-size: 1.5rem;
  border-color: #427314;
  border-radius: 4px;
}

#btnFeedback {
	display: block;
	animation: animate 16s linear infinite;
    color: rgb(255, 255, 255);
}


  .btn-fill-colours, .btn-fill-colours:focus,
  a.btn-fill-colours:hover, 
  a.btn-fill-colours:focus {
    
  animation: animate 16s linear infinite;
    color: rgb(255, 255, 255);
     }

@keyframes animate {
	0% {
		background-position: 0%;
	}
	100% {
		background-position: 400%;
	}
} 

.btn-fill-colours-request, .btn-fill-colours-request:focus, 
a.btn-fill-colours-request:hover, a.btn-fill-colours-request:focus {
	animation: animateRequestForm 16s linear infinite;
	color: rgb(255, 255, 255);
}

@keyframes animateRequestForm {
	0% {
		background-position: 400%;
	}
	100% {
		background-position: 0%;
	}
	
}

#btnRequest {
	display: block;
	color: white;
}

.feedbackBox {
	padding: 15px 30px 30px 30px;
	display: grid;
	grid-template-rows: auto 1fr auto;
}

.feedbackBox p {
	margin: 20px 0 30px 0px;
}

.buttonBox {
	padding: 0px 5px 30px 5px;
}

.feedbackRequestIcon {
	background-image: none !important;
	padding-bottom: 0px !important;
	background-color: #427314;
	border-radius: 50%;
	width: 80px;
	height: 80px;
	display: block;
	margin: auto;
	position: relative;
}

/*
.feedbackRequestIcon:hover img{
	background-color: white;
} */

.feedbackIcon {
	width: 65px!important;
	display: block;
	margin: auto;
	position: relative;
	top: 50%;
	transform: translateY(-45%);
}

.requestIcon {
	width: 70px!important;
	display: block;
	margin: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}


/******************************************************
	Carousel Modifications
*******************************************************/
.casestudies-header {
  text-align: center;
  margin: 0; }

#carousel-casestudies {
  padding-bottom: 20px;
  
   }
  #carousel-casestudies .btn-u-carousel {
    width: 100%; }

/*
  #carousel-casestudies img {
    max-width: 360px!important;
    max-height: 200px!important;
	text-align: center;
	display: block;
	margin-left: auto;
	margin-right: auto;
} */

.carousel-indicators {
  bottom: 0px !important; }

.carousel-indicators li {
  width: 40px !important;
  border-radius: 0px;
  height: 10px !important;
  margin: 0 0 0 -1px !important;
  border: 1px solid #427314; }
  .carousel-indicators li.tns-nav-active, .carousel-indicators li.active {
    background-color: #427314; }

.carousel-control.left {
  background-image: none; 
  margin-left: -10px;}

.carousel-control.right {
  background-image: none;
  margin-right: -10px; }

#carousel_inner_div {
	margin-top:10px;
	height: auto; 
	overflow: hidden;
	padding-inline-start: 0;
}

.carousel-inner .item > img {
	width: 320px;
  height: 100px; }

.carousel-control,
.carousel-control:hover,
.carousel-control:focus {
  color: #427314;
  font-size: 4rem;
  background-color: transparent;
  width: 4rem; }
  .carousel-control .feather,
  .carousel-control:hover .feather,
  .carousel-control:focus .feather {
    position: absolute;
    top: 50%;
    left: 0; }

.carousel-control .icon-prev-carousel {
  position: absolute;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23427314' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  top: 50%;
  z-index: 5;
  display: inline-block;
  margin-top: -10px;
  left: 0%;
  margin-left: -10px;
  width: 25px;
  height: 25px;
  font-family: serif;
  line-height: 1;
}

.carousel-control .icon-next-carousel {
  position: absolute;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23427314' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); 
  top: 50%;
  z-index: 5;
  display: inline-block;  
  margin-top: -10px;
  font-size: 30px;
  margin-right: -10px;
  right: 0%;
  width: 25px;
  height: 25px;
  font-family: serif;
  line-height: 1;
}

.case-studies {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 30px;
  padding: 0 15px; }
  .case-studies::before {
    display: none; }
  .case-studies .case-study {
    margin: 0; }

.case-study {
  justify-items:center;
  margin: 0 0 20px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(255, 255, 255); }
  #carousel-casestudies .case-study .btn-u-carousel {
    padding: .61em 2.37em;
    min-width: 10px; }
  .case-study .ctas {
    padding: 20px 0 0; }
    .case-study .ctas .btn-u-carousel {
      min-width: 100%;
      padding: .61em 1.37em; 
	}

/* iPhone 6, 7, 8 (& PLUS versions), X, Pixel 2 and Pixel 2 XL */ 
/* NOT Galaxy S5, Moto G4, iPhone 5/SE */ 
	  .case-study {
    display: grid;
    grid-template-rows: 170px 50px auto 5px 0px;
    grid-template-columns: 1fr; }
    .casestudies-carousel .case-study,
    #carousel-casestudies .case-study {
      grid-template-rows: 170px 70px auto 5px 0px; }

/* hides the second and third project on each slide */ 
.secondProjectOnSlide,
.thirdProjectOnSlide {
	display: none;
}

/*********************
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's larger than an iPhone 
but smaller than a tablet. Let's call them tweeners.
*********************/
@media only screen and (min-width: 481px) {
  /****************************************************************
	Theme: SPEN ZCC Tool
	Viewport: 481 up
****************************************************************/
 /* iPad */ 
  .case-studies {
    grid-template-columns: 1fr 1fr; }
  .case-study {
    display: grid;
    grid-template-rows: 180px 50px auto 50px 0px;
    grid-template-columns: 1fr; }
    .casestudies-carousel .case-study,
    #carousel-casestudies .case-study {
	
      grid-template-rows: 180px 70px auto 5px 0px; }



.carousel-control .icon-prev-carousel {
  position: absolute;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23427314' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  top: 50%;
  z-index: 5;
  display: inline-block;
  margin-top: -10px;
  left: 0%;
  margin-left: 0px;
  width: 25px;
  height: 25px;
  font-family: serif;
  line-height: 1;
}

.carousel-control .icon-next-carousel {
  position: absolute;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23427314' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); 
  top: 50%;
  z-index: 5;
  display: inline-block;  
  margin-top: -10px;
  font-size: 30px;
  margin-right: -0px;
  right: 0%;
  width: 25px;
  height: 25px;
  font-family: serif;
  line-height: 1;
}

.carousel-control.left {
    margin-left: -15px;
position: absolute;
    }
  .carousel-control.right {
    margin-right: -15px;
    } 

  /******************************************************
	Name: Carousel Modifications
*******************************************************/
  .casestudies-header {
    margin: 0 0 30px 0; }
    .casestudies-header h2 {
      margin: 0; }
  .carousel-inner {
    padding: 0 30px; }
}
/*********************
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 768px) {

  /****************************************************************
    Module: Casestudies 
    Viewport: 768up 
****************************************************************/
  .case-studies {
    grid-template-columns: 1fr 1fr 1fr; }
  .case-study {
    margin: 0;
    display: grid;
    grid-template-rows: 180px 70px auto 5px 30px; }
  .carousel-inner {
    margin: 0;
    padding: 0;
    list-style: none; }
  .carousel-inner .active.left {
    left: -33%; }
  .carousel-inner .active.right {
    left: 33%; }
  .carousel-inner .next {
    left: 33%; }
  .carousel-inner .prev {
    left: -33%; }
  .carousel-control.left {
    background-image: none; }
  .carousel-control.right {
    background-image: none; }
  .carousel-inner .item {
    background: white; }
  /*************************************/
  /****************************************************************
    Module: Carousel
    Viewport: 768up 
****************************************************************/
  .carousel-inner {
    margin: 0;
    padding: 0;
    list-style: none; }
  .carousel-indicators {
    bottom: -20px !important; }

  .carousel-inner > .active.left,
  .carousel-inner > .prev {
    left: -50%; }
  .carousel-inner > .active.right,
  .carousel-inner > .next {
    left: 50%; }
  .carousel-inner > .left,
  .carousel-inner > .prev.right,
  .carousel-inner > .active {
    left: 0; }
  .carousel-inner > .item.active.right,
  .carousel-inner > .item.next {
    -webkit-transform: translate3d(50%, 0, 0);
    transform: translate3d(50%, 0, 0);
    left: 0; }
  .carousel-inner > .item.active.left,
  .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    left: 0; }
  .carousel-inner > .item.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0; }
  .carousel-control.left {
    margin-left: -15px;
position: absolute;
    }
  .carousel-control.right {
    margin-right: -15px;
    } 


.secondProjectOnSlide {
	display: block;
}

.thirdProjectOnSlide {
	display: none;
}

.carousel-control .icon-prev-carousel {
  position: absolute;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23427314' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  top: 50%;
  z-index: 5;
  display: inline-block;
  margin-top: -10px;
  left: 0%;
  margin-left: -10px;
  width: 25px;
  height: 25px;
  font-family: serif;
  line-height: 1;
}

.carousel-control .icon-next-carousel {
  position: absolute;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23427314' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); 
  top: 50%;
  z-index: 5;
  display: inline-block;  
  margin-top: -10px;
  font-size: 30px;
  margin-right: -10px;
  right: 0%;
  width: 25px;
  height: 25px;
  font-family: serif;
  line-height: 1;
}}



@media only screen and (min-width: 768px) and (min-width: 810px) {
  .carousel-control.left {
    margin-left: -10px;
    display: block; }
  .carousel-control.right {
    margin-right: -10px;
    display: block; }
 }


@media only screen and (max-width: 915px) {
  .link-list.no-heading li:first-child {
    padding: 0 0 10px; }
 }

@media only screen and (max-width: 1029px) {

  .col-sm-4 .btn-u-carousel,
  .col-sm-4 a.btn-u-carousel {
    min-width: 100px; } }

/*********************
TWEENER
This targets some trickier 'tweener' devices like large
tablets. You probably won't need to add too much to this stylesheet.
If you're not using it, delete it.
*********************/
@media only screen and (min-width: 916px) {
  
  .carousel-inner > .active.left,
  .carousel-inner > .prev {
    left: -33.33%; }
  .carousel-inner > .active.right,
  .carousel-inner > .next {
    left: 33.33%; }
  .carousel-inner > .left,
  .carousel-inner > .prev.right,
  .carousel-inner > .active {
    left: 0; }
  .carousel-inner > .item.active.right,
  .carousel-inner > .item.next {
    -webkit-transform: translate3d(33.33%, 0, 0);
    transform: translate3d(33.33%, 0, 0);
    left: 0; }
  .carousel-inner > .item.active.left,
  .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-33.33%, 0, 0);
    transform: translate3d(-33.33%, 0, 0);
    left: 0; }
  .carousel-inner > .item.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0; } 


}

@media only screen and (min-width: 916px) and (min-width: 990px) {
  .carousel-control.left {
    margin-left: -10px; }
  .carousel-control.right {
    margin-right: -10px; } 

/* shows the second and third project on each slide */ 
.secondProjectOnSlide,
.thirdProjectOnSlide {
	display: block;
}
}
/*********************
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*********************/
@media only screen and (min-width: 1030px) {
    
  .carousel-inner > .active.left,
  .carousel-inner > .prev {
    left: -33.33%; }
  .carousel-inner > .active.right,
  .carousel-inner > .next {
    left: 33.33%; }
  .carousel-inner > .left,
  .carousel-inner > .prev.right,
  .carousel-inner > .active {
    left: 0; }
  .carousel-inner > .item.active.right,
  .carousel-inner > .item.next {
    -webkit-transform: translate3d(33.33%, 0, 0);
    transform: translate3d(33.33%, 0, 0);
    left: 0; }
  .carousel-inner > .item.active.left,
  .carousel-inner > .item.prev {
    -webkit-transform: translate3d(-33.33%, 0, 0);
    transform: translate3d(-33.33%, 0, 0);
    left: 0; }
  .carousel-inner > .item.left,
  .carousel-inner > .item.prev.right,
  .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0; }
  .carousel-control.left {
    margin-left: -10px; }
  .carousel-control.right {
    margin-right: -10px; }
  /****************************************************************
    Module: Casestudies 
    Viewport: 1030up 
****************************************************************/
  .case-study {
    grid-template-rows: 200px auto auto 48px 30px; }
    .casestudies-carousel .case-study,
    .carousel-casestudies .case-study {
      grid-template-rows: 180px 80px auto 48px 0px; }
  /*************************************/
  .block footer.ctas {
    display: flex;
    flex-wrap: nowrap; }
    .block footer.ctas a, .block footer.ctas a:visited {
      min-width: 100px; } 

}

/*********************
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*********************/
@media only screen and (min-width: 1200px) {
 .casestudies-carousel .case-study,
  #carousel-casestudies .case-study {
    grid-template-rows: 200px 70px auto 5px 0px; } }
    
@media only screen and (min-width: 1880px) {
#carousel-casestudies {
  padding-bottom: 30px; }
  #carousel-casestudies .btn-u-carousel {
    width: 100%; }
  #carousel-casestudies img {
    max-width: 100%;
    width: 100%; }

.carousel-indicators {
  bottom: 0px !important; }

.carousel-indicators li {
  width: 40px !important;
  border-radius: 0px;
  height: 10px !important;
  margin: 0 0 0 -1px !important;
  border: 1px solid #427314; }
  .carousel-indicators li.tns-nav-active, .carousel-indicators li.active {
    background-color: #427314; }

.carousel-indicators {
  bottom: 0px !important; }

.carousel-indicators li {
  width: 40px !important;
  border-radius: 0px;
  height: 10px !important;
  margin: 0 0 0 -1px !important;
  border: 1px solid #427314; }
  .carousel-indicators li.tns-nav-active, .carousel-indicators li.active {
    background-color: #427314; }

.carousel-control.left {
  background-image: none; }

.carousel-control.right {
  background-image: none; }

.carousel-inner .item {
  background: white; }

.carousel-control,
.carousel-control:hover,
.carousel-control:focus {
  color: #427314;
  font-size: 4rem;
  background-color: transparent;
  width: 4rem; }
  .carousel-control .feather,
  .carousel-control:hover .feather,
  .carousel-control:focus .feather {
    position: absolute;
    top: 50%;
    left: 0; }

.carousel-control .icon-prev-carousel {
  position: absolute;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23427314' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
  top: 50%;
  z-index: 5;
  display: inline-block;
  margin-top: -10px;
  left: 0%;
  margin-left: -10px;
  width: 25px;
  height: 25px;
  font-family: serif;
  line-height: 1;
}

.carousel-control .icon-next-carousel {
  position: absolute;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23427314' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"); 
  top: 50%;
  z-index: 5;
  display: inline-block;  
  margin-top: -10px;
  font-size: 30px;
  margin-right: -10px;
  right: 0%;
  width: 25px;
  height: 25px;
  font-family: serif;
  line-height: 1;
}

.tags {
min-height:70px;
}

}


ul.accessibility-options  {
    margin-top: 3px;
    margin-bottom:3px;
    padding: 3px 0px;
}

.accessibility-options li {
    display:inline;
}

.accessibility-options li:first-child {
    font-weight:700;
}

.accessibility-options li:nth-child(2):after {
    content: " | ";
}

.accessibility-options li:last-child:after {
    content:none;
}

.panel-group {
	margin-bottom: 10px;
	margin-top: 10px;
}

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #EEEEEE;
}

.panel-body {
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
	background-color: #f2f6ef;
}

.panel-body > p {
	margin:15px;
}

.ceoBackround {
	position: absolute;
	background-image: url("/userfiles/image/frank_mitchel.png");
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: contain;
	width: 30%;
	height: 100%;
    top: 0;
    left: 0;
}

.ceoMessage {
	z-index: 100;
	position: relative;
	width: 70%;
}

.panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #212121;
    background-color: #FAFAFA;
    border-color: #EEEEEE;
}

.panel-title {
    font-size: 14px;
}

#accordion .panel-title > a {
    display: block;
    text-decoration: none;
	background: #427314;;
    color: #f7f7f7;
}

.more-less {
    float: right;
    color: #212121;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #EEEEEE;
}

#accordion .panel-title a:hover {
	background: #f7f7f7;
	color: rgb(66,115,20);
}

.theme-container {
	transition-property: height;
	transition: 1s;
}

.theme-container.col-md-1 {
	padding-right: 5px;
	padding-left: 5px;
}

@media only screen and (min-width: 1300px) {
.scrollToTop {
    z-index: 7000;
    width: auto;
    height: auto;
    float: right;
    right: 20px;
    }
}

.centered {
	justify-content: center;
}

/* Persona Cards */ 
.aqua-gradient {
  height: 40px;
  background: linear-gradient(90deg, #427314  51%, #29480c  93%);
}
.image {
  margin-top: -35px;
  width: 70px;
}

.imagePersona {
	width: 60px;
	max-width: 60px!important;
	margin: 5px 0px 5px 20px
}

.avatar-container {
	width: 100%;
	position: relative;
}

.card .card-body .persona {
  padding-left: 80px;
  }

  card .card-body .persona::after {
    clear: both;
  }

.avatar img {
	border-radius:30px;
}

.card-horizontal {
	display: flex;
	flex: 1 1 auto;
}

.avatar-background {
  width: 40px;
  background: linear-gradient( #427314  51%, #29480c  93%);
}

.avatar img {
	border-radius: 50px;
}

.card-text { 
	visibility: hidden;
	padding-bottom: 10px;
	overflow: hidden;
	
}

.card:hover .card-title {
	font-weight: bold;
}

.card-text p, .card-text li {
	font-size: 15px;
	text-align: left;
}


.card.active .card-text { 
	padding-top: 10px;
	visibility: visible;
	transition: visibility 0.5s linear 0.5s;
} 


.card-body {
	max-height: 100px;
	padding-bottom: 50px;
}

.card.active .card-body {
	padding-bottom: 0px;
	width:auto;
	float: left;
	margin-top: -135px;
	max-height: 1400px;
	transition: margin-top 0.5s linear, max-height 1s linear 0.1s;
} 

.card.active .card-title {
	font-weight: bold;
	color: white;
	padding-top: 0px;
	transition: color 0.5s;
}

.personaColumn {
	padding: 0px 0px 30px 0px;
	transition: 0.5s;
	padding-left: 2px;
	padding-right: 2px;
	cursor: pointer;
}

.card-text img {
	padding-bottom: 10px;
	padding-top: 110px;
	max-width: 300px;
	text-align: center;
}

.card-title {
	padding-bottom: 10px;
	padding-top: 10px;
	font-size: 15px;
}

.card.active .avatar {
	padding-left: 45px;
	transition: 0.5s;
	float: left;
	margin-top: 60px;
}

/* Responsiveness for persona cards */ 

@media only screen and (min-width: 320px) {
	.card.active .card-body {
margin-top: -140px;
} 
.card-text img {
	padding-left: 20px;
}

.card.active .avatar {
	padding-left: 75px;
}
}

/* iPhone 6 7 8 X */
@media only screen and (min-width: 375px) {
	.card.active .avatar {
		float: none;
		text-align: center;
		padding-left: 0px;
	}
	.card-text img {
	padding-left: 20px;
}
}

/* iPhone 6 7 8 PLUS and Pixel (XL) */ 
@media only screen and (min-width: 411px) {	
	.card.active .avatar {
		float: none;
		text-align: center;
		padding-left: 0px;
	}
	.card-text img {
	padding-left: 25px;
}
}

/* iPad */ 
@media only screen and (min-width: 768px) {
	.card.active .avatar {
		padding-left: 20px;
	transition: 0.5s;
	float: left;
	margin-top: 60px;
	}
	.card-body {
	max-height: 80px;
	padding-bottom: 20px;
	
}

.card-text img {
	padding-left: 0px;
}
.pictureColumn {
	padding-left: 0px;
	padding-right: 0px;
}

.card.active .card-body {
margin-top: -130px;
} 

.card-title {
	font-size: 13px;
}

}

/* iPad Pro */ 
@media only screen and (min-width: 1024px) {
	.card.active .avatar {
		padding-left: 40px;
	transition: 0.5s;
	float: left;
	margin-top: 60px;
	}
	
	.card.active .card-body {
margin-top: -135px;
} 
}


/* Normal laptops and bigger */ 
@media only screen and (min-width: 1200px) {
	.card.active .avatar {
	padding-left: 55px;
	transition: 0.5s;
	float: left;
	margin-top: 60px;
	}
	.card-title {
		font-size: 15px;
	}

}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}
.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}

.card-body {
  padding: 1rem 1rem;
}

.card-title {
  margin-bottom: 0.5rem;
}

.card-subtitle {
  margin-top: -0.25rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

.card-link:hover {
  text-decoration: none;
}
.card-link + .card-link {
  margin-left: 1rem;
}

.card-header {
  padding: 0.5rem 1rem;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.card-header:first-child {
  border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
}

.card-footer {
  padding: 0.5rem 1rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.card-footer:last-child {
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}

.card-header-tabs {
  margin-right: -0.5rem;
  margin-bottom: -0.5rem;
  margin-left: -0.5rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.5rem;
  margin-left: -0.5rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  border-radius: calc(0.25rem - 1px);
}

.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}

.card-img,
.card-img-top {
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card-img,
.card-img-bottom {
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-group > .card {
  margin-bottom: 0.75rem;
}
@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
.card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
.card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
.card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
.card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}



/* Digital Engagement Range Slider */ 
.form-label {
	color: #427314;
	font-weight: bold;
	font-size: 15px;
}

.digitalEngagement {
	max-width: 85%;
	padding-bottom: 40px;
	padding-top: 110px;
	padding-right: 10px;
	padding-left: 10px;
	max-width: 300px;
	text-align: center;
}

.sliderContainer {
	padding: 15px 0px;
}

.form-range {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;  
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 50%; 
  background:  #427314;
  cursor: pointer;
}

.form-range::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background:  #427314;
  cursor: pointer;
}

.digitalEngagement .pull-right {
	font-size: 13px;
}

.digitalEngagement .pull-left {
	font-size: 13px;
}




/* Key Focus Areas */ 

.key-focus-areas-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}

.key-focus-areas-container {
	position: relative;
	width: auto;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}

.kfaElement {
	flex: 1;
	transition: 0.5s;
	position: relative;
	margin-bottom: 10px;
}

.kfaElement.active {
	flex: 3;
}

.key-focus-areas-container .card {
	position: relative; 
	height: 50px;
	background: #fff;
	margin: 20px 10px 0px 10px;
	padding: 20px 15px;
	display: flex;
	flex-direction: column;
	box-shadow: 25px 25px 100px rgba(0, 0, 0, 0.2);
	transition: 0.5s ease-in-out;
	cursor: pointer;
}

.key-focus-areas-container .card.active {
	height: auto; 
}

.key-focus-areas-container .card .kfaTitleBox {
	position: absolute; 
	width: 90%; 
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: #427314;
	top: -20px;
	left: 5%;
	z-index: 1;
	box-shadow: 0 5px 20px rgba(0,0,0,0.2);
	border-radius: 0.25rem;
	display: table;
}

.key-focus-areas-container .kfaElement:nth-of-type(3n+2) .card .kfaTitleBox {
	background: #0063ba;
}

.key-focus-areas-container .kfaElement:nth-of-type(3n+3) .card .kfaTitleBox {
	background: #c55002;
}

.kfaTitleBox p {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	color: white;
}

.key-focus-areas-container .card:hover .kfaTitleBox p {
	font-weight: bold;
}

.key-focus-areas-container .card .kfaContent {
	position: relative;
	margin-top: 0px;
	text-align: left;
	color: #111;
	visibility: hidden;
	opacity: 0;
	margin-bottom: 0px;
	margin-block-end: 0;
}

.key-focus-areas-container .card .kfaContent p {
	margin-block-end: 0;
	margin: 10px 0px;
}

.key-focus-areas-container .card.active .kfaContent {
	visibility: visible;
	opacity: 1;
	margin-top: 20px;
	transition: visibility 0.5s ease-in 0.3s ;
}

/* Responsiveness for Key Focus Areas */ 
@media only screen and (min-width: 320px) {
	.key-focus-areas-container .kfaElement {
	margin-top: 15px;
}
}

/* iPhone 6 7 8 X */
@media only screen and (min-width: 375px) {
.key-focus-areas-container .kfaElement {
	width: 100%;
}
}

/* iPhone 6 7 8 PLUS and Pixel (XL) */ 
@media only screen and (min-width: 411px) {	
.key-focus-areas-container .kfaElement {
	flex: auto;
}
}

/* iPad Pro */ 
@media only screen and (min-width: 1024px) {
.key-focus-areas-container .kfaElement {
	flex: 1;
}
.kfaElement.active {
	flex: 3;
}
.key-focus-areas-container .kfaElement {
	margin-top: 0px;
}
}


/* Strategies: Digitalisation Strategy, Data Strategy, Cyber Resilience Plan */ 

/* Key Focus Areas */ 

.strategy-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
}

.strategies-container {
	position: relative;
	width: auto;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;
}

.strategyElement {
	flex: 1;
	transition: 0.5s;
	position: relative;
}

.strategyElement.active {
	flex: 3;
}

.strategies-container .card {
	position: relative; 
	height: 50px;
	background: #fff;
	margin: 20px 10px 0px 10px;
	padding: 20px 15px;
	display: flex;
	flex-direction: column;
	box-shadow: 25px 25px 100px rgba(0, 0, 0, 0.2);
	transition: 0.5s ease-in-out;
	cursor: pointer;
}

.strategies-container .card.active {
	height: auto; 
}

.strategies-container .card .strategyTitleBox {
	position: absolute; 
	width: 90%; 
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: #427314;
	top: -20px;
	left: 5%;
	z-index: 1;
	box-shadow: 0 5px 20px rgba(0,0,0,0.2);
	border-radius: 0.25rem;
	display: table;
}

.strategies-container .strategyElement:nth-of-type(3n+2) .card .strategyTitleBox {
	background: #0063ba;
}

.strategies-container .strategyElement:nth-of-type(3n+3) .card .strategyTitleBox {
	background: #c55002;
}


.strategies-container .strategyElement .card {
	background: #EEF2E7;
}


.strategies-container .strategyElement:nth-of-type(3n+2) .card {
	background: #CFE5FA;
}

.strategies-container .strategyElement:nth-of-type(3n+3) .card {
	background: #FAE8CF;
}


.strategyTitleBox p {
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	color: white;
}

.strategies-container .card:hover .strategyTitleBox p {
	font-weight: bold;
}

.strategies-container .card .strategyContent {
	position: relative;
	margin-top: 0px;
	text-align: justify;
	color: #111;
	visibility: hidden;
	opacity: 0;
	margin-bottom: 0px;
	margin-block-end: 0;
}

.strategies-container .card .strategyContent p {
	margin-block-end: 0;
	margin: 10px 0px;
}

.strategies-container .card.active .strategyContent {
	visibility: visible;
	opacity: 1;
	margin-top: 20px;
	transition: visibility 0.5s ease-in 0.3s ;
}

/* Responsiveness for Key Focus Areas */ 
@media only screen and (min-width: 320px) {
	.strategies-container .strategyElement {
	margin-top: 15px;
}
}

/* iPhone 6 7 8 X */
@media only screen and (min-width: 375px) {
.strategies-container .strategyElement {
	width: 100%;
}
}

/* iPhone 6 7 8 PLUS and Pixel (XL) */ 
@media only screen and (min-width: 411px) {	
.strategies-container .strategyElement {
	flex: auto;
}
}

/* iPad Pro */ 
@media only screen and (min-width: 1024px) {
.strategies-container .strategyElement {
	flex: 1;
}
.strategyElement.active {
	flex: 3;
}
.strategies-container .strategyElement {
	margin-top: 0px;
}
}



/* Strategy Boxes */ 

.strategy-container {
	padding: 15px;
}
a:hover,
a:focus{
    text-decoration: none;
    outline: none;
}
.vertical-tab{
    background: #EEF2E7; /*linear-gradient(#fff,#f5f5f5,#fff); */
    display: table;
    padding: 10px;

/*
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1); */
}
.vertical-tab .nav-tabs-strategies{
    background-color: #fff;
    display: table-cell;
    width: 30%;
    min-width: 25%;
    padding: 10px;
    border: none;
    border-radius: 10px;
    vertical-align: top;
}

.nav-tabs-strategies > li {
	padding: 0px;
}
.vertical-tab .nav-tabs-strategies li{ float: none; }
.vertical-tab .nav-tabs-strategies li a{
    color: #427314;
    background: linear-gradient(to right, #fff 50%, #427314 50%);
	background-size: 200% 100%;
	background-position: left bottom;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: left;
    padding: 10px 10px 10px;
    margin: 0 0 10px;
    border-radius: 5px;
    border: none;
	position: relative;
	display: block;
	width: 100%;
    z-index: 1;
    transition: all 0.5s ease 0.1s;
}
.vertical-tab .nav-tabs-strategies li a:hover,
.vertical-tab .nav-tabs-strategies li.active a,
.vertical-tab .nav-tabs-strategies li.active a:hover{
    color: #fff;
    background: #427314;
	background-position: right bottom;;
    border: none;
    box-shadow: 0 0 10px -4px  #427314;
	transition: ease 0.5s;
}
.vertical-tab .nav-tabs-strategies li a:before{
    content: '';
    background-color: #427314;
    height: 100%;
    width: 0;
    border-radius: 10px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    transition: all 0.4s ease 0s;
}
.vertical-tab .nav-tabs-strategies li a:hover:before,
.vertical-tab .nav-tabs-strategies li.active a:before,
.vertical-tab .nav-tabs-strategies li.active a:hover:before{
    width: 100%;
    opacity: 0;
}
.vertical-tab .tab-content{
    color: #888;
    background: transparent;
    font-size: 13px;
    letter-spacing: 0.5px;
    line-height: 21px;
    padding: 15px 15px 10px 15px;
    display: table-cell;
	border: none;
}


.vertical-tab .tab-content h3{
    color: #427314;
    font-size: 18px;
    font-weight: 600;
    text-transform: capitalize;
    margin: 0 0 4px;
}
@media only screen and (max-width: 479px){
    .vertical-tab .nav-tabs-strategies{
        width: 100%;
        display: block;
    }
    .vertical-tab .nav-tabs-strategies li:last-child a{ margin: 0; }
    .vertical-tab .tab-content{
        font-size: 14px;
        display: block;
    }
}