/*
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
@import url("https://fonts.googleapis.com/css?family=Saira:600");
@import url("https://fonts.googleapis.com/css?family=Jost:200,300,400,500,600,700");	
@import url("fontawesome-all.min.css");  */


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: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
			font-family: Open Sans;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/* Basic - 2021 vers */

/*
.prodpgphoto {
	 float: left;
 padding: 0 10px 0 0;
}  */

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}

	@-ms-viewport {
		width: device-width;
	}

/* sjd - bg specs including color before img fadein  */
	body {
/*	background-image: url("https://www.ultimatepatches.com/images2/bg-nu.jpg");    */
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-color: #03102c;
	}

		body.is-preload * {
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			}
			
			
			
/* sjd new 2021p fadein code  */
			#bg2021p{
		-moz-transform: scale(1.125);
		-webkit-transform: scale(1.125);
		-ms-transform: scale(1.125);
		transform: scale(1.125);
/*		-webkit-backface-visibility: hidden;     */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: -50000;  
	
				background-image: url("https://www.ultimatepatches.com/images2/bg-nu.jpg");
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;

    -webkit-animation:  2.5s ease-out opc forwards; opacity:0; transition:opacity 0.6s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation:  2.5s ease-out opc forwards; opacity:0; transition:opacity 0.6s; /* Firefox < 16 */
        -ms-animation:  2.5s ease-out opc forwards; opacity:0; transition:opacity 0.6s; /* Internet Explorer */
         -o-animation:  2.5s ease-out opc forwards; opacity:0; transition:opacity 0.6s; /* Opera < 12.1 */
            animation:  2.5s ease-out opc forwards; opacity:0; transition:opacity 0.6s;
}

@keyframes opc  {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes opc  {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes opc  {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes opc  {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes opc fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* end sjd new 2021p fadein code  */
			
			
			
			
			
		
		/* sjd - leftover junk from 2017 bg transition 
		body.is-loading *, body.is-loading *:before, body.is-loading *:after, body.is-switching *, body.is-switching *:before, body.is-switching *:after {
			-moz-animation: none !important;
			-webkit-animation: none !important;
			-ms-animation: none !important;
			animation: none !important;
			-moz-transition: none !important;
			-webkit-transition: none !important;
			-ms-transition: none !important;
			transition: none !important;
			-moz-transition-delay: none !important;
			-webkit-transition-delay: none !important;
			-ms-transition-delay: none !important;
			transition-delay: none !important;
		}   */

/*2021 vers*/
/*	body, input, select, textarea {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 400;
		font-size: 11pt;
		line-height: 1.85em;
	}
	*/
	
	/* sjd - 2017 port. default specs of all text - line height perm min! Do not change. screws up top nav text */
	body, input, select, textarea {
	color: #ebebeb;
	font-family: "Jost", sans-serif;
	font-weight: 300;
	font-size: 10pt;
	letter-spacing: 0.02rem;
	line-height: 1.37;
	}
	
				/* sjd Open Sans for Top Nav of prod pages  */
	.styleopensans {
font-family: 'Open Sans', sans-serif;
	}
	
					.styleopensans a {
			text-decoration: none !important;
		}
	
	
	/* sjd blank ul style for top nav  */
.BlankListStyle {
			list-style: none;
		}
		
					.styleline {
	font-size: 0.9rem;
	font-weight: 300;
	color: #ebebeb;
/*	line-height: 1.14rem;   */
	letter-spacing: 0.01rem;
/*	border-top: solid 1px #7bc958;	*/
		border-bottom: solid 1px #7bc958;
	width: 48%;	
}
		
			.stylecash {
	font-size: 0.9rem;
	font-weight: 400;
	color: #ebebeb;
/*	line-height: 1.14rem;   */
	letter-spacing: 0.01rem;
	border-top: solid 1px #7bc958;
		border-bottom: solid 1px #7bc958;
	width: 48%;	
}

	.stylecash strong {
	font-weight: 600;
	color: #7bc958 !important;
}

/* at all sizes */
	.stylevalue2025 {
	font-size: 1.5rem;
	font-weight: 600;
	color: #d40000;	
	letter-spacing: 0rem;
	line-height: 1rem;
	text-transform: uppercase;
	margin: 0.5rem 0 -5 0 !important;
	}
	
		@media screen and (max-width: 1280px) {
	/* at large and med sizes */
	.stylevalue2025 {
	font-size: 1.5rem;
	font-weight: 600;
	color: #d40000;
	letter-spacing: 0rem;
	line-height: 1rem !important;
	text-transform: uppercase;
	vertical-align: -25%;
	}
		}
		
				@media screen and (max-width: 735px) {
	/* at small size */
	.stylevalue2025 {
	font-size: 1.5rem;
	font-weight: 600;
	color: #d40000;
	letter-spacing: 0rem;
	line-height: 1rem !important;
	text-transform: uppercase;
	vertical-align: -20%;
	}
		}
	
/* sjd links  */
	a {
		color: inherit;
	/*	text-decoration: underline;  */
	}
	

		a:hover {
			text-decoration: none;
		}


	
	
	.savebig {
	text-transform: uppercase;
	color: #d40000 !important;
	font-weight: 600 !important; 
	font-size: 2.75em !important; 
	line-spacing: 0.1em !important;
	margin: 0 0 0 0 !important;   
	text-align: center !important;
	}
	
		.savebig2 {
	text-transform: uppercase;
	color: #CCC200 !important;
	font-weight: 300 !important; 
	font-size: 1.65em !important; 
	line-spacing: 0.1em !important;
	margin: 0 0 0 0 !important;   
	}
	
	
	.maintext {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 400;
		font-size: 11pt;
		line-height: 1.85em;
	}
	
		.maintextfaq {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 400;
		font-size: 11pt;
		letter-spacing: 0.02em;
		line-height: 1.3em;
		text-align: left;
		margin: 0 0 0.5em 0 ; 
	}
	

	
				.maintextfreeA {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 300;
		font-size: 8pt;
		letter-spacing: 0.45em !important;
		line-height: 1.5em;
		text-align: left;
		margin: 0 0 0.2em 0 ; 
		text-transform: uppercase;
	}
	
			.maintextfreeB {
		font-family: 'Open Sans', sans-serif;
		color: #67A8D8;	
		font-weight: 600;
		font-size: 9pt;
		line-height: 1em;
		text-align: left;
		margin: 0 0 3em 0 ; 
		text-transform: uppercase;
		/*	text-shadow: 0 0 2px #33C, 0 0 5px #005aff, 0 0 3px #FFF;	*/
	}
	
	    .maintextfreeB strong {
		font-weight: 800;
	}
	
	.WhiteImageBorder
{
    border-width: 1px;
	border-style: solid;
    border-color: #2D32FF;
/*	   -moz-box-shadow: 0 0 2px #33C, 0 0 5px #005aff, 0 0 3px #FFF;
-webkit-box-shadow: 0 0 2px #33C, 0 0 5px #005aff, 0 0 3px #FFF;
        box-shadow: 0 0 2px #33C, 0 0 5px #005aff, 0 0 3px #FFF;	*/
		
	/*		   -moz-box-shadow: 0 0 15px #03C;
-webkit-box-shadow: 0 0 11px #03C;
        box-shadow: 0 0 11px #03C;	*/
		
		     color: #111;	
            background: #03C;
            box-shadow: 0 0 35px #03C;
			-webkit-box-shadow: 0 0 35px #03C;
			-moz-box-shadow: 0 0 35px #03C;
			
		border-radius: 6%;	
}

      .WhiteImageBorder:hover {
            color: #111;	
	border-style: solid;
    border-color: #fff;
	            background: #03C;
            box-shadow: 0 0 200px 30px #03C;
			-webkit-box-shadow: 0 0 200px 30px #03C;
			-moz-box-shadow: 0 0 200px 30px #03C;
        }	

 /*      .WhiteImageBorder:hover {
            color: #111;	
            background: #03C;
            box-shadow: 0 0 35px #03C;
        }	*/
	
	

	
	
							.maintextfaq-strong {
		font-family: 'Open Sans', sans-serif;
		color: #ccc200 !important;
		font-weight: 700 !important;
		font-size: 11pt;
		letter-spacing: 0.02em;
		line-height: 1.3em;
		text-align: left;
				margin: 2.25em 0 0.5em 0 ;
	}       
	
	
			.maintextfaq-c {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 400;
		font-size: 11pt;
		letter-spacing: 0.02em;
		line-height: 1.3em;
		text-align: center;
		margin: 0 0 0.5em 0 ; 
	}
	
					.maintextfaq-c-fat {
		font-family: 'Open Sans', sans-serif;
		color: #d40000;
		font-weight: 700 !important;
		font-size: 27pt;
		letter-spacing: 0em !important;
		line-height: 1.1em;
		text-align: center !important;
		margin: 0 0 0.5em 0 !important; 
	}
	
				.sm-maintextfaq-c {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 400;
		font-size: 9pt;
		letter-spacing: 0.02em;
		line-height: 1.3em;
		text-align: center;
		margin: 0 0 0.5em 0 ; 
	}
	
							.maintextfaq-strong-c {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 700 !important;
		font-size: 11pt;
		letter-spacing: 0.02em;
		line-height: 1.3em;
		text-align: center;
				margin: 2.25em 0 0.5em 0 ;
	}       
	
	.branding {
	color: #B6B6B6 !important;
	font-weight: 800 !important;
	font-size: 1.54em !important;
	letter-spacing: 0.0em !important;
	word-spacing: 0.03em !important;
	line-spacing: 1em !important;
	margin: 0.5em 0 0 0 !important;
/*	text-decoration: underline overline;   */
/*	border-top: solid 1px #ddd;
	border-bottom: solid 1px #ddd;    */
	}
	
	/* sjd - At Largeest screen size: custom class i made for front page text on Line 1 - "high quality" etc */	
	.midtext1 {
	color:#ccc200 !important;
	font-weight:400 !important;
    text-transform: uppercase;
	color: #fff;
/*	color: rgba(255, 255, 255, 0.75);   */
	font-size: 1.2em;
	line-height: 1.3em;
	letter-spacing: 0.04em;
	float: center;
	text-align: center;
/* sjd disabled this (make room for button)		width: 60%;  */
	line-height: 1.5em;
	margin: 0;
	}
	
	.midtext2 {
	color:#B6B6B6 !important;
	font-weight:400 !important;
/*	text-transform: uppercase;		*/
	color: #fff;
/*	color: rgba(255, 255, 255, 0.75);   */
	font-size: 1.2em;
	line-height: 1.3em ;
	letter-spacing: 0.04em;
	float: center;
	text-align: center;
/* sjd disabled this (make room for button)		width: 60%;  */
	line-height: 1.5em;
	margin: 1.5em 0 0.5em 0;
	}	
	

	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: inherit;
		text-decoration: none;
		outline: 0;	
	}


/*	SJD - HEADERS TEXT STYLE	*/

/*	sjd custom h1 for "[synthname] patches" note: disabled the max-content as it was making a text wrap based on the longest line or something and also causing weird h1 random resizing when f5 refreshing	*/
	h1 {
	border-bottom: solid 1px #ebebeb;
/*	width: -moz-max-content;
	width: -webkit-max-content;
	width: -ms-max-content;
	width: max-content;	*/
	
		font-size: 1.5rem;
		line-height: 1.035;
		letter-spacing: 0.35rem;
		word-spacing: 0.02rem;
		color: #ccc200;
			font-weight: 400;
			text-transform: uppercase;
	}
	
		.stylewhitetext {
	/*	color: #ebebeb;  */
		font-size: 0.5em;
	color: #bfbfbf;
	font-size: 0.8rem;
	line-height: 0.9rem;
	font-weight: 400;
	letter-spacing: 0.07rem;
	text-transform: uppercase;
	}

/*	sjd custom h2 for "[synthname] presets" 	*/
	h2 {
	text-transform: uppercase;
	font-size: 0.9rem !important;
	line-height: 1.1;
	
	color: #67A8D8;
	font-weight: 500;
	letter-spacing: 0.04rem;
/* sjd added glow  */
/*	background: rgba(20, 60, 210, 0.26);	*/
	       /*     background: #03C;		*/

/*	        box-shadow: 0 14px 200px 15px #03C;
			-webkit-box-shadow: 0 14px 200px 15px #03C;
			-moz-box-shadow: 0 14px 200px 15px #03C;	*/
        }		


/*	sjd custom h3 for "price paragraph" */
	h3 {
		color: #ebebeb;
		font-weight: 300;
		line-height: 1;
		text-transform: uppercase;
		font-size: 0.6rem;
			padding: 0.2rem 0 0 0 !important;
		}
		

		
	
	/*	sjd custom h4  - unused" 	
			h4 {
	color: #ebebeb;
	font-weight: 600;
	line-height: 1;
	margin: 0 0 1rem 0;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-size: 0.8rem;
	}
*/
	
	/* sjd - "instant digital download	*/
		h5 {
	color: #ebebeb;
	font-weight: 400;
	line-height: 1.1;
	margin: -0.05rem 0 0.285rem 0;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-size: 0.7rem;

	}
	
	
	h6 {
		color: #ebebeb;
		font-weight: 300;
		line-height: 1;
		margin: 0 0 0 0;
		text-transform: uppercase;
		font-size: 0.6rem;
	}
	
	

		h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
			color: inherit;
			text-decoration: none;
		}
		

	

	@media screen and (max-width: 736px) {

		h1 {
			font-size: 1.25rem;
			line-height: 1;
		}

		h2 {
			font-size: 1.25em;
			line-height: 1.4;
		}

	}
/* end sjd 2017 header h1 etc styles */	
				


	
	/* sdj - h3 version: for index product page synth names */
		h3.prod {
		font-size: 1.4em;
		margin-top: 0.4em;
		color: #ebebeb;
	}


	b, strong {
		font-weight: 500;
	}

	i, em {
		font-style: italic;
	}

	br.clear {
		clear: both;
	}

	sub {
		position: relative;
		top: 0.5em;
		font-size: 0.8em;
	}

	sup {
		position: relative;
		top: -0.5em;
		font-size: 0.8em;
	}

	hr {
		border: 0;
		border-top: solid 1px #ddd;
	}

	blockquote {
		border-left: solid 0.5em #ddd;
		padding: 1em 0 1em 2em;
		font-style: italic;
	}

	p, ul, ol, dl, table {
		margin-bottom: 2em;
	}
	

	.date {
		display: block;
		text-transform: uppercase;
		font-weight: 700;
		letter-spacing: 0.065em;
		font-size: 0.9em;
		color: #696969;
		margin: 0 0 0.25em 0;
	}
	
	
	/* Form */

	form {
		margin: 0 0 2.5rem 0;
	}

		form .field {
			margin: 0 0 1.5rem 0;
		}

			form .field.half {
				width: 50%;
				float: left;
				padding: 0 0 0 0.75rem;
			}

				form .field.half.first {
					padding: 0 0.75rem 0 0;
				}

		form > .actions {
			margin: 1.875rem 0 0 0 !important;
		}

		@media screen and (max-width: 736px) {

			form .field {
				margin: 0 0 1.125rem 0;
			}

				form .field.half {
					padding: 0 0 0 0.5625rem;
				}

					form .field.half.first {
						padding: 0 0.5625rem 0 0;
					}

			form > .actions {
				margin: 1.5rem 0 0 0 !important;
			}

		}

		@media screen and (max-width: 480px) {

			form .field.half {
				width: 100%;
				float: none;
				padding: 0;
			}

				form .field.half.first {
					padding: 0;
				}

		}

	label {
		color: #ffffff;
		display: block;
		font-size: 0.8rem;
		font-weight: 300;
		letter-spacing: 0.2rem;
		line-height: 1.5;
		margin: 0 0 1rem 0;
		text-transform: uppercase;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="tel"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		-ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
		background: transparent;
		border-radius: 4px;
		border: solid 1px #ffffff;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1rem;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		input[type="tel"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		input[type="tel"]:focus,
		select:focus,
		textarea:focus {
			background: rgba(255, 255, 255, 0.075);
			border-color: #ffffff;
			box-shadow: 0 0 0 1px #ffffff;
		}

	select option {
		background: #1b1f22;
		color: #ffffff;
	}

	.select-wrapper {
		text-decoration: none;
		display: block;
		position: relative;
	}

		.select-wrapper:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
		}

		.select-wrapper:before {
			color: #ffffff;
			content: '\f107';
			display: block;
			height: 2.75rem;
			line-height: calc(2.75rem + 0em);
			pointer-events: none;
			position: absolute;
			right: 0;
			text-align: center;
			top: 0;
			width: 2.75rem;
		}

		.select-wrapper select::-ms-expand {
			display: none;
		}



/* Wrapper69 sjd - ported from 2017 css - main article prodpg container*/

	#wrapper69 {
	/*				text-align: center;
		width: 940px;
		margin: 0 auto;
		overflow: hidden;
		padding: 5em 0 4em 0;
	*/	
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-moz-align-items: center;
	-webkit-align-items: center;
	-ms-align-items: center;
	align-items: center;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
	-ms-justify-content: space-between;
	justify-content: space-between;
	position: relative;
	min-height: 100vh;
	width: 100%;
	padding: 4rem 2rem;
	z-index: 3;
	}

/*		#wrapper69:before {
			content: '';
			display: block;
		}   */

		@media screen and (max-width: 1680px) {

			#wrapper69 {
				padding: 3rem 2rem;
			}

		}

		@media screen and (max-width: 736px) {

			#wrapper69 {
				padding: 2rem 1rem;
			}

		}

		@media screen and (max-width: 480px) {

			#wrapper69 {
				padding: 1rem;
			}

		}

