/** Shopify CDN: Minification failed

Line 421:24 "opcaity" is not a known CSS property
Line 430:68 Expected identifier but found "\"Trebuchet MS\""
Line 694:0 Unexpected "}"

**/
@charset "utf-8";
/* CSS Document */


#uniform-wrapper {
	width:1024px;
	height:714px;
	/* border:1px #dddddd solid; */
	left:calc(50% - 512px);
	top:0px;
    position:relative;
    display:inline-block;
    color:#000000 !important;
    margin:0px !importnat;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif !important;
  	overflow: hidden;
}

#uniform-wrapper label {display:inline-block;}

#hider {
	width:1024px;
	height:714px;
	left:0px;
	top:0px;
	background-color:#FFFFFF;
}

.unisample {display:inline;}

#design-wrapper, #header, #kit-builder-logo, #title, #design, #shade, #mask,
#menu, #content-wrapper,#slide-content,#head-logo,#design-title,#hider,.main-content,#thumbs-holder,
.thumb,.thumb-title,.thumb img,.th-nav-btn,#stock,#swatch,#swatch-label,#col-picker,#colsamp,#color,
#swatch-btn,.swatch,.logholder,.logtitle,.logthumb-holder,#patterns,.patternchoose{
	position:absolute !important;
}

#shade, #mask{width:792px !important; height:612px !important;max-width:792px !important; max-height:612px !important;}

/*******************************/
/******* header/title **********/
/*******************************/

#header {
	width:100%;
	height:81px;
	background-color:#000000;
	left:0px;
	top:0px;
}

#head-logo {top:17px ;left:46px;}
#design-title {font-size:35px; line-height:81px; right:25px; top:0px; color:#ffffff;font-family: 'edosz'}


/***********************************/
/*********** MENU ******************/
/***********************************/
#menu {
	left:0px;
	top:81px;
	width:100%;
	height:64px;
	font-weight:bold;
	font-size:24px;
	overflow:hidden;
}
#menu ul {
	margin:0;
	padding:0;
	list-style:none;
	width:100%;
}
#menu ul li {
	float:left;
	width:calc(1011px / 6);
	display:inline-block;
	height:50px;
	text-align:center;
	background-color:#dddddd;
	line-height:50px;
	color:#FFFFFF;
	margin-left:1px;
	cursor:pointer;
}
#menu ul li:first-child {
	margin-left:0px;
}

#menu ul li:last-child {
	width:176px;
}

.menu-selected{
	background-color:#00a4e4 !important;
}

/**********************************/
/****** design wrapper*************/
/**********************************/

#design-wrapper, #design, #mask, #shade {
	width:792px;
	height:612px;
	background-repeat:no-repeat;
}
#design-wrapper {
	background-color:#FFFFFF;
	left:300px;
	top:102px;
	width:721px !important;
	height:610px !important;
	overflow:hidden;
}
#design, #mask, #shade {
	pointer-events:none;
	left:1px;
	top:0px;
}
#shade {
	opacity:0.7;
	color:#333333
}


/************************************/
/********** content *****************/
/************************************/

#content-wrapper {
    width: 322px;
    height: 500px;
    left: 46px;
    top: 176px;
    overflow: hidden;
}

#slide-content {
	left:0px;
	top:0px;
	width:1610px;
	height:472px;
}

.main-content {
	top:0px;
	width:322px;
	height:540px;
	overflow:hidden;
}

/**********************************/
/************** thumbs ************/
/**********************************/

#thumbs{
	left:0px;
	overflow:hidden;
}

#page-count, #pat-page-count {
    position: absolute;
    bottom: 40px;
    width: 100%;
    text-align: center;
    font-style: italic;
    font-weight: bold;
    font-size: 16px;
    color: #666666;
}
#pat-page-count {bottom:40px;}
#thumbs-holder{left:0px; top:0px; background-color:#FFFFFF;}


.th-nav-btn {width:20px;height:20px;top:226px; background-color:#00a4e4; font-size:14px; line-height:20px; color:#FFFFFF;text-align:center; cursor:pointer; font-weight:bold; display:none;}
#th-left, #pat-left{left:0px;}
#th-right, #pat-right{right:0px;}
#pat-left, #pat-right {top:226px;}


/**********************************/
/************** colours ************/
/**********************************/

#colours{
	left:322px;
}

#col-picker {left:46px; top:88px;}
#col-picker.gradpick {left:0px;}

