/*this is to kill the covid top menu nav*/
.nav-item.yellow{
	/* display: none !important;*/ /*when hero banner is present*/ 
	top:0;
}

.hero_overlay.dark.bottom{
	opacity:.25;
}

/*homepage hero full resolution*/

.heropanel { 
    background-position: center;  /*<---customize position of background*/
}
.hero_1 {
	background-image: url("/homepage/_imgs/hero-man-boy-planting.jpg");
}
.hero_2 {
	background-image: url("/homepage/_imgs/hero-man-boy-planting.jpg");
}
.hero_3 {
	background-image: url("/homepage/_imgs/hero-man-boy-planting.jpg");
}
.heropanel {
    background-position: center top;
}
/*homepage hero mobile format*/
@media screen and (max-width: 1010px) {
.heropanel { 
    background-position: center;/*<---ccustomize position of background*/
}
.hero_1 {
	background-image: url("/homepage/_imgs/hero-man-boy-planting-m.jpg");
}
.hero_2 {
	background-image: url("/homepage/_imgs/hero-man-boy-planting-m.jpg");
}
.hero_3 {
	background-image: url("/homepage/_imgs/hero-man-boy-planting-m.jpg");
}
}

/*homepage hero smallest mobile format*/
@media screen and (max-width: 400px) {
.heropanel { 
    background-position: center;/*<---ccustomize position of background*/
}
.hero_1 {
	background-image: url("/homepage/_imgs/hero-man-boy-planting-s.jpg");
}
.hero_2 {
	background-image: url("/homepage/_imgs/hero-man-boy-planting-s.jpg");
}
.hero_3 {
	background-image: url("/homepage/_imgs/hero-man-boy-planting-s.jpg");
}
}

/*end of homepage hero images*/
.photocredit {
    position: absolute;
    bottom: 0px;
    right: 0px;
    padding: 7.5px 20px 7.5px 10px;
    font-size: .8em;
    font-weight: 400;
    color: #FFF;
    background: rgba(0, 0, 0, .895);
}
/*hero text*/
#alerts-container.hero{
bottom:90px;
top:unset;
position:absolute;
}
#alerts-container.hero {
background: rgba(0, 0, 0, 0.72);
color: #fff !important;
margin-left: -2px;
padding: 0 10px;
box-sizing: border-box;
width: 100%;
line-height:1.5em;
z-index:1;
}
 #alerts-container.hero a{
 color: #fff !important;
}
 #alerts-container.hero a:focus, #alerts-container.hero a:hover {
 text-decoration: none !important;
  color: #ffd400 !important;
}
#alerts-container.hero #alerts::before{
	content: "\f071";
	font-size: 31px;
	top: 20px;
	color: #ffd400;
}
	
