/*********************** HEADER AREA **********************/
#header {
    background: transparent;
}

/************************* Alert Bar *************************/
#alert-bar {
	text-align: center;
	width: 100%;
	padding: .5em 0;
	opacity: 1;
    transition: all 1s;
}
#alert-bar > *:last-child{
	margin-bottom: 0;
}

/* .scrolled added by js on scroll */
body.scrolled #alert-bar{
	/* display: none; */
	opacity: 0;
    transition: all 1s;
}

/*********************** Fixed Header Control***********************/
/* placeholder for the fixed header to push the rest of the content below it */
#header-spacer{
	height:0;
}

/* .scrolled added by js on scroll */
body.scrolled #header-spacer{
	height:100px;
}


#header-fixed{
	width:100%;
	background:white;
	z-index:1000;
	top:0;
}
body.scrolled #header-fixed {position:fixed;}

/****************** Header Contents ****************************/
#header-upper {
	display: flex;
	justify-content: space-between;
}

#header-logo img {
	vertical-align: top;
	height: 6em;
	-webkit-transition: height 0.5s ease-in-out;
	-moz-transition: height 0.5s ease-in-out;
	-o-transition: height 0.5s ease-in-out;
    transition: height 0.5s ease-in-out;
}

/* set image height on scroll or when page loads already scrolled (reload) */
body.scrolled #header-logo img,      
body.start-scrolled #header-logo img{
	height: 3em;
}
/* prevent animation when reload causes page to load already scrolled */
body.start-scrolled #header-logo img {
	-webkit-transition: height 0s;
	-moz-transition: height 0s;
	-o-transition: height 0s;
    transition: height 0s;
}

#headerRight {
	display: flex;
    position: relative;
    align-items: center;
    margin: 0 0 0 1rem;
    flex-direction: column;
    justify-content: center;
}

@media only screen and (max-width: 899px) {
	#header-logo a {
		width: 180px;
	}
	
	.topHeaderContact {
		display: none;
	}

	#headerRight {
		flex: unset;
		float: none;
		display: block;
		position: absolute;
		right: 4rem;
	}
}

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

	.topMenuBG {
		height: 80px !important;
	}

	#header-logo {
		height: 80px !important;
	}

}

#header-phone {
	padding: 1em 0;
}

#header-logo {
	width: 233px;
	position: relative;
}

#header-logo a {
    display: inline-block;
    width: 233px;
    height: 100%;
    position: relative;
}

#header-logo a:hover {
	opacity: .7;
	transition: all .4s;
}

#header-logo.logoWidthSmall {
	width: 180px !important;
	height: 80px;
	transition: all .2s;
}

#header-logo.logoWidthSmall a {
	width: 180px !important;
	transition: all .4s;
}

#header-logo a img {
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}