#colours ul {padding:0; margin:0; list-style:none;}
#colours ul li {width:106px; height:30px; line-height:30px; margin-bottom:1px;
color:#fff; font-size:16px; float:left; margin-right:1px;
text-align:center;background-color:#dddddd; cursor:pointer;
list-style-type: none;
}
/*.color-tab {width:159.5px !important; margin-top:1px;}*/

#sw-st-cont {
    position: absolute;
    bottom: 165px;
    
}

#sw-st-cont.grad-scwatch {
    bottom:92px;
    left: 150px;
    transform: scale(0.75);
}

#sw-st-cont.grad-scwatch #swatch {
    left: -46px;
}

#stock {left:0px; top:0px; font-size:18px; color:#333333}
#swatch-label{top:68px;font-size:18px;}
#swatch {top: 100px;left:0px;font-size:18px; color:#333333;width:322px;}


#colsamp,#color,#swatch-btn{bottom:184px; width:107px; height:50px; text-align:center; font-size:18px;margin:0px !important;}
#colsamp {background-color:#6699FF;left:0px; border: 1px dotted #CCC;}

#color {
    background-color: #dddddd !important;
    left: 107px;
    text-indent: unset;
    border: 1px dotted #CCC !important;
}

#swatch-btn {background-color:#333333;left:214px; color:#FFFFFF; cursor:pointer;font-size:14px;border: 1px dotted #CCC; line-height:25px;}
#stock .swatch {width:22px; height:22px; cursor:pointer; border:1px #CCCCCC dotted; text-align:center;
  line-height:22px; font-size:22px; color:#dddddd; }

#swatch .swatch {width:24px; height:24px; cursor:pointer; border:1px #CCCCCC dotted; text-align:center;
  line-height:22px; font-size:22px; color:#dddddd; display:inline-block;position:relative !important;margin-right:-1px;margin-top:-1px;overflow: hidden;}

#swatch .swatch:last-child {width:23px;}
/**********************************/
/************ patterns ************/
/**********************************/

#patterns{
	left:644px;
}
#pat-holder {
  position:absolute;
  width: 340px;
  height: 500px;
  top: 20px;

 }
 
.pat-thumb{
	background-image:url(thumb-bg.png);
	background-repeat:no-repeat;
	background-position:bottom;
	width:103px;
	height:142px;
	cursor:pointer;
	margin-right:5px;
    position:absolute;
  
  
}

.pat-thumb img { position:absolute;left:24px; top:24px; width:54px; height:80px;}
.pat-thumb-title {position:absolute;left:0px; bottom:0px;font-size:12px; text-align:center; width:103px; height:24px; line-height:24px; color:#FFF; background-color:#dddddd;}
.pat-thumb-title-selected{ background-color:#00a4e4;}


.patternchoose,.sidechoose { position:relative !important; left:32px;top:0px;float:left; margin-right:20px; height:24px; font-size:13px; text-align:center; line-height:24px;cursor:pointer; width:50px;}
.pattern-selected {background-image:url(logo-selected.png); opacity:1; opacity:1;background-repeat:no-repeat; background-size:100% 100%;}

/**********************************/
/************** logos ************/
/**********************************/

#logos{
	left:966px;
}

.logholder{
	left:0px;
	height:157px;
}

.logtitle{
	top:0px;
	left:0px;
	background-color:#00a4e4;
	width:322px;
	height:30px;
	color:#fff;
	font-size:16px;
	line-height:30px;
	padding-left:10px;
}

#team-center {text-align: center; margin-right: 5px; width: 73px; height: 84px; float: left;}

#team-logo {top:157px;}
#team-name {top:280px;}

#font-list {position:absolute; width:200px; top:160px; height:30px; left:16px;}
#font-select {
    display: inline-block;
    margin-top: 0px;
    left: 100px;
    position: absolute;	
}

#team-label {position:absolute; width:200px; top:194px; left:16px;}
#team-label input {
	margin-top:5px;
	width: 196px;
    height: 20px;
    font-size: 14px;
    text-indent: 5px;
    background-image:url(field-bg.jpg);
	background-position:bottom center;
	background-size:100%;
	background-repeat:no-repeat;
    border:0px !important;
}

#TEAM_NAME_-_BACK {
	top: 220px;
    left: 847px;
    width: 240px;
	height:auto;
    font-size: 70px;
	text-align:left;
	-webkit-transform-origin: left top;
	-moz-transform-origin: left top;
	-o-transform-origin: left top;
	-ms-transform-origin: left top;
    transform-origin:left top;
	
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
    transform: rotate(90deg);
    position:absolute;
}

