body {
	padding: 0px;
	margin: 0px; 
	font-family: 'Lato', arial, verdana, sans-serif;
	color: #333;
	font-size: 14px;
}

.clear { clear: both;}

h3 {font-size: 24px; font-weight: 300; text-align: center;}

.imgfade {
	opacity: 1;
	transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-webkit-transition: opacity .25s ease-in-out;
}

.imgfade:hover {
	opacity: 0.5;
}

/* LIGHTBOX */

	.lightbox {display: none; padding: 30px 50px; border: 5px solid #036; margin: 0 0 25px 0;}
	h1.lbtitle {margin: 0; padding: 0; font-size: 24px;}
	.lbcontent {margin: 20px 0 0 0; padding: 0;}
	
	.containerLBPatches {height: 800px; overflow: auto;}
	.holderPatch {display: inline-block; width: 100px; margin: 20px; text-align: center;}
	.holderPatch-img {width: 100%;}
	.holderPatch-img img {width: 100%;}
	.holderPatch-title {text-transform: uppercase; font-weight: bold; font-size: 12px;}

.wrapper-financial {width: 90%; padding: 20px 5%; background-color: #09C; color: #fff; text-align: center;}
.holderFinancial {display: inline-block; width: 25%; margin: 0 50px; text-align: center;}
.costBig {font-size: 20px; margin: 0 0 0 10px;}

.viewgallery {font-size: 10px; text-transform: uppercase; font-weight: bold; margin: 0 0 0 20px;}
.viewgallery a {color: #900; text-decoration: none;}
.viewgallery a:visited {color: #900; text-decoration: none;}
.viewgallery a:hover {color: #900; text-decoration: underline;}

.jacket-title { color: #333; font-size: 18px; font-weight: 300;}

select.selectLetter {font-size: 20px; width: 80%; border: 1px solid #999; padding: 5px 10px; height: 40px;}
select.selectMonogramColor {font-size: 20px; width: 80%; border: 1px solid #999; padding: 5px 10px; height: 40px;}
input.nameinputA {font-size: 20px; width: 80%; border: 1px solid #999; padding: 5px 10px; color: #1f376d;}
input.nameinputB {font-size: 20px; width: 80%; border: 1px solid #999; padding: 5px 10px; color: #1f376d;}
input.nameinputC {font-size: 20px; width: 80%; border: 1px solid #999; padding: 5px 10px; color: #1f376d;}

input.custinfo {font-size: 14px; width: 80%; border: 1px solid #999; padding: 10px 10px; color: #1f376d;}

.nameinput_showA {font-size: 12px; font-family: times new roman, times, serif; font-style: italic; margin: 120px 0 0 120px; z-index: 99999999; position: absolute; width: 100px; text-align: center; color: #fff;}

.nameinput_showB {font-size: 12px; font-family: times new roman, times, serif; font-style: italic; margin: 135px 0 0 120px; z-index: 99999999; position: absolute; width: 100px; text-align: center; color: #fff;}

.nameinput_showC {font-size: 12px; font-family: times new roman, times, serif; font-style: italic; margin: 150px 0 0 120px; z-index: 99999999; position: absolute; width: 100px; text-align: center; color: #fff;}

.form-container {text-align: left; }
.holder-formitem {margin: 0 0 10px 0;}
.formlabel {font-weight: bold; margin: 0 0 5px 0;}

.holder-formcolumn {width: 46%; vertical-align: top; display: inline-block; margin: 0 2% 0 0;}

.wrapper-steps {margin: 50px auto 0 auto; text-align: left; width: 90%;}
.holder-step {display: inline-block; width: 8%; margin: 0 .8%; vertical-align: top;}

button.button-step {background-color: #e1e1e1; border: 1px solid #ccc; padding: 10px; width: 98%; text-transform: uppercase; font-weight: bold; cursor: pointer;}
button.button-step:hover {background-color: #999; color: #fff; }

.step-active {background-color: #900 !important; color: #fff;}

.header-salesrep {float: left; margin: 30px 0 0 30px;}
.salesrep-name {font-weight: bold; text-transform: uppercase; }
.salesrep-contact {}

/* TOOL TIPS */

/* Tooltip container */
.tooltip { position: relative; display: inline-block; border-bottom: 0px dotted black; /* If you want dots under the hoverable text */ }

/* Tooltip text */
.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; font-size: 10px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent; }

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

/* STYLES - SLIDER ROTATOR */

.thumb-box {width: 463px; margin: 0 auto; text-align: center;}
ul.thumbs {list-style-type: none;  text-align: center; margin: 0; padding: 0;}
ul.thumbs li {float: left; margin: 0 10px; padding: 8px; text-align: center;}
ul.thumbs li img {border: 2px solid #ccc; opacity: .8;}
ul.thumbs li img.active {border: 2px solid #900; opacity: 1;}
ul.thumbs li img:hover {opacity: 1;}

/* BUTTONS */
.jacketbutton {margin: 40px 0 0 0;}
INPUT.buttonProceed {display: block; background-color: #1f376d; color: #fff; border: 0px; width: 100%; text-align: center; font-size: 18px; padding: 10px 0;}
INPUT.buttonProceed:hover {background-color: #900;}

/* COLORS */

.color-container {margin: 20px 0;}
.color-box {display: inline-block; margin: 0 10px 10px 0;}

.color-grey {width: 30px; height: 30px; min-height: 20px; background-color: #79756b;}
.color-royalblue {width: 30px; height: 30px; min-height: 20px; background-color: #012f74;}
.color-pink {width: 30px; height: 30px; min-height: 20px; background-color: #e8878e;}
.color-black {width: 30px; height: 30px; min-height: 20px; background-color: #151515;}
.color-tan {width: 30px; height: 30px; min-height: 20px; background-color: #c3a96d;}
.color-oldgold {width: 30px; height: 30px; min-height: 20px; background-color: #9d6d29;}
.color-brown {width: 30px; height: 30px; min-height: 20px; background-color: #2e1e1b;}
.color-white {width: 30px; height: 30px; min-height: 20px; background-color: #efefef;}
.color-naturalcream {width: 30px; height: 30px; min-height: 20px; background-color: #d9cf9f;}
.color-maroon {width: 30px; height: 30px; min-height: 20px; background-color: #360214;}
.color-kellygreen {width: 30px; height: 30px; min-height: 20px; background-color: #005212;}
.color-ltgold {width: 30px; height: 30px; min-height: 20px; background-color: #e19212;}
.color-forestgreen {width: 30px; height: 30px; min-height: 20px; background-color: #052f1e;}
.color-columbiablue {width: 30px; height: 30px; min-height: 20px; background-color: #509bbe;}
.color-vegasgold {width: 30px; height: 30px; min-height: 20px; background-color: #c3a96d;}
.color-tealblue {width: 30px; height: 30px; min-height: 20px; background-color: #007f99;}
.color-navyblue {width: 30px; height: 30px; min-height: 20px; background-color: #032448;}
.color-purple {width: 30px; height: 30px; min-height: 20px; background-color: #270f48;}
.color-orangeman {width: 30px; height: 30px; min-height: 20px; background-color: #ec4503;}
.color-cardinal {width: 30px; height: 30px; min-height: 20px; background-color: #5d0122;}
.color-red {width: 30px; height: 30px; min-height: 20px; background-color: #be0113;}
.color-yellow {width: 30px; height: 30px; min-height: 20px; background-color: #ffd700;}
.color-texasorange {width: 30px; height: 30px; min-height: 20px; background-color: #bf5c19;}

.wrapper-sectionpic {width: 100%; background:#fff url("../images/sectionpic-1.jpg") no-repeat top; height: 200px; min-height: 200px;}
.sectionpic-text {color: #fff; font-size: 30px; width: 80%; text-align: center; margin: 0 auto; padding: 70px 0 0 0;}

.show_BackName {width: 190px; margin: -80px 0 0 0;}
.show_BackName img {width: 100%;}

.display_Patch1 {position: absolute; z-index: 99999999999; margin: 110px 0 0 215px;}
.show_patch1 {width: 100px;}
.show_patch1 img {width: 100%;}

.display_Patch2 {position: absolute; z-index: 99999999999; margin: 175px 0 0 220px;}
.show_patch2 {width: 100px;}
.show_patch2 img {width: 100%;}

.display_Patch3 {position: absolute; z-index: 99999999999; margin: 240px 0 0 212px;}
.show_patch3 {width: 100px;}
.show_patch3 img {width: 100%;}

.display_Patch4 {position: absolute; z-index: 99999999999; margin: 110px 0 0 126px;}
.show_patch4 {width: 100px;}
.show_patch4 img {width: 100%;}

.display_Patch5 {position: absolute; z-index: 99999999999; margin: 175px 0 0 125px;}
.show_patch5 {width: 100px;}
.show_patch5 img {width: 100%;}

.display_Patch6 {position: absolute; z-index: 99999999999; margin: 240px 0 0 130px;}
.show_patch6 {width: 100px;}
.show_patch6 img {width: 100%;}

@media screen and (min-width: 0px) and (max-width: 1400px) {

	@media screen and (min-width: 1200px) and (max-width: 1399px) {

		.wrapper-header {width: 100%; background:#e1e1e1 url("../images/header-bg.jpg") no-repeat top; height: 100px; min-height: 100px;}
	
		.wrapper {width: 90%; margin: 20px auto; border: 1px #ccc solid; padding: 30px;}
	
		.header-logo {float: left; margin: 0 0 0 5%; padding: 10px; width: 140px; background-color: #fff; box-shadow: 1px 1px 10px #ccc;}
		.header-logo img {width: 100%;}
	
		.header-title {float: right; font-size: 24px; color: #1f376d; padding: 25px 40px 0 0; font-weight: 300; text-align: right;}
		.header-subtitle {font-size: 18px; font-weight: bold; text-transform: uppercase; color: #000;}
	
		.holder-jacket {display: inline-block; width: 22%; text-align: center;}
		.holder-jacket img {width: 100%;}

		.container-content {width: 100%;}
		.content-right {display: inline-block; width: 60%; border-left: 1px solid #ccc; vertical-align: top; text-align: center; margin-left: 20px;}
		.content-left {display: inline-block; width: 400px; vertical-align: top;}
		
		.jacket-container {margin: 50px 0 0 0;}
		.holderBase {width: 58.5%; text-align: center; position: absolute;}
		.holderOptionTrim {width: 58.5%; text-align: center; position: absolute; z-index: 99999;}
	.holderSolidTopBottom {width: 58.5%; text-align: center; position: absolute; z-index: 88888;}
		.holderArms {width: 58.5%; text-align: center; position: absolute;}
		.holderPockets {width: 58.5%; text-align: center; position: absolute;}
		.holderButtonCaps {width: 58.5%; text-align: center; position: absolute;}
	
		.wrapper-footer {width: 100%; background-color: #1f376d; min-height: 300px;}
		.copyright {width: 90%; text-align: center; margin: 0 auto; padding: 100px 0; color: #fff;}

	}
	
	@media screen and (min-width: 1024px) and (max-width: 1199px) {

		.wrapper-header {width: 100%; background:#e1e1e1 url("../images/header-bg.jpg") no-repeat top; height: 100px; min-height: 100px;}
	
		.wrapper {width: 90%; margin: 100px auto; border: 1px #ccc solid; padding: 30px;}
	
		.header-logo {float: left; margin: 0 0 0 5%; padding: 10px; width: 140px; background-color: #fff; box-shadow: 1px 1px 10px #ccc;}
		.header-logo img {width: 100%;}
	
		.header-title {float: right; font-size: 24px; color: #1f376d; padding: 25px 40px 0 0; font-weight: 300; text-align: right;}
		.header-subtitle {font-size: 18px; font-weight: bold; text-transform: uppercase; color: #000;}
	
		.holder-jacket {display: inline-block; width: 40%; text-align: center;}
		.holder-jacket img {width: 100%;}

		.container-content {width: 100%;}
		.content-right {display: inline-block; width: 60%; border-left: 1px solid #ccc; vertical-align: top; text-align: center; margin-left: 20px;}
		.content-left {display: inline-block; width: 350px; vertical-align: top;}
		
		.jacket-container {margin: 50px 0 0 0;}
	.holderOptionTrim {width: 58.5%; text-align: center; position: absolute;}
	.holderBase {width: 58.5%; text-align: center; position: absolute;}
	.holderOptionTrim {width: 58.5%; text-align: center; position: absolute; z-index: 99999;}
	.holderSolidTopBottom {width: 58.5%; text-align: center; position: absolute; z-index: 88888;}
	.holderArms {width: 58.5%; text-align: center; position: absolute;}
	.holderPockets {width: 58.5%; text-align: center; position: absolute;}
	.holderButtonCaps {width: 58.5%; text-align: center; position: absolute;}
	
		.wrapper-footer {width: 100%; background-color: #1f376d; min-height: 300px;}
		.copyright {width: 90%; text-align: center; margin: 0 auto; padding: 100px 0; color: #fff;}
		
	}
	
	@media screen and (min-width: 768px) and (max-width: 1023px) {

		.wrapper-header {width: 100%; background:#e1e1e1 url("../images/header-bg.jpg") no-repeat top; height: 100px; min-height: 100px;}
	
		.wrapper {width: 90%; margin: 100px auto; border: 1px #ccc solid; padding: 30px;}
	
		.header-logo {float: left; margin: 0 0 0 5%; padding: 20px 0 0 0; width: 160px;}
		.header-logo img {width: 100%;}
	
		.header-title {float: right; font-size: 24px; color: #1f376d; padding: 25px 40px 0 0; font-weight: 300; text-align: right;}
		.header-subtitle {font-size: 18px; font-weight: bold; text-transform: uppercase; color: #000;}
	
		.holder-jacket {display: inline-block; width: 40%; text-align: center;}
		.holder-jacket img {width: 100%;}

		.container-content {width: 100%;}
		.content-right {float: right; width: 700px;}
		.content-left {float: left; width: 400px;}
		
		.jacket-container {margin: 50px 0 0 0;}
	.holderOptionTrim {width: 58.5%; text-align: center; position: absolute;}
	.holderSolidTopBottom {width: 58.5%; text-align: center; position: absolute;}
	.holderArms {width: 58.5%; text-align: center; position: absolute;}
	.holderPockets {width: 58.5%; text-align: center; position: absolute;}
	.holderButtonCaps {width: 58.5%; text-align: center; position: absolute;}
	
		.wrapper-footer {width: 100%; background-color: #1f376d; min-height: 300px;}
		.copyright {width: 90%; text-align: center; margin: 0 auto; padding: 100px 0; color: #fff;}
		
	}
	
	@media screen and (min-width: 480px) and (max-width: 767px) {

		.wrapper-header {width: 100%; background:#e1e1e1 url("../images/header-bg.jpg") no-repeat top; height: 100px; min-height: 100px;}
	
		.wrapper {width: 80%; margin: 150px auto; border: 1px #ccc solid; padding: 30px;}
	
		.header-logo {width: 100%; text-align: center;}
		.header-logo img {width: 160px;}
	
		.header-title {font-size: 24px; color: #1f376d; font-weight: 300; text-align: right; width: 90%; text-align: center; margin: 20px auto;}
		.header-subtitle {font-size: 18px; font-weight: bold; text-transform: uppercase; color: #000;}
	
		.holder-jacket {display: inline-block; width: 90%; text-align: center;}
		.holder-jacket img {width: 100%;}

		.container-content {width: 100%;}
		.content-right {float: right; width: 700px;}
		.content-left {float: left; width: 400px;}
	
		.wrapper-footer {width: 100%; background-color: #1f376d; min-height: 300px;}
		.copyright {width: 90%; text-align: center; margin: 0 auto; padding: 100px 0; color: #fff;}
		
	}
	
	@media screen and (min-width: 0px) and (max-width: 479px) {

		.wrapper-header {width: 100%; background:#e1e1e1 url("../images/header-bg.jpg") no-repeat top; height: 100px; min-height: 100px;}
	
		.wrapper {width: 80%; margin: 150px auto; border: 1px #ccc solid; padding: 30px;}
	
		.header-logo {width: 100%; text-align: center;}
		.header-logo img {width: 160px;}
	
		.header-title {font-size: 24px; color: #1f376d; font-weight: 300; text-align: right; width: 90%; text-align: center; margin: 20px auto;}
		.header-subtitle {font-size: 18px; font-weight: bold; text-transform: uppercase; color: #000;}
	
		.holder-jacket {display: inline-block; width: 90%; text-align: center;}
		.holder-jacket img {width: 100%;}

		.container-content {width: 100%;}
		.content-right {float: right; width: 700px;}
		.content-left {float: left; width: 400px;}
	
		.wrapper-footer {width: 100%; background-color: #1f376d; min-height: 300px;}
		.copyright {width: 90%; text-align: center; margin: 0 auto; padding: 100px 0; color: #fff;}
		
	}
	
	
}

@media screen and (min-width: 1401px) {
	
	.wrapper-header {width: 100%; background:#e1e1e1 url("../images/header-bg.jpg") no-repeat top; height: 100px; min-height: 100px;}
	
	.wrapper {width: 90%; margin: 20px auto; border: 1px #ccc solid; padding: 30px;}
	
	.header-logo {float: left; margin: -20px 0 0 5%; padding: 10px; width: 140px; }
	.header-logo img {width: 100%;}
	
	.header-title {float: right; font-size: 24px; color: #1f376d; padding: 25px 40px 0 0; font-weight: 300; text-align: right;}
	.header-subtitle {font-size: 18px; font-weight: bold; text-transform: uppercase; color: #000;}
	
	.holder-jacket {display: inline-block; width: 22%; text-align: center;}
	.holder-jacket img {width: 100%;}

	.container-content {width: 100%;}
	.content-right {display: inline-block; width: 65%; border-left: 1px solid #ccc; vertical-align: top; text-align: center; margin-left: 20px;}
	.content-left {display: inline-block; width: 400px; vertical-align: top;}
	
	.content-jacket {width: 463px; height: 445px; margin: 30px auto;}
	.content-thumbs {width: 463px; height: 100px; margin: 20px auto;}
	
	.jacketBase {width: 100%;}
	.jacketBase img {width: 100%;}
	.holderBase {position: absolute; }
	.holderOptionTrim {position: absolute; z-index: 99999;}
	.holderSolidTopBottom {position: absolute; z-index: 88888;}
	.holderArms {position: absolute;}
	.holderPockets {position: absolute;}
	.holderButtonCaps {position: absolute;}
	.holderCollar {position: absolute;}
	
	.holderFrontLetter {width: 200px; position: absolute; z-index: 999999; margin: 10px 0 0 180px;}
	.holderFrontLetter-topfelt {width: 200px; position: absolute;}
	.holderFrontLetter-topfelt img {width: 200px;}
	.holderFrontLetter-backfelt {width: 200px; position: absolute;}
	.holderFrontLetter-backfelt img {width: 200px;}
	.holderFrontLetter-outline {width:200px; position: absolute;}
	.holderFrontLetter-outline img {width: 200px;}
	
	/* OLD STYLES 
	.content-jacket {width: 465px; border: 1px solid red; margin: 0 auto;}	
	.jacket-container {margin: 50px 0 0 0; height; 500px;}
	.holderBase {width: 58.5%; text-align: center; position: absolute;}
	.holderOptionTrim {width: 58.5%; text-align: center; position: absolute; z-index: 99999;}
	.holderSolidTopBottom {width: 58.5%; text-align: center; position: absolute; z-index: 88888;}
	.holderArms {width: 58.5%; text-align: center; position: absolute;}
	.holderPockets {width: 58.5%; text-align: center; position: absolute;}
	.holderButtonCaps {width: 58.5%; text-align: center; position: absolute;}
	*/
	
	.wrapper-footer {width: 100%; background-color: #1f376d; min-height: 300px;}
	.copyright {width: 90%; text-align: center; margin: 0 auto; padding: 100px 0; color: #fff;}

}