/*------------------------------------*\
    CONTENTS
\*------------------------------------*/
/*
RESET
SHARED	Share anything we can across elements.
MAIN	HTML, BODY, etc.
*/

/* Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body{
  line-height: 1;
}

ol, ul{
  list-style-type: none;
}

table{
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td{
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote{
  quotes: none;
}

q:before,
q:after,
blockquote:before,
blockquote:after{
  content: "";
  content: none;
}

a img{
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary{
  display: block;
}

/* RWD Resets
-------------------------------------------------------------- */

html{
	overflow-y:auto;
}

img, video{
	max-width: 100%;
	height: auto;
}


/* Grid
-------------------------------------------------------------- */
@viewport{
  width: device-width;
}
.wrapper{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  /* max-width: 1400px; */
  *zoom: 1;
}


/*------------------------------------*\
    =SHARED
\*------------------------------------*/

a,.brand {
    color: #ffa930;
}

p,h2,h3,h4,h5,h6 {
    font-weight: normal;
    line-height: 1.4;
}

h1,h2,h3,h4,h5,h6,
ul,ol,dl,
p,
table,
form,
pre,
hr {
    margin-bottom: 30px;
    margin-bottom: 2.4rem;
}





/*------------------------------------*\
    =MAIN
\*------------------------------------*/

html { 
	
}

body {
	font-family:'Gill Sans W04', sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.wrapper {
	margin: 0 auto;
	width: 100%;
	float: none;
	text-align: left;
}

header {
	

}

/* LAYOUT
-------------------------------------------------------------- */

.intro {
	text-align: center;
	max-width: 1200px;
	padding: 6em 7.14285714% 3em 7.14285714%;
	margin: 0 auto;
}

.shop {
	background: #f2f1f4;
	padding-top: 3.5em;
	padding-bottom: 3.5em;

}

.content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 7.14285714%;
}

.postage,
footer {
	clear: both;
}

.contact {
	text-align: center;
	max-width: 1200px;
	padding: 3.5em 7.14285714% 40px 7.14285714%;
	margin: 0 auto;
}

/* NAVIGATION
-------------------------------------------------------------- */

nav.main ul {
	margin: 0;
	padding: .75em 0;
	width: 100%;
	text-align: center;
}

nav.main ul li {
	display: -moz-inline-stack; /* optional */
	display: inline-block;
	zoom: 1; /* triggers hasLayout for IE */
	*display: inline; /* target IE7 only */
}

nav.main ul li {
	font-size: 1.8em;
	margin-right: 4%;
}

nav.main {
	display: block;
}

nav.main a:link,
nav.main a:visited {
	color: #000;
	text-decoration: none;
}

nav.main a:hover,
nav.main li.active a {
	color: #000;
	text-decoration: none;
}

a:link,
a:visited {
	text-decoration: none;
	display: inline-block; /*fixes hover colour problem where tiny bit at the top is the wrong colour */
}

a:hover,
a:focus,
a:active {
	color: #8f8d92;
}

/* TYPOGRAPHY
-------------------------------------------------------------- */

h1 {
	text-transform: uppercase;
	font-size: 4.625em;
	line-height: 1.1;
	letter-spacing: .1em;
}

/* h1 a,
li a {
	display: block;
} */
	
h2 {
	font-size: 1.8em;
}

.intro h2 {
	margin-bottom: 0;
}

.content h2,
.contact h2 {
	font-size: 3em;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .1em;
	line-height: 1;

}

h3 {
	font-size: 1.8em;
	margin: 1.2em 0 1.2em 0;
}

p,
li {
	font-size: 1.2em;
}

li.hentry {
	font-size: 1em; /* fixes enlarged font size within hentry li */ 
}

p.last {
	margin-bottom: 0;
}

footer p {
	margin-top: 2em;
	font-size: 1em;
}



/* MISC STYLING
-------------------------------------------------------------- */

a.social-twitter,
a.social-facebook {
	text-decoration: none;
	font-size: 3em;
}

hr {
	border-top: .4em solid #000;
	border-style: solid;
	width: 6em;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 3em;
}

/* Mailchimp newsletter signup
-------------------------------------------------------------- */

/* MailChimp form style overrides - need to use !important as linking to stylesheet in page by widget rather than in head */

#mc_embed_signup {
	background: #fff; 
	clear: left; 
	text-align: center;
	 display:inline-block;
}
#mc_embed_signup  form{
	text-align:center !important;
	padding: 0 !important;
	margin-bottom: 0 !important;
}
#mc_embed_signup input {
	font-family: 'Gill Sans W04', sans-serif;	
}
#mc_embed_signup input.email{
	font-size: 1.2em;
	width:15em !important;
}
#mc_embed_signup input.button {
	display:inline-block !important;
	width:auto !important;
	min-width:0 !important;
	height:39px;
	line-height:39px;
	padding:0 10px;
	margin-bottom: 0 !important;
	border-radius: 0;
	background-color: #000;
	font-size: 1.2em;
}
#mc_embed_signup .button:hover{
	background-color: #000 !important;
}



/* Media queries
-------------------------------------------------------------- */

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

	.intro h2 {
	padding-left: 6em;
	padding-right: 6em;
	}
	
	.contact h3 {
	padding-left: 6em;
	padding-right: 6em;
	}

}