#TEAM_NAME_-_FRONT {
	color: #fff;
    top: 333px;
    left: 458px;
    width: 180px;
	text-align:center;
	font-size:50px;
    position:absolute;
}

#TEAM_NAME_-_FRONT div, #TEAM_NAME_-_BACK div {width:auto; display:inline-block;white-space: nowrap}

#team-back {/*margin-left:50px;*/}

.logthumb-holder{left:0px; top:55px; width:327px;}

.teamlogthumb,.logthumb{
	float:left; width:73px; height:84px; margin-right:5px;
	text-align:center; opacity:.4; font-size:11px;
	vertical-align:bottom;cursor:pointer;
    line-height: 13px;
}
.logthumb div {width:73px; text-align:center; position:absolute; bottom:0px;}

.teamlogthumb{opacity:1 !important;}

.logo-thumb-selected {background-image:url(logo-thumb-selected.png); opacity:1;background-repeat:no-repeat;}

.teamlogchoose{width:40px; height:24px; font-size:13px; line-height:24px; position:absolute; left:90px; top:0px; cursor:pointer;}
#yes {top:30px;}

.namelogchoose{width:40px; height:24px; font-size:13px; line-height:24px; position:absolute; left:90px; top:0px; cursor:pointer;text-align: center;}
#n-no {top:0px;}
#n-yes {top:30px;}

.logo-selected {background-image:url(logo-selected.png); opacity:1; opacity:1;background-repeat:no-repeat;}

.font-size-input {position:absolute; top:150px; color:rgba(0,0,0,1); width:110px; margin-right:20px; font-size:12px;}
.font-size-input input {width:30px;}
.back-f {left:130px;}


/**********************************/
/************ overview ************/
/**********************************/

#overview{
	left:1288px;
}
.share-btn, .share-icon {float:left; height:51px; margin-right:1px;margin-bottom:1px; color:#FFF; line-height:51px; font-size:15px; cursor:pointer;}
.share-btn {width:268px; background-color:#00a4e4; padding-left:10px;}
.share-icon {width:51px;background-color:#333333; line-height:51px; background-repeat:no-repeat; text-align:center; font-size:35px; background-position:center;}

#fb-icon{background-image:url(fb.png);}
#tw-icon{background-image:url(twit.png);}
#em-icon{background-image:url(email.png);}

/* #embtn {float:right !important; width:98px; text-align:center; height:35px; line-height:35px;} */
#team-text {color:#000 !important;width:320px; height:100px; padding:5px; background-color:#dddddd; border:0px !important; vertical-align:top;margin:0px !important;resize: none;}
#status {line-height:35px; color:#00a4e4; display:none;}


/**********************************/
/************** quote *************/
/**********************************/

.Zebra_DatePicker_Icon {opcaity: 0 !important;}

*{ outline: none;}

input[type="text"]:disabled
{
	background-color:#ffffff;
}

input, input:focus {border:0px !important; outline:none !important; "Trebuchet MS", Arial, Helvetica, sans-serif !important;
  transition:none !important; padding:0px !important;border-radius:0px !important;
  color:#000000 !important;
  background-size: contain !important;
}

.qtext, #q-date {display:inline-block !important;} 

#quote{
	left:1610px;
}

#q-text {
    width: 317px;
    height: 50px;
    min-height: 30px;
    padding: 5px;
    background-color: #dddddd;
    border: 0;
    vertical-align: top;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 15px;
    margin: 3px 0px 0px 0px !important;
    color: #000000 !important;
    resize: none;
}

#atbtn {
    width: 165px;
    text-align: center;
    height: 50px;
    line-height: 50px;
    background-color: #333;
    font-size: 15px;
    padding-left: 0px;
  	position: relative;
    left: 79px;
}

#logo-hint {
	width: 165px;
    text-align: center;
    height: 30px;
    line-height: 15px;
    font-size: 12px;
    padding-left: 0px;
    position: relative;
    top: 3px;
    left: 78px;
    color: #333;
    display: inline-block;
}

/* #qtbtn {
    width: 116px!important;
    text-align: center;
    height: 35px;
    line-height: 32px;
    font-size: 15px;
    background-color: #00a4e4 !important;
    color: #ffffff !important;
    float: right;
    margin-right: 5px;
} */