/*left drawer--------------------------------------*/
.herovideo{
    position: absolute;
    top: 120px;
    display: inline-block;
    z-index: 2;
    background: #212121;
	background: rgba(0, 0, 0, 0.88);
    padding: 10px 20px;
    border-radius: 0 1px 1px 0;
	-webkit-box-shadow: 3px 0px 11px 0px rgba(0,0,0,0.29);
	-moz-box-shadow: 3px 0px 11px 0px rgba(0,0,0,0.29);
	box-shadow: 3px 0px 11px 0px rgba(0,0,0,0.29);
}
.herovideo h4{
	color: #FFF;
}
.white.herovideo{
    background: #FFF;
	background: rgba(255, 255, 255, 0.95);
}
.white.herovideo h4{
	color: #000;
}
.left_drawer{
    position: absolute;
    display: block;
    z-index: 2;
    top: 85px;
    padding: 0 50px 0 0;
    left: -851px;
    width: 850px;
    box-sizing: border-box;
    transition: all .35s ease-in-out;
    /*height: 100vh;
    height: calc(var(--vh, 1vh) * 100);*/
}
.pop_body{
    /* padding: 45px 15px 15px 285px; */
    /* box-sizing: border-box; */
    /* overflow-y: auto; */
    /* width: 850px; */
    /* overflow-x: hidden; */
    /*background: url(/sitehome/banners/p-rotated-650.png) no-repeat 0 -84px, linear-gradient(135deg, rgb(5,77,132) 72%, rgba(0,57,115,1));*/
    /*background: linear-gradient(135deg, rgb(5,77,132) 72%, rgba(0,57,115,1));*/
    /* background: #0054a6; */
}
.pop_body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pop_body h4{
	/* color: #FFF; */
}
.show_drawer{
	left:-250px; /*council or special left:0*/
	position:fixed;
	z-index:2003;
}
.home_council{
    border: 1px solid rgba(255, 255, 255, 0.42);
    background: rgba(0, 0, 0, 0.22);
    margin: 15px 0;
    padding: 0 10px;
	display: inline-block
}
.show_drawer .pop_body{
	/*-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.75);
	-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.75);
	box-shadow: -0px 1px 2px 0px rgba(0, 0, 0, 0.75);*/
}
a.close_button{
	background-color: rgba(0,0,0,0.17);
    color: #FFF !important;
    padding: 5px 8px;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.4);
	text-decoration: none;
}
a.close_button.close_top{
	right: 14px;
    top: 10px;
    position: absolute;
    background: url(/_imgs/icon-mmenu-close-over-white.png) no-repeat right 5px center;
	padding: 3px 30px 5px 8px;
    background-size: 20px 20px;
}
a.close_button:hover,  a.close_button:focus{
    background-color: rgba(0,0,0,1);
	text-decoration: none;
	border-color: #FFF;
}
.pop_title {
    /*transform: rotate(-90deg);
    transform-origin: bottom right;
    width: 272px;*/
    position: absolute;
    right: -150px;
    top: calc(100vh - 287px);
    background: #0054a6;
    color: #fff !important;
    padding: 7px 10px;
    text-decoration: none;
    font-weight: 600;
    z-index: -1;
    box-sizing: border-box;
    text-align: right;
	transition: all .135s ease-in-out;
	/*-webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.52);*/
}
.pop_title:after {
    font-family: FontAwesome;
    content: "\f054";
    margin:0 0 0 8px;
    display: inline-block;
    position: relative;
    top: 0;
    font-size: 14px;
}
.pop_title .fa{
	font-size: 30px;
}
.pop_title h2{
	margin: 0;
	color: #FFF;
	font-size: 1.35em;
}
a.pop_title:link, a.pop_title:visited {
	color: #FFF;
	text-decoration: none;
}
a.pop_title:hover, a.pop_title:focus{
	color: #0054a6 !important;
	text-decoration: none!important;
	/*background: #b63806;*/
	background: #F1F1F1;
}
.show_drawer .pop_title{
	/*display:none !important;*/
	right: 10px;
}
.pop_title i{
    font-size: 20px;
}
.top.over.mini + .left_drawer .pop_title{
	display:block;
}
.show_drawer .pop_title{
	display: none !important;
}
.pop_body h2{
	margin: 0px 0 17px;
    color: #FFF;
}
.pop_body li a:link, .pop_body  li a:visited {
    visibility: hidden;
	display: block;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    margin: 0;
    padding: 6px 6px 6px 0;
    color: #FFF;
    text-decoration: none;
}
.pop_body a:link{
	/* visibility: hidden; */
}
.show_drawer .pop_body li a:link, .show_drawer .pop_body  li a:visited, .show_drawer .pop_body a:link {
	visibility: visible;
}
.pop_body li:first-of-type a{
    border-top: 0;
}
.pop_body li:last-of-type a{
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
	margin-bottom: 20px;
}
#newsearch.drawer{
	width:60%;
}
#newsearch.drawer input[type="text"]{
	border: 1px solid rgb(255, 255, 255);
}
#newsearch.drawer button {
    border-radius: 0;
    border: 1px solid rgba(255, 255, 255, 0.83);
	border-left: none;
}
p.morelink{
	margin: 0;
}
.pop_body .morelink a:link, .pop_body .morelink a:visited{
	text-decoration: none;
    display: inline-block;
	padding: 6px 18px 6px 0;
    border: none;
	color: #FFF;
}
.pop_body li a:focus, 
.pop_body li a:hover,
.pop_body li a:visited:hover,
.pop_body .morelink a:focus, 
.pop_body .morelink a:hover,
.pop_body .morelink a:visited:hover {
	text-decoration: underline!important;
}
.pop_body li a, .morelink a{
	position: relative;
}
div.img_panel img{
	max-width: 100%;
	width: 235px;
}
/*.pop_body li a:after,*/ .morelink a:after{
	font-family: FontAwesome;
	padding: 0;
	display: inline-block;
	position:absolute;
	font-size:12px;
	right:0px;
	margin-left: 5px;
	content: "\f054";
	top: 12px;
	color: #3c80be;
}
.pop_body li a:hover:after, .morelink a:hover:after{
	color:#FFF;
}
/*start animation*/
/* Safari 4.0 - 8.0 */
@-webkit-keyframes left_drawer {
 0%   {right:100%; top:85px;}
 15%  {right:50%; top:85px;}
 30% {right:0; top:85px}
 95% {right:0; top:85px}
 100% {right:0; top:85px}
}

