/* Typography
______________________________________*/
@font-face {
	font-family: 'gillsansmt';
	src: url('../fonts/GillSansMT.ttf') format('truetype');
	font-weight: normal;
}
@font-face {
	font-family: 'gillsansmtBold';
	src: url('../fonts/GillSansMT-Bold.ttf') format('truetype');
	font-weight: normal;
}
.resize_garamond {
	font-size: 20px;
	line-height: 24px;
	font-family: 'gillsansmt';
}
strong { font-family: 'gillsansmt'; }

/* GENERAL
______________________________________*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
* html {
	margin: 0;
	padding: 0;
}
img {
	max-width: 100%;
	border: 0;
	outline: none;
}

.arrow {
	position: absolute;
	right: 18px;
	bottom:36px;
	width: 48px;
	height: 25px;
	background: url(../img/down_arrow.png) no-repeat;
	/*-webkit-transform: rotate(-90deg);*/
	z-index: 10009;
	}

/* BlackBerry (portrait)
______________________________________________________________*/
@media all and (max-width: 480px) and (min-width: 320px) {
#wrapper {
	margin-top: 12px;
}
#content {
	position: relative;
	width: 86.1%;
	height: 476px;
	margin: auto;
	border: 1px solid #d9eedf;
	background: url(../img/bg_bb10.png);
}
#logo {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	width: 100%;
	height: 16.6%;
}
#logo img {
	position: absolute;
	max-width: 36.5%;
	margin-left: -19%;
	margin-top: 5%;
	left: 50%;
}
#product {
	position: absolute;
	left: 0;
	top: 16%;
	z-index: 3;
}
header {
	position: absolute;
	top: 76.8%;
	left: -5px;
	height: 10.6%;
	width: 100%;
	padding: 1.4% 2% 3% 2%;
	/*background: #fff;*/
	z-index: 10001;
}
hgroup {
	width: 90%;
}
.shopping {
	position: absolute;
	top: 10%;
	right: -5.9%;
	width: 36%;
	height: 36%;
	z-index: 10002;
}
.swipe {
	position: absolute;
	top: 92%;
	left: 23.5%;
	z-index: 100003;
}
p { 
	position: relative;
	display: block;
	padding: 2em 1em;
}
.arrow { display: none; }
}

/* iPAD (portrait)
______________________________________________________________*/
@media all and (max-width: 768px) and (min-width: 481px) {
#wrapper {
	margin-top: 44px /*80px;  44px toolbar */
}
#content {
	position: relative;
	width: 694px;
	height: 877px;
	margin: auto;
	border: 1px solid #d9eedf;
	background: url(../img/bg.png);
}
#logo {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	width: 47.1%;
	height: 13.6%;
}
#logo img {
	position: absolute;
	max-width: 50%;
	margin-left: -25%;
	left: 50%;
}
#product {
	position: absolute;
	left: 0;
	top: 6%;
	z-index: 3;
}

header {
	position: absolute;
	top: 82%;
	left: -2px;
	height: 9.6%;
	width: 96.5%;
	padding: 2.4% 2% 2%;
	/*background: #fff;*/
	z-index: 10001;
}
hgroup {
	width: 70%;
}
.shopping {
	position: absolute;
	top: 4%;
	right: 4%;
	width: 26%;
	height: 26%;
	z-index: 10002;
}
.swipe {
	position: absolute;
	top: 27.2%;
	right: 8%;
	z-index: 100003;
}
p { 
	position: relative;
	display: block;
	padding: 2.7em;
}
}

/* iPAD (landscape) 
______________________________________________________________*/
@media all and (max-width: 1024px) and (min-width: 769px) {
#wrapper {
	margin-top: 70px; /* 44px toolbar */
}
#content {
	position: relative;
	width: 942px;
	/*height: 674px;*/
	height: 639px;
	margin: auto;
	border: 1px solid #d9eedf;
	background: url(../img/bg.png);
}
#logo {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	width: 34.8%;
	height: 18.7%;
}
#logo img {
	position: absolute;
	max-width: 48%;
	margin-left: -25%;
	left: 50%;
}
#product {
	position: absolute;
	left: 18%;
	top: -4%;
	z-index: 3;
	width: 63.3% !important;
	height: 600px !important; /* px only */
}
header {
	position: absolute;
	top: 85%;
	left: -2px;
	width: 96.5%;
	height: 6.8%;
	padding: 0 2% 4.5% 2%;
	/*background: #fff;*/
	z-index: 10001;
}
hgroup {
	width: 50%;
}
.shopping {
	position: absolute;
	top: 3%;
	right: 4%;
	width: 22%;
	height: 22%;
	z-index: 10002;
}
.swipe {
	position: absolute;
	top: 60.4%;
	right: 8%;
	z-index: 100003;
}
p {
	position: relative;
	display: block;
	padding: 2em;
}
}