/* sjd ported code end */


	input[type="text"],
	input[type="password"],
	input[type="email"],
	select {
		height: 2.75rem;
	}

	textarea {
		padding: 0.75rem 1rem;
	}

	input[type="checkbox"],
	input[type="radio"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		display: block;
		float: left;
		margin-right: -2rem;
		opacity: 0;
		width: 1rem;
		z-index: -1;
	}

		input[type="checkbox"] + label,
		input[type="radio"] + label {
			text-decoration: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			user-select: none;
			color: #ffffff;
			cursor: pointer;
			display: inline-block;
			font-size: 0.8rem;
			font-weight: 300;
			margin: 0 0 0.5rem 0;
			padding-left: 2.65rem;
			padding-right: 0.75rem;
			position: relative;
		}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-family: FontAwesome;
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
			}

			input[type="checkbox"] + label:before,
			input[type="radio"] + label:before {
				-moz-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				-webkit-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				-ms-transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
				border-radius: 4px;
				border: solid 1px #ffffff;
				content: '';
				display: inline-block;
				height: 1.65rem;
				left: 0;
				line-height: calc(1.58125rem + 0em);
				position: absolute;
				text-align: center;
				top: -0.125rem;
				width: 1.65rem;
			}

		input[type="checkbox"]:checked + label:before,
		input[type="radio"]:checked + label:before {
			background: #ffffff !important;
			border-color: #ffffff !important;
			color: #1b1f22;
			content: '\f00c';
		}

		input[type="checkbox"]:focus + label:before,
		input[type="radio"]:focus + label:before {
			background: rgba(255, 255, 255, 0.075);
			border-color: #ffffff;
			box-shadow: 0 0 0 1px #ffffff;
		}

	input[type="checkbox"] + label:before {
		border-radius: 4px;
	}

	input[type="radio"] + label:before {
		border-radius: 100%;
	}

	::-webkit-input-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	:-moz-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	::-moz-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	:-ms-input-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}

	.formerize-placeholder {
		color: rgba(255, 255, 255, 0.5) !important;
		opacity: 1.0;
	}
	

/* Container */

	.container {
		margin: 0 auto;
		max-width: calc(100% - 100px);
		width: 1200px;
	}

		@media screen and (max-width: 1280px) {

			.container {
				width: 100%;
			}

		}

		@media screen and (max-width: 980px) {

			.container {
				width: 100%;
			}

		}

		@media screen and (max-width: 736px) {

			.container {
				width: 100%;
				max-width: 100%;
			}

		}