/* Standard syntax */
@keyframes left_drawer {
 0%   {right:100%; top:85px;}
 15%  {right:50%; top:85px;}
 30% {right:0; top:85px}
 95% {right:0; top:85px}
 100% {right:0; top:85px}
}
/*end animation*/
@media screen and (max-width:1480px) {
	.left_drawer {
		position:absolute;
	}
}
	
@media screen and (max-width:875px) {
.pop_title {
    	top: 391px;
}
#newsearch.drawer{
	display: none;
}
}
	
@media screen and (max-width:800px) {
	.left_drawer {
		width: 360px;
		left: -360px;
	}
	.pop_body {
		width: 360px;
		padding:60px 10px 10px;
	}
	.show_drawer.left_drawer {
		left: 0;
	}
	a.close_button {
		right: 10px;
		top: 17px;
	}
}

	
@media screen and (max-width:680px) {
	.left_drawer {
		width: 96%;
		left: -96%;
		padding: 0;
		top: 0px;
	}
	.pop_body {
		width: 100%;
	}
	.pop_title {
    	top: 291px;
}
}
/*end of left drawer*/



.intro_panel div.img-caption{
	width: calc(49% - 20.5px);
	max-width: 100%;
	padding: 0 20px 0 0;
}
.intro_panel div.img-caption:nth-of-type(2){
	padding: 0 105px 0 20px;
	border-left: 1px solid #e4e4e4;
	position: relative;
}
.c2p_button{
	position: absolute;
	top: 0;
	right: 0;
}
div.image-group.news div.img-caption {
	margin: 0;
	padding: 10px 20px 0;
	width: calc((100% - 120px) / 4);
	box-sizing: content-box;
}

.img-caption.pinned{
	padding-top: 0;
}
.img-caption.pinned a:first-of-type h3{
	margin-top: 0;
}
.img-caption.pinned a{
	text-decoration: none !important;
}
.img-caption.pinned a{
	display: block;
}
div.image-group.news div.img-caption img {
	border: none;
}
div.image-group.box_content div.img-caption {
	font-size: 115%;
	margin-top: 0;
	padding-top: 5px;
	max-width: 100%;
}
.panels.bordered .responsive {
	border-top: 1px solid;
	border-bottom: 1px solid;
	border-color: #e4e4e4;
}
.panels.bordered {
	padding: 20px 0;
}
.peoplepanel, .pamapanel{
	padding: 0;
}
.peoplepanel > div, .pamapanel > div {
	box-sizing: border-box;
	float: left;
	position: relative;
}
.pamapanel > div {
	float: right;
}
div.img_panel {
	min-height: 350px;
}
div.img_panel.taller {
	min-height: 420px;
}
div.limage.hero_overlay{
	height: 72px;
}
.peoplepanel > div.img_panel:first-of-type {
	background-size: cover;
	transition: all .15s;
	/*width: calc((100%/8) * 5);*/
	width: 57.5%;
}

@media screen and (min-width: 2400px) {
	.peoplepanel > div.img_panel:first-of-type {
		background-size: unset;
		background-position: right center !important;
		background-repeat: no-repeat;
	}
	.peoplepanel > div.img_panel:nth-of-type(2){
		background-size: unset !important;
		background-position: left center !important;
		background-repeat: no-repeat;
	}
	.pamapanel > div.img_panel:first-of-type {
		background-size: unset !important;
		background-position: left center !important;
		background-repeat: no-repeat;
	}
	.pamapanel > div.img_panel:nth-of-type(2){
		background-size: unset;
		background-position: left center !important;
		background-repeat: no-repeat;
	}
	.topbar-float .heropanel, .topbar-float .heropanel .responsive{
		max-height: 1200px;
	}
}

