.headerbox-search-form {
	display: flex;
}

.headerbox-search-form input[type="search"] {
	width: 100%;
	height: 100%;
	margin: 0;
	font-size: 18px;
	text-indent: 5px;
	color: #1a2e37;
	padding: 7px 8px;
}

.headerbox-search-form input[type="search"]::placeholder {
	font-size: 18px;
	color: #1a2e37;
}

.headerbox-search-form button {
	width: 40px;
	padding: 0;
	margin: 0;
	flex-shrink: 0;
	background-color: #d6ae29;
}
.headerbox-search-form button:active,
.headerbox-search-form button:focus,
.headerbox-search-form button:hover {
	background-color: #d6ae29;
}

.headerbox-search-form button i {
	color: #1a2e37;
}

.search-cont .search-button,
.search-cont .desktop {
	display: none;
}

@media screen and (min-width: 64em) {
	.search-cont .mobile {
		display: none;
	}

	.search-cont .desktop {
		display: block;
		font-size: 23px;
		font-weight: 800;
		text-transform: uppercase;
	}

	.search-cont .search-button {
		background-color: transparent;
		padding: 0;
		margin: 0;
	}

	.search-cont .search-button i {
		margin-right: 5px;
	}

	.search-cont .search-button:hover,
	.search-cont .search-button:focus {
		background-color: transparent;
	}

	.search-cont .search-button .close {
		display: none;
	}

	.search-cont.active .search-button .open {
		display: none;
	}

	.search-cont.active .search-button .close {
		display: block;
		color: #d6ae29;
	}

	.search-cont.active .search-button i.close {
		font-size: 18px;
		margin-right: 8px;
		position: relative;
		top: 1px;
	}

	.search-cont.active .search-button {
		padding-bottom:3px;
		border-bottom: 2px solid #d6ae29;
		align-items: baseline;
	}

	.search-cont .headerbox-search-form {
		opacity: 0;
		pointer-events: none;
		position: absolute;
		right: 50%;
		transform: translateX(50%);
		top: 230px;
		width: 810px;
		height: 62px;
		z-index: 25;
		transition: opacity 200ms ease-in-out;
		border: 1px solid #d6ae29;
	}

	.search-cont.active .headerbox-search-form {
		opacity: 1;
		pointer-events: all;
	}

	.search-cont.active::before {
		content: "Seek & you shall find";
		display: block;
		background-color: #1a2e37;
		font-size: 147px;
		color: #15252c;
		margin-right: auto;
		height: auto;
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		padding-right: calc(100% - 479px);
		font-family: acumin-pro, sans-serif;
		text-transform: uppercase;
		font-weight: 800;
		line-height: 0.8em;
		z-index: -1;
	}

	.search-cont.active::after {
		content: "";
		position: absolute;
		top: 460px;
		left: 0;
		width: 100%;
		height: 20px;
		background-image: url(../svg/ripped-mask.svg);
		background-repeat: repeat-x;
		filter: invert(13%) sepia(52%) saturate(439%) hue-rotate(153deg) brightness(96%) contrast(92%);
		z-index: 1;
		pointer-events: none;
	}

	.headerbox-search-form button {
		width: 170px;
		height: 100%;
		padding: 0;
		margin: 0;
	}

	.search-cont .search-button {
		display: flex;
		align-items: center;
	}

	.headerbox-search-form input[type="search"] {
		text-indent: 15px;
	}
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) { 
	.search-cont.active::after {
		display: none;
	}
	.search-cont.active::before {
		border-bottom:15px solid #1a2e37;
	}
 }