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

.headerbox-search-form input[type="search"] {
	width: 100%;
	height: 29px;
	margin: 0;
	font-family: "caslons-egyptian", sans-serif;
	font-weight: 300;
	font-size: 16px;
	color: #d1d2d3;
	letter-spacing: 0.1em;
	text-transform: uppercase;

	box-shadow: none;
	border: none;
	padding: 0 0 3px;
}

.headerbox-search-form input[type="search"]:focus {
	background-color: transparent;
	border-color: none;
	box-shadow: none;
}

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

.headerbox-search-form button {
	width: 40px;
	padding: 0;
	margin: 0;
	flex-shrink: 0;
	background-color: transparent;
	font-size: 22px;
}

.headerbox-search-form button:focus,
.headerbox-search-form button:hover {
	background-color: transparent;
}
.headerbox-search-form button:focus{
	outline: 1px dashed #d1d2d3;
}
.headerbox-search-form button i{
	color: #d1d2d3;
}
.search-cont .search-button {
	display: none;
}

@media screen and (min-width: 64em) {
	.search-cont {
		position: relative;
	}
	.search-cont .headerbox-search-form input[type="search"] {
		background-color: transparent;
	    height: 100%;
	    padding: 0;
	    text-indent: 10px;
	    color: #939393;
	    padding-right: 28px;
	}

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

	.search-cont .search-button {
		width: 40px;
		height: 40px;
		padding: 0;
		margin: 0;
		background-color: transparent;
		color: #303030;
	}
	.search-cont .search-button:focus{
		outline: 1px dashed #303030;
	}
	.search-cont .search-button .close {
		display: none;
	}

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

	.search-cont.active .search-button .close {
		display: block;
		font-size: 25px;
	}

	.search-cont .headerbox-search-form {
		opacity: 0;
	    pointer-events: none;
	    position: absolute;
	    right: 21%;
	    top: 0;
	    width: 445px;
	    height: 100%;
	    z-index: 25;
	    transition: opacity 200ms ease-in-out;
	    display: flex;
	    flex-direction: row-reverse;
	    border-bottom: 2px solid #303030;
	}

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

	.headerbox-search-form button {
		width: auto;
		height: 100%;
		padding: 0;
		margin: 0;
		background-color: transparent;
	}

	.headerbox-search-form button i{
		color: #303030;
		font-size: 20px;
	}

	.search-cont .search-button {
		display: block;
	}
	.search-cont.active .search-button {
	    z-index: 26;
	    position: relative;
	}
}