/*--------------------------------------------------------------
# Search Bar
--------------------------------------------------------------*/

.wraper_flyout_search{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:999;
	opacity:0;
	visibility:hidden;
	transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;

	> .table{
		display:table;
		table-layout:fixed;
		width:100%;
		height:100%;
		margin:0;

		> .table-cell{
			position:relative;
			display:table-cell;
			width:100%;
			height:100%;
			vertical-align:middle;
			text-align:center;

			> .flyout-search-layer{
				position:absolute;
				top:0;
				right:0;
				bottom:0;
				z-index:1;
				transform:translateX(100%);
				-webkit-transform:translateX(100%);

				&:nth-child(1){
					left:0;
					background-color:rgba(0,0,0,0.5);
					transition:all 0.3s ease-in-out 0s;
					-webkit-transition:all 0.3s ease-in-out 0s;
				}

				&:nth-child(2){
					left:300px;
					background-color:rgba(0,0,0,0.4);
					transition:all 0.3s ease-in-out 0.3s;
					-webkit-transition:all 0.3s ease-in-out 0.3s;
				}

				&:nth-child(3){
					left:600px;
					background-color:rgba(0,0,0,0.9);
					transition:all 0.9s ease-in-out 0.6s;
					-webkit-transition:all 0.9s ease-in-out 0.6s;
				}

			}

			> .flyout-search-close{
				position:absolute;
				top:40px;
				right:40px;
				width:30px;
				z-index:2;
				text-align:center;
				cursor:pointer;

				> .flyout-search-close-line{
					width:100%;
					height:2px;
					float:left;
					margin-bottom:5px;
					background-color:#fff;

					&:nth-child(1){
						transform:rotate(45deg);
						-webkit-transform:rotate(45deg);
					}

					&:nth-child(2){
						margin-top:-7px;
						transform:rotate(-45deg);
						-webkit-transform:rotate(-45deg);
					}

				}

			}

			.flyout_search{
				position:relative;
				z-index:1;
				float:right;
				width:100%;
				max-width:500px;
				padding:100px 40px 100px 40px;
				text-align:right;

				> .flyout-search-title{
					margin-bottom:30px;

					> *:last-child{
						margin-bottom:0 !important;
					}

					h4{
						margin-bottom:20px;
						text-transform:uppercase;
						font-weight:300;
						font-size:35px;
						color:#fff;
						line-height:45px;
						letter-spacing:50px;
						opacity:0;
						transition:all 1s ease-in-out 0s;
						-webkit-transition:all 1s ease-in-out 0s;
					}

				}

				> .flyout-search-bar{

					.form-row{
						position:relative;
						padding:0;
						margin:0;
					}

					.form-row input[type=search]{
						width:100%;
						height:60px;
						padding:0px 40px 0px 0px;
						background-color:initial;
						border:none;
						border-bottom:3px #dedede solid;
						box-shadow:initial;
						font-size:20px;
						color:#fff;
					}

					.form-row button[type=submit]{
						position:absolute;
						top:17px;
						right:0;
						z-index:1;
						width:40px;
						height:auto;
						background-color:initial;
						border:none;
						cursor:pointer;
					}

					.form-row button[type=submit] i{
						font-size:20px;
						color:#fff;
						line-height:20px;
					}

				}

			}

		}

	}

}

body.flyout-searchbar-active .wraper_flyout_search{
	opacity:1;
	visibility:visible;
}

body.flyout-searchbar-active .wraper_flyout_search > .table > .table-cell > .flyout-search-layer{
	transform:translateX(0);
	-webkit-transform:translateX(0);
}

body.flyout-searchbar-active .wraper_flyout_search > .table > .table-cell .flyout_search > .flyout-search-title h4{
	letter-spacing:0;
	opacity:1;
}