/* Row */

	.row {
		display: flex;
		flex-wrap: wrap;
		box-sizing: border-box;
		align-items: stretch;
	}

		.row > * {
			box-sizing: border-box;
		}

		.row.gtr-uniform > * > :last-child {
			margin-bottom: 0;
		}

		.row.aln-left {
			justify-content: flex-start;
		}

		.row.aln-center {
			justify-content: center;
		}

		.row.aln-right {
			justify-content: flex-end;
		}

		.row.aln-top {
			align-items: flex-start;
		}

		.row.aln-middle {
			align-items: center;
		}

		.row.aln-bottom {
			align-items: flex-end;
		}

		.row > .imp {
			order: -1;
		}

		.row > .col-1 {
			width: 8.33333%;
		}

		.row > .off-1 {
			margin-left: 8.33333%;
		}

		.row > .col-2 {
			width: 16.66667%;
		}

		.row > .off-2 {
			margin-left: 16.66667%;
		}

		.row > .col-3 {
			width: 25%;
		}

		.row > .off-3 {
			margin-left: 25%;
		}

		.row > .col-4 {
			width: 33.33333%;
		}

		.row > .off-4 {
			margin-left: 33.33333%;
		}

		.row > .col-5 {
			width: 41.66667%;
		}

		.row > .off-5 {
			margin-left: 41.66667%;
		}

		.row > .col-6 {
			width: 50%;
	}
	
	/* sjd - custom size for product pages  */
			.row > .col-15 {
			width: 100%;
	}

		.row > .off-6 {
			margin-left: 50%;
		}

		.row > .col-7 {
			width: 58.33333%;
		}

		.row > .off-7 {
			margin-left: 58.33333%;
		}

		.row > .col-8 {
			width: 66.66667%;
		}

		.row > .off-8 {
			margin-left: 66.66667%;
		}

		.row > .col-9 {
			width: 75%;
		}

		.row > .off-9 {
			margin-left: 75%;
		}

		.row > .col-10 {
			width: 83.33333%;
		}

		.row > .off-10 {
			margin-left: 83.33333%;
		}

		.row > .col-11 {
			width: 91.66667%;
		}

		.row > .off-11 {
			margin-left: 91.66667%;
		}

		.row > .col-12 {
			width: 100%;
		}

		.row > .off-12 {
			margin-left: 100%;
		}

		.row.gtr-0 {
			margin-top: 0px;
			margin-left: 0px;
		}

			.row.gtr-0 > * {
				padding: 0px 0 0 0px;
			}

			.row.gtr-0.gtr-uniform {
				margin-top: 0px;
			}

				.row.gtr-0.gtr-uniform > * {
					padding-top: 0px;
				}

		.row.gtr-25 {
			margin-top: -12.5px;
			margin-left: -12.5px;
		}

			.row.gtr-25 > * {
				padding: 12.5px 0 0 12.5px;
			}

			.row.gtr-25.gtr-uniform {
				margin-top: -12.5px;
			}

				.row.gtr-25.gtr-uniform > * {
					padding-top: 12.5px;
				}

		.row.gtr-50 {
			margin-top: -25px;
			margin-left: -25px;
		}

			.row.gtr-50 > * {
				padding: 25px 0 0 25px;
			}

			.row.gtr-50.gtr-uniform {
				margin-top: -25px;
			}

				.row.gtr-50.gtr-uniform > * {
					padding-top: 25px;
				}

		.row {
			margin-top: -50px;
			margin-left: -50px;
		}

			.row > * {
				padding: 50px 0 0 50px;
			}

			.row.gtr-uniform {
				margin-top: -50px;
			}

				.row.gtr-uniform > * {
					padding-top: 50px;
				}

		.row.gtr-150 {
			margin-top: -75px;
			margin-left: -75px;
		}

			.row.gtr-150 > * {
				padding: 75px 0 0 75px;
			}

			.row.gtr-150.gtr-uniform {
				margin-top: -75px;
			}

				.row.gtr-150.gtr-uniform > * {
					padding-top: 75px;
				}

		.row.gtr-200 {
			margin-top: -100px;
			margin-left: -100px;
		}

			.row.gtr-200 > * {
				padding: 100px 0 0 100px;
			}

			.row.gtr-200.gtr-uniform {
				margin-top: -100px;
			}

				.row.gtr-200.gtr-uniform > * {
					padding-top: 100px;
				}

		@media screen and (max-width: 1280px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-large {
					order: -1;
				}

				.row > .col-1-large {
					width: 8.33333%;
				}

				.row > .off-1-large {
					margin-left: 8.33333%;
				}

				.row > .col-2-large {
					width: 16.66667%;
				}

				.row > .off-2-large {
					margin-left: 16.66667%;
				}

				.row > .col-3-large {
					width: 100%;
				}

				.row > .off-3-large {
					margin-left: 25%;
				}

				.row > .col-4-large {
					width: 33.33333%;
				}

				.row > .off-4-large {
					margin-left: 33.33333%;
				}

				.row > .col-5-large {
					width: 41.66667%;
				}

				.row > .off-5-large {
					margin-left: 41.66667%;
				}

				.row > .col-6-large {
					width: 50%;
				}

				.row > .off-6-large {
					margin-left: 50%;
				}

				.row > .col-7-large {
					width: 58.33333%;
				}

				.row > .off-7-large {
					margin-left: 58.33333%;
				}

				.row > .col-8-large {
					width: 66.66667%;
				}

				.row > .off-8-large {
					margin-left: 66.66667%;
				}

				.row > .col-9-large {
					width: 75%;
				}

				.row > .off-9-large {
					margin-left: 75%;
				}

				.row > .col-10-large {
					width: 83.33333%;
				}

				.row > .off-10-large {
					margin-left: 83.33333%;
				}

				.row > .col-11-large {
					width: 91.66667%;
				}

				.row > .off-11-large {
					margin-left: 91.66667%;
				}

				.row > .col-12-large {
					width: 100%;
				}

				.row > .off-12-large {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -8.75px;
					margin-left: -8.75px;
				}

					.row.gtr-25 > * {
						padding: 8.75px 0 0 8.75px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -8.75px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 8.75px;
						}

				.row.gtr-50 {
					margin-top: -17.5px;
					margin-left: -17.5px;
				}

					.row.gtr-50 > * {
						padding: 17.5px 0 0 17.5px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -17.5px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 17.5px;
						}

				.row {
					margin-top: -35px;
					margin-left: -35px;
				}

					.row > * {
						padding: 35px 0 0 35px;
					}

					.row.gtr-uniform {
						margin-top: -35px;
					}

						.row.gtr-uniform > * {
							padding-top: 35px;
						}

				.row.gtr-150 {
					margin-top: -52.5px;
					margin-left: -52.5px;
				}

					.row.gtr-150 > * {
						padding: 52.5px 0 0 52.5px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -52.5px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 52.5px;
						}

				.row.gtr-200 {
					margin-top: -70px;
					margin-left: -70px;
				}

					.row.gtr-200 > * {
						padding: 70px 0 0 70px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -70px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 70px;
						}

		}

		@media screen and (max-width: 980px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-medium {
					order: -1;
				}

				.row > .col-1-medium {
					width: 8.33333%;
				}

				.row > .off-1-medium {
					margin-left: 8.33333%;
				}

				.row > .col-2-medium {
					width: 16.66667%;
				}

				.row > .off-2-medium {
					margin-left: 16.66667%;
				}

				.row > .col-3-medium {
					width: 25%;
				}

				.row > .off-3-medium {
					margin-left: 25%;
				}

				.row > .col-4-medium {
					width: 33.33333%;
				}

				.row > .off-4-medium {
					margin-left: 33.33333%;
				}

				.row > .col-5-medium {
					width: 41.66667%;
				}

				.row > .off-5-medium {
					margin-left: 41.66667%;
				}

				.row > .col-6-medium {
					width: 50%;
				}

				.row > .off-6-medium {
					margin-left: 50%;
				}

				.row > .col-7-medium {
					width: 58.33333%;
				}

				.row > .off-7-medium {
					margin-left: 58.33333%;
				}

				.row > .col-8-medium {
					width: 66.66667%;
				}

				.row > .off-8-medium {
					margin-left: 66.66667%;
				}

				.row > .col-9-medium {
					width: 75%;
				}

				.row > .off-9-medium {
					margin-left: 75%;
				}

				.row > .col-10-medium {
					width: 83.33333%;
				}

				.row > .off-10-medium {
					margin-left: 83.33333%;
				}

				.row > .col-11-medium {
					width: 91.66667%;
				}

				.row > .off-11-medium {
					margin-left: 91.66667%;
				}

				.row > .col-12-medium {
					width: 100%;

				}

				.row > .off-12-medium {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -12.5px;
					margin-left: -12.5px;
				}

					.row.gtr-25 > * {
						padding: 12.5px 0 0 12.5px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -12.5px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 12.5px;
						}

				.row.gtr-50 {
					margin-top: -25px;
					margin-left: -25px;
				}

					.row.gtr-50 > * {
						padding: 25px 0 0 25px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -25px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 25px;
						}

				.row {
					margin-top: -50px;
					margin-left: -50px;
				}

					.row > * {
						padding: 50px 0 0 50px;
					}

					.row.gtr-uniform {
						margin-top: -50px;
					}

						.row.gtr-uniform > * {
							padding-top: 50px;
						}

				.row.gtr-150 {
					margin-top: -75px;
					margin-left: -75px;
				}

					.row.gtr-150 > * {
						padding: 75px 0 0 75px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -75px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 75px;
						}

				.row.gtr-200 {
					margin-top: -100px;
					margin-left: -100px;
				}

					.row.gtr-200 > * {
						padding: 100px 0 0 100px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -100px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 100px;
						}

		}

		@media screen and (max-width: 736px) {

			.row {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				align-items: stretch;
			}

				.row > * {
					box-sizing: border-box;
				}

				.row.gtr-uniform > * > :last-child {
					margin-bottom: 0;
				}

				.row.aln-left {
					justify-content: flex-start;
				}

				.row.aln-center {
					justify-content: center;
				}

				.row.aln-right {
					justify-content: flex-end;
				}

				.row.aln-top {
					align-items: flex-start;
				}

				.row.aln-middle {
					align-items: center;
				}

				.row.aln-bottom {
					align-items: flex-end;
				}

				.row > .imp-small {
					order: -1;
				}

				.row > .col-1-small {
					width: 8.33333%;
				}

				.row > .off-1-small {
					margin-left: 8.33333%;
				}

				.row > .col-2-small {
					width: 16.66667%;
				}

				.row > .off-2-small {
					margin-left: 16.66667%;
				}

				.row > .col-3-small {
					width: 25%;
				}

				.row > .off-3-small {
					margin-left: 25%;
				}

				.row > .col-4-small {
					width: 33.33333%;
				}

				.row > .off-4-small {
					margin-left: 33.33333%;
				}

				.row > .col-5-small {
					width: 41.66667%;
				}

				.row > .off-5-small {
					margin-left: 41.66667%;
				}

				.row > .col-6-small {
					width: 50%;
				}

				.row > .off-6-small {
					margin-left: 50%;
				}

				.row > .col-7-small {
					width: 58.33333%;
				}

				.row > .off-7-small {
					margin-left: 58.33333%;
				}

				.row > .col-8-small {
					width: 66.66667%;
				}

				.row > .off-8-small {
					margin-left: 66.66667%;
				}

				.row > .col-9-small {
					width: 75%;
				}

				.row > .off-9-small {
					margin-left: 75%;
				}

				.row > .col-10-small {
					width: 83.33333%;
				}

				.row > .off-10-small {
					margin-left: 83.33333%;
				}

				.row > .col-11-small {
					width: 91.66667%;
				}

				.row > .off-11-small {
					margin-left: 91.66667%;
				}

				.row > .col-12-small {
					width: 100%;
				}

				.row > .off-12-small {
					margin-left: 100%;
				}

				.row.gtr-0 {
					margin-top: 0px;
					margin-left: 0px;
				}

					.row.gtr-0 > * {
						padding: 0px 0 0 0px;
					}

					.row.gtr-0.gtr-uniform {
						margin-top: 0px;
					}

						.row.gtr-0.gtr-uniform > * {
							padding-top: 0px;
						}

				.row.gtr-25 {
					margin-top: -2.5px;
					margin-left: -2.5px;
				}

					.row.gtr-25 > * {
						padding: 2.5px 0 0 2.5px;
					}

					.row.gtr-25.gtr-uniform {
						margin-top: -2.5px;
					}

						.row.gtr-25.gtr-uniform > * {
							padding-top: 2.5px;
						}

				.row.gtr-50 {
					margin-top: -5px;
					margin-left: -5px;
				}

					.row.gtr-50 > * {
						padding: 5px 0 0 5px;
					}

					.row.gtr-50.gtr-uniform {
						margin-top: -5px;
					}

						.row.gtr-50.gtr-uniform > * {
							padding-top: 5px;
						}

				.row {
					margin-top: -10px;
					margin-left: -10px;
				}

					.row > * {
						padding: 10px 0 0 10px;
					}

					.row.gtr-uniform {
						margin-top: -10px;
					}

						.row.gtr-uniform > * {
							padding-top: 10px;
						}

				.row.gtr-150 {
					margin-top: -15px;
					margin-left: -15px;
				}

					.row.gtr-150 > * {
						padding: 15px 0 0 15px;
					}

					.row.gtr-150.gtr-uniform {
						margin-top: -15px;
					}

						.row.gtr-150.gtr-uniform > * {
							padding-top: 15px;
						}

				.row.gtr-200 {
					margin-top: -20px;
					margin-left: -20px;
				}

					.row.gtr-200 > * {
						padding: 20px 0 0 20px;
					}

					.row.gtr-200.gtr-uniform {
						margin-top: -20px;
					}

						.row.gtr-200.gtr-uniform > * {
							padding-top: 20px;
						}

		}

/* Section/Article */

	section, article {
		margin-bottom: 5em;
	}

	section > :last-child,
	article > :last-child,
	section:last-child,
	article:last-child {
		margin-bottom: 0;
	}

	header {
		margin: 0 0 2em 0;
	}


	/*	header h2 {
			margin: 0 0 0.2em 0;
		}
	*/
		
		/* SJD custom style - space after synthname on index prod area h3 at largest screen*/
				header h3 {
			margin: 0 0 0em 0;
		}


		header p {
			display: block;
			text-transform: uppercase;
			font-weight: 700;
			letter-spacing: 0.065em;
			font-size: 1em;
		color: #ebebeb;
			margin: 0;
		}
		
		/* SJD SUBHEAD text  incl text below h3 in small synth image area */
		
			/* SJD custom style - "new presets" below synthname in product area on index page */
				header p.prod3 {
			display: block;
			text-transform: uppercase;
			font-weight: 400;
			letter-spacing: 0.065em;
			font-size: 1.3em;
		/*	color: #ebebeb;	*/
			color: #ebebeb;
			margin: 0;
		}   
		
		/* SJD custom bold style override  - "new presets" below synthname in product area on index page */
				header p.prod3 strong {
			font-weight: 600;
			color: #ebebeb;
		}
		
		
		/* SJD custom style - "300 etc ultimate patches" below synthname in product area on index page */
				header p.larger {
			display: block;
			text-transform: uppercase;
			font-weight:700;
			letter-spacing: 0.065em;
			font-size: 1.1em;
			color: #ccc200;
			margin: 0 ;
		}   

		/* SJD custom style - "as seen on" below synthname in product area on index page */
				header p.smallerlighter {
			display: block;
			text-transform: uppercase;
			font-weight: 400;
			letter-spacing: 0.065em;
			font-size: 0.9em;
			color: #ebebeb;
			margin: 0;
		}
		
			header p strong {
				color: #ebebeb;
				font-weight: 800;
			}

	footer {
		margin: 2.5em 0 0 0;
	}

	header.major {
		border-bottom: solid 1px #dbdbdb;
		margin: 0 0 3em 0;
	}

		header.major:after {
			content: '';
			display: block;
			border-top: solid 1px #dbdbdb;
			height: 8px;
		}

		header.major h3 {
			margin: 0 0 1.2em 0;
		}

		header.major p {
			margin: 0 0 1.5em 0;
			position: relative;
			top: -1em;
		}

