/* -------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------

	GRAZIA MAGAZINE, 
	ADVERTISING PAGES FOR THE IPAD

	© GRAZIA 2013 - CLIENT: COACH, NEW YORK
	
----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------*/


/* 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; }

* { margin: 0; 
	padding: 0; 
	line-height: 21px; 
	}

img  { max-width: 100%; border:0;  }

html, body {
	color: #000;
	background-color:#fff;
}

/* iPAD: Portrait
---------------------------------------------------------------------------------------- */
@media screen and (orientation:portrait) {
body {
	width: 768px;
	height: 1024px;
	overflow: hidden;
}

#border-top, #border-btm {
	position: absolute;
	height: 18px;
	width: 80%;
	left: 10%;
	background: #000;
}
#border-top {
	top: 54px;
}
#border-btm {
	bottom: 48px;
}
}

/* iPAD: Landscape
---------------------------------------------------------------------------------------- */
@media screen and (orientation:landscape) {
body {
	width: 1024px;
	height: 748px; /* None Scaled */
	margin-top: -100px;
	overflow: hidden;
}

#border-top, #border-btm {
	position: absolute;
	height: 18px;
	width: 80%;
	left: 10%;
	background: #000;
}
#border-top {
	top: 5%;
}
#border-btm {
	bottom: 5%;
}
}

#rotationArea {
	position: relative;
	height: 660px;
	width: 660px;
	margin: 220px auto 0 auto;
	overflow: visible;
	z-index: 10001;
}
#rotationArea .txt {
	position: absolute;
	background: url(images/txt.png) no-repeat 0 0;
	background-size: cover;
	top: 11%;
	left: 20%;
	width: 60%;
	height: 52%;
	z-index: 10002;
}
#rotationArea .logo {
	position: absolute;
	background: url(images/logo.png) no-repeat 50% 50%;
	background-size: cover;
	top: 62%;
	left: 50%;
	margin-left: -10%;
	width: 20%;
	height: 15%;
	z-index: -9999;
}
#itemsAll {
	position: absolute;
	top: -50px;
	left: 0px;
	width: 660px;
	height: 660px;
	border-radius: 330px;
	-webkit-border-radius: 330px;
	/*border: 1px solid RED; */
	-webkit-animation-name: itemOrbit;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0.2s;
	-webkit-animation-duration: 26s;
}
#item_01, #item_02, #item_03, #item_04, #item_05, #item_06, #item_07, #item_08, #item_09, #item_10 {
	position: absolute;
	width: 30%;
	height: 30%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 6.5s;
	-webkit-animation-delay: 0.2s;
	opacity: 0.9;
	z-index: 10004;
	}
	#item_01 { top: -55px; left: 392px; -webkit-animation-name: itemRotate-clockwise; }
	#item_02 { top: 97px;  left: 531px; -webkit-animation-name: itemRotate-anti-clockwise;}
	#item_03 { top: 304px; left: 554px; -webkit-animation-name: itemRotate-clockwise;}
	#item_04 { top: 474px; left: 454px; -webkit-animation-name: itemRotate-anti-clockwise;}
	#item_05 { top: 561px; left: 250px; -webkit-animation-name: itemRotate-clockwise;}
	#item_06 { top: 502px; left: 38px;  -webkit-animation-name: itemRotate-anti-clockwise;}
	#item_07 { top: 348px; left: -82px; -webkit-animation-name: itemRotate-clockwise;}
	#item_08 { top: 152px; left: -90px; -webkit-animation-name: itemRotate-anti-clockwise;}
	#item_09 { top: -14px; left: 7px;   -webkit-animation-name: itemRotate-clockwise;}
	#item_10 { top: -97px; left: 184px; -webkit-animation-name: itemRotate-anti-clockwise;}


/* KEYFRAMES
____________________________________*/

@-webkit-keyframes itemOrbit {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes itemRotate-clockwise {
from { -webkit-transform: rotate(360deg); }
to { -webkit-transform: rotate(0deg); }
}
@-webkit-keyframes itemRotate-anti-clockwise {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}