@charset "UTF-8";

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

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: 16px;
	vertical-align: top;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Defaults */
body, body * {
	border: 0;
	outline: 0;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
div,
svg,
img {
	width: 300px;
	height: 600px;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 0;
}
img,
svg {
	width: 100%;
	height: auto;
}

/* Visual Containers */

#container {
		width: 300px;
	height: 600px;
	overflow: hidden;
	visibility: hidden;
}
#backgroundExit {
	cursor: pointer;
	background-color: rgba(255,255,255,0);
}

/* Ribbon Ani, Page Peel + Intro */
#ribbonext {
	width: 32px;
	height: 46px;
	margin: auto;
	overflow: hidden;
}
#ms_ani {
	width: 182px;
	height: 123px;
	top: 240px;
	left: 63px;
	margin: auto;
	overflow: hidden;
}
#ribbon1 {
	width: 172px;
	height: 123px;
}
#ribbon2 {
	width: 172px;
	height: 123px;
}
#ribbon3 {
	width: 172px;
	height: 123px;
}
#ribbon4 {
	width: 172px;
	height: 123px;
}
#ribboncopy {
	width: 172px;
	height: 123px;

}
#ribbonccover {
	width: 172px;
	height: 123px;
	visibility: hidden;
}
#extension {
	width: 32px;
	height: 46px;
}


/* Products + shadows */

#bgCarousel { left: 0px;}
#bgB { left: 300px; }
#bgC{ left: 600px; }
#bgD {left: 900px;}
#bgE {left: 1200px;}

#bigTitleCarousel { left: 0px;   }
#btA_top {
	left: 0px;
	width:300px; 
	height:50px; 
	top:158px;
}
#btA_mid{
	left: 0px;
	width:300px; 
	height:78px; 
	top:249px;
}
#btA_bot{
	left: 0px;
	width:300px; 
	height:84px; 
	top:375px;
	clip: rect(0px,300px,32px,0px);
}
#btA_sig{
	left: 0px;
	width:300px; 
	height:84px; 
	top:375px;
	clip: rect(32px,0px,84px,0px);
}
#btB_a{ 
	left: 0px; 
	width:300px; 
	height:177px; 
	top:180px;
	clip: rect(0px,300px,30px,0px);
}
#btB_b{ 
	left: 0px; 
	width:300px; 
	height:177px; 
	top:180px;
	clip: rect(30px,300px,73px,0px);
}
#btB_c{ 
	left: 0px; 
	width:300px; 
	height:177px; 
	top:180px;
	clip: rect(73px,300px,110px,0px);
}
#btB_d{ 
	left: 0px; 
	width:300px; 
	height:177px; 
	top:180px;
	clip: rect(110px,300px,147px,0px);
}
#btB_e{ 
	left: 0px; 
	width:300px; 
	height:177px; 
	top:180px;
	clip: rect(147px,300px,177px,0px);
}
#btC {
	left: 900px;
	width:300px; 
	height:93px; 
	top:10px;
}

#btC_a {
	left: 0px;
	width:300px; 
	height:147px; 
	top:123px;
	clip: rect(0px,300px,55px,0px);
}
#btC_b {
	left: 0px;
	width:300px; 
	height:147px; 
	top:123px;
	clip: rect(55px,300px,110px,0px);
}
#btC_c {
	left: 0px;
	width:300px; 
	height:147px; 
	top:123px;
	clip: rect(110px,300px,147px,0px);
}


#btC_h {
	left: 0px;
	width:300px; 
	height:9px; 
	top:500px;
}





#productCarousel { left: 300px; }
#itemA { left: 0px; top:-15px;}
#itemB { left: 300px; }
#itemC{ left: 600px; top:-15px;}
.product {
	width: 280px;
	height: 281px;
	top: 140px;
	left: 10px;
}
.shadow {
	height: 52px;
	top: 360px;
	left: -5px;
	visibility: hidden;
}

.headliner{
	width:280px;
	height: 60px;
	left:10px;
	top:107px;
}
#headline1{ left: 310px; }
#headline2{ left: 610px; }
#headline3{ left: 910px; }

.priceclass{
	width:285px;
	height: 52px;
	left:7px;
	top:387px;
}

.ctaclass{
	
}
.ctaclass1{
	
}
#backgroundExit {
	cursor: pointer;
	background-color: rgba(255,255,255,0);
}

#sheen{
	width:188px;
	height: 66px;
	left:0px;
	top:0px;
	cursor:pointer;
	pointer-events: none;
}

#sheenbox{
width:110px;
	height:40px;
	left:95px;
	top:449px;
	overflow: hidden;
	pointer-events: none;
}
#goldsheen{
	width:113px;
	height: 45px;
	left:0px;
	top:0px;
	cursor:pointer;
	pointer-events: none;

}

#goldsheenbox{
	width:123px;
	height:43px;
	left:88px;
	top:439px;
	overflow: hidden;
	pointer-events: none;
}


#endcta{
	width:123px;
	height:43px;
	left:88px;
	top:439px;
	cursor:pointer;
}

#cta1{
	width:110px;
	height:40px;
	left:95px;
	top:449px;
	cursor:pointer;
}
#cta2{
	width:110px;
	height:40px;
	left:95px;
	top:449px;
	cursor:pointer;
}
#cta3{
	width:110px;
	height:40px;
	left:95px;
	top:449px;
	cursor:pointer;
}
#ctabox{
	width:110px;
	height:40px;
	left:95px;
	top:449px;
	cursor:pointer;
}
#ctaFrame {
	width:110px;
	height:40px;
	left:95px;
	top:449px;
	cursor:pointer;
}

#viewProducts{
	width:121px;
	height:62px;
	left:90px;
	top:374px;
	cursor:pointer;
}

/* INTRO / END STUFF */

#middleheadline{
	position: absolute;
	width:300px;
	height:275px;
	top:190px;
	left:0px;
}




#mslogo{
	width:101px;
	height:76px;
	top:518px;
	left:99px;
}

#arrowLeft{
	top:274px;
	left:2px;
	width:50px;
	height:50px;
	cursor:pointer;
}
#arrowRight{
	top:274px;
	left:250px;
	width:50px;
	height:50px;
	transform: scaleX(-1);
	cursor:pointer;
}

#bottomfoil{
	top:300px;
	left:0px;
	width:300px;
	height:300px;
}
#topfoil{
	top:0px;
	left:0px;
	width:300px;
	height:300px;
	overflow: hidden;
}
#tfoil{
	top:0px;
	left:0px;
	width:300px;
	height:242px;
}

#tsheen{
	width:300px;
	height:100px;
	top:180px;

}