/* Forms */

	form label {
		display: block;
		text-transform: uppercase;
		font-weight: 800;
		letter-spacing: 0.04em;
		color: #ebebeb;
		margin: 0 0 1em 0;
		font-size: 0.8em;
	}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"],
	form select,
	form textarea {
		-webkit-appearance: none;
		display: block;
		width: 100%;
		border-radius: 8px;
		border: solid 1px #eee;
	}

	form input[type="text"]:focus,
	form input[type="email"]:focus,
	form input[type="password"]:focus,
	form select:focus,
	form textarea:focus {
		box-shadow: 0 0 2px 1px #4091bf;
	}

	form input[type="text"],
	form input[type="email"],
	form input[type="password"] {
		line-height: 3em;
		padding: 0 1em;
	}

	form select {
		line-height: 3em;
		padding: 0 1em;
	}

	form textarea {
		min-height: 9em;
		padding: 1em;
	}

	form ::-webkit-input-placeholder,
	form :-moz-placeholder,
	form ::-moz-placeholder,
	form :-ms-input-placeholder {
		color: #555 !important;
	}

	form ::-moz-focus-inner {
		border: 0;
	}

/* Tables */

	table {
		width: 100%;
	}

		table.default {
			width: 100%;
		}

			table.default tr {
				border-top: solid 1px #eee;
			}

				table.default tr:first-child {
					border-top: 0;
				}

			table.default td {
				padding: 0.5em 1em 0.5em 1em;
			}

			table.default th {
				text-align: left;
				padding: 0.5em 1em 0.5em 1em;
				text-transform: uppercase;
				font-weight: 800;
				letter-spacing: 0.04em;
				margin: 0 0 1em 0;
				font-size: 0.8em;
			}

			table.default thead {
				background: #ebebeb;
				color: #fff;
			}

/* Image */

	.image {
		position: relative;
		display: inline-block;
	}

		.image img {
			display: block;
			width: 100%;
			border-radius: 8px;
		}

		.image:before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			background: url("images/bg01.png");
			width: 100%;
			height: 100%;
			opacity: 0.75;
		}

		.image.fit {
			display: block;
			width: 100%;
		}

/* SJD space around featured synth image: */
		.image.featured {
			display: block;
			width: 100%;
			margin: 0 0 0.5em 0;
		}
		
				      .image.featured:hover {
            color: #111;	
	border-style: solid;
    border-color: #fff;
	            background: #03C;
            box-shadow: 0 0 400px 25px #03C;
			-webkit-box-shadow: 0 0 400px 25px #03C;
			-moz-box-shadow: 0 0 400px 25px #03C;
        }	

		.image.left {
			float: left;
			margin: 0 2em 2em 0;
		}

		.image.centered {
			display: block;
			margin: 0 0 2.5em 0;
		}

			.image.centered img {
				margin: 0 auto;
				width: auto;
			}
			

/* Button */

	input[type="button"],
	input[type="submit"],
	input[type="reset"],
	button,
	.button {
		background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)), url("images/bg02.png");
		background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)), url("images/bg02.png");
		background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)), url("images/bg02.png");
		background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)), url("images/bg02.png");
		-moz-transition: background-color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out;
		-webkit-appearance: none;
		position: relative;
		display: inline-block;
		background-color: #204486;
		border-radius: 8px;
		box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.35), inset 0px 2px 1px 0px rgba(255, 255, 255, 0.35);
		text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
		color: #fff !important;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: 800;
		font-size: 0.95em;
		letter-spacing: 0.075em;
		padding: 1em 2em;
		outline: 0;
		border: 0;
		white-space: nowrap;
		cursor: pointer;
	}

		input[type="button"].icon:before,
		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		button.icon:before,
		.button.icon:before {
			opacity: 0.5;
			margin-right: 0.5em;
			position: relative;
			top: 0.05em;
		}

		input[type="button"]:hover,
		input[type="submit"]:hover,
		input[type="reset"]:hover,
		button:hover,
		.button:hover {
			background-color: #467ad8;
		}

		input[type="button"]:active,
		input[type="submit"]:active,
		input[type="reset"]:active,
		button:active,
		.button:active {
			background-color: #3081af;
		}

		input[type="button"].medium,
		input[type="submit"].medium,
		input[type="reset"].medium,
		button.medium,
		.button.medium {
			font-size: 1.25em;
			padding: 1em 2.25em;
		}

		input[type="button"].large,
		input[type="submit"].large,
		input[type="reset"].large,
		button.large,
		.button.large {
			font-size: 1.5em;
			padding: 1em 2.25em;
		}

		input[type="button"].alt,
		input[type="submit"].alt,
		input[type="reset"].alt,
		button.alt,
		.button.alt {
			background-color: #464a52;
		}

			input[type="button"].alt:hover,
			input[type="submit"].alt:hover,
			input[type="reset"].alt:hover,
			button.alt:hover,
			.button.alt:hover {
				background-color: #565a62;
			}

			input[type="button"].alt:active,
			input[type="submit"].alt:active,
			input[type="reset"].alt:active,
			button.alt:active,
			.button.alt:active {
				background-color: #363a42;
			}

/* LIST - sjd ported from 2017 prodpgs  */
/* List */


	ol {
		list-style: decimal;
		margin: 0 0 2rem 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.25em;
		}

/*	sjd - bullet / text padding from left edge	*/
	ul {
		list-style: disc;
		margin: 0 0 2rem 0;
		padding-left: 1.25rem;
	}

/*	sjd - space between bullet and text following	*/
		ul li {
			padding-left: 0.15em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px #ebebeb;
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

		ul.icons {
			cursor: default;
			list-style: none;
			padding-left: 0;
		}

			ul.icons li {
				display: inline-block;
				padding: 0 0.75em 0 0;
			}

				ul.icons li:last-child {
					padding-right: 0;
				}

				ul.icons li a {
					border-radius: 100%;
					box-shadow: inset 0 0 0 1px #ebebeb;
					display: inline-block;
					height: 2.25rem;
					line-height: 2.25rem;
					text-align: center;
					width: 2.25rem;
				}

					ul.icons li a:hover {
						background-color: rgba(255, 255, 255, 0.075);
					}

					ul.icons li a:active {
						background-color: rgba(255, 255, 255, 0.175);
					}

		ul.actions {
			cursor: default;
			list-style: none;
			padding-left: 0;
		}

			ul.actions li {
				display: inline-block;
				padding: 0 1rem 0 0;
				vertical-align: middle;
			}

				ul.actions li:last-child {
					padding-right: 0;
				}

			ul.actions.small li {
				padding: 0 0.5rem 0 0;
			}

			ul.actions.vertical li {
				display: block;
				padding: 1rem 0 0 0;
			}

				ul.actions.vertical li:first-child {
					padding-top: 0;
				}

				ul.actions.vertical li > * {
					margin-bottom: 0;
				}

			ul.actions.vertical.small li {
				padding: 0.5rem 0 0 0;
			}

				ul.actions.vertical.small li:first-child {
					padding-top: 0;
				}

			ul.actions.fit {
				display: table;
				margin-left: -1rem;
				padding: 0;
				table-layout: fixed;
				width: calc(100% + 1rem);
			}

				ul.actions.fit li {
					display: table-cell;
					padding: 0 0 0 1rem;
				}

					ul.actions.fit li > * {
						margin-bottom: 0;
					}

				ul.actions.fit.small {
					margin-left: -0.5rem;
					width: calc(100% + 0.5rem);
				}

					ul.actions.fit.small li {
						padding: 0 0 0 0.5rem;
					}

			@media screen and (max-width: 480px) {

				ul.actions {
					margin: 0 0 2rem 0;
				}

					ul.actions li {
						padding: 1rem 0 0 0;
						display: block;
						text-align: center;
						width: 100%;
					}

						ul.actions li:first-child {
							padding-top: 0;
						}

						ul.actions li > * {
							width: 100%;
							margin: 0 !important;
						}

							ul.actions li > *.icon:before {
								margin-left: -2em;
							}

					ul.actions.small li {
						padding: 0.5rem 0 0 0;
					}

						ul.actions.small li:first-child {
							padding-top: 0;
						}

			}

	dl {
		margin: 0 0 2rem 0;
	}

		dl dt {
			display: block;
			font-weight: 600;
			margin: 0 0 1rem 0;
		}

		dl dd {
			margin-left: 2rem;
		}

		
		

/* Box */

	.box.excerpt {
		position: relative;
		overflow: hidden;
	}

		.box.excerpt header {
			margin: 0 0 1em 0;
		}

		.box.excerpt .image, .box.excerpt p {
			margin-bottom: 0;
		}

	.box.feature1 {
		text-align: center;
	}

/* SJD space below synth boxes */
		.box.feature1 header {
			margin-bottom: 0.1em;
		}

/*			.box.feature1 header.first h2 {
				font-size: 2.5em;
			}
			*/

			.box.feature1 header.first p {
				font-size: 1.4em;
			}

			.box.feature1 header.second {
				position: relative;
				display: inline-block;
				text-align: left;
				margin: 0 auto;
				white-space: nowrap;
				left: 24px;
			}

				.box.feature1 header.second p {
					line-height: 1em;
				}

				.box.feature1 header.second:before {
					font-size: 48px;
					position: absolute;
					right: 100%;
					margin-right: 18px;
					opacity: 0.5;
					bottom: -4px;
				}

	.box.feature2 {
		text-align: center;
	}


	.box.article-list article {
		border-bottom: solid 1px #dbdbdb;
		margin: 0 0 2.75em 0;
		padding: 0 0 2.75em 0;
	}

		.box.article-list article:last-child {
			border-bottom: 0;
			margin-bottom: 0;
			padding-bottom: 0;
		}

/* Icons */

	.icon {
		text-decoration: none;
		text-decoration: none;
	}


		.icon:before {
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			display: inline-block;
			font-style: normal;
			font-variant: normal;
			text-rendering: auto;
			line-height: 1;
			text-transform: none !important;
			font-family: 'Font Awesome 5 Free';
			font-weight: 400;
		}

		.icon.solid:before {
			font-weight: 900;
		}

		.icon.brands:before {
			font-family: 'Font Awesome 5 Brands';
		}

		.icon > .label {
			display: none;
		}

/* Nav */

/* sjd - position of links (not left logo) in top navbar. added z-index. NOTE: navbar specs are in #header*/
	#nav {
		position: absolute;
/*		z-index: 3;   */
		right: 2em;
		top: 0;
		line-height: 3.47em;
	}

/* sjd - "2nd/4th values of "padding" is space between word sections in long (top) nav*/
		#nav > ul > li {
			float: left;
			padding: 0 0.62em 0 0.62em;
		}
/* this is the top nav text specs - color was #ccc200 before */
			#nav > ul > li > a, #nav > ul > li > span {
			/*	color: #ccc200;  */
				text-decoration: none;
				text-transform: uppercase;
				font-weight: 600;
				font-size: 0.95em;
				letter-spacing: 0.075em;
				padding: 0.5em 0.01em 0.5em 0.08em;
				border-radius: 6px;
				outline: 0;
			}

			#nav > ul > li.active > a,
			#nav > ul > li.current_page_item > a,
			#nav > ul > li.active > span,
			#nav > ul > li.current_page_item > span {
			background: rgba(0, 0, 0, 0.15);	
				box-shadow: inset 1px 1px 0px 0px rgba(0, 0, 0, 0.025), 1px 1px 0px 0px rgba(255, 255, 255, 0.025);
			}

			#nav > ul > li:last-child {
				padding-right: 0;
			}

			#nav > ul > li > ul {
				display: none;
			}

