/*---------------Start Header---------------------*/

header {
	background-color: var(--header-header-background-color);
	width: 100%;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-items: center;
	justify-content: center;
	z-index: 200;
	height: 10.0em;
	margin-bottom:0em;
	top:0;
	flex-shrink:0
}

/*------------------------Start Primary Bar---------------------------------------*/
.primary-bar {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	z-index: 1;
	padding: 0em 1em 0em 1em;
	min-height: 9em;
	background-repeat: no-repeat;
	background-size: cover;
	flex-shrink: 0;
	background-color: var(--header-primary-bar-background-color);
}

.mobile-bar {
	display: none;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	z-index: 100;
}

.mobile-logo {

	/* It doesn't have to be '%'. It can also use 'px'. */

	position: relative;
	display: none;
	width: 100%;
	min-height: 50px;
	min-width: 200px;
	max-width: 100%;
	overflow: visible;
	flex-shrink: 1;
	z-index: 1;
	padding: .5em 0em .5em 0em;
	margin: .5em 0em .5em 0em;
	background-image: var(--header-text-space-background-image);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}

.primary-bar-left {
	display: flex;
	flex-flow: row;
	justify-content:flex-start;	
	width: 55%;
	z-index: 1;
	padding-top: .5em;
	flex-shrink: 0;

}

.logo-space {
	display: flex;
	min-width: 12%;
	max-width: 20%;
	height: 153px;
	flex-shrink: 0;
	background-image: var(--header-logo-space-background-image);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	
}

.text-space {
	/* It doesn't have to be '%'. It can also use 'px'. */
	display: flex;
	width: 80%;
	height: 90%;
	
	overflow-y: visible;
	flex-shrink: 0;
	z-index: 9999;
	background-image: var(--header-text-space-background-image);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	
}

.primary-bar-right {
	width: 45%;
	position: relative;
	display: flex;
	flex-flow: column;
	align-items: flex-end;
	justify-content:flex-end;	
	flex-shrink: 15;
	padding-bottom:1em;
	 margin-right:1em;
}

.mb-info-space {
	position: relative;
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: center;
	padding-top: 0em;
	padding-bottom: .5em;
	
}

.mb-nav-info,
.mb-contact-info,
.mb-citizen-reporter-info {
	position: relative;
	display: inline-flex;
	flex-flow: row;
	align-items: flex-start;
	justify-content: space-between;
	margin-right: 1em;
	font-weight: 700;
	
}

.mb-nav-info-icon,
.mb-contact-info-icon,
.mb-citizen-reporter-icon {
	display: inline;
	filter: invert(29%) sepia(88%) saturate(4887%) hue-rotate(359deg) brightness(100%) contrast(109%);
}
.mb-nav-info-icon>img,.mb-nav-contact-icon>img{
	transform:scale(1.1,1.1);
}

.mb-nav-info-text,
.mb-contact-info-text,
.mb-citizen-reporter-text {
	display: inline-block;
	vertical-align:text-top
}

.mb-nav-info a,
.mb-contact-info a,
.mb-citizen-reporter-info a{
	color: var(--header-nav-contact-info-alink-color);
	line-height:1em
}

.mb-nav-info a:hover,
.mb-nav-info a:focus,
.mb-nav-info a:active,
.mb-contact-info a:hover,
.mb-contact-info a:focus,
.mb-contact-info a:active,
.mb-citizen-reporter-info a:hover,
.mb-citizen-reporter-info a:focus,
.mb-citizen-reporter-info a:active {
	color: var(--header-nav-contact-info-ahover-color);
	text-decoration:none;
}

.button-space {
	position: relative;
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: space-around;
}

/*---------------------End Primary Bar--------------------------------------*/

/*--------------------Start Top Buttons----------------------------------*/
.top-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	flex-wrap: wrap;
	margin: 0 auto 10px;
	padding: 0em;
	line-height: normal;
}

.top-buttons .button {
	color: var(--header-top-buttons-text-color);
	margin-left: 1em;
	padding:1em; /*adjusted for larger buttons*/
	text-align: center;
	text-transform: uppercase;
	position: relative;
	transition: .3s;
	font-weight: 700;
	z-index: 1;
	background-color: var(--header-top-buttons-background-color);
	cursor: pointer;
	border-radius: 6px;
}

.top-buttons a.button-1:hover {
	box-shadow: 0 0.6em 0.5em -0.4em var(--header-top-buttons-hover-color);
	transform: translateY(-0.25em);
	background: var(--header-top-buttons-hover-color);
	text-decoration-line: none;
	color: var(--header-top-buttons-text-color);
}

@keyframes glowing {
	0% {
		background-position: 0 0;
	}

	50% {
		background-position: 400% 0;
	}

	100% {
		background-position: 0 0;
	}
}

/*----------------------End Top Buttons----------------------------------*/


/*-------------------------End Header-----------------------------------*/