@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: 900px;
	height: 600px;
	top: 0;
	left: 0;
	position: absolute;
	z-index: 0;
}
img,
svg {
	width: 100%;
	height: auto;
}
.center {
	margin: auto;
	top: 0; left: 0; bottom: 0; right: 0;
}

/* Visual Containers */
#container {
	overflow: hidden;
	background-color: #fff;
}
#border {
    width: 100%;
    height: 100%;
	fill: white;
    fill-opacity: 0.0;
    stroke-opacity: 1.0;
	stroke: #000;
    stroke-width: 1px;
}

/* Preload */
#preloader {
	width: 872px;
	height: 577px;
	top: 11px;
	left: 14px;
	z-index: 999;
	background-color: #fff;
}
#spinner {
	width: 67px;
    height: 67px;
}
.spinning {
    -webkit-animation: spin 1s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 1s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}


/* Interstitial */
#interstitialHolder {
	width: 872px;
	height: 577px;
	top: 11px;
	left: 14px;
	background-color: #fff;
	overflow: hidden;
	visibility: hidden;
}
#introWrapper,
#homeScreen {
	width: 100%;
	height: 100%;
}
#homeWrapper {
	width: 100%;
	height: 100%;
	transform: perspective( 600px ) rotateY( 0deg ) rotateX( 0deg );
}
#homeScreen {
	top: 650px;
	background-color: #fff;
}
#homeImg { visibility: hidden; }
#lockup {
	width: 283px;
	height: 100%;
	left: 294px;
}
#homeHolder {
   	width: 100%;
	height: 589px;
	left: 900px;
	overflow: hidden;
}
#homeWrapperAlt {
    width: 872px;
    height: 577px;
    top: 11px;
    left: 14px;
}
.homeBlockA {
	width: 283px;
	height: 283px;
}
.homeBlockB {
	width: 479px;
	height: 283px;
}
.homeBlockC {
	width: 381px;
	height: 283px;
}
#shirtHolder { left: 0px; }
#shirtAholder { overflow: hidden; }
#shirtA {
	top: -44px;
	left: -4px;
}
#shirtBholder {
	left: 196px;
	overflow: hidden;
}
#shirtB {
	top: 0px;
	left: -55px;
}
#shirtCholder { top: 196px; }
#lockupHolder {
	left: 294px;
	cursor: pointer;
}
#lockupPanel {
	width: 100%;
	height: 50px;
	top: 126px;
	background-color: #fff;
}
#jacketHolder { left: 588px; }
#jacketBholder {
	left: 196px;
	overflow: hidden;
}
#jacketA {
	top: -4px;
    left: -44px;
}
#jacketB {
	top: -14px;
    left: -10px;
}
#jacketCholder {
	top: 98px;
	overflow: hidden;
}
#jeanHolder { top: 294px; }
#jeanAholder { overflow: hidden; }
#jeanA { top: -96px; }
#jeanBholder {
	left: 294px;
	overflow: hidden;
}
#jeanCholder {
	top: 196px;
	left: 294px;
}
#muleHolder {
	top: 294px;
	left: 490px;
}
#muleAholder { overflow: hidden; }
#muleA {
	top: 0px;
    left: -16px;
}
#muleBholder { left: 196px; }
#muleCholder {
	top: 98px;
	left: 196px;
	overflow: hidden;
}
#muleB {
	top: -114px;
    left: -8px;
}
.innerBlockA {
	width: 185px;
	height: 185px;
}
.innerBlockB {
	width: 87px;
	height: 283px;
}
.innerBlockC {
	width: 185px;
	height: 87px;
}
.innerBlockD {
	width: 283px;
	height: 283px;
}
.innerBlockE {
	width: 186px;
	height: 283px;
}
.clickable {
	cursor: pointer;
	background-color: #fff;
}
#homeNotice {
	width: 138px;
	top: 232px;
	left: 540px;
	visibility: hidden;
}


/* Main Content Panels */
#mainHolder {
	width: 878px;
	height: 577px;
	top: 700px;
	left: 11px;
	overflow: hidden;
}
#mainBounds {
	width: 878px;
	height: 540px;
}
#mainInner {
	width: 1655px;
	height: 773px;
	overflow: hidden;
}
.mainBackground { visibility: hidden; }
.backgroundPanel {
	width: 1655px;
	height: 403px;
	top: 185px;
	background-color: #fff;
}

.mainInteractive {
	width: 1655px;
	height: 403px;
	top: 185px;
	visibility: hidden;
}
.mainLockup,
.lockupBlur {
	width: 283px;
	top: 11px;
	left: 686px;
}
.the {
	height: 13px;
	top: 65px;
}
.everywear {
	height: 24px;
	top: 98px;
}
.product {
	height: 25px;
	top: 140px;
}
.price {
	height: 31px;
	top: 202px;
}

.shadowPanel {
	width: 697px;
	height: 403px;
	background-color: #fff;
	top: 0px;
	left: 0px;
}

.smallBlock { width: 185px; }
.mid { left: 196px; }
.full {
	width: 100%;
	height: 100%;
}
.holderSmall,
.holderLarge {
	overflow: hidden;
	height: 381px;
}

.sliderHeadline {
	height: 28px;
	top: 27px;
}
.sliderBody {
	top: 130px;
	height: 67px;
}