/*  sjd - this is the TOP nav menu's dropdowns. padding is space around top main texts*/
	.dropotron {
		background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)), url("images/bg02.png");
		background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)), url("images/bg02.png");
		background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)), url("images/bg02.png");
		background-image: linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0)), url("images/bg02.png");
		position: relative;
		background-color: #051738;
		background-color: rgba(10, 23, 63, 0.9); 
	/* sjd - orig grey:	background-color: #3B3E45;	*/
	/* sjd - orig grey:	background-color: rgba(59, 62, 69, 0.95); */
		border-radius: 8px;
		box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 2px rgba(255, 255, 255, 0.075), inset 0px 2px 1px 0px rgba(255, 255, 255, 0.2), 0px 2px 14px 0px rgba(0, 0, 0, 0.4);
		text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
		padding: 1.5em 0 0.5em 1.5em;
		line-height: 2.2em;
		min-width: 15em;
	}

		.dropotron.level-0 {
			border-top-left-radius: 0;
			border-top-right-radius: 0;
			margin-top: -1px;  /* sjd vertical position of entire dropdown first level   */
			box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 2px rgba(255, 255, 255, 0.075), 0px 2px 14px 0px rgba(0, 0, 0, 0.4);
		}

/* sjd - text in dropdown links  */
		.dropotron a, .dropotron span {
			color: #ebebeb;
			text-decoration: none;
			text-transform: uppercase;
			font-weight: 600;
			font-size: 0.85em;
			letter-spacing: 0.04em;
			outline: 0;  
			font-family: Open Sans;
			
				position:relative;
		  top:-0.55em;  	
		}

		.dropotron li:hover > a, .dropotron li:hover > span {
			color: #ccc200;
		}

/* Banner */
	#banner {
	text-align: center;
	width: 940px;
	margin: 0 auto;
	overflow: hidden;
	padding: 5em 0 4em 0;
	}
	
		#banner2 {
		text-align: left;
		width: 940px;
		margin: 0 auto;
		overflow: hidden;
		padding: 5em 0 4em 0;
	}




/* Sidebar */

	#sidebar h2 {
		font-size: 1.1em;
	}

/* Wrappers */
/* sjd header aka banner bg color/img etc on main site index page */
	#header-wrapper {
	/*		background: url("images/bg01.png"), url("../../images2/header.jpg"); */
	background-position: top left, center center;
	background-size: cover;
	padding: 3em 0;
	background-image: url(https://www.ultimatepatches.com/images2/header.jpg);
	}
	
		/* sjd header aka banner bg color/img bg etc for new prod page-*/
	#header3-wrapper {
	/*		background: url("images/bg01.png"), url("../../images2/header.jpg"); */
	background-position: top left, center center;
	background-size: cover;
	padding: 3em 0;
/*	background-image: url(https://www.ultimatepatches.com/images2/bg-nu.jpg);    */
	}
	
	/* sjd header aka banner bg color/img etc for non-main index page-*/
	#header2-wrapper {
	/*		background: url("images/bg01.png"), url("../../images2/header.jpg"); */
	background-position: top left, center center;
	background-size: cover;
	padding: 3em 0;
	background-image: url(https://www.ultimatepatches.com/images2/bg-nonmain.jpg);
	}

/* sjd other layout area bg color/img etc */
	#main-wrapper {
		background: #051738;
	}

	#footer-wrapper {
		background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url("images/bg03.png"), url("images/bg02.png");
		background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url("images/bg03.png"), url("images/bg02.png");
		background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url("images/bg03.png"), url("images/bg02.png");
		background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url("images/bg03.png"), url("images/bg02.png");     
		position: relative;
		background-repeat: repeat-x, no-repeat, repeat;
		background-size: 100% 100%, 100% 15em, auto auto;
		background-position: top left, top center, top left;
		padding: 1.5em 0 7em 0;
	}    

/* sjd - padding around header banner at Largest screen size*/
	.wrapper {
		padding: 1.5em 0 1.5em 0;
	}

		.wrapper > .inner {
			position: relative;
			z-index: 2;
		}
		
/* sjd - bg color etc of the index page's products area */
		.wrapper.style1 {
			position: relative;
/*			text-shadow: 1px 1px 0 #fff;	*/
			background-color: #051738;
			background-image: url("images/bg03.png"), url("images/bg04.png"), url("images/bg02.png");
			background-repeat: no-repeat, no-repeat, repeat;
			background-size: 100% 15em, 100% 15em, auto auto;
			background-position: top center, bottom center, top left;  
		} 
		
		
		/* sjd custom style for footer */
		.wrapper.style2 {
			position: relative;
	/*		background-color: #051738;
			background-image: url("images/bg03.png"), url("images/bg02.png");
			background-repeat: no-repeat, repeat;
			background-size: 100% 15em, auto auto;
			background-position: top center, top left;	*/
			border-top: solid 7px;
		border-color: #444;
		border-color: rgba(255, 255, 255, 0.4);
		}

/* sjd bg color etc of "news page aka small pic plus text on right side" area */
		.wrapper.style3 {
			position: relative;
	/*			text-shadow: 1px 1px 0 #fff;	*/
			background-color: #051738;
			background-image: url("images/bg03.png"), url("images/bg02.png");
			background-repeat: no-repeat, repeat;
			background-size: 100% 15em, auto auto;
			background-position: top center, top left;
		}
		
		/* sjd bg color etc of "news page aka small pic plus text on right side" area */
		.wrapper.style69 {
			position: relative;
	/*			text-shadow: 1px 1px 0 #fff;	*/
			background-color: #ccc200;
			background-image: url("images/bg03.png"), url("images/bg02.png");
			background-repeat: no-repeat, repeat;
			background-size: 100% 15em, auto auto;
			background-position: top center, top left;
		}


/* Header */
/* Header - sjd - this is area containing top full nav-bar (not small scrn side nav). Padding is the semi-transparent border around that nav. NOTE dropotron is dropdowns*/

	#header {
		position: relative;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.4);
		padding: 0.40em;   
		margin-bottom: 0;
	}

		#header .inner {
			background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg02.png");
			background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg02.png");
			background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg02.png");
			background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg02.png");
			position: relative;
			height: 3.5em;
			background-color: #051738;
			
/* sjd - box bg color, and shadow/highlight aka inner border */
		/* sjd orig	background-color: rgba(59, 62, 69, 0.9);  */ 
		 background-color: rgba(10, 23, 63, 0.9);	
			border-radius: 8px;
			box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.45), inset 0px 2px 1px 0px rgba(255, 255, 255, 0.15);
			text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);    
		}

 /* sjd top navbar - left side (logo area) note: "top" is vert align of all logo/text at largest screen size*/

		
		.logohomeb {
			position: absolute;
			left: 1.75em;
			top: 50%;
			margin-top: -0.50em !important;
	/*		font-size: 2.1em;	*/
			font-weight: 400;
			color: #ccc200;
			text-decoration: none !important;
		}
		
				.logohomeb a {

			text-decoration: none !important;
		}
		
		
		.logohome {
			position: absolute;
			left: 1.75em;
			top: 50%;
			margin-top: -0.50em !important;
	/*		font-size: 2.1em;  */
			font-weight: 400;
			color: #ccc200;
			text-decoration: none !important;
		}
		
						.logohome a {

			text-decoration: none !important;
		}
		

	

/* Footer */

	#footer {
		margin-bottom: 0;
		text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.5);
		position: relative;
		z-index: 2;
	}

		#footer h2 {
			font-size: 1.35em;
			color: #fff;
		}

		#footer strong {
			color: #fff;
		}

		#footer a {
			color: #acb2bf;
		}

		#footer .button.alt {
			box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 1px 0px rgba(255, 255, 255, 0.25);
		}

/*	sjd - footer lists with lines in between	*/
		#footer ul.divided li, #footer ul.menu li {
			border-color: #c2c2c2;
			border-color: rgba(255, 255, 255, 0.6);
		}

		#footer ul.divided li a {
			text-decoration: none;
		}

		#footer ul.menu {
			margin: 0;
		}

		#footer dl.contact dt {
			color: #ddd;
		}

	#copyright {
	/*	border-top: solid 1px;
		border-color: #444;
		border-color: rgba(255, 255, 255, 0.25);
		margin-top: 2em;
		padding: 3em 0 0.2em 0;	*/
	text-align: center;
		font-family: Open Sans !important;
	letter-spacing: 0.07rem;
	font-size: 0.7rem;
	text-transform: uppercase;
	}	

		#copyright a {
			color: inherit;
		}
		
		#sitesecured {
	/*	border-top: solid 1px;
		border-color: #444;
		border-color: rgba(255, 255, 255, 0.25);
		margin-top: 2em;
		padding: 3em 0 0.2em 0;	*/
	text-align: center;
	color: #ccc200;
	font-family: Open Sans !important;
	font-size: 0.7rem;
		letter-spacing: 0.08rem;
	font-weight: 400;
	}	

/* LARGE */

	@media screen and (max-width: 1280px) {

		/* Basic */
		

				/* SJD - "body" is line spacing for ALL text at this "large" screen res (1280) AND med res (980) */


			body {
				line-height: 1.3em;    
				font-size: 10.75pt;
			}

			input, select, textarea {
				line-height: 1.75em;
				font-size: 10.75pt;
			}

		/* Wrappers */

/* sjd - padding around header banner at Large screen size*/
			#header-wrapper {
				padding: 1em 0;
			}

			body.homepage #header-wrapper {
				height: auto;
			}

			#footer-wrapper {
				padding: 3em 0 4.5em 0;
			}

/* sjd - padding around index page all product photos area at 2nd Largest and Medium screen sizes*/
			.wrapper {
				padding: 0.2em 0 0.2em 0;
			}
			
			
						 /* sjd top navbar - left side (logo area) note: "top" is vert align of all logo/text AT LARGE SIZE*/
		.logohomeb {
			position: absolute;
			left: 1.75em;
			top: 50%;
			margin-top: -0.43em !important;
	/*		font-size: 2.1em;	*/
			font-weight: 400;
			color: #ccc200;
			text-decoration: none !important;
		}
		
		.logohome {
			position: absolute;
			left: 1.75em;
			top: 50%;
			margin-top: -0.43em !important;
	/*		font-size: 2.1em;  */
			font-weight: 400;
			color: #ccc200;
			text-decoration: none !important;
		}


		/* Banner */
		/* sjd - at Large screen size: padding around the main page banner text/border lines . Margin is space below big text before subhead text*/

