/* 
 * CSS: Header
 * @desc: Header custom styles.
 */

/* Header - Desktop nav - Position and size */
.jpf-header__desktop-nav {
	position : fixed; 
  	width: 100%;
}

/* Header - Desktop nav - Magnifier icon, add cursor pointer */
.jpf-header-desktop-nav__search .jpf-header-desktop-nav-search__icon:hover {
	cursor : pointer;
}

/* Header - Desktop nav - Open button, add cursor pointer */
.jpf-header-desktop-nav__open-button:hover {
	cursor: pointer;
}

/* Header - Desktop nav - Search - Styles */
.jpf-header-desktop-nav__search .jpf-header-desktop-nav-search__form .search-field {
  	font-family: 'Source Sans Pro', sans-serif;
  	background-color: rgba(0,0,0,0.1);
  	width: 0;
	height : 32px;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 140px;
	transition: 0.3s all ease;
    border-radius : 5px!important;
	-webkit-appearance: none!important;
}

/* Header - Desktop nav - Search - Styles on hover */
.jpf-header-desktop-nav__search:hover .jpf-header-desktop-nav-search__form .search-field,
.jpf-header-desktop-nav__search .jpf-header-desktop-nav-search__form .search-field:focus {
  background-color: white;
	width: 132px;
	opacity: 1;
	left:0;
}

/* Header - Desktop nav - Search - Hide submit button */
.jpf-header-desktop-nav__search .jpf-header-desktop-nav-search__form .search-submit {
	display : none;
}

/* Custom styles under 1330px */
@media (max-width: 1330px) { 
  
	/* jpf header Search - Desktop nav - Styles */
	.jpf-header-desktop-nav .jpf-header-desktop-nav-search__form .search-field,
  	.jpf-header-desktop-nav__search:hover .jpf-header-desktop-nav-search__form .search-field,
	.jpf-header-desktop-nav__search .jpf-header-desktop-nav-search__form .search-field:focus {
		background-color: white;
		width: 112px;
		opacity: 1;
		left:0;
	}

}

/* Custom styles under 975px */
@media (max-width: 974px) {
	
	/* Nav Mobile - Position */
	.jpf-header__mobile-nav {
		transform: translateX(100%);
		transition: all 0.4s;
	}

	/* Mobile Nav - Position - Translate */
	.jpf-header__mobile-nav--open {
		transform: translateX(0)!important; 
	}

	/* Mobile Nav - Close button, add cursor pointer */
	.jpf-header-mobile-nav-top__close-button:hover {
		cursor: pointer;
	}

	/* Mobile Nav - Search - Styles */
	.jpf-header-mobile-nav-top__search .search-field {
		font-family: 'Source Sans Pro', sans-serif;
		width : 160px;
		border : 1px solid transparent;
		border-radius : 5px!important;
		-webkit-appearance: none!important;
		height: 32px;
	}

	/* Mobile Nav - Search - Hide submit button */
	.jpf-header-mobile-nav-top__search .search-submit {
		display : none;
	}
  
  	/* Mobile Nav - Menu */
	.jpf-header-mobile-nav__menu {
		overflow-y: scroll;
	}
	
}

/* Custom styles under 475px */
@media (max-width: 474px) {
	
	/* Mobile Nav - Search - Styles */
	.jpf-header-mobile-nav-top__search .search-field {
		height: 28px;
	}
	
}