.qtext {
    margin-bottom:20px !important;
    width:314px !important;
    padding:0px 8px 0px 0px !important;
    border:0px !important;
    height:24px !important;
	background-image:url(field-bg.jpg) !important;
	background-repeat:no-repeat !important;
	background-position:bottom !important;
	font-size:15px !important;
    text-indent:8px !important;
}
#quote label {font-size:15px;}
.qty {width:45px !important; background-image:url(qty-bg.jpg) !important; text-align:center; padding:0 !important;}

.odate {
    margin-top: -10px !important;
    margin-left: 22px !important;
    width: 100px !important;
    background-image: url(cal-bg.jpg) !important;
    text-align: center;
    padding: 0 !important;
    text-indent: 0px !important;
}

#q-file{ width:100%; height:50px; background-color:#0F0; opacity:0; cursor:pointer; background-color:#09C; position:absolute; left:0px; top:15px;}
#fileholder {
    position: relative;
    width: 165px;
    height: 50px;
    left: 157px;
}

.file-checked  {
	background-image: url(file-check.jpg?123);
}

.tooltipster-icon {
    margin-left: 15px;
    color: #FFFFFF;
    font-size: 18px !important;
}

#qty-holder{
	display: inline-block;
    width: 322px;
    position: relative;
	height:30px;
	margin-bottom:25px;
	margin-top:-5px;
}

#qty-label {position:relative;top:-2px;display:inline-block;}
#q-qty {position:relative;top:3px;}

.qtybtn {margin-left:10px;width:30px; height:30px; color:#fff;
font-weight:bold; font-size:24px; line-height:30px; text-align:center; background-color:#00a4e4;
cursor:pointer; display:inline-block;}

#q-date {
	float: right;
    text-align: center !important;
    background-color: #00a4e4 !important;
    color: #fff !important;
    font-size: 15px;
    max-width: 100px !important;
    line-height: 22px;
    margin: -2px 24px 0px 0px;
    padding: 0px;
    text-indent:0px !important;
}

#req-date {
    position: relative;
    top: 5px !important;
    right: 5px !important;
}

#q-dateh, #req-dateh {display:none;}
#minorder {font-size: 12px;color: #666;float: right;margin-top: 0px; width: 100px;text-align: right;line-height: 16px;}
.price-memo {font-size:11px; margin-bottom:3px;}


.price-holder {display:inline-block;width:158px;height:100px;background-color:#00a4e4;margin-top:-10px;margin-bottom:10px;color:#fff;text-align:center; font-weight:bold;position:relative}
.price-curr {position:absolute; right:0px; font-size:14px;line-height:30px;top:0px;width:29px; font-weight:bold; cursor:help;color:#000; background-color:#ddd;}
.price-header {width:100%; height:30px; background-color:#333333; line-height:15px;font-size: 11px;}
.price-header p {line-height: 14px;font-size: 11px;margin: 0px;left: -14px;position: relative;width: auto;display: inline-block;}
.price-text{width:100%; height:55px; font-size:35px; line-height:55px;}
.logo-memo{width:100%; height:15px; font-size:10px; line-height:15px;}

/*****************************************************************/

.progress {
	position:absolute;
	left:0px;
	bottom:45px;
	width:315px;
	display:none;
}

.bar {
	background-color:#00a4e4;
	height:5px;
	width:0%;
}
.percent {
	margin-top:-20px;
	color:#000;
	float:right;
}
#quotestat {
	display:none;
	position:absolute;
	left:5px;
	bottom:50px;
}

/* gradient picker */

#gradient-picker {	
	position: absolute;
    right: 35px;
    top: 75px;
    width: 75px;
    height: 195px;
    display: none;
}

#grad-pct {
	height: 145px;
    position: absolute;
    top: 52px;
    left: 66px;
}


.grad-color {width:35px; height:25px;background-color:#ff0000;border: 1px solid #CCC;margin-left:0px;position:relative;}
#grad-top {margin-top: 10px;}
#grad-color {
	height:112px;	
}

.grad-focus {border: 1px solid #4F4F4F;
-webkit-box-shadow: 0px 0px 9px -1px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 9px -1px rgba(0,0,0,0.75);
box-shadow: 0px 0px 9px -1px rgba(0,0,0,0.75);
}

