body {
	font-family: 'Quicksand', sans-serif;
	background: whitesmoke;
	margin: 15px;
}
#wrap {
	text-align: center;
}
.search {
	border: #ccc 1px solid;
	padding: 12px;
	width: 250px;
	height: 40px;
	font-family: 'Quicksand', sans-serif;
	height: 35px !important;
	color: #545454;
	border-radius: 50px;
	height: 30px;
}
.search2 {
	border: #ccc 1px solid;
	padding: 2px 10px;
	width: 100px;
	height: 40px;
	font-family: 'Quicksand', sans-serif;
	height: 35px !important;
	color: #545454;
	border-radius: 50px;
	height: 30px;
}
input:focus:hover, .search2:focus:hover {
    outline: none;
    box-shadow: 0px 0px 8px #c5c5c5;
    border: #ccc 1px solid;
    border-radius:50px;
    
}
input:focus, .search2:focus{
    outline: none;
    box-shadow: 0px 0px 8px #c5c5c5;
    border: #ccc 1px solid;
}
.btn-slide {
	position: relative;
	display: inline-block;
	height: 35px;
	width: 100%;
	line-height: 35px;
	padding: 0;
	border-radius: 50px;
	background: #fdfdfd;
	border: 1px solid #0099cc;
	transition: .5s;
}
.btn-slide:hover {
	background-color: #0099cc;
}
.btn-slide:hover span.circle {
	left: 100%;
	margin-left: -45px;
	background-color: #fdfdfd;
	color: #0099cc;
}
.btn-slide:hover span.title {
	left: 40px;
	opacity: 0;
}
.btn-slide:hover span.title-hover {
	opacity: 1;
	left: 15px;
}
.btn-slide span.circle {
	display: block;
	background-color: #0099cc;
	color: #fff;
	position: absolute;
	float: left;
	margin: 4px 8px;
	line-height: 24px;
	height: 25px;
	width: 25px;
	top: 0;
	left: 0;
	transition: .5s;
	border-radius: 50%;
}
.btn-slide span.title,  .btn-slide span.title-hover {
	position: absolute;
	left: 40px;
	text-align: center;
	margin: 0 auto;
	font-size: 16px;
	font-weight: bold;
	color: #30abd5;
	transition: .5s;
}
.btn-slide span.title-hover {
	left: 80px;
	opacity: 0;
}
.btn-slide span.title-hover {
	color: #fff;
}
.fa-link {
	font-size: 13px !important;
}
* {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.wrapper {
	width: 100%;
	margin: 0 auto;
}
img {
	max-width: 100%;
	height: auto;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
	margin-bottom: 10px;
	/*positioning and padding*/
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
}
 @media only screen and (max-width: 481px) {
	 .btn-slide span.title,  .btn-slide span.title-hover {
	font-size: 12px;
}
}

/*
TABLET & SMALLER LAPTOPS
The average viewing window and preferred media query for those is 768px.
But I think that some more breathing space is good:)
*/
@media only screen and (min-width: 920px) {
.wrapper {
	max-width: 100%;
}
.grid_1 {
	width: 8.33333333%;
}
.grid_2 {
	width: 16.66666667%;
}
.grid_3 {
	width: 25%;
}
.grid_4 {
	width: 33.33333333%;
}
.grid_5 {
	width: 41.66666667%;
}
.grid_6 {
	width: 50%;
}
.grid_7 {
	width: 58.33333333%;
}
.grid_8 {
	width: 66.66666667%;
}
.grid_9 {
	width: 75%;
}
.grid_10 {
	width: 83.33333333%;
}
.grid_11 {
	width: 91.66666667%;
}
.grid_12 {
	width: 100%;
}
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
	float: left;
	display: block;
}
.rightfloat {
	float: right;
}
.btn-slide span.title,  .btn-slide span.title-hover {
	font-size: 13px;
}
}
@media only screen and (min-width: 1030px) {
	.btn-slide span.title,  .btn-slide span.title-hover {
	font-size: 15px;
}
}
 @media only screen and (min-width: 1240px) {
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
}
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
}