@keyframes radiateOut {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	
	100% {
		transform: scale(2);
		opacity: 0;
	}
}

@-webkit-keyframes radiateOut {
	0% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
	
	100% {
		-webkit-transform: scale(2);
		opacity: 0;
	}
}

@-moz-keyframes radiateOut {
	0% {
		-moz-transform: scale(1);
		opacity: 1;
	}
	
	100% {
		-moz-transform: scale(2);
		opacity: 0;
	}
}

@keyframes slidefromleft {
	0% {
		transform: translate3d(-20%,0%,0%);
		opacity: 0;
	}
	
	100% {
		transform: translate3d(0%,0%,0%);
		opacity: 1;
	}
}

@-webkit-keyframes slidefromleft {
	0% {
		-webkit-transform:  translate3d(-20%,0%,0%);
		opacity: 0;
	}
	
	100% {
		-webkit-transform:  translate3d(0%,0%,0%);
		opacity: 1;
	}
}

@-moz-keyframes slidefromleft {
	0% {
		-moz-transform:  translate3d(-20%,0%,0%);
		opacity: 0;
	}
	
	100% {
		-moz-transform:  translate3d(0%,0%,0%);
		opacity: 1;
	}
}

.search-youruw {
	position: absolute;
	top: 50%;
	right: 20px;
	z-index:2;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	


	.youruw {
		position: relative;
		display: inline-block;
		
		.youruwTrigger {
			text-transform: uppercase;
			font-size: 13px;
			letter-spacing: 0.3px;
			font-family: "Roboto Condensed", sans-serif;
			color: rgba(255,255,255,0.9);
			text-decoration: none;
			position: relative;
			top: 2px;
			margin-right: 8px;
		}
		
		.youruwmenu:after {
			bottom: 99%;
			right: 15%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-color: rgba(255, 255, 255, 0);
			border-bottom-color: rgba(255, 255, 255, 0.9);
			border-width: 10px;
			margin-left: -10px;
		}
	
		.youruwmenu {
			position: absolute;
			top: 2.5em;
			right: 0px;
			width: 170px;
			z-index:3;
			background: rgba(255,255,255,0.9);
			border: none;
			border-radius: 3px;
			transform: translate(30px,50px) rotate(-30deg);
			-webkit-transform: translate(30px,50px) rotate(-30deg);
			opacity: 0;
			transition: 0.4s cubic-bezier(0.000, 0.875, 0.455, 1.160);
			-webkit-transition: 0.4s cubic-bezier(0.000, 0.875, 0.455, 1.160);
			visibility: hidden;
			
			ul {
				li {
					a {
						display: block;
						font-family: "Roboto Condensed",sans-serif;
						font-size: 13px;
						color: #4a4a4a;
						text-decoration: none;
						padding: 0.3em;
						padding-left: 0.8em;
						padding-right: 0.8em;
					}
					
					a:hover, a:focus {
						background: rgba(0,0,0,0.15);
					}
				}
			}
		}
		
		.youruwmenu.visible {
			visibility: visible;
			transform: translate(0px,0px) rotate(0deg);
			-webkit-transform: translate(0px,0px) rotate(0deg);
			opacity: 1;
		}
	
	}
	
	

	
		.search {
			
			display: inline-block;
			border-left: 1px solid rgba(255,255,255,0.2);
			padding-left: 12px;
			height: 35px;
			
			
			.searchTrigger {
				display: block;
				position: relative;
				top: 50%;
				height: 20px;
				width: 20px;
				transform: translateY(-50%);
				-webkit-transform: translateY(-50%);
			
				svg {
					
					width: 100%;
					height: 100%;
					
					path {
						fill: rgba(255,255,255,0.9);
					}
				}
			}
		}
	

}

.searchResultsOverlay {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index:9;
	background: rgba(179, 179, 179, 0.5);
	opacity: 0;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	visibility: hidden;
}

.searchResultsOverlay.visible {
	visibility: visible;
	opacity: 1;
}