/* sjd - this is the size of the banner with bg image under top nav   */
			#banner {
				width: 100%;
				padding: 2.5em 0 2.5em 0;
			}

				#banner h4 {
					font-size: 2.2em;
					line-height: 1.3em;
					margin: 0 0 0.4em 0;
				}


	#banner p {
	font-size: 1.1em;
	color: #fff;
	line-height: 1.75em;
	letter-spacing: 0.04em;
	float: none;
	text-align: center;
	width: 100%;
	margin: -1em 0 1em 0;
				}
				
				

								/* sjd custom style override for footer at large size */
		.wrapper.style2 {
	position: relative;
/*	background-color: #051738;
	background-image: url("images/bg03.png"), url("images/bg02.png");
	background-repeat: no-repeat, repeat;
	background-size: 100% 15em auto auto;
	background-position: top center, top left;	*/
	border-bottom: solid 0px !important;	
	border-top: solid 7px;
	border-color: #444;
	border-color: rgba(255, 255, 255, 0.4);
	padding-bottom: 2em;
		}  
		
				.maintextfaq {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 400;
		font-size: 11pt;
		letter-spacing: 0.02em;
		line-height: 1.3em;
		text-align: left !important;
		margin: 0 0 0.5em 0 !important; 
	}
	
			.maintextfaq-strong {
		font-family: 'Open Sans', sans-serif;
		color: #ccc200;
		font-weight: 700 !important;
		font-size: 11pt;
		letter-spacing: 0.02em;
		line-height: 1.3em;
		text-align: left !important;
				margin: 2.25em 0 0.5em 0 !important;
	}       
	
			.maintextfaq-c {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 400;
		font-size: 11pt;
		letter-spacing: 0.02em;
		line-height: 1.3em;
		text-align: center !important;
		margin: 0 0 0.5em 0 !important; 
	}
	
				.maintextfaq-c-fat {
		font-family: 'Open Sans', sans-serif;
		color: #d40000;
		font-weight: 700 !important;
		font-size: 20pt;
		letter-spacing: 0em !important;
		line-height: 1.1em;
		text-align: center !important;
		margin: 0 0 0.5em 0 !important; 
	}
	
					.sm-maintextfaq-c {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 400;
		font-size: 8.5pt !important;
		letter-spacing: 0.02em !important;
		line-height: 1.2em !important;
		text-align: center;
		margin: 0 0 0.5em 0 ; 
	}
	
							.maintextfaq-strong-c {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 700 !important;
		font-size: 11pt;
		letter-spacing: 0.02em;
		line-height: 1.3em;
		text-align: center !important;
				margin: 2.25em 0 0.5em 0 !important;
	}     
	
	.savebig {
	text-transform: uppercase;
	color: #d40000 !important;
	font-weight: 600 !important; 
	font-size: 2.8em !important; 
	line-spacing: 0em !important;
	letter-spacing: 0em !important;
	padding: 0 0 0 0 !important;
		margin: 0 0 0 0 !important;
	}
	
		.savebig2 {
	text-transform: uppercase;
	color: #CCC200 !important;
	font-weight: 300 !important; 
	font-size: 1.6em !important; 
	line-spacing: 0em !important;
		letter-spacing: 0em !important;
	padding: 0 0 0 0 !important;
	margin: 0 0 0 0 !important;
	}  

.style1 {font-size: 0.6rem;
font-style: italic;
font-weight: 300;
padding-top: 2.3em !important;
/* letter-spacing: 0.01rem;   */
}

	}

/* MEDIUM - from here to small res, this is where the top nav gets replaced with the side nav*/

	#navPanel, #titleBar {
		display: none;
	}

	@media screen and (max-width: 980px) {

			
		/* Basic */

			html, body {
				overflow-x: hidden;
			}

		/* Box */

			.box.feature2 section {
				margin: 1em 0;
			}

		/* Nav sjd - this is speed that content page moves to/from right when sidenav opens/closes*/

			#page-wrapper {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				-moz-transition: -moz-transform 0.75s ease;
				-webkit-transition: -webkit-transform 0.75s ease;
				-ms-transition: -ms-transform 0.75s ease;
				transition: transform 0.75s ease;
				padding-bottom: 1px;
			}

/* specs of small titlebar */
			#titleBar {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg02.png");
				background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg02.png");
				background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg02.png");
				background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg02.png");
				-moz-transition: -moz-transform 0.5s ease;
				-webkit-transition: -webkit-transform 0.5s ease;
				-ms-transition: -ms-transform 0.5s ease;
				transition: transform 0.5s ease;
				background-color: rgba(10, 23, 63, 0.9);
				box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 2px rgba(255, 255, 255, 0.075), 0px 1px 6px 0px rgba(0, 0, 0, 0.35);
				display: block;
				height: 44px;
				left: 0;
				position: fixed;
				text-shadow: -1px -1px 0 black;
				top: 0;
				width: 100%;
				z-index: 10001;
			}

/* sjd - small size titlebar logo specs  */
				#titleBar .title {
					display: block;
					text-transform: uppercase;
					font-weight: 400;
					text-decoration: none;
					letter-spacing: 0.04em;
					color: #ccc200;
					line-height: 44px;
					text-align: center;
				}

				#titleBar .toggle {
					text-decoration: none;
					position: absolute;
					left: 0;
					top: 0;
					width: 60px;
					height: 44px;
					opacity: 0.60;
				}

/* sjd - this is small title bar with dropdown icon - f0c9 is fontawesome hamburger aka "lines" */
					#titleBar .toggle:before {
						-moz-osx-font-smoothing: grayscale;
						-webkit-font-smoothing: antialiased;
						display: inline-block;
						font-style: normal;
						font-variant: normal;
						text-rendering: auto;
						line-height: 1;
						text-transform: none !important;    
						font-family: 'Font Awesome 5 Free';
						font-weight: 900;
						color: #f9fdff;
					}

					#titleBar .toggle:before {
						display: inline-block;
						text-decoration: none;
						font-size: 18px;
						width: 44px;
						height: 44px;
						line-height: 44px;
						text-align: center;
						color: #fff;
						content: '\f0c9';
					}

/* opacity of the "flash" when you click the burger */
					#titleBar .toggle:active {
						opacity: 1;
					}
/* sjd - side nav panel */
			#navPanel {
				-moz-backface-visibility: hidden;
				-webkit-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
				background-image: -moz-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg01.png");
				background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg01.png");
				background-image: -ms-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg01.png");
				background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)), url("images/bg01.png");
				-moz-transform: translateX(-275px);
				-webkit-transform: translateX(-275px);
				-ms-transform: translateX(-275px);
				transform: translateX(-275px);
				-moz-transition: -moz-transform 0.25s ease;
				-webkit-transition: -webkit-transform 0.25s ease;
				-ms-transition: -ms-transform 0.25s ease;
				transition: transform 0.25s ease;
			/* orig grey		background-color: #303238;	*/
				background-color: rgba(10, 23, 63, 0.9);
				box-shadow: inset -1px 0px 0px 0px rgba(0, 0, 0, 0.5), inset -2px 0px 0px rgba(255, 255, 255, 0.15), inset -2px 0px 10px 0px rgba(0, 0, 0, 0.35);
				display: block;
				height: 100%;
				left: 0;
				overflow-y: auto;
				position: fixed;
				top: 0;
				width: 275px;
				z-index: 10002;
			}

/* sjd - side nav - lines between, plus the text - specs */
				#navPanel .link {
	display: block;
	color: #ccc200;
		font-family: Open Sans;
	text-decoration: none;
	height: 40px;
	line-height: 40px;
	border-top: solid 1px rgba(255, 255, 255, 0.3);
	border-bottom: solid 1px rgba(0, 0, 0, 0.15);
	padding: 0 1em 0 1em;
	text-transform: uppercase;
	font-weight: 600;
	font-size: 0.95em;
	letter-spacing: 0.05em;	
				}

					#navPanel .link:first-child {
						border-top: 0;
					}

					#navPanel .link:last-child {
						border-bottom: 0;
					}

				#navPanel .indent-1 {
	display: inline-block;
	width: 1em;
				}

				#navPanel .indent-2 {
	display: inline-block;
	width: 3em;
	background-color:#0F6

				}

				#navPanel .indent-3 {
					display: inline-block;
					width: 4em;
				}

				#navPanel .indent-4 {
					display: inline-block;
					width: 4em;
				}

				#navPanel .indent-5 {
					display: inline-block;
					width: 5em;
				}

				#navPanel .depth-0 {
					color: #fff;
				}

			body.navPanel-visible #page-wrapper {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #titleBar {
				-moz-transform: translateX(275px);
				-webkit-transform: translateX(275px);
				-ms-transform: translateX(275px);
				transform: translateX(275px);
			}

			body.navPanel-visible #navPanel {
				-moz-transform: translateX(0);
				-webkit-transform: translateX(0);
				-ms-transform: translateX(0);
				transform: translateX(0);
			}

		/* Header */

			#header, #nav {
				display: none;
			}

		/* Wrappers */

			#header-wrapper {
				display: none;
			}

			.homepage #header-wrapper {
				display: block;
				padding-top: 44px;
			}

			#main-wrapper {
				padding-top: 44px;
			}

			.homepage #main-wrapper {
				padding-top: 0;
			}

		/* Banner */
				/* sjd - padding around the main page banner at Medium screen size?*/

			#banner {
				padding: 3em 0 2em 0;
			}
			


/* sjd - code to disallow <br> line breaks in banner but disables banner text resize at small screen res so don't change this */
				#banner br {
					display: none; 
				}
			
		/* Sidebar */

			#sidebar {
				margin-top: 1em;
			}
			
			
			/* sjd- med scrnsize override for main and headline faq text  */
			.maintextfaq {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 400;
		font-size: 11pt !important;
		letter-spacing: 0.02em;
		line-height: 1.3em !important;
		text-align: left !important;
		margin: 0 0 0.5em 0; !important;
	}
	
							.maintextfaq-strong {
		font-family: 'Open Sans', sans-serif;
		color: #ccc200;
		font-weight: 700 !important;
		font-size: 11pt !important;
		letter-spacing: 0.02em;
		line-height: 1.3em !important;
		text-align: left !important;
				margin: 2.25em 0 0.5em 0 !important;
	}       
	
				.maintextfaq-c {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 400;
		font-size: 10pt !important;
		letter-spacing: 0.02em;
		line-height: 1.3em !important;
		text-align: center !important;
		margin: 0 0 0.5em 0; !important;
	}
	
							.maintextfaq-strong-c {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 700 !important;
		font-size: 10pt !important;
		letter-spacing: 0.02em;
		line-height: 1.3em !important;
		text-align: center !important;
				margin: 2.25em 0 0.5em 0 !important;
	}     
	
	}

/* SMALL - CELL SIZE */

	@media screen and (max-width: 736px) {

		/* Basic */
				/* SJD - note that "body" is text specs for ALL text at this "small" screen res  */


			body, input, select, textarea {
				line-height: 1.4em;
				font-size: 10.3pt;
				letter-spacing: 0;
		

			h3, h4, h5 {
				font-size: 12pt !important;
			}

/*			h2 {
				line-height: 1.5em;
			}	*/
			
			h4 {
				line-height: 1.5em;
			}
			
			h6 {
				font-size: 12pt !important;
				line-height: 1.5em;
				margin-top: 0.8em;
			}
			
			/* sjd - small screen override for address text   */
				dl.contact dd {
		margin: 0 0 1em 9em;
		font-size: 0.9em;
	}
	
	/* sjd - small screen override for address text   */
		dl.contact dt {
margin-top: 0.075em;
	}
			
/* sjd - small screen override for all banner text   */
				#banner p {
	font-size: 10pt ;
	color: #fff;
	line-height: 1.4em ;
	letter-spacing: 0em ;
	float: none;
	text-align: center;
	width: 100%;
/*	margin: -1em 0 1em 0;   */
				}

			
			/* SJD custom style - space after synthname on index prod area h3 at small screen*/
				header h3 {
			margin: 0 0 0.25em 0;
		}
			
						/* sdj - custom override for small size h3 version: for index product page synth names */
		h3.prod {
		font-size: 1em !important;
		line-height: 1.06em;
		letter-spacing: 0.03em;
		}
			
					/* SJD custom style override for small size - "300 etc ultimate patches" below synthname in product area on index page */
				header p.larger {
			line-height: 1.1em;
			font-size: 0.9em;
			letter-spacing: 0.05em;
		}   
		
			/* SJD custom style override for small size - "new presets" below synthname in product area on index page */
				header p.prod3 {
/* opt 1			margin: 0.4em 0 0 0;
				font-size: 0.75em;
				line-height: 1.1em;
				margin: 0.44em 0 -0.35em 0;	*/
				
/* opt 2 */		margin: 0.4em 0 0 0;
				font-size: 0.75em;
				line-height: 1.1em;
				margin: 0.44em 0 -0.35em 0;
				
/* opt 3 		margin: 0.4em 0 0 0;
				font-size: 0.75em;
				line-height: 1.1em;
				margin: 0.44em 0 -0.35em 0;  */
		}
		
		
		/* SJD custom bold style override for small size - "new presets" below synthname in product area on index page */
				header p.prod3 strong {
			font-weight: 700;
		}
		
					/* SJD custom style override for small size - "as seen on" below synthname in product area on index page */
				header p.smallerlighter {
/* opt 1			margin: 1.2em 0 0 0;
				font-size: 0.5em;
				line-height: 1.5em;	*/
				
/* opt 2 		margin: 0.6em 0 0 0;
				letter-spacing: 0.15em;
				font-size: 0.5em ;
				line-height: 1.5em;		*/
		
/* opt 3 	*/	margin: 0.4em 0 0 0;
				font-size: 0.75em;
				line-height: 1.2em;	
}



		/* Section/Article */

			section, article {
				margin-bottom: 3em;
			}
			
			/* sjd - footer lines- override at small size  */
		.wrapper.style2 {
	position: relative;
/*	background-color: #051738;
	background-image: url("images/bg03.png"), url("images/bg02.png");
	background-repeat: no-repeat, repeat;
	background-size: 100% 15em auto auto;
	background-position: top center, top left;	*/
	border-bottom: solid 0px !important;
	border-top: solid 7px;
	border-color: #444;
	border-color: rgba(255, 255, 255, 0.4);
	padding-top: 0.2em !important;
/*	padding-bottom:	0 !important; */
		}  

		/* Image */

			.image.left {
				width: 25%;
			}

		/* Button */

			.button {
				width: 100%;
				font-size: 1.1em;
				text-align: center;
				padding: 1em 0 1em 0;
				border-radius: 8px;
			}

		/* List */

			ul.menu li {
				display: block;
				border: 0 !important;
				padding: 0 !important;
				margin: 0 !important;
			}

			ul.actions li {
				display: block;
				padding: 0;
				margin: 1em 0 0 0;
			}

				ul.actions li:first-child {
					margin-top: 0;
				}

		/* Box */

			.box.excerpt .image-left {
				margin-right: 0;
			}

			.box.excerpt header {
				margin-left: 32%;
			}

			.box.excerpt p {
				clear: both;
			}

/* sjd - space padding below each product area row - on main page at small screen  */
			.box.feature1 section {
				margin-bottom: 1.4em !important;
			}

			.box.spotlight {
				margin-top: 2em;
			}

		/* Wrappers */

			#header-wrapper {
				background-position: 35% 50%;
			}

			#footer-wrapper {
	padding: 0em 20px 1em 20px;
			}

				#footer-wrapper section, #footer-wrapper article {
					margin-bottom: 3em !important;
				}

