/* Table of Contents ------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */
/*

Universal
HTML5
Structure
Headings
Links
Paragraphs
Lists
Tables
Images
Media Queries

*/

/* Universal -------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------ */
* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* HTML5 ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */
header, nav, main, section, article, aside, footer, figure, figcaption {
	display: block;
}

/* Structure -------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------ */
html {
	background: url(http://www.ipewholesale.com/images/bg-html.jpg) no-repeat top center fixed #000;
	background-size: 100%;
}
body {
	margin: 0;
	padding: 0;
	font-size: 62.5%;
}
.container, .main-nav {
	max-width: 48em;
}
.container {
	background: #fff;
	margin: 0 auto;
	box-shadow: 0 0 1em #000;
	font: 1.5em/2 Helvetica, Arial, sans-serif;
}
.site-header {
	background: url(http://www.ipewholesale.com/images/bg-header.jpg) no-repeat top center;
	background-size: cover;
	margin: 2em 0 0 0;
	padding: 1em .5em;
}
	.site-header:after {
		content: "";
		display: block;
		clear: both;
	}
.main-nav {
	background: #000;
	width: 100%;
	padding: 0 0 2em 0;
	position: fixed;
	top: -12em;
	z-index: 1;
	transition: top .3s ease;
}
	.main-nav:after {
		content: "Menu";
		display: block;
		width: 100%;
		color: #fff;
		text-align: center;
		position: absolute;
		bottom: 0;
		cursor: pointer;
	}
	.down {
		top: 0;
	}
		.down:after {
			content: "X"
		}
.site-footer {
	border-top: .5em solid #000;
	text-align: center;
}
.phone {
	background: #000;
	color: #fff;
	text-align: center;
}

/* Headings --------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------ */
h1, h2, h3 {
	font-weight: normal;
}
h1 {
	margin: .667em 0 0 0;
	font-size: 3em;
	line-height: 1.333;
}
h2 {
	margin: 1em 0 0 0;
	font-size: 2em;
	line-height: 1;
}
h3 {
	margin: 1.333 0 0 0;
	font-size: 1.5em;
	line-height: 1.333;
}
h4 {
	margin: 2em 0 0 0;
	font-size: 1em;
	line-height: 2;
}

/* Links ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */
a {
	color: #966;
	text-decoration: none;
}
a:hover, a:focus, a:active {
	text-decoration: underline;
}
.logo {
	width: 50%;
	max-width: 6.5em;
	color: #000;
	font-size: 1.5em;
	line-height: 1;
	text-align: center;
	float: right;
}
.logo:hover, .logo:focus, .logo:active,
.main-nav a:hover, .main-nav a:focus, .main-nav a:active {
	text-decoration: none;
}
.main-nav a {
	background: #fff;
	display: block;
	text-align: center;
}
.button {
	background: url(http://www.ipewholesale.com/images/bg-button.jpg) no-repeat center;
	background-size: cover;
	display: table;
	margin: 2em auto;
	padding: 1em;
	color: #fff;
	text-shadow: 0 -1px 0 #000;
	text-align: center;
	position: relative;
}
	.button:hover, .button:focus, .button:active {
		text-decoration: none;
	}
	.button:active {
		top: 1px;
	}

/* Paragraphs ------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------ */
p {
	margin: 0 0 2em 0;
}

/* Lists ------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------ */
ul, ol {
	margin: 2em 0;
	padding: 0 0 0 2em;
}

/* Tables ----------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------ */
table {
	margin: 2em 0;
}
	td {
		padding: .5em;
		border: 1px solid #000;
	}

/* Images ----------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------ */
img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 2em auto;
}
.logo img {
	margin: 0;
	border: none;
}
#gallery img {
	float: left;
	margin: 0 .5em 2em 0;
}
#gallery:after {
	content: "";
	display: block;
	clear: both;
}



/* Media Queries ---------------------------------------------------------------- */
/* ------------------------------------------------------------------------------ */
@media screen and (min-width: 36.5em) {

main {
	padding: 0 3em;
}
.logo {
	font-size: 3em;
}

}

@media screen and (min-width: 49em) {

main {
	padding: 0 6em;
}
.main-nav {
	padding: 0;
	top: 0;
}
	.main-nav:after {
		content: "";
		display: block;
		width: 0;
		height: 0;
		clear: both;
	}
.main-nav a {
	background: none;
	width: 16.666%;
	color: #fff;
	float: left;
}

}