.searchUI {
	position: fixed;
	visibility: hidden;
	top: 0px;
	left: 0px;
	width: 100%;
	z-index:10;
	
	background: #f8f8f8;
	transform: translateY(-100%);
	-webkit-transform: translateY(-100%);
	min-height: 1%;
	transition: 0.4s cubic-bezier(0.000, 0.875, 0.455, 1.160);
	-webkit-transition: 0.4s cubic-bezier(0.000, 0.875, 0.455, 1.160);
	
	.suggest-more {
		display: none !important;
	}
	
	.searchFormIcon {
		position: absolute;
		top: 50%;
		left: 0px;
		z-index:2;
		width: 50px;
		height: 50px;
		transform: translate(0%, -250%);
		-webkit-transform: translate(0%, -250%);
		-moz-transform: translate(0%, -250%);
		-webkit-transition: 0.3s cubic-bezier(0.000, 0.875, 0.455, 1.160);
		-moz-transition: 0.3s cubic-bezier(0.000, 0.875, 0.455, 1.160);
		transition: 0.3s cubic-bezier(0.000, 0.875, 0.455, 1.160);
		box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
		border-radius: 1000px;
		
		svg {
			position: relative;
			z-index:3;
			width: 100%;
			height: 100%;
			
			polygon, path {
				fill: rgba(255,255,255,1);
				
			}
			
			circle {
				fill: $blue;
			}
			
		}
		
		
	}
	
	label {
		display: block;
		position: relative;
		padding: 0.4em;
		padding-left: 60px;
		padding-bottom: 0em;
		width: 80%;
		margin: 2em auto;
		margin-left: 3em;
		
		.search-field {
			font-size: 2.1em;
			line-height: 1.4;
			width: 100%;
			font-family: "Raleway", sans-serif;
			font-weight: 300;
			background: transparent;
			border: none;
			position: relative;
			z-index:2;
			border-bottom: 1px solid $blue;
			border-radius: 0px;
			
		}
		
		.search-field:focus {
			outline: none;
		}
		
		.tabSuggest {
			color: #bababa;
			text-transform: uppercase;
			font-size:12px;
			letter-spacing: 1px;
			position: absolute;
			bottom: -10px;
			left: 60px;
			z-index:1;
			/*opacity: 0;
			transform: translate(0px, 40px);
			-webkit-transform: translate(0px, 40px);
			-moz-transform: translate(0px, 40px);
			
			transition: 0.4s;
			-webkit-transition: 0.4s;
			-moz-transition: 0.4s;*/
			
			
			strong {
				color: #929292;
			}
		}
		
		.tabSuggest.visible {
			opacity: 1;
			transform: translate(0px, 0px);
			-webkit-transform: translate(0px, 0px);
			-moz-transform: translate(0px, 0px);
		}
		
	}
	
	.search-submit {
			opacity: 0;
			position: absolute;
			top: -500px;
		}
		
	.searchClose {
		display: block;
		position: absolute;
		top: 65px;
		right: 0px;
		margin-right: 3em;
		height: 30px;
		width: 30px;
		z-index:1;
		
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
	}
	
	#ajaxResults {
		
		margin: 0 auto;
		padding-left: 110px;
		padding-right: 90px;
		height: 0px;
		overflow: hidden;
		transition: 0.4s;
		
		
		#main {
			
			.entry-summary {
				margin-top: 0px;
				margin-bottom: 3em;
			}
			
			article {
				transform: translate3d(-20%,0%,0%);
				opacity: 0;
				
				animation: slidefromleft 0.4s forwards;
				animation-iteration-count: 1;
				animation-timing-function: cubic-bezier(0.250, 0.250, 0.465, 1.220);
				
				-webkit-animation: slidefromleft 0.4s forwards;
				-webkit-animation-iteration-count: 1;
				-webkit-animation-timing-function: cubic-bezier(0.250, 0.250, 0.465, 1.220);
				
				-moz-animation: slidefromleft 0.4s forwards;
				-moz-animation-iteration-count: 1;
				-moz-animation-timing-function: cubic-bezier(0.250, 0.250, 0.465, 1.220);
				
			}
			
			article:nth-child(0) {
				animation-delay: 0s;
				-webkit-animation-delay: 0s;
				-moz-animation-delay: 0s;
			}
			
			article:nth-child(1) {
				animation-delay: 0.2s;
				-webkit-animation-delay: 0.2s;
				-moz-animation-delay: 0.2s;
			}
			
			article:nth-child(2) {
				animation-delay: 0.4s;
				-webkit-animation-delay: 0.4s;
				-moz-animation-delay: 0.4s;
			}
			
			article:nth-child(3) {
				animation-delay: 0.6s;
				-webkit-animation-delay: 0.6s;
				-moz-animation-delay: 0.6s;
			}
			
			article:nth-child(4) {
				animation-delay: 0.8s;
				-webkit-animation-delay: 0.8s;
				-moz-animation-delay: 0.8s;
			}
			
			article:nth-child(5) {
				animation-delay: 1s;
				-webkit-animation-delay: 1s;
				-moz-animation-delay: 1s;
			}
			
			article:nth-child(6) {
				animation-delay: 1.2s;
				-webkit-animation-delay: 1.2s;
				-moz-animation-delay: 1.2s;
			}
			
		}
		
		h1.page-title {
			margin-top: 0px;
			font-size: 13px;
			font-weight: 400;
			letter-spacing: 1px;
			color: rgba(0,0,0,0.5);
			text-transform: uppercase;
			
			span {
				font-weight: 700;	
			}
		}
		
		
	}
	
	#ajaxResults.resultsLoaded {
		
	}
	
}


