@media all {
	.search-form {
		position: relative;
	}

	.search-form__input-container {
		position: relative;
		top: 0;
		bottom: 0;
		width: 0;
		height: 65px;
		background-color: rgba(255, 255, 255, 0.2);
		overflow: hidden;
		transition: .15s ease;
	}

	.search-form._active .search-form__input-container {
		width: 380px;
	}

	.search-form__input {
		height: 30px;
		left: 20px;
		right: 20px;
		position: absolute;
		top: 0;
		bottom: 0;
		background: none;
		border: none;
		border-bottom: 1px solid #3e3e3e;
		color: #fff;
		margin: auto;
		width: calc(100% - 40px);
		padding-right: 30px;
		outline: none;
	}

	.search-form__input::placeholder {
		color: #fff;
	}

	.search-form__input:-ms-input-placeholder {
		color: #fff;
	}

	.search-form__input:-ms-input-placeholder {
		color: #fff;
	}

	.search-form__input:-moz-placeholder {
		color: #fff;
	}

	.search-form__input::-moz-placeholder {
		color: #fff;
	}

	.search-form__input::-webkit-input-placeholder {
		color: #fff;
	}

	.search-form__button {
		position: absolute;
		background: none;
		border: none;
		color: white;
		top: 0;
		bottom: 0;
		height: 30px;
		margin: auto;
		right: 20px;
		cursor: pointer;
		font-size: 20px;
	}
}

@media (max-width: 1200px) {
	.search-form {
		position: initial;
	}

	.search-form__input-container {
		position: absolute;
		left: 0;
		width: 100%;
		opacity: 0;
		pointer-events: none;
	}

	.search-form._active .search-form__input-container {
		opacity: 1;
		pointer-events: all;
		width: 100%;
	}
}