.peoplepanel > div.img_panel:nth-of-type(2){
    width: 570px;
    max-width: 40%;
    padding: 40px 0 20px 40px;
    box-sizing: border-box;
}
.pamapanel > div.img_panel:first-of-type {
	background-size: cover;
	transition: all .15s;
	width: 57.5%;
}
.pamapanel > div.img_panel:nth-of-type(2){
    width: 570px;
    max-width: 40%;
    padding: 40px 40px 0 0;
    box-sizing: border-box;
}
.pamapanel{
	background-color: #f1f2f6;
	color: #000;
	margin: 50px 0 -30px; /*this it because .page has a 30px bottom margin and this panel is last on page. don't want to see white*/
}
.pamapanel .page-intro{
	color: #000;
}
div.img_panel.medium {
    min-height: 310px;
	height: auto;
}
div.img_panel.short {
    min-height: 280px;
	height: auto;
}
.pamapanel .arrow_blue{
	background-color: #f2f2f2;
}
.page-intro + p{
	margin-top:0;
}
.img_panel .page-intro{
	margin: 15px 0 10px;
}
.img_panel a.button_big_blue{
	margin-top:5px;
}

/*use these two (or one) if top and/or bottom of image is very light, then  enable show or hide the divs below */
.hero_overlay.short{
	opacity: .5;
	height:116px !important;
}
.top-tasks ul {
	margin: 0;
	padding: 0;
	list-style: none;
	overflow:hidden;
}
.top-tasks ul li {
	display: inline-block;
	float: left;
}
.top-tasks {
	min-height: 100px;
	overflow: hidden;
	border-radius: 1px;
}
.task_boxes {
	min-height: 130px !important;
	padding: 0 !important;
	box-sizing: border-box;
	background: none !important;
	top: -20px;
	z-index: 2;
}
.top-tasks ul li {
	width: calc((100% - 30.1px) / 6);
	margin: 0 2.5px 5px;
}
.top-tasks.responsive {
	background: #FFF;
	padding: 5px 2.5px 0;
}
.top-tasks ul li a {
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
	height: 115px;
	float: left;
	transition: all ease .1s;
	text-align: center;
	color: #00468a;
	text-decoration: none;
	font-weight: 600;
	font-size: .9em;
	background: #e5e5e5;
}
.top-tasks ul li a:hover, .top-tasks ul li a:focus {
	background: #F1F1F1;
	border-bottom: 2px solid #00468a;
}
.top-tasks ul li .fa {
	font-size: 28px;
}
.top-tasks ul li img {
	width: 37.5px;
	margin: 8px 0 0;
}
.top-tasks ul li .fa, .top-tasks ul li img {
	display: block;
	text-align: center;
	margin: 4px auto 7px;
}
.arrow_blue {
    position: absolute;
    width: 30px;
    height: 30px;
    background: #054d84;
    transform: rotate(45deg);
    left: initial;
	margin-left: initial;
	right:-15px;
	top: 50%;
    margin-top: -15px;
	z-index: 1;
}
a.button_big_blue {
    transition: all ease .1s;
    text-align: center;
    text-decoration: none !important;
	display: inline-block;
    font-size: 1em;
	font-weight: 600;
    padding: 12px 15px 15px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    margin: 17px 0 0;
	box-sizing: border-box;
	line-height: 1em;
}
a.button_big_blue:hover, a.button_big_blue:focus {
	background: rgba(0, 0, 0, 0.41);
	border-color:transparent;
}
a.button_big_blue.light {
    border: 1px solid #036;
	background: #036;
	color:#FFF !important;
}
a.button_big_blue.light:hover, a.button_big_blue.light:focus {
	background: #FFF;
	color:#036 !important;
}
.blocklink h3{
	color: #000 !important;
}

/*only show first 7*/
.limit_3 .blocklink:nth-child(n+7){
	display:none;
}

/*different style from the 4th onward */
.limit_3 .blocklink:nth-child(n+4) .img-caption{ 
	padding: 0 !important;
	float: right;
	clear: right !important;
	box-sizing: border-box;
	margin-bottom: 10px;
}
.limit_3 .blocklink:nth-child(n+4) .img-caption p:last-of-type{ 
	border-bottom: 2px solid;
	border-bottom-color: transparent;
}
.limit_3 .blocklink:nth-child(n+4):hover p:last-of-type, 
.limit_3 .blocklink:nth-child(n+4):focus p:last-of-type{
	border-bottom-color: #036 !important;
}
.limit_3 .blocklink:nth-child(n+4) img{
	display:none;
}

@media screen and (max-width: 1440px) {
.top-tasks a {
	font-size: .9em;
}
div.image-group.news div.img-caption {
    padding: 10px 10px 0;
    width: calc((100% - 60px) / 4);
}
.limit_3 .blocklink:nth-child(n+4) .img-caption{ 
	padding: 0 0 0 10px !important;
}
}