.searchUI.visible {
	visibility: visible;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	
	.searchFormIcon {
		position: absolute;
		top: 50%;
		left: 0px;
		z-index:2;
		width: 50px;
		height: 50px;
		transform: translate(0%, -50%);
		-webkit-transform: translate(0%, -50%);
		-moz-transform: translate(0%, -50%);
		box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
		border-radius: 1000px;
		
	}
	
	.radiate {
					display: block;
					position: absolute;
					top: 0px;
					left: 0px;
					z-index:1;
					
					width: 50px;
					height: 50px;
					background: rgba(0,0,0,0.8);
					border-radius: 1000px;
					z-index:1;
					
					animation: radiateOut 0.8s forwards;
					animation-iteration-count: 1;
					animation-delay: 0.4s;
					-webkit-animation: radiateOut 0.8s forwards;
					-webkit-animation-iteration-count: 1;
					-webkit-animation-delay: 0.4s;
					-moz-animation: radiateOut 0.8s forwards;
					-moz-animation-iteration-count: 1;
					-moz-animation-delay: 0.4s;
		}
}

.searchUI.visible.searching {
	visibility: visible;
	transform: translateY(0px);
	-webkit-transform: translateY(0px);
	
	.searchFormIcon {
		position: absolute;
		top: 50%;
		left: 0px;
		z-index:2;
		width: 50px;
		height: 50px;
		transform: translate(0%, -50%);
		-webkit-transform: translate(0%, -50%);
		-moz-transform: translate(0%, -50%);
		box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
		border-radius: 1000px;
		
	}
	
	.radiate {
					display: block;
					position: absolute;
					top: 0px;
					left: 0px;
					z-index:1;
					
					width: 50px;
					height: 50px;
					background: rgba(0,0,0,0.8);
					border-radius: 1000px;
					z-index:1;
					
					animation: radiateOut 0.8s forwards;
					animation-iteration-count: infinite;
					animation-delay: 0.4s;
					-webkit-animation: radiateOut 0.8s forwards;
					-webkit-animation-iteration-count: infinite;
					-webkit-animation-delay: 0.4s;
					-moz-animation: radiateOut 0.8s forwards;
					-moz-animation-iteration-count: infinite;
					-moz-animation-delay: 0.4s;
		}
}

@media screen and (max-width: 400px) {
	.searchUI {
		.searchClose {
		
			top: 46px;
			
		}
		
		#ajaxResults {
			padding-left: 1.3em;
			padding-right: 1.3em;	
		}
	}
}