/* sjd - padding around index page product area at Small screen size*/
			.wrapper {
				padding: 1em 20px 1em 20px;
			}



	
		/* Banner */
		/* sjd - padding around the main page banner at Small screen size. Margin is h2 space incl after big head, before subhead*/
			#banner {
	padding: 27px 18px 1px 18px;
			}


		/* sjd - THIS SECTION (branding - banner.h2) is, at small screen,  the main page header - all text incl UP logo */
			
				.maintext {
				line-height: 1.4em ;
				font-size: 10pt ;
				letter-spacing: 0 ;
	}
	
					.maintextfaq {
				line-height: 1.4em !important;
				font-size: 10pt !important;
				letter-spacing: 0 !important;
				text-align: left !important;
				padding: 0 0 0.5em 0 !important;
	}
	
						.maintextfaq-strong {
				line-height: 1.4em !important;
				font-size: 10pt !important;
				color: #ccc200;
				letter-spacing: 0 !important;
				text-align: left !important;
				font-weight: 700 !important;
				margin: 1.75em 0 0.5em 0 !important;
	}     
	
						.maintextfaq-c-fat {
		font-family: 'Open Sans', sans-serif;
		color: #d40000;
		font-weight: 700 !important;
		font-size: 20pt;
		letter-spacing: 0em !important;
		line-height: 1.1em;
		text-align: center !important;
		margin: 0 0 0.5em 0 !important; 
	}
						.maintextfaq-c {
				line-height: 1.4em !important;
				font-size: 10pt !important;
				letter-spacing: 0 !important;
				text-align: center !important;
				padding: 0 0 0.5em 0 !important;
	}
	
						.maintextfaq-strong-c {
				line-height: 1.4em !important;
				color: #ebebeb !important;
				font-size: 10pt !important;
				letter-spacing: 0 !important;
				text-align: center !important;
				font-weight: 700 !important;

				margin: 1.75em 0 0.5em 0 !important;
	}     


	

			
	/* sjd - custom class override i made for front page text "bring your synth" etc - at small screen size 		*/		
	.branding {
	color: #b6b6b6 !important;
	font-weight: 800 !important;
	font-size: 1em !important;
	letter-spacing: 0.03em !important;
	word-spacing: 0.01em !important;
	line-spacing: 1em !important;
	margin: 0.5em 0 0 0 !important;
/*	text-decoration: underline overline;   */
/*	border-top: solid 1px #ddd;
	border-bottom: solid 1px #ddd;    */
	padding: 0 0 0.05em 0;
	}
	
	/* sjd - main "ULTIMATE PATCHES" banner text size at small size   */
				#banner h4 {
					font-size: 18pt !important;
					letter-spacing: 0.1em !important;
					margin: 0em 0 0.75em 0;
				}
			

					
	.midtext1 {
	padding: 0 0 0.7em 0;
	font-size: 0.85em !important;
	line-height: 1.2em !important;
	letter-spacing: 0.04em;
	float: none;
	text-align: center;
	width: 100%;
	margin: 0em 0 0em 0;
	}
	
	.midtext2 {
	padding: 0 0 0.2em 0;
	font-weight: 400 !important;
	font-size: 0.93em !important;
	line-height: 1.2em !important;
	letter-spacing: -0.02em !important;
	float: none;
	text-align: center;
	width: 100%;
	margin: 0em 0 1.5em 0 !important;
	}
	
	
		/* sjd - custom class override i made for front page text below "as seen on" - at small screen size */	
				#banner h2 {
	line-height: 1.2em !important;
font-size: 0.85em !important;
/*	margin: 0 0 0.5em 0;	*/
	
	color: #fff;
	letter-spacing: 0.04em;
	float: none;
	text-align: center;
	width: 100%;
	margin: 0em 0 1em 0;
				}
	



		/* Sidebar */

			#sidebar {
				margin-top: 2em;
			}

		/* Footer */

			#copyright {
				margin-top: 0em;
			
/*				padding: 3em 0 0.2em 0;	*/
			}	
			
			/* sjd smallsize override */
				#copyright {
	/*	border-top: solid 1px;
		border-color: #444;
		border-color: rgba(255, 255, 255, 0.25);
		margin-top: 2em;
		padding: 3em 0 0.2em 0;	*/
	text-align: center;
		font-family: Open Sans !important;
	letter-spacing: 0.07rem;
	font-size: 0.8rem ;
	text-transform: uppercase;
	}	


		#copyright a {
			color: inherit;
		}
		
		#sitesecured {
	/*	border-top: solid 1px;
		border-color: #444;
		border-color: rgba(255, 255, 255, 0.25);
		margin-top: 2em;
		padding: 3em 0 0.2em 0;	*/
	text-align: center;
	font-family: Open Sans !important;
	font-size: 0.8rem;
		letter-spacing: 0.08rem;
	font-weight: 400;
	}	
	
	}
	/* sjd - end small screen size - cellphone */
	
	
	
	

/* sjd custom styles - largest and down screen sizes unless specified*/

      p.normal {
        font-weight: normal;
      }
      p.lighter {
        font-weight: lighter;
      }
/*	  p.lightersmaller {
        font-weight: lighter;
		font-size: 0.7rem;   */
      }
	  /* sjd DONT TOUCH the (errant?) parenthesis above */
	  
      p.bold {
        font-weight: bold;
      }
      p.bolder {
        font-weight: bolder;
      }
      p.fweight {
        font-weight: 400;
      }
	  
	/*   style for all "fa.volume-up", but you could have used style in  page for indiv styling   */
	    .fa-volume-up {
      color: #ebebeb !important;
    }    
	
	
	/* sjd home page small upper left logo at Small cell size   */
		.logohome {
	font-weight: 300;
	text-decoration: none !important;
	color: #ccc200;
}

		.logohomeb {
	text-transform: uppercase;
	font-weight: 400;
	/*font-family: "Saira", sans-serif;	*/
	letter-spacing: 0.04em;
	color: #ccc200;
	position: absolute;	
	left: 1.75em;
	top: 45%;
	margin-top: -0.65em;
	text-decoration: none !important;
}
	  

	/*	custom styles from orig index page plus some new	*/
	
		<!--[if lte IE 9]><link rel="stylesheet" href="assets2/css/ie9.css" /><![endif]-->
		<style type="text/css">


.styleh2major {
		border-bottom: solid 1px #ebebeb;
	width: -moz-max-content;
	width: -webkit-max-content;
	width: -ms-max-content;
	width: max-content;
	padding-bottom: 0.5rem;
	margin: 0 0 1.7rem 0;
	font-size: 1.5rem;
	line-height: 1.1;
	letter-spacing: 0.5rem;
	}

.style1 {font-size: 0.71rem;
font-style: italic;
font-weight: 300;
padding-top: 2.3em !important;
/* letter-spacing: 0.01rem;   */
}