.styleHolder {
	width: 675px;
	height: 381px;
	top: 11px;
	left: 0px;
	overflow: hidden;
	visibility: hidden;
}
.shirtStyleLarge {
	width: 283px;
	left: 392px;
}
#ssrA,
#ssrB,
#ssrC {
	width: 283px;
}
#sslA {
	left: 0px;
	visibility: hidden;
}
#sjmA,
#sjmC { top: 133px; }
#sjmB {
	height: 48px;
	top: 143px;
}
#sjemA {
	height: 86px;
	top: 122px;
}
#sjemB {
	height: 67px;
	top: 133px;
}
#sjemC {
	height: 90px;
	top: 122px;
}
#smmA {
	height: 71px;
	top: 130px;
}
#smmB {
	height: 52px;
	top: 140px;
}
#smmC {
	height: 105px;
	top: 113px;
}

.featuresHolder {
	width: 675px;
	height: 381px;
	top: 11px;
	left: 980px;
	overflow: hidden;
	visibility: hidden;
}
.shirtFeaturesLarge,
#fslA,
#fslB,
#fslC {
	width: 283px;
}
.featuresMid { left: 294px; }
#fsmA {
	top: 138px;
	height: 52px;
}
#fsmB,
#fsmC {
	height: 71px;
}
#fjmA {
	height: 90px;
	top: 121px;
}
#fjmB {
	height: 51px;
	top: 141px;
}
#fjmC {
	height: 70px;
	top: 132px;
}
#fjemA,
#fjemC {
	height: 52px;
	top: 142px;
}
#fjemB {
	height: 48px;
	top: 142px;
}
#fmmA,
#fmmB,
#fmmC {
	height: 90px;
	top: 121px;
}

.featuresRight { left: 490px; }


.slidersWrapper {
	width: 115px;
	height: 33px;
    top: 467px;
    left: 196px;
	/*background-color: #ccc;*/
}
#slideWrapperB { left: 1274px; }
.dragExclusion {
	width: 185px;
    height: 65px;
   /* background-color: #000;
	opacity: 0.5;*/
}
.nodesHolder {
	width: 115px;
	height: 33px;
	top: 15px;
	left: 36px;
}
.node {
	width: 33px;
    height: 33px;
    /*background-color: #fff;
	opacity: 0.5;*/
	cursor: pointer;
}
#sNodeB,
#fNodeB {
	left: 41px;
}
#sNodeC,
#fNodeC,
#fNodeCalt {
	left: 82px;
}

.sliderBounds {
	width: 115px;
	height: 33px;
	top: 15px;
	left: 36px;
	background:url(img/slider-scale.png) no-repeat ;
	background-size: 115px 33px;
}
#featuresSliderBoundsAlt {
	background:url(img/slider-scale-alt.png) no-repeat ;
	background-size: 115px 33px;
}
.sliderHandle {
	width: 33px;
	height: 33px;
	top: 15px;
	left: 36px;
	cursor: pointer!important;
}

#closeBtn {
	width: 34px;
	height: 34px;
	cursor: pointer;
	background-color: rgba(255,255,255,0);
	top: 370px;
	left: 17px;
	visibility: hidden;
}
#mainNotice {
	width: 138px;
	top: 469px;
	left: 998px;
	visibility: hidden;
}


/* Main Menu */
#mainMenu {
	width: 910px;
	height: 87px;
	top: 650px;
	left: -5px;
	clip: rect(0px,904px,86px,6px);
}
#mainMenuInner {
	width: 910px;
	height: 87px;
	top: 87px;
	background:url(img/menu-panel.png) no-repeat ;
	background-size: 910px 87px;
}
#menuLogo {
	width: 910px;
	height: 48px;
	top: 22px;
	cursor: pointer;
}
.menuButton {
	width: 92px;
	height: 54px;
	top: 33px;
	left: 84px;
	cursor: pointer;
	 -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1); 
}
.menuButton:hover {
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.1);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 200ms ease-in;
    transform: scale(1.1);
}
#menuB { left: 230px; }
#menuC { left: 589px; }
#menuD { left: 736px; }
.menuEverywear {
	height: 8px;
	top: 15px;
}
.menuTitle {
	height: 14px;
	top: 26px;
}
.selected { opacity: 0.5; }
.selected:hover {
    -webkit-transition: none !important;
	-webkit-transform: none !important;
    -ms-transition: none !important;
	-ms-transform: none !important;
    -moz-transition: none !important;
	-moz-transform: none !important;
    transition: none !important;
	transform: none !important;
	cursor: default;
}
.nonSelected { opacity: 1.0; }


/* Exits & Ctas */
#closeBanner {
	width: 46px;
	height: 46px;
	top: 4px;
	left: 851px;
	z-index: 1000;
}
.cta {
	border: 1px solid black;
	overflow: hidden;
	cursor: pointer;
}
#ctaA {
	width: 148px;
	height: 33px;
	top: 134px;
	left: 67px;
}
#ctaAtxt { height: 13px; }
#ctaS,
#ctaJ,
#ctaJe,
#ctaM {
	width: 160px;
	height: 42px;
	top: 270px;
	left: 61px;
}
#ctaStxt,
#ctaJtxt,
#ctaJEtxt,
#ctaMtxt {
	height: 15px;
}
#ctaSl,
#ctaSr,
#ctaJl,
#ctaJr,
#ctaJEl,
#ctaJEr,
#ctaMl,
#ctaMr {
	width: 108px;
	height: 31px;
	top: 335px;
	left: 39px;
}
#ctaSLtxt,
#ctaSRtxt,
#ctaJLtxt,
#ctaJRtxt,
#ctaJELtxt,
#ctaJERtxt,
#ctaMLtxt,
#ctaMRtxt {
	height: 11px;
}
.ctaOverlay {
	width: 100%;
	height: 100%;
	fill: #000;
	stroke: #000;
	stroke-width: 1;
	fill-opacity: 0.0;
	stroke-opacity: 1.0;
	visibility: hidden;
}