.header-wrap {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}


header {
	position: relative;
	height: 128px;
	top: 20px;
	z-index: 1000;
	margin: 0 auto;
}
	@media (max-width: 599px) {.logo-desktop {display: none;}}
	@media (min-width: 600px) {.logo-mobile  {display: none;}}



/* LOGO - DESKTOP */
.logo-new {
    position: absolute;
    width: 162px;
    left: 8px;
    top: 7px;
}
	@media (min-width: 500px) {.logo-new {width: 188px;}}


.logo-desktop {
	position: absolute;
	background-image: url('../../img/K12ClimateAction-Horz-Logo-RGB-@2x.png');
	width: 270px;
	height: 78.5px;
	background-repeat: no-repeat;
	background-size: 100%;
}

.earthrotate {
	position: absolute;
	top: 0;
	left: 0;
	width: 270px;
	height: 78.5px;
    opacity: 0;
}


	@media (min-width: 600px) {
		.logo-desktop {
			width: 230px;
			left: 32px;
			top: 16px;
		}
		.earthrotate {
			width: 230px;
			height: 67px;
		}
		.logo-desktop:hover .earthrotate {
		    opacity: 1;
		}
	}
	@media (min-width: 768px) {
		.logo-desktop {
			width: 220px;
			left: 47px;
			top: 22px;
		}
		.earthrotate {
			width: 220px;
			height: 64px;
		}
	}
	@media (min-width: 900px) {
		.logo-desktop {
			width: 250px;
			top: 18px;
		}
		.earthrotate {
			width: 250px;
			height: 73px;
		}
	}
	@media (min-width: 1024px) {
		.logo-desktop {
			width: 270px;
			left: 72px;
			top: 19px;
		}
		.earthrotate {
			width: 270px;
			height: 78.5px;
		}
	}
	@media (min-width: 1244px) {
		.logo-desktop, .logo-mobile {
			left: 97px;
		}
	}
/* LOGO - DESKTOP */




.sticky-fadein .logo-mobile {
	display: block;
}

.sticky-fadein .logo-mobile svg {
	width: 130px;
	top: 10px;
}





/* LOGO - MOBILE AND STICKY */
.logo-mobile {
	position: absolute;
	width: 120px;
	height: 68px;
	background-repeat: no-repeat;
	background-size: 100%;
	left: 16px;
	top: 11px;
}

.earthrotate-mobile {
	position: absolute;
	width: 120px;
	height: 68px;
	top: 0;
	left: 0;
    opacity: 0;
}

	@media (min-width: 350px) {
		.logo-mobile {
			width: 100px;
			top: 11px;
		}
	}
	@media (min-width: 500px) {
		.logo-mobile {
			left: 25px;
			top: 16px;
		}
	}
	@media (min-width: 600px) {
		.logo-mobile {
			width: 120px;
			left: 47px;
			top: 8px;
		}
		.logo-mobile:hover .earthrotate-mobile {
		    opacity: 1;
		}
		}
	}
	@media (min-width: 768px) {
		.logo-mobile {
			left: 47px;
			top: 5px;
		}
	}
	@media (min-width: 1024px) {
		.logo-mobile {
			left: 75px;
		}
	}
	@media (min-width: 1244px) {
		.logo-mobile {
			left: 100px;
		}
	}




/* HEADER FADE IN */
.sticky-fadein {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
	background: #FFF;
	border-bottom: 1px solid #ddd;
	height: 80px;
	opacity: 0;
	transition: visibility 0s, opacity 0.15s linear;
}
	@media (max-width: 767px)  {.sticky-fadein {display: none !important;}}

.sticky-fadein-fixed {
	opacity: 1;
}
/* HEADER FADE IN */








/* PAGE HEADERS */
.page--header {
	padding: 230px 0 50px;
	border-bottom: 1px solid #ccc;
	margin-bottom: 50px;
}
	@media (min-width: 768px)  {.page--header {padding: 275px 0 75px; margin-bottom: 75px;}}
	@media (min-width: 1024px) {.page--header {padding: 275px 0 100px;}}

	.page--header .breadcrumb {
		width: 100%;
		float: left;
	}

	.breadcrumb-resources {float: left;}

	.page--header .breadcrumb:hover {color: var(--teal);}

	.page--header h5 .breadcrumb {
		display: inline-block;
		float: left;
		color: var(--mainblue);
		text-decoration: none;
    width: auto;
	}

	.breadcrumb-arrow {
		display: inline;
		position: relative;
		top: -5px;
		left: 6px;
	}

.page--header-color {
	background-color: var(--mainblue);
	border-bottom: none;
	margin-bottom: 0;
}
	.page--header-color h5 .breadcrumb {
		width: auto;
		color: #FFF;
		text-decoration: none;
	}
	.page--header-color .breadcrumb:hover {color: var(--teal);}


.page--header h1,
.page--header h5 {}

.page--header h5 {
  color: var(--mainblue);
  padding-bottom: 30px;
  margin-left: 2px;
}

.page--header-color h1,
.page--header-color h5 {color: #FFF;}



.page--header-about,
.page--header-404,
.page--header-contact {background-color: #263640; color: #FFF;}

.page--header-404,
.page--header-contact,
.page--header-join,
.page--header-inthenews {text-align: center;}

	.page--header-about,
	.page--header-404,
	.page--header-contact,
	.page--header-join,
	.page--header-inthenews {padding: 140px 0 55px;}
		@media (min-width: 900px)  {.page--header-about, .page--header-404, .page--header-contact, .page--header-join, .page--header-inthenews {padding: 190px 0 105px;}}
		@media (min-width: 1024px) {.page--header-about, .page--header-404, .page--header-contact, .page--header-join {padding: 240px 0 155px;}}
		@media (min-width: 1024px) {.page--header-inthenews {padding: 240px 0 100px;}}

/*.page--header-404 h1, .page--header-contact h1 {color: #FFF;}
.page--header-search {
	padding-top: 250px;
	background-color: #263640;
}*/

/*.page--header-about,
.page--header-join,
.page--header-search,
.page--header-inthenews {margin-top: -90px;}*/
/* PAGE HEADERS */








/* HEADER IMAGE */
.header-image-wrapper {position: relative;}

.header-image-background {
	position: absolute;
	width: 100%;
	height: 25%;
	top: 0;
	left: 0;
	background-color: #00497B;
}
	@media (min-width: 900px)   {.header-image-background {height: 35%;}}
	@media (min-width: 1024px)  {.header-image-background {height: 50%;}}


.header-image-bluebackground {
	background-color: var(--mainblue);
	border-radius: 7px;
	width: 100%;
}
/*	@media (min-width: 900px)  {.header-image-bluebackground {width: calc(100% - 230px);}}
	@media (min-width: 1244px) {.header-image-bluebackground {width: calc(100% - 300px);}}*/

.header-image-asset {
	position: relative;
	width: 100%;
	height: 100%;
}

.header-image-asset img {
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
}

.image-caption {
	position: relative;
	font-size: 13px;
	margin-top: 7px;
}
/*	@media (min-width: 900px)  {
		.image-caption {
			position: absolute;
			bottom: 0;
			right: 0;
			max-width: 200px;
		}
	}
	@media (min-width: 1244px)  {
		.image-caption {
			max-width: 250px;
		}
	}*/
/* HEADER IMAGE */