body {
	font-family: 'Quicksand', sans-serif;
	background: whitesmoke;
	margin: 15px;
}
#wrap {
	text-align: center;
}
.btn-video {
    border-radius: 50px;
    background: #fdfdfd;
    border: 1px solid #0099cc;
    padding: 8px;
	text-align:center;
}
* {
	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) {
}