html,
body {
	font-size: 0.625em;
	margin: 0;
	padding: 0;
	min-height: 100%;
}
body {
	text-align: center;
	text-transform: uppercase;
	font: 300 1.3em 'Open Sans', Arial, sans-serif;
	color: #121212;
}
a {
	text-decoration: none;
}


		/* - media - */
		@media screen and (min-width:767px) {
			body {
				text-align: left;
				background: #222 url('img/background-pc.jpg') center center no-repeat;
				background-size: cover;
			}
		}



/* * HEADER * */
header {
	background: transparent url('img/background-mobile.jpg') center center no-repeat;
	background-size: cover;
	padding: 12px 22px 60px 22px;
	overflow: hidden;
}
.logo {
	display: block;
	width: 100px;
	margin: 0 auto;
	margin-bottom: 30px;
	clear: both;
}
.contact {
	float: right;
	color: #fff;
	background-color: #91c751;
	padding: 5px 10px;
	border-radius: 4px;
	font-weight: 400;
	font-size: 1.2rem;
	transition: color .5s;
}
.contact:hover {
	color: #002de4;
}
h1 {
	color: #fff;
	font-weight: 600;
	font-size: 2.5rem;
}
h1 span {
	color: #91c751;
	display: block;
	font-weight: 300;
	font-size: 1.8rem;
}
hr {
	color: #fff;
	border-color: #fff;
	width: 50%;
}

		/* - media - */
		@media screen and (min-width:767px) {
			header {
				background-image: none;
				padding: 2rem 3rem;
			}
			.logo {
				float: left;
				margin-bottom: 70px;
			}
			h1 {
				clear: both;
				font-size: 3.1rem;
			}
			h1 span {
				font-size: 1.8rem;
			}
			hr {
				display: none;
			}
			.contact {
				padding: 10px 20px;
			}
		}



/* * MAIN * */
.main {
	padding: 20px 45px;
}
.main strong {
	font-weight: 700;
}

		/* - media - */
		@media screen and (min-width:767px) {
			.main {
				padding: 0 3rem;
			}
			.main p {
				color: #fff;
				width: 60%;
				line-height: 2.3rem;
			}
			.main strong {
				color: #91c751;
			}
		}

		@media screen and (min-width:1450px) {
			.main p {
				width:50%;
			}
		}



/* * CLIENT * */
.clients {
	border-top: 6px solid #91c751;
	color: #fff;
	padding: 30px 22px;
	background: #343434; /* Old browsers */
	background: -moz-linear-gradient(top, #343434 0%, #121212 100%); /* FF3.6+ */
	background: -o-linear-gradient(top, #343434 0%, #121212 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #343434 0%, #121212 100%); /* IE10+ */
	background: linear-gradient(to bottom, #343434 0%, #121212 100%);
	overflow: hidden;
}


h2 {
	font-weight: 300;
	font-size: 1.4rem;
}

.brand-list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.brand-item {
	float: left;
	width: 50%;
	height: 70px;
	vertical-align: middle;
	margin-bottom:22px;
}
.brand-link {
	background: transparent url('img/logos-sprite.png') 0 0 no-repeat;
	display: block;
	text-indent: -9999px;
	overflow: hidden;
	position: relative;
	margin: auto;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.brand-cumberland .brand-link {
	width: 132px;
	height: 32px;
	background-position: 0 0;
}
.brand-kijaro .brand-link {
	width: 105px;
	height: 23px;
	background-position: 0 -200px;
}
.brand-sticker .brand-link {
	width: 123px;
	height: 50px;
	background-position: 0 -400px;
}
.brand-hearts .brand-link {
	width: 114px;
	height: 57px;
	background-position: 0 -600px;
}
.brand-songspace .brand-link {
	width: 123px;
	height: 32px;
	background-position: -200px 0;
}
.brand-incommerce .brand-link {
	width: 88px;
	height: 60px;
	background-position: -200px -200px;
}
.brand-artisan .brand-link {
	width: 166px;
	height: 48px;
	background-position: -200px -400px;
}
.brand-storyville .brand-link {
	width: 84px;
	height: 48px;
	background-position: -200px -600px;
}



		/* - media - */
		@media screen and (max-width:330px) {
			.brand-storyville .brand-link {
				float: right;
				margin-right: 5px;
			}
		}

		@media screen and (min-width:500px) {
			.brand-item {
				width: 33.333333%;
			}
		}

		@media screen and (min-width:767px) {
		.clients {
			border-top: none;
			background: transparent;
			padding: 3rem;
			}
		}
		@media screen and (min-width:767px) {
		.brand-item {
			width: 25%;
			}
		}

		@media screen and (min-width:1200px) {
			.brand-item {
				width: 12.5%;
			}
		}

		@media (min-resolution: 192dpi),
			(-webkit-min-device-pixel-ratio: 2) {
			.brand-link {
				background-image: url('img/logos-sprite@2x.png');
				background-size: 400px 800px;
			}
		}




/* * FOOTER * */
footer {
	overflow: hidden;
	color: #fff;
	background-color: #91c751;
}
footer a {
	text-transform: lowercase;
	font-weight: 400;
	color: #002de4;
	transition: color .5s;
}
footer a:hover {
	color: #fff;
	text-decoration: none;
}

		/* - media - */
		@media screen and (min-width:767px) {
			footer {
				text-align: center;
				/*position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;*/
			}
		}