@media screen and (max-width:1300px) {
.peoplepanel > div.img_panel:first-of-type {
	width: 50%;
}
.peoplepanel > div.img_panel:nth-of-type(2){
    width: 50%;
    max-width: 48%;
	padding: 28px 0 0 28px;
}
.pamapanel > div.img_panel:first-of-type {
	width: 50%;
}
.pamapanel > div.img_panel:nth-of-type(2){
    width: 50%;
    max-width: 48%;
	padding: 28px 28px 0 0;
}
}

@media screen and (max-width:1200px) {
.top_home_item {
	width: 32%;
	margin-right: 2%;
}
.top_home_item:nth-of-type(3n + 3) {
	margin-right: 0;
}
.top_home_item:nth-of-type(3n + 4) {
	clear: both;
}
.top_home_item:nth-of-type(4n + 4) {
	margin-right: 2%;
}
.top_home_item:nth-of-type(4n + 5) {
	clear: none;
}
}


@media screen and (max-width: 1010px) {
.top-tasks ul li {
	width: calc((100% - 15.1px) / 3);
}

.peoplepanel div.img_panel, .pamapanel div.img_panel{
	width: 100% !important;
	max-width: 100% !important;
	padding: 20px 2%;
	text-align: center;
}
.arrow_blue,.pamapanel .arrow_blue {
    transform: rotate(45deg);
    left: 50% !important;
    margin-left: -15px;
    bottom: -17px;
    z-index: 2;
    top: inherit;
    right: unset;
    margin-top: inherit;
}
.pamapanel .arrow_blue {
	top:-15px;
	bottom: unset;
}
.intro_panel div.img-caption{
	width: 100% !important;
	max-width: 100% !important;
	padding: 0;	
}
.intro_panel div.img-caption p{
    max-width: 700px;
    margin: auto;
}
div.img_panel.taller {
    min-height: unset;
}
.intro_panel div.img-caption:nth-of-type(2){
	padding: 0;
	border-left: none;
}
a.button_big_blue.c2p_button{
	position: relative;
    clear: both;
    display: block;
    width: 100px;
    left: 50%;
    margin: 15px 0 0 -50px;
}
div.img_panel {
	height: 400px;
}
div.img_panel:nth-of-type(2) {
	height: auto;
	padding: 30px 2% !important;
}
.peoplepanel > div, .pamapanel > div {
	width: 100%;
	float: none;
	clear: both;
}
div.img_panel{
	padding: 20px !important;
}
}

@media screen and (max-width:900px) {
.page-intro {
    font-size: 1.25em;
}
div.image-group.news div.img-caption {
	width: calc((100% - 21.1px) / 2) !important;
	float: left !important;
	margin: 0 20px 20px 0 !important;
	padding: 0 !important;
}
div.image-group.news .blocklink:nth-of-type(2n + 2) div.img-caption {
	margin-right: 0 !important;
}
div.image-group.news .blocklink:nth-of-type(2n + 3) div.img-caption {
	/* border-left: none; */
	/* padding-left: 0; */
}
div.image-group.news .blocklink:nth-of-type(3) div.img-caption {
	margin-top: 17px !important;
}
/*different style from the 3th onward */
.limit_3 .blocklink:nth-child(n+3) .img-caption{
	/* padding: 10px 10px 0 !important; */
	width: 100% !important;
	max-width: 100% !important;
	/* clear: none; */
	/* box-sizing: border-box; */
}
.limit_3 .blocklink:nth-child(n+3) img{
	display:none;
}
.limit_3 .blocklink:nth-child(n+3) h3{
	margin: 0;
}
.limit_3 .blocklink:nth-child(3){ 
	margin-top: 30px;
}

/*different style from the 4th onward */
.limit_3 .blocklink:nth-child(n+4) .img-caption{ 
	padding: 0 !important;
	float: left;
	clear: none !important;
}
}

@media screen and (max-width: 640px) {
.top-tasks ul li {
	width: calc((100% - 10.1px) / 2);
}
.top_home_item {
	width: 100%;
	clear: both;
	margin: 0 0 30px;
}
.herotext {
	font-size: 95%;
	bottom: 20px;
}
.panels div.img-caption h3 {
	font-size: 1em;
}
.intro_panel div.img-caption p{
    text-align: center;
}
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /*IE 10 and 11 code here*/
	
	.arrow_blue {
    	left: 100%;
	}
}



.blackpanel, .blackpanel .arrow_blue {
    background-color: #111b22 !important;
	color: #FFF !important;
}
.blackpanel h2, .blackpanel .page-intro {
	color: #FFF !important;
}