#grad-check-holder {position:absolute; left:0px; bottom:240px;color:#000;}
#grad-check {position: relative;
    background-color: #dddddd;
    color: #ffffff;
    padding: 5px 5px;
    text-align: center;
    font-size: 14px;
    width: 105px;
    margin-left: -10px;
	cursor:pointer;
}

.grad-check-selected {
	background-color: #00a4e4 !important;
}

/* Binding selection */

#binding-select {
    position: absolute;
    left: 0px;
    top: 354px;
    width: auto;
    height: 195px;
}


.b-select {
	display: inline-block;
    width: 43%;
    height: 40px;
    line-height: 40px;
  	cursor: pointer;
  	margin-top: 10px;
}

.b-select span {
  	float: left;
}

.b-select img {
    height: auto;
    width: 40px;
    float: right;
    margin-top: 4px;
    margin-right: 30px;
}

.b-select.selected img {
	background-image: url(logo-selected.png);
 	background-repeat:no-repeat; background-size:100% 100%;}
}

#SEW {
  opacity: 0.4;
}

/****** navigation update *************/

#page-count{
 bottom: 200px;
 }

.th-nav-btn{
	top: 317px
}

#th-left, #pat-left {
	left: 110px
}
	
#th-right, #pat-right {
	right: 110px
}
	
#pat-left, #pat-right {
    top: 478px;
}

/* new share button */

.share-new-btn {
    width: 150px;
    background: #000;
    height: 30px;
    position: relative;
    left: 50%;
    margin-left: -75px;
   cursor: pointer;
}

.share-new-btn-text {
    width: 120px !important;
    background: #000 !important;
    height: 30px;
    line-height: 30px !important;
    font-size: 16px !important;
    color: #fff !important;
    text-align: center;
    font-weight: 700 !important;
    position: absolute;
    left: 30px;
    top: 0px;
}

.share-new-btn-text:active, .share-new-btn-text:focus {
  color: #fff !important;
}

.share-new-btn-icon {
  width:30px; height: 30px;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  background-color: #00a4e4; float: left;
  background-image:url('share-plane.png');
}

.share-new-btn-icon.sent {
  background-color: #00AD44;
  background-image:url('share-check.png');
}


 /* fullscreen  */
.wu-fs-btn {
    position: absolute;
    right: 10px;
    bottom: 16px;
    width: 30px;
    height: 30px;
    background-image: url(wu-fs-out.svg);
    cursor: pointer;
    background-repeat: no-repeat;
}

.wu-fs-btn.on {
    background-image: url(wu-fs-in.svg) !important;
}

 /* new menu */

.wu-menu-btn {
    /* font-family: bebasneuepro-regular; */
    font-size: 20px;
    color: #000000;
    width: calc(1011px / 7);
    display: inline-block;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 4px;
    cursor: pointer;
    /* margin-right: 120px; */
    position: relative;
}
.wu-menu-btn:first-child  {
  /* margin-left: 50px; */
}

.wu-menu-btn:last-child  {
  /* margin-right: 50px; */
}

.wu-menu-btn:not(:first-of-type) {
  margin-left : 22px;
}

.wu-menu-btn:hover:after, .wu-menu-btn.active:after {
    transform: scaleX(1);
}

.wu-menu-btn:after {
    display: inline-block;
    content: "";
    height: 2px;
    width: 100%;
    background-color: #00a4e4;
    transform-origin: 50% 0%;
    position: relative;
    left: 0;
    bottom: 25px;
    transition: all .5s;
    transform: scaleX(0);
    margin: 0;
    line-height: 2px;
    will-change: transform;
}


/* new thumbs */

.thumb {
    background-repeat: no-repeat;
    width: 103px;
    height: 162px;
    cursor: pointer;
}


.thumb:hover .thumb-title:after, .thumb .thumb-title-selected:after {
    transform: scaleX(1);
}

.thumb-title {
    left: 0px;
    bottom: 10px;
    font-size: 12px;
    text-align: center;
    width: 103px;
    height: 24px;
    line-height: 24px;
    color: #000000;
}

.thumb-title:after {
    display: inline-block;
    content: "";
    height: 2px;
    width: 100%;
    background-color: #00a4e4;
    transform-origin: 50% 0%;
    position: relative;
    left: 0;
    bottom: 17px;
    transition: all .5s;
    transform: scaleX(0);
    margin: 0;
    line-height: 2px;
    will-change: transform;
}

.thumb img {left:24px; top:24px; width:54px; height:100px;}