.header-bg {
	background : transparent;
}

.header-search-trigger {
	cursor : pointer;
}

.close-search-trigger {
	cursor      : pointer;
	margin-left : 10px;
	width       : 40px;
}

.hero {
	z-index    : 1;
	background : #f7f7f7;
	position : sticky;
	top : 0;
}

.main-header-container{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 25px;
	transition: background-color .25s ease-in-out;
	height : 75px;
  background: white;
  border-bottom: 1px solid transparent;
}

.main-header--with-hero .main-header-container{
  background: transparent;
}

@media (max-width: 1023px){
  .menu-is-open .main-header-container{
    background: white!important;
    border-bottom: 1px solid #ECECEC!important;
  }
}

#header.scrolled .main-header-container{
  background: white;
  border-bottom: 1px solid #ECECEC;
}



.main-header--is-sticky .main-header-container{
	background: white;
}

.main-header-container .logo{
	width:310px;
	height:auto;
	transition: width .3s ease-in;
}

#header.scrolled .main-header-container .logo{
	width:260px;
}

@media (min-width : 1024px) {
  .main-header-container > * {
    flex: 1;
  }
  .main-header-container{
    height : 95px;
    padding: 0 80px;
  }
  #header.scrolled .main-header-container{
    height: 90px;
  }
	body[data-is-desktop="true"] .main-header--with-hero {
		height : 0;
	}

	body[data-is-desktop="true"] .header-search {
		display          : flex;
		align-items      : center;
		justify-content  : center;
		grid-column      : 2/-2;
		z-index          : 15;
		transform-origin : top center;
		transform        : translate3d(0, -20px, 0) scale(0.8);
		opacity          : 0;
		visibility       : hidden;
		pointer-events   : none;
		transition       : all .2s ease-out;
	}

	body[data-is-desktop="true"] .header-search--is-show {
		transform      : translate3d(0, 0, 0) scale(1);
		opacity        : 1;
		visibility     : visible;
		pointer-events : all;
		transition     : all .3s ease-in-out .2s;
	}

	body[data-is-desktop="true"] .header-search-bg {
		z-index        : 10;
		pointer-events : none;
		padding        : 0;
		height         : 100%;
		grid-column    : 1/-1;
		opacity        : 0;
		background     : white;
		transition     : all .2s ease-out .2s;
	}

	body[data-is-desktop="true"] .header-search-bg--is-show {
		opacity    : 1;
		transition : all .2s ease-in-out;
	}

  .menu-is-open .main-header-container{
    z-index: unset;
  }
}