/* Shared Elements
------------------------*/
body#design .flushbottom { position:absolute; bottom:0; }

body#design .row { position:relative; z-index:1; width:auto; padding-left:100px; padding-right:100px; }
body#design .row.gray { background-color:#fafafa; }

body#design .row aside h2,
body#design .row aside h3,
body#design .row aside p { color:#8a8d99; }
body#design .row aside h2,
body#design .row aside h3 { font-size:1em; }
body#design .row aside .dash { margin-bottom:20px; border-top:1px solid #8a8d99; }


/* Section Specific
------------------------*/
/*----- hero -----*/
body#design #hero { padding-right:0; padding-bottom:230px; }
body#design #hero .column.first { position:relative; z-index:1; width:370px; }
body#design #hero .column.first h1 { padding-top:34px; margin-bottom:45px; }
body#design #hero .column.first h2 { margin-bottom:35px; }
body#design #hero .column.last { margin-bottom:-215px; width:615px; }
body#design #hero img.hero-back { margin-bottom:-20px; }
body#design #hero img.hero-side { margin:15px 0 -50px -100px; }

body#design #hero aside.grid3col { position:relative; z-index:2; width:460px; padding:0 65px 30px; }
body#design #hero aside.grid3col .column { margin-left:10px; width:137px; }
body#design #hero aside.grid3col p { padding-bottom:0px; font-weight:bold; }
body#design #hero aside.grid3col p.hr { width:35px; border-bottom:1px solid #8a8d99; }
body#design #hero aside.grid3col img { margin:10px 0 5px; }

body#design #hero #animation-unlock.enhanced { display:block; width:558px; height:1042px; position:relative; z-index:1; }
body#design #hero #animation-unlock.enhanced img { position:relative; z-index:1; }
body#design #hero #animation-unlock.enhanced .mask { position:absolute; z-index:2; top:145px; left:93px; width:369px; overflow:hidden; }

/*----- precision -----*/
body#design #precision { padding-bottom:0; }
body#design #precision h1 { padding-top:25px; margin-bottom:40px; }
body#design #precision img.side-view { margin:-275px 81px 48px -100px; }
body#design #precision img.back-view { margin-top:-896px; *margin-top:-842px; margin-right:-100px; margin-bottom:0; }
body#design #precision .grid2col .column.first { padding-bottom:245px; width:330px; }
body#design #precision .grid2col .column.last { width:228px; margin-right:15px; padding-top:6px; }
body#design #precision .grid2col .column.last img { margin-bottom:18px; }

body#design #precision aside.info { width:310px; padding-bottom:54px; }
body#design #precision aside.info .dash { margin-top:34px; width:52px; }
body#design #precision aside.info img { margin-bottom:18px; }

/*----- earpods -----*/
body#design #earpods { padding-bottom:0; overflow:hidden; }
body#design #earpods .first { padding-bottom:720px; *padding-bottom:210px; }
body#design #earpods .last { padding-bottom:50px; *padding-bottom:0; }
body#design #earpods h1 { margin-bottom:15px; }
body#design #earpods h2 { padding-top:55px; margin-bottom:20px; }
body#design #earpods p { position:relative; z-index:2; width:365px; }
body#design #earpods img.left { margin-left:-100px; margin-bottom:30px; }

body#design #earpods aside { margin-top:50px; margin-bottom:50px; }
body#design #earpods aside .first { width:145px; padding-bottom:0; }
body#design #earpods aside .last { width:250px; padding:25px 45px 3px 0; }
body#design #earpods aside .dash { margin-bottom:26px; width:137px; }
body#design #earpods aside p { width:auto; }

body#design #earpods .video-thumb { width:283px; }
body#design #earpods .video-thumb i { width:281px; }
body#design #earpods .video-thumb i .play { left:140px; top:83px; }
body#design #earpods .video-thumb .link { text-decoration:none; }

