/* search form styles */
.search-form {
	position: absolute;
	right: 20px;
	top: 23px;
	font-size: 20px;
	z-index: 2;
	transition: top 0.2s linear;
	line-height: 0;
	z-index: 999;

	.search-opener {
		color: $gray;
		padding: 10px
	}

	.ui-autocomplete {
		@extend %listreset;
		position: static;
		background: transparent;
		border: none;
		padding-top: 20px;
	}

	.ui-menu {
		.ui-menu-item {
			padding: 5px 0;
			list-style-image: none;
			color: $white;
			text-transform: capitalize;
			font-weight: 300;
			font-size: 20px;
			line-height: 30px;
			border: none;
			transition: padding 0.2s linear;
			cursor: pointer;

			&.ui-state-focus,
			&.ui-state-hover,
			&.ui-state-active {
				margin: 0;
				background: transparent;
				border: none;
				padding-left: 5px;
			}
		}
	}

	@include breakpoint-min ($screen-md) {
		top: 19px;

		.search-opener {
			font-size: 11px;
			color: $white;
		}

		.ui-menu {
			.ui-menu-item {
				font-size: 30px;
				line-height: 40px;
				padding: 10px 0;
			}
		}

		.ui-autocomplete {
			padding-top: $global-sm-space;
		}
	}

	@include breakpoint-min ($screen-lg) {
		right: 50px;
	}
}

.search-wrap{
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba( 0, 0, 0, .87);
	position: fixed;
	z-index: 999999;
	visibility: hidden;
	opacity: 0;
	white-space: nowrap;
	text-align: center;
	overflow-y: auto;
	padding: $global-md-space 0;
	line-height: 1.2;
	transition: opacity 0.3s linear;
	
	&:before {
		content: '';
		display: inline-block;
		vertical-align: middle;
		height: 100%;
		margin-right: -0.25em;
	}

	.form-group {
		display: inline-block;
		vertical-align: middle;
		text-align: left;
		white-space: normal;
		width: 100%;
		max-width: 1200px;
		margin-bottom: $global-space;
		padding: 0 20px;
	}

	.close {
		height: 40px;
		width: 40px;
		position: absolute;
		right: 30px;
		top: 30px;
		font-size: 20px;
		line-height: 40px;
		border: 1px solid $white;
		transition: opacity 0.3s linear;
		opacity: 1;
		text-shadow: none;
		color: $white;
		padding: 0;

		&:hover {
			opacity: 0.8;
		}
	}

	.input-holder{
		overflow: hidden;
	}

	.form-control{
		width: 100%;
		height: 50px;
		font-size: 20px;
		line-height: 50px;
		font-weight: 300;
		color: $white;
		border: solid $white;
		border-width: 0 0 1px;
		background: none;
		outline: none;
		box-shadow: none;
		padding: 0;
		transition: all 0.2s linear;
		font-family: $roboto;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;

		&::-webkit-input-placeholder {
			color: $white;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		&:-moz-placeholder {
			color: $white;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		&::-moz-placeholder {
			color: $white;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		&:-ms-input-placeholder {
			color: $white;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		&:focus{
			border-bottom-color: $white;
		}
	}

	@include breakpoint-min ($screen-md) {
		padding: 30px 0;

		.form-control {
			font-size: 30px;
			line-height: 50px;
		}
	}
}

/* styles when search is active */
.search-active {
	.search-wrap{
		visibility: visible;
		opacity: 1;
		z-index: 99999;
		max-width: none;
	}

	.search-slide{
		.search-wrap{
			max-width: 500px;
		}
	}

	.navbar-default {
		z-index: 9;
	}
}

.ui-helper-hidden-accessible {
	display:none;
}