<div class="search">
	<h1><i>jQuery</i> search slide out</h1>
	<p>
		A simple <i>jQuery</i> slide out search box<br>
		that works with any base font-size
	</p>
	<input type="submit" value="&#xf002;" class="search-btn fa ib-m"><!--
	--><div class="search-slide ib-m">
		<input type="text" placeholder="Enter your search" class="ib-m"><!--
		--><div class="search-close ib-m"><i class="fa fa-times"></i></div>
	</div>
</div>

/* ==============================
	$-Variables
============================== */

$heading-typeface: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
$body-typeface: Georgia, Times, "Times New Roman", serif;
$color: white;



/* ==============================
	$-Mixins
============================== */

@mixin box-sizing {
	box-sizing: border-box;
}



/* ==============================
	$-Resets
============================== */

html,
body {
	height: 100%;
	font-size: 16px;
}

html {
	@include box-sizing;
}

*,
*:before,
*:after {
	@include box-sizing;
}

body {
	margin: 0;
	line-height: 1.5;
	background-color: #333;
	text-align: center;
	font-family: $body-typeface;
	color: $color;
}

/* headers */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-top: 0;
	margin-bottom: 0;
	font-family: $heading-typeface;
	font-weight: 700;
}

/* paragraphs */
p {
	margin-bottom: 3em;
	color: darken($color, 33%);
}

/* highlight colors */
::-moz-selection {
	background-color: $color;
	color: white;
}

::selection {
	background-color: $color;
	color: white;
}

/* anchor links */
a {
	color: black;
	&:hover,
	&:active {
		text-decoration: none;
	}
	&:visited {
		color: rebeccapurple;
	}
}

/* form elements */
select,
textarea,
input {
	max-width: 100%;
	padding: 0;
	margin: 0;
	font-family: $body-typeface;
	font-size: 1em;
	color: inherit;
}

input[type=submit],
input[type=button] {
	cursor: pointer;
}

/* img */
img {
	max-width: 100%;
	height: auto;
	border: none;
	vertical-align: middle;
	font-style: italic;
}



/* ==============================
	$-Modules
============================== */

/* clearfix */
.cf {
	&:after {
		content: "";
		display: table;
		clear: both;
	}
}

/* inline block */
.ib {
	display: inline-block;
	vertical-align: top;
}

.ib-m {
	display: inline-block;
	vertical-align: middle;
}



/* ==============================
	$-Styles
============================== */

.search {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 18.9375em;
	input[type=submit] {
		vertical-align: middle;
		width: 1.375em;
		height: 1.375em;
		border: none;
		outline: none;
		background: none;
		transition: opacity 100ms ease-in-out;
		&:hover {
			opacity: .5;
		}
	}
	input[type=text] {
		width: 14em;
		height: 2.5em;
		padding: 0 .375em;
		border: none;
		border-bottom: 1px solid #999;
		margin-left: .1875em;
		background: inherit;
		transition: border-color 100ms ease-in-out;
		&:focus {
			border-bottom-color: inherit;
			outline: none;
		}
	}
}

.search-slide {
	width: 0;
	height: 2.5em;
	overflow: hidden;
}

.search-close {
	width: 1.375em;
	height: 1.375em;
	text-align: center;
	cursor: pointer;
	transition: opacity 100ms ease-in-out;
	&:hover {
		opacity: .5;
	}
}



/* ==============================
	$-Media-queries
============================== */

/* max width queries */
@media only screen and (max-width:7680px) {}
@media only screen and (max-width:3840px) {}
@media only screen and (max-width:1920px) {}
@media only screen and (max-width:1440px) {}
@media only screen and (max-width:1366px) {}
@media only screen and (max-width:1280px) {}
@media only screen and (max-width:1024px) {}
@media only screen and (max-width:768px) {}
@media only screen and (max-width:480px) {}
@media only screen and (max-width:320px) {}

/* min width queries */
@media only screen and (min-width:320px) {}
@media only screen and (min-width:480px) {}
@media only screen and (min-width:768px) {}
@media only screen and (min-width:1024px) {
	html,
	body {
		font-size: 20px;
	}
}
@media only screen and (min-width:1280px) {}
@media only screen and (min-width:1366px) {
	html,
	body {
		font-size: 24px;
	}
}
@media only screen and (min-width:1440px) {}
@media only screen and (min-width:1920px) {}
@media only screen and (min-width:3840px) {}
@media only screen and (min-width:7680px) {}

// j

//// slide out search
var sliBtn = '.search-btn',
		sliCont = '.search-slide',
		sliTxt = '.search-slide input[type=text]',
		sliDis = '.search-close',
		sliSpd = 300;

$(sliBtn).click(function(){
	$(sliCont).animate(
		{'width':'15.5625em'}, sliSpd
	);
	$(sliTxt).focus();
});
$(sliDis).click(function(){
	$(sliCont).animate(
		{'width':0}, sliSpd
	);
});