/*HEADER*/
.header { position: fixed; top: 0; left: 0; width: 100%; height: 150px; background-color: #fff; border: 0px solid #ccc;transition: .2s all; z-index: 10;  }

.header-logo {position: fixed;  top: 35px; left: 15px; width: 300px; height: 70px; opacity: 0; transform: translateY(-200%);  display: flex; align-items: center; flex-wrap: wrap; /*overflow: hidden; */transition: all .5s ease;}
.header-logo .hl-img-wrapper {position: absolute; top: 4px; left: 7px; width: 283px; height: 65px;  }
.header-logo .hl-img-wrapper img {width: 100%;} 
.header-logo.hl-show {opacity: 1; transform: translateY(0);  transform-origin: left bottom;  }
.header-logo img {  } 
.header-logo.inverse {background-color:  rgba(34,45,63,1);}
.header-logo.inverse .hl-img-wrapper img{ } 

body.scroll-page .header { height: 100px}
body.scroll-page .header-logo { top: 5px;}
/*body.scroll-page .header-logo { width: 55px;   transition: width .5s ease 0s, background-color .5s ease .3s,  opacity .4s linear;}
body.scroll-page .header-logo .hl-img-wrapper img { }*/

@media all and (max-width: 480px) { 	
	.header-logo .hl-img-wrapper {left: -3px;} 
}