.Reg-Text-Red {color: #F00000}

.style6 {
	font-size: 0.6rem;
	font-style: italic;
}


	
.style17 {
	font-size: 1.25rem;
	font-weight: 700 !important;
		/* sjd added glow  */
	background: rgba(30, 50, 185, 0.3);	
	       /*     background: #03C;		
            text-shadow: 0 0 10px #03C;
			-webkit-text-shadow: 0 0 10px #03C;
			-moz-text-shadow: 0 0 10px #03C;	*/
	}
	
	.style17reg {
	font-size: 1.25rem;
	font-weight: 300 !important;
	/* sjd added glow  */
	background: rgba(30, 50, 185, 0.3);	
	       /*     background: #03C;		*/
     /*       text-shadow: 0 0 10px #03C;
			-webkit-text-shadow: 0 0 10px #03C;
			-moz-text-shadow: 0 0 10px #03C;	*/
	}
	
	.stylevalue {
	font-size: 1.5rem;
	font-weight: 600;
	color: #d40000;	
	letter-spacing: 0rem;
	line-height: 1.7rem;
	text-transform: uppercase;
	margin: 3rem 0 -0.3rem 0 !important;
	}
	

	.stylediscount {
	font-size: 0.7rem !important;
	font-weight: 400;
	line-height: 1.14rem;
	letter-spacing: 0.04rem;
}	

		.stylediscounthead {
	font-size: 0.92rem;
	color: #ebebeb;
	line-height: 0.9rem;
	font-weight: 500;
	}
	
	.styleinstant {
	font-size: 0.75rem !important;
	font-weight: 300;
	line-height: 1.14rem;
	letter-spacing: 0.045rem;
}

	.styleinstant strong {
	font-size: 0.75rem !important;
	font-weight: 500; !important;
	line-height: 1.14rem;
	letter-spacing: 0.045rem;
}


	.styleline {
	font-size: 0.9rem;
	font-weight: 500;
/*	line-height: 1.14rem;   */
	letter-spacing: 0.01rem;
		border-bottom: solid 1px #ebebeb;
	width: 85%;	
}

.style18 {
	line-height: 1;
	font-style: italic;
	font-size: 100%;
}

.styleBLUE {
	color: #67A8D8;
	font-size: 1.2em;
line-height: 2rem;
/*	text-transform: uppercase;   */
	font-weight: 500 !important;
}

.styleGOLD {
	color: #ccc200;
		font-size: 1.2em;
		line-height: 2rem;
		font-weight: 500 !important;
}

/* sjd - customized bullet list icons, used only on prod pages  */
.fa-ul {
	font-size: 0.9rem ;
	line-height: 1.1rem;
		font-family: Jost;
				margin: 0 0 2rem 0;
		padding-left: 1.25rem;	
}


.fa-li {
	font-size: 0.9rem ;
	line-height: 1.1rem;
		font-family: Jost;
		padding-left: 0.15em;
		color: #ccc200;
	}

	
	/* sjd end custom bullet list icons  */


.styleWHITESUB {
	color: #ebebeb;
		font-size: 1.2em;

		font-weight: 400;
}

.styleUnderline {
	text-decoration: Underline;
}

.style19 {font-size: 1.2rem}



.style20-wht {
	font-size: 1.1rem;
	color: #ebebeb;
	line-height: 1.1rem;
	font-weight: 300;
	}
	
	.style20-clr {
	font-size: 1.1rem;
	color: #CCC200;
	line-height: 1.2rem;
	font-weight: 300;
	}
	
		.style20PHAT {
	font-size: 0.92rem;
	color: #CCC200;
	line-height: 0.9rem;
	font-weight: 800;
	}
	
			.style20PHREE {
	font-size: 1.95rem;
	color: #CCC200;
	line-height: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	}


.style20gold {
	font-size: 0.95rem;
	color: #CCC200;
	line-height: 0.9rem;
	font-weight: 500;
	}
	
	/*at all sizes  */
		.style20goldbold {
	font-size: 0.98rem;
	color: #CCC200;
	line-height: 0.9rem;
	font-weight: 800;
	}

	
		.style20lesswhite {
	font-size: 0.98rem;
	color: #ebebeb;
	line-height: 0.9rem;
	font-weight: 500;
	text-shadow: 0 0 2px #33C, 0 0 4px #005aff;
	}
	
			.styleVOL {
	font-size: 0.80rem;
	color: #ebebeb;
	line-height: 1.7rem;
	font-weight: 400;
	text-shadow: 0 0 2px #33C, 0 0 4px #005aff;
	letter-spacing: 0.075em;
	}
	
				.styleVOLbold {
	font-size: 0.83rem;
	color: #ebebeb;
	line-height: 1.7rem;
	font-weight: 600;
	text-shadow: 0 0 2px #33C, 0 0 4px #005aff;
	letter-spacing: 0.078em;
	}
	
	/* at largest size */
	.styleVOLbold-V2 {
	font-size: 0.83rem;
	color: #ebebeb;
	line-height: 1.35rem;
	font-weight: 600;
	text-shadow: 0 0 2px #33C, 0 0 4px #005aff;
	letter-spacing: 0.078em;
	}
	
	/*at all suzes smaller than largest */
	@media screen and (max-width: 1280px) {
	.styleVOLbold-V2 {
	font-size: 0.83rem;
	color: #ebebeb;
	line-height: 1.75rem;
	font-weight: 600;
	text-shadow: 0 0 2px #33C, 0 0 4px #005aff;
	letter-spacing: 0.078em;
	}
	}
	
	
			.fullset {
	font-size: 0.92rem;
	color: #ebebeb;
	line-height: 1.15rem;
	font-weight: 500;
	text-shadow: 0 0 2px #33C, 0 0 4px #005aff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	}
	
	
	.singlevolumes {
	font-size: 0.72rem;
	color: #ebebeb;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	}
	

	
.style20-unbold {
	font-size: 1rem;}
	
.style22 {
	font-size: 0.7rem;
	font-weight: 500;
}

.style25 {font-weight: bold}

.style26 {
	line-height: 4pt;
	font-size: 60%;
}

.styleBACK {
	line-height: 0.7rem;
	font-size: 0.62em;
	text-align: right;
	font-weight:300;
	letter-spacing: 0.1rem;
	color: #a2a2a2;
}

	@media screen and (max-width: 480px) {
	.styleBACK {
	line-height: 0.7rem;
	font-size: 0.62em;
	text-align: right;
	font-weight:300;
	letter-spacing: 0.1rem;
	color: #8d8d8d;
}

		/* sjd small screen override  */
	.stylecash {
	font-size: 0.95rem;
	font-weight: 300;
	color: #ebebeb;
	/*	line-height: 1.14rem;   */
	letter-spacing: 0.01rem;
	width: 88%;
}
	.stylecash strong {
	font-weight: 600;
}

}



.style29 {
	font-size: 1rem;
	font-weight: bold;
}

.styleSEMIBOLD {
	font-weight: 400; 
}

/*	sjd- code to shift individual elements up on "dont have paypal"	*/
.styleRem078 {
	font-size: 0.75rem;
	position:relative;
  top:-0.15em;  
}

.stylefast {
	letter-spacing: 0.04rem;
	font-weight: 300;
	font-family: Open Sans;
}

.style31 {color: #96A9A4; font-weight: bold; }
.style33 {color: #ff0000}

.style34WHITE {
	color: #ebebeb; 
		font-size: 0.92rem;
		font-weight: 500; 
		letter-spacing: 0.03rem; 
		text-transform: uppercase; 
	line-height: 1.6rem !important;
		}

.style34GOLD {
	color: #ccc200; 	
	font-size: 0.95rem; 
	font-weight: 500; 
	letter-spacing: 0.03rem; 
	text-transform: uppercase;
	line-height: 1.6rem !important;
	}


.style-BEST-SELLING {
	color: #F1790C;
	font-weight: 500;
	letter-spacing: 0.04rem;
	}
	
.style-BOLD-PKALAVENDER {
/*	color: #adb7e1;	lavender	*/
	color: #67A8D8;
	font-weight: 400;
	letter-spacing: 0.04rem;
	line-height:  18px;
	padding: 0.15rem 0 0 0;
	font-size: 0.75em !important;
}

/* at small size - cellphone */
	@media screen and (max-width: 736px) {
.style-BOLD-PKALAVENDER {
/*	color: #adb7e1;	lavender	*/
	color: #67A8D8;
	font-weight: 400;
	letter-spacing: 0.04rem;
	line-height:  18px;
	margin: -.05rem 0 0 0;
	font-size: 0.75em !important;
}
}


.style-BOLD-BLUE {	
	color: #67A8D8;
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.03rem;
	line-height: 1.7em;
	text-transform: uppercase;
}   

.style-BOLD-BLUE strong{	
/*	color: #b6b6b6;	*/
	font-weight: 700;
}   
	
	.style-GOLD-LINE {
	padding: 0 0 0 0 !important;
	color: #ccc200
	border-bottom: solid 1px #ccc200;
	width: -moz-max-content;
	width: -webkit-max-content;
	width: -ms-max-content;
	width: max-content;	
	}
	
	.styleRETRO {
	color: #67A8D8;
	font-weight: 500;
	letter-spacing: 0.027rem;
	line-height:	1rem;
	text-transform: uppercase !important;
	font-size: 0.9rem;
}

	.styleRETROBULLETS {
	color: #c449fd;
	font-weight: 500;
	letter-spacing: 0.027rem;
	position:relative;
  top:-0.1em;
}

	.styleAFFORDABLE {
	color: #67A8D8;
	font-weight: 500;
	letter-spacing: 0.027rem;
	position:relative;
	text-transform: uppercase;
	font-size: 0.9rem;
  top:-0.1em;
}

	.styleRETROSPLITTER {
	color: #bfbfbf;
	font-weight: 300;
	font-size: 0.95em;
	letter-spacing: 0.035rem;
	position:relative;
  top:-0.07em;
}

	.styleCROSSES {
	color: #ccc200 !important;
	font-weight: 300;
	font-size: 0.95em;
	letter-spacing: 1.25rem;
}

@media screen and (max-width: 480px) {
	.styleCROSSES {
	color: #bfbfbf;
	font-weight: 300;
	font-size: 0.95em;
	letter-spacing: 0.5rem;
}
}


	
.style36 {color: #ff7e00; font-weight: bold; }
.style37 {color: #FF491C}
.style40 {color: #0099CC}
.style43 {color: #52C0E4; font-weight: bold; }
.style44 {color: #FF1515}
.style45 {color: #FF1515; font-weight: bold; }
.style46 {color: #c090d0; font-weight: bold; }
.style47 {color: #6C3}
.style48 {color: #6C3; font-weight: bold; }
 

.style-bullet-list {
	font-size: 0.9rem ;
	line-height: 1.1rem;
						font-family: Jost;
	}


.style-Genre-List {
	color: #ebebeb;
	letter-spacing: 0.1rem;
	line-height: 0.9rem !important;
	font-size: 0.65rem;
	font-weight: 400;

}

.style-Saira-Bullets-Blue {font-family: Saira; color: #248bff; font-size: 1.1rem; line-height: 0.9rem; font-weight: 600; letter-spacing: 0.05rem; position:relative;
  top:0.06em;}
.style-Saira-Bullets-Pink {font-family: Saira; color: #c449fd; font-size: 1.1rem; line-height: 0.9rem; font-weight: 600; letter-spacing: 0.05rem; position:relative;
  top:0.06em;}

.style-As-Seen-On {color: #bfbfbf; font-size: 0.8rem; line-height: 0.9rem; font-weight: 400; letter-spacing: 0.07rem; text-transform: uppercase;}

.style-As-Seen-On2 {
	color: #bfbfbf;
	font-size: 0.8rem;
	line-height: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.07rem;
	text-transform: uppercase;
	margin-top: 0.165rem;
}


@media screen and (max-width: 480px) {

		html, body {
			min-width: 320px;
		}
	sjd - custom bullet list at small screen size (cell)  	
		.style-Genre-List {
	color: #ebebeb;
	letter-spacing: 0.15rem !important;
	line-height: 0.9rem !important;
	font-size: 0.65rem !important;
	font-weight: bold;
	text-align: justify !important;
}
.style-Saira--Bullets-Blue {color: #248bff; font-size: 0.8rem; line-height: 0.9rem; font-weight: 900; letter-spacing: 0.05rem; position:relative;
  top:0.05em;}
.style-Saira-Bullets-Pink {color: #c449fd; font-size: 0.8rem; line-height: 0.9rem; font-weight: 900; letter-spacing: 0.05rem; position:relative;
  top:0.05em;}

	}   
	 

	.style98 {
	color: #CCC200;
	font-size: 0.9rem;
		font-weight: 600;
		line-height: 1.5;
		margin: 0 0 1rem 0;
		text-transform: uppercase;
		letter-spacing: 0.2rem; }
		
			.style98alt {
	color: #04A6C8;
	font-size: 0.9rem;
		font-weight: 600;
		line-height: 1.5;
		margin: 0 0 1rem 0;
		text-transform: uppercase;
		letter-spacing: 0.2rem; }
		
			.style98High {
	color: #CCC200;
	font-size: 0.9rem;
		font-weight: 600;
		line-height: 1;
		margin: 0 0 1rem 0;
		text-transform: uppercase;
		letter-spacing: 0.2rem; }
		
.style99 {color: #ebebeb; font: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.8rem;}
.style99bold {color: #69EBF1; font: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.8rem;}
.style99boldblue {color: #3CF; font: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.8rem;}
.style99boldGrn {color: #6C0; font: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.8rem;}
.style99B {color: #CCC200; font: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; font-size: 1.1rem;}
.style99B-WHT {color: #ebebeb; font: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; font-size: 1.1rem;}
.style99SM {color: #ebebeb; font: inherit; font-weight: 300; line-height: 0.7em; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.6rem;}
.style100 {color: #CCC200; font: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.8rem;}
.style101 {color: #FFF; font: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.8rem;}

.stylethankyou {

		font-size: 1.5rem;
		line-height: 1.5;
		letter-spacing: 0.1rem;
		word-spacing: 0.05rem;
		color: #fff;
			font-weight: 300;
	}
	
        </style>
		
		/*	end custom styles from orig index   */
		
		
/* sjd - microchip icon color */
 .fa-microchip {
      color: #ccc200;
    }
	
/* sjd - pdf icon color */	
.fa-file-pdf {
      color: #bfbfbf;
/*	  background-color: #d40000;    */
    }
	
	/* sjd - cash-back icon color */	
.fa-coins {
      color: #ccc200;
    }
	
			/* sjd - cash-back icon color */	
.fa-chevron-circle-right {
      color: #67A8D8;
    }
	
		/* sjd - checkmark in circle - icon color 	*/
.fa-check-circle {
      color: #67A8D8;	
    }