body#design #earpods #gallery-earpods { position:relative; z-index:1001; }
body#design #earpods #gallery-earpods .gallery-video { left:1%; margin-top:-335px; margin-left:-574px; width:880px; height:480px; padding:50px 120px; overflow:hidden; background:#fff; border-bottom:1px solid #e5e5e5; }
body#design #earpods #gallery-earpods .gallery-video .close { left:102px; }


body#design #earpods #animation-earpods { left:100px; }
body#design #earpods #animation-earpods canvas,
body#design #earpods #animation-earpods img { display:block; }
body#design #earpods #animation-earpods canvas { margin-left:-20px; width:408px; height:680px; }
body#design #earpods #animation-earpods img { margin-bottom:-80px; margin-left:10px; }
body#design #earpods #animation-earpods p,
body#design #earpods #animation-earpods canvas {
	-webkit-user-select:none;
	   -moz-user-select:none;
	    -ms-user-select:none;
	        user-select:none;
}

/* 360 */
body#design #earpods #animation-earpods .command,
body#design #earpods #animation-earpods .caption { display:none; width:auto; position:absolute; z-index:1; color:#8a8d99; font-weight:bold;
	-webkit-transition:opacity .25s ease-in-out;
	   -moz-transition:opacity .25s ease-in-out;
	        transition:opacity .25s ease-in-out;
}
body#design #earpods #animation-earpods.enhanced .command,
body#design #earpods #animation-earpods.enhanced .caption { display:block; }
body#design #earpods #animation-earpods.enhanced .caption:before { content:' '; display:block; width:50px; height:1px; margin:0 10px 0 0; position:absolute; z-index:1; right:100%; top:49%; background:#8a8d99; }
body#design #earpods #animation-earpods.enhanced #earpod-caption-front { top:59px; left:-10px; }
body#design #earpods #animation-earpods.enhanced #earpod-caption-front:before { width:65px; margin:0 0 0 10px; left:100%; }
body#design #earpods #animation-earpods.enhanced #earpod-caption-primary { top:54px; left:257px; }
body#design #earpods #animation-earpods.enhanced #earpod-caption-primary:before { margin:5px 0 0; left:50px; top:100%; width:1px; height:65px; }
body#design #earpods #animation-earpods.enhanced #earpod-caption-rear { top:26px; left:177px; }
body#design #earpods #animation-earpods.enhanced #earpod-caption-bass { top:362px; left:323px; }

body#design #earpods #animation-earpods.enhanced .command { top:63%; left:50%; margin-left:-95px; width:190px; line-height:40px; background:rgba(0,0,0,.5); font-size:1.0714em; text-align:center; color:#fff;
	-webkit-border-radius:20px;
	   -moz-border-radius:20px;
	        border-radius:20px;
}
body#design #earpods #animation-earpods.enhanced .command:before,
body#design #earpods #animation-earpods.enhanced .command:after { content:' '; display:inline-block; width:17px; height:10px; margin:0 5px; background:url(/v/iphone/shared/earpods-360/a/images/earpods_command_arrows.png) 0 0; background-size:17px 20px; }
body#design #earpods #animation-earpods.enhanced .command:after { background-position:100% -10px; }

@media only screen and (min-device-pixel-ratio:1.5) and (min-device-width:321px),
       only screen and (-webkit-min-device-pixel-ratio:1.5) and (min-device-width:321px) {
	body#design #earpods #animation-earpods.enhanced .command:before,
	body#design #earpods #animation-earpods.enhanced .command:after { background-image:url(/v/iphone/shared/earpods-360/a/images/earpods_command_arrows_2x.png); }
}

/*----- environment -----*/
body#design #environment { padding-bottom:25px; *padding-bottom:0; border-bottom:1px solid #e8e8e8; }
body#design #environment .last { *position:relative; *z-index:1; *margin-bottom:-45px; }
body#design #environment h1 { margin-bottom:73px; }
body#design #environment p { width:385px; }
body#design #environment img.flushbottom { left:0; }
body#design #environment img.icons { margin-top:25px; margin-bottom:13px; }
body#design #environment a { color:#82b300; }
@media only screen and (max-device-width:768px) {
	body#design #environment p { width:350px; }
}