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

@font-face {
    font-family: 'fontello-sjdregular';
    src: url('https://www.ultimatepatches.com/fonts/fontello-sjd.woff2') format('woff2'),
         url('https://www.ultimatepatches.com/fonts/fontello-sjd.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


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;
}

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 */

	html {
		box-sizing: border-box;
	}

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

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

	body {
		background: #051738 url("images/bg01.png");
	}

		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;
		}

	body, input, select, textarea {
		font-family: 'Open Sans', sans-serif;
		color: #ebebeb;
		font-weight: 400;
		font-size: 11pt;
		line-height: 1.85em;
	}

	a {
		color: inherit;
		text-decoration: underline;
	}

		a:hover {
	text-decoration: underline;
		}
		
			/* sjd blank ul style for top nav  */
.BlankListStyle {
			list-style: none;
		}

	h3 {
		text-transform: uppercase;
		font-weight: 800;   
		letter-spacing: 0.04em;    
		color: #ebebeb;
		margin: 0 0 1em 0;
		text-shadow: 0 0 2px #33C, 0 0 4px #005aff, 0 0 1px #FFF;
	}
	
	/* sjd - "georgia" style headline font - unused for now  
		h3 {
		text-transform: uppercase;
		font-weight: 900;   
		color: #ebebeb;
		margin: 0 0 1em 0;
		text-shadow: 0 0 2px #33C, 0 0 4px #005aff, 0 0 1px #FFF;
		
		font-family: FrankRuhlLibre, "Times New Roman", Times, serif;
		font-size: 1.3rem !important;
		    display:inline-block;
    -webkit-transform:scale(1.1,1); 
    -moz-transform:scale(1.1,1); 
    -ms-transform:scale(1.1,1); 
    -o-transform:scale(1.1,1); 
    transform:scale(1.1,1); 
			letter-spacing: 0.02em;
	} */
	
/*		h4 {
		text-transform: uppercase;
		font-weight: 800;
		letter-spacing: 0.04em;
		color: #ebebeb;
		margin: 0 0 1.5em 0;
	}	*/
	
		h5 {
		text-transform: uppercase;
		font-weight: 800;
		font-size: 1.6em;
		letter-spacing: 0.02em;
		color: #ebebeb;
		margin: 0 0 0.3em 0;
		text-shadow: 0 0 2px #33C, 0 0 4px #005aff;
	}
	/* sjd created for "about ultimate patches" on index */
			h4 {
		text-transform: uppercase;
		font-weight: 800;
		font-size: 1.6em;
		letter-spacing: 0.02em;
		color: #ebebeb;
		margin: 0 0 0.3em 0;
		text-shadow: 0 0 2px #33C, 0 0 4px #005aff;
	}
	
	/* sjd - used not on main page, but on the other pages (about, support etc) as main top headline  */
		h6 {
		text-transform: uppercase;
		font-weight: 700;
		font-size: 1.6em;
		letter-spacing: 0.04em;
		color: #ebebeb;
		margin: 0 0 1em 0;
		text-shadow: 0 0 2px #33C, 0 0 4px #005aff;
	}
	
	/* 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 largest size */
	.savebig {
	text-transform: uppercase;
	color: #67A8D8 !important;
	font-weight: 600 !important; 
	font-size: 3.15em !important; 
	line-spacing: 0em ;
	padding: 0 0 0.2em 0 ;
	margin: 0 0 0 0 ;   
	text-align: center ;
	}
	
		.savebig2 {
	text-transform: uppercase;
	color: #ebebeb !important;
	font-weight: 300 !important; 
	font-size: 1.65em !important; 
	line-height: 1em !important;
	padding: 0 0 0 0 ;
	margin: 0 0 0 0 ;   
	}
	
	
	.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 ; 
	}
	
							.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-red {
		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; 
	}
	
						.maintextfaq-c-fat-green {
		font-family: 'Open Sans', sans-serif;
		color: #7bc958;
		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 {
	font-family: 'Open Sans', sans-serif;
	color: #B6B6B6 !important;
	font-weight: 800 !important;
	font-size: 1.24em !important;
	letter-spacing: 0.27em !important;
	word-spacing: 0.045em !important;
	line-spacing: 1em !important;
	margin: 0.5em 0 0 0 !important;
	text-transform: uppercase;
/*	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 !important;
	color: #fff;
/*	color: rgba(255, 255, 255, 0.75);   */
	font-size: 1.1em;
	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:600;
	text-transform: uppercase;		
	color: #fff;
/*	color: rgba(255, 255, 255, 0.75);   */
	font-size: 1.14em;
	line-height: 1.3em ;
	letter-spacing: -0.02em !important;
	float: center;
	text-align: center;
/* sjd disabled this (make room for button)		width: 60%;  */

	margin: 1.85em 0 2em 0;
	}	
	
		.WhiteImageBorder
{
    border-width: 2px;
	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 25px #03C;
			-webkit-box-shadow: 0 0 25px #03C;
			-moz-box-shadow: 0 0 25px #03C;
			
		border-radius: 6%;	
}

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

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

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


/*	h1 strong {
		font-weight: 600;
		}
	*/	


/*				h1 {
	font-size: 1.2em;
	color: #CCC200 !important;
	line-height: 1.75em;
	letter-spacing: 0.04em;
	float: none;
	text-align: center;
	width: 100%;
	margin: 0 0 3em 0;
				}
				
				
				
		/* sjd - at Largest screen size: custom class i made for front page text on line 3 - "on sale" etc 		
				h2 {
	font-size: 1.2em;
	color: #67A8D8 !important;
	line-height: 1.75em;
	letter-spacing: 0.04em;
	float: none;
	text-align: center;
	width: 100%;
	margin: 0 0 0 0;
				}
*/

		/* unused - ultimate patches big logo - largest screen size  
		h4 {
/*	font-family: 'Saira', sans-serif;	
		font-weight: 400 !important;
		font-size: 5.75em;
		margin: 0 0 0.5em 0;
		line-height: 1em;
	}

/* sjd - this is the specs for "file" icon + text on left 
		h4.icon {
			line-height: 48px;
		}

			h4.icon:before {
				position: relative;
				top: 0.05em;
				margin-right: 0.5em;
				opacity: 0.25;
			}
			

		*/


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


	b, strong {
		color: #ebebeb;
		font-weight: 700;
	}

	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 {
		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 at LARGEST size */
				header p.prod3 {
			display: block;
			text-transform: uppercase;
			font-weight: 400;
			letter-spacing: 0.065em;
			font-size: 1.3em;
		/*	color: #ebebeb;	*/
			color: #67A8D8;
			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: #67A8D8;
		}
		
		
		/* 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.95em;
			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;
		}
		
/* sjd "dirty" look on front page images was bg01, now i put blank bg05.png  */
		.image:before {
			content: '';
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			background: url("images/bg05.png");
			width: 100%;
			height: 100%;
			opacity: 0.75;
		}

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


/* SJD index UP logo image */
		.image.logofeatured {
/*	margin: 0 0 0.5em 0; */
	padding: .5em 0 0.5em 0; 
	width: 80%;
		}


/* SJD index images size plus margin around featured synth image - all sizes except small (mobile) */
		.image.featured {
/*	display: block;
	margin: 0 0 0.5em 0; */
	width: 75%;
	image-rendering: -webkit-optimize-contrast;
		}
		
				      .image.featured:hover {
            color: #111;	
	border-style: solid;
    border-color: #fff;
	            background: #03C;
            box-shadow: 0 0 400px 30px #03C;
			-webkit-box-shadow: 0 0 400px 30px #03C;
			-moz-box-shadow: 0 0 400px 30px #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 - "lists" aka text with lines in between	*/

	dl.contact dt {
		display: block;
		text-transform: uppercase;
		font-weight: 700;
		letter-spacing: 0.065em;
		font-size: 0.9em;
		color: #696969;
		float: left;
		width: 6em;
	}

	dl.contact dd {
		margin: 0 0 1em 6em;
	}

	ul.default {
		list-style: disc;
		padding-left: 1em;
	}

		ul.default li {
			padding-left: 0.5em;
		}

	ul.actions li {
		display: inline-block;
		padding: 0 0 0 0.25em;
		margin: 0 0 0 0.25em;
	}

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

/*	sjd - lines between list texts	*/
	ul.menu li {
		border-left: solid 1px #eee;
		display: inline-block;
		padding: 0 0 0 1em;
		margin: 0 0 0 1em;
	}

		ul.menu li:first-child {
			border-left: 0;
			margin-left: 0;
			padding-left: 0;
		}

	ul.divided li {
		border-top: solid 1px #eee;
		padding: 0.5em 0 0 0;
		margin: 0.5em 0 0 0;
	}

		ul.divided li:first-child {
			border-top: 0 !important;
			padding-top: 0 !important;
			margin-top: 0 !important;
		}

	ol.default {
		list-style: decimal;
		padding-left: 1.25em;
	}

		ol.default li {
			padding-left: 0.25em;
		}

/* 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 . NOTE: navbar specs are in #header*/
	#nav {
		position: absolute;
		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.64em 0 0.64em;
		}
/* this is the top nav text specs - color was #ccc200 before */
			#nav > ul > li > a, #nav > ul > li > span {
			/*	color: #dacf00;  */
				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;
			/*	background-color:#00FF00;	*/
			/*	text-shadow: 0 0 2px #33C, 0 0 5px #005aff, 0 0 3px #FFF;	*/
			}

			#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: -2px;  /* 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;
	}


		.banner-logo {
		/* sdj - specs for large main header text aka "ULTIMATE PATCHES", PLUS top and bottom border lines above/below - includes glow */ 	 
	/*		border: solid 11px rgba(255, 255, 255, 0.25);   */
			border-left: 0;
			border-right: 0;
			color: #fff;
			text-shadow: 0 0 2px #33C, 0 0 5px #005aff, 0 0 3px #FFF;
			/* color: rgba(255, 255, 255, 0.75); */
			font-size: 3.2em !important;
			font-weight: 400 !important;
			line-height: 1.3em;
			margin: 0 0 0 0 !important;
		font-family: "Source Sans Pro", sans-serif;   
			letter-spacing: 0.13rem;
			text-transform: uppercase;

		}
		

			.banner-logo strong {
				font-weight: 700;
				/*		-moz-transform: scale(.5,1);
		-webkit-transform: scale(.5,1);
		-ms-transform: scale(.5,1);
		transform: scale(.5,1);	*/
				text-shadow: 0 0 2px #33C, 0 0 5px #005aff, 0 0 3px #FFF;  
				color: inherit;
			}
			
			
					.banner-logoimage {
		/* sdj - specs at LARGEST size, for large main header LOGO IMAGE aka "ULTIMATE PATCHES", PLUS top and bottom border lines above/below - includes glow */ 	 
	/*		border: solid 11px rgba(255, 255, 255, 0.25);   */
	/*		border-left: 0;
			border-right: 0;
			color: #fff;
			text-shadow: 0 0 2px #33C, 0 0 5px #005aff, 0 0 3px #FFF;
			font-size: 3.2em !important;
			font-weight: 400 !important;
					font-family: "Source Sans Pro", sans-serif;   
			letter-spacing: 0.13rem;
			text-transform: uppercase;
			line-height: 1.3em;	*/
			margin: 0.12em 0 -0.4em 0 !important;
		}
		
	
/* sjd - specs for banner "p" (smaller text under main - disabled as it overrides all p class text in banner) 
		#banner p {
	text-transform: uppercase;
	color: #fff;
/*	color: rgba(255, 255, 255, 0.75);   
	font-size: 1.2em;
	font-weight: 700;
	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;
		}
		*/
		
					/* sjd - Largest size: custom class i made for front page text below "as seen on" */		
	#banner h1 {
	text-transform: uppercase;
	color: #CCC200 !important;
/* color: rgba(255, 255, 255, 0.75);   */
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.35em;
	letter-spacing: 0.04em;
	float: center;
	text-align: center;
	margin:  0 0 0.1em 0 ;
				}
				
			/* sjd - Largest size: custom class i made for front page text below "as seen on" */		
	#banner h2 {
	text-transform: uppercase;
	color: #67A8D8 !important;
/* color: rgba(255, 255, 255, 0.75);   */
	font-size: 1.21em;
	font-weight: 700;
	line-height: 1.25em;
	letter-spacing: 0.04em;
	float: center;
	text-align: center;
/* sjd disabled this (make room for button)		width: 60%;  */
	margin: 0 0 0 0;
				}
				
				
							/* sjd - copied from h2 - Largest size: custom class i made for front page text below h2 */		
	.indexsale {
	text-transform: uppercase;
	color: #67A8D8 !important;
/* color: rgba(255, 255, 255, 0.75);   */
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1em;
	letter-spacing: 0.04em;
	float: center;
	text-align: center;
/* sjd disabled this (make room for button)		width: 60%;  */
	margin: 0 0 0 0;
				}
				
											/* sjd - copied from h2 - Largest size: custom class i made for front FREE page text below h2 */		
	.indexsalefree {
	text-transform: uppercase;
	color: #67A8D8 !important;
/* color: rgba(255, 255, 255, 0.75);   */
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1em;
	letter-spacing: 0.04em;
	float: center;
	text-align: center;
/* sjd disabled this (make room for button)		width: 60%;  */
	margin: 0.4em 0 0 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 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;
	}

/* sjd this is the background darker tint on the footer */
	#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 - area containing top full nav-bar (not small scrn side nav). Padding is the transparant 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.72em !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.72em !important;
	/*		font-size: 2.1em;  */
			font-weight: 400;
			color: #ccc200;
			text-decoration: none !important;
		}
		
						.logohome a {

			text-decoration: none !important;
		}
		
/* sjd - orig left logo top navbar   		
#header h1 {
			position: absolute;
			left: 1.75em;
			top: 50%;
			margin-top: -0.65em;
			font-size: 1.5em;
			color: #fff;
		}
		*/
	

/* 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;
		color: inherit;
		font-size: 0.8em;
	}	

		#copyright a {
			color: inherit;
		}

/* 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.5em;    
				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.52em !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.52em !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, at 2nd Largest and Medium screen sizes   */
			#banner {
				width: 100%;
				padding: 2.5em 0 2.5em 0;
			}

				.banner-logo {
					font-size: 2.2em;
					line-height: 1.3em !important;
					margin: 0 0 0.4em 0 !important;
				}
				
				
								.banner-logoimage {
			/*		font-size: 2.2em;
					line-height: 1.3em !important;	*/
					margin: 0 0 0.6em 0 !important;
				}


	#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 - At Large screen size: custom class i made for front page text on Line 1 - "high quality" etc */		
				#banner h1 {
	font-size: 1.1em;
	color: #CCC200 !important;
	line-height: 0em;
	letter-spacing: 0.04em;
	float: none;
	text-align: center;
	width: 100%;
	margin: 0 0 1.9em 0;
				}
				
		/* sjd - at Large screen size: custom class i made for front page text on line 3 - "on sale" etc */		
				#banner h2 {
	font-size: 1.2em;
	color: #67A8D8 !important;
	line-height: 1.1em;
	letter-spacing: 0.04em;
	float: none;
	text-align: center;
	width: 100%;
	margin: 0 0 0 0 !important;	
				}
				
						/* sjd - copied from h2 at Large screen size: custom class i made for front page text on line 3 - "on sale" etc */		
				.indexsale {
	font-size: 1.2em !important;
	color: #67A8D8 !important;
	line-height: 1.1em !important;
	letter-spacing: 0.04em;
	float: none;
	text-align: center;
	width: 100%;
	margin: 0 0 0 0 !important;	
				}
				
										/* sjd - copied from h2 at Large screen size: custom class i made for front FREE page text on line 3 - "on sale" etc */		
				.indexsalefree {
	font-size: 1.2em !important;
	color: #67A8D8 !important;
	line-height: 1.1em !important;
	letter-spacing: 0.04em;
	float: none;
	text-align: center;
	width: 100%;
	margin: 0.7em 0 0.35em 0 !important;	
				}
				
								/* 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;
		}  
		
			/* sjd - At Large 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 !important;
	color: #fff;
/*	color: rgba(255, 255, 255, 0.75);   */
	font-size: 1.05em !important;
	line-height: 1em !important;
	padding: 0 0 1.7em 0 !important;
	letter-spacing: 0.04em;
	float: center;
	text-align: center;

/* sjd disabled this (make room for button)		width: 60%;  */
	margin: 0;
	}
	
		.midtext2 {
	line-height:	1.2em !important;
	margin: -0.25em 0 2.2em 0 !important; 
	}	
	
		
		
				.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-red {
		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-fat-green {
		font-family: 'Open Sans', sans-serif;
		color: #7bc958;
		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;
	}     
	
	
	
	/* sjd large size */
	.savebig {
	text-transform: uppercase;
	color: #67A8D8 !important;
	font-weight: 600 !important; 
	font-size: 3.25em !important; 
	line-spacing: 0em !important;
	letter-spacing: 0em !important;
	padding: 0 0 0 0 !important;
		margin: 0 0 -0.37em 0 !important;
	}
	
		.savebig2 {
	text-transform: uppercase;
	color: #ebebeb !important;
	font-weight: 300 !important; 
	font-size: 1.65em !important; 
	line-spacing: 0em !important;
		letter-spacing: 0em !important;
	padding: 0 0 0 0 ;
	margin: 0 0 0 0 ;
	}  

			/* SJD custom style - "new presets" below synthname in product area on index page at LARGE size */
				header p.prod3 {
			display: block;
			text-transform: uppercase;
			font-weight: 400;
			letter-spacing: 0.065em;
			font-size: 1.1em;
		/*	color: #ebebeb;	*/
			color: #67A8D8;
			margin: 0em 0 -0.3em 0;
		}   

	}

/* 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 */

			#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 titlebar logo specs  */
				#titleBar .title {
					display: block;
					text-transform: uppercase;
					text-decoration: none;
					font-weight: 400;
					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;
	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 - Med size: custom class i made for front page text below "as seen on" */		
	#banner h1 {
	text-transform: uppercase;
	color: #CCC200 !important;
/* color: rgba(255, 255, 255, 0.75);   */
	font-size: 1.2em;
	font-weight: 700;
	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 0 1em 0;
				}
				
			/* sjd - Med size: custom class i made for front page text below "as seen on" */		
	#banner h2 {
	text-transform: uppercase;
	color: #67A8D8 !important;
	/* color: rgba(255, 255, 255, 0.75);   */
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: 0.04em;
	float: center;
	text-align: center;
	/* sjd disabled this (make room for button)		width: 60%;  */
	margin: 0 0 0 0;
				}
				
							/* sjd - copied from h2 Med size: custom class i made for front page text below "as seen on" */		
	.indexsale {
	text-transform: uppercase;
	color: #67A8D8 !important;
	/* color: rgba(255, 255, 255, 0.75);   */
	font-size: 1.2em !important;
	font-weight: 700;
	line-height: 1.1em !important;
	letter-spacing: 0.04em;
	float: center;
	text-align: center;
	/* sjd disabled this (make room for button)		width: 60%;  */
	margin: 0 0 0 0;
				}
				
											/* sjd - copied from h2 Med size: custom class i made for front FREE page text below "as seen on" */		
	.indexsalefree {
	text-transform: uppercase;
	color: #67A8D8 !important;
	/* color: rgba(255, 255, 255, 0.75);   */
	font-size: 1.2em !important;
	font-weight: 700;
	line-height: 1.1em !important;
	letter-spacing: 0.04em;
	float: center;
	text-align: center;
	/* sjd disabled this (make room for button)		width: 60%;  */
	margin: 1.9em 0 0.75em 0 !important;
				}
				
			
/* sjd - disables the auto ignoring of break tag at med and small  */			
			.midtext2 br {
display: inline !important;
}

/* 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;
	}     
	
		/* sjd med size */
	.savebig {
	text-transform: uppercase;
	color: #67A8D8 !important;
	font-weight: 600 !important; 
	font-size: 2.8em !important; 
	line-spacing: 0em !important;
	letter-spacing: 0em !important;
	padding: 2em 0 0 0 !important;
		margin: 0 0 -0.37em 0 !important;
	}
	
		.savebig2 {
	text-transform: uppercase;
	color: #ebebeb !important;
	font-weight: 300 !important; 
	font-size: 1.5em !important; 
	line-spacing: 0em !important;
		letter-spacing: 0em !important;
	padding: 0 0 2em 0 ;
	margin: 0 0 0 0 ;
	}  
	
	/* sjd index logo at med size */
					.banner-logo {
					font-size: 2.2em;
					line-height: 1em !important;
					margin: 0.1em 0 0.2em 0 !important;
				}
				
					/* sjd index logo at med size */
					.banner-logoimage {
				/*	font-size: 2.2em;
					line-height: 1em !important;	*/
					margin: 0.1em 0 0em 0 !important;	
				}  
				

	
	}

/* SMALL */

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

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


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

			h3, h4, h5 {
				font-size: 12pt !important;
			}
			
						.banner-logo {
				font-size: 12pt !important;
				line-height: 1.5em;
			}
			
	

/*			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: 0.95em !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.73em;
				line-height: 1.1em;
				margin: 0.44em 0 0 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 */
		
		/* SJD index images size plus margin around featured synth image at small (mobile) size */
		.image.featured {
/*	display: block;
	margin: 0 0 0.5em 0; */
	width: 100%;
	image-rendering: -webkit-optimize-contrast;
		}

			.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-red {
		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-fat-green {
		font-family: 'Open Sans', sans-serif;
		color: #7bc958;
		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 small size */
		.savebig {
	text-transform: uppercase;
	color: #67A8D8 !important;
	font-weight: 600 !important; 
	font-size: 2em !important; 
	line-spacing: 0em !important;
	margin: 0 0 -0.2em 0 !important;   
	text-align: center !important;
	}
	
		.savebig2 {
	text-transform: uppercase;
	color: #ebebeb !important;
	font-weight: 300 !important; 
	font-size: 1.65em !important; 
	line-spacing: 0em !important;
	margin: 0 0 0 0 ;   
	}

			
	/* 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: 0.87em !important;
	letter-spacing: 0.072em !important;
	word-spacing: 0.05em !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;
	text-transform: uppercase;
	}
	
	/* sjd - main "ULTIMATE PATCHES" banner text size at small size   */
				.banner-logo {
					font-size: 18.25pt !important;
					letter-spacing: 0.05em !important;
					margin: 0em 0 0.6em 0 !important;
				}
				
				.banner-logo strong {
					font-size: 19pt !important;
					letter-spacing: 0.05em !important;
					margin: 0em 0 0.6em 0 !important;
				}
				
					/* sjd - main "ULTIMATE PATCHES" banner LOGO IMAGE size at small size   */
				.banner-logoimage {
				/*	font-size: 18.25pt !important;	
					letter-spacing: 0.05em !important;	*/
					margin: 0.12em 0 1.1em 0 !important;
				}
				
	
			
	/* sjd - custom class override i made for front page text Line 1 "high quality" etc - at small screen size 		*/
	#banner h1 {
	font-size: 0.89em !important;
	line-height: 1.5em !important;
	color: #fff;
	line-height: 1.2em !important;
	letter-spacing: 0.04em;
	float: none;
	text-align: center;
	width: 100%;
	margin: -1.25em 0 1em 0;
	}
					
	.midtext1 {
	padding: 0 0 0.85em 0 !important;
	font-size: 0.85em !important;
	line-height: 1.2em !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em;
	float: none;
	text-align: center;
	width: 100%;
	margin: 0em 0 0em 0;
	}
	
	
	.midtext2 {
	padding: 0 1.5em 0.0em 1.5em;
	font-weight: 400 !important;
	font-size: 0.87em !important;
	line-height: 1.2em !important;
	letter-spacing: 0.01em !important;
	float: none;
	text-align: center;
	width: 100%;
	margin: 0em 0 1.9em 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.88em !important;
/*	margin: 0 0 0.5em 0;	*/
	color: #fff;
	letter-spacing: 0.02em;
	float: none;
	text-align: center;
	width: 100%;
	margin: 0em 0 1.25em 0;
				}
				
				
						/* sjd - copied from h2 custom class override i made for front page text below "as seen on" - at small screen size */	
	.indexsale {
	line-height: 1.2em !important;
font-size: 0.88em !important;
	margin: 0 0 0.5em 0;	
	color: #fff;
	letter-spacing: 0.04em;
	float: none;
	text-align: center;
	width: 100%;
	margin: 0em 0 1.2em 0 !important;
				}
				
										/* sjd - copied from h2 custom class override i made for front FREE page text below "as seen on" - at small screen size */	
	.indexsalefree {
	line-height: 1.2em !important;
font-size: 0.88em !important;	
	color: #fff;
	letter-spacing: 0.04em;
	float: none;
	text-align: center;
	width: 100%;
	margin: 1.95em 0 1.9em 0 !important;
				}
	



		/* Sidebar */

			#sidebar {
				margin-top: 2em;
			}

		/* Footer */

			#copyright {
				margin-top: 0em;
/*				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;
			}	
			

	}
	/* sjd - end small screen size */
	
	
	
	

/* sjd custom styles */

      p.normal {
        font-weight: normal;
      }
      p.lighter {
        font-weight: lighter;
      }
/*	  p.lightersmaller {
        font-weight: lighter;
		font-size: 0.7rem;   */
      }
      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: 500;
	font-family: "Source Sans Pro", sans-serif;
	letter-spacing: 0.04em;
	color: #ccc200;
	position: absolute;	
	left: 1.75em;
	top: 45%;
	margin-top: -0.65em;
	text-decoration: none !important;
}
	  

sjd custom styles imported from original website index as of 2021 before new site 

/*
.styleh2major {
		border-bottom: solid 1px #ffffff;
	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: 70%;
font-style: italic;
}
.Reg-Text-Red {color: #F00000}
.style6 {
	font-size: 0.6rem;
	font-style: italic;
}
.style17 {
	font-size: 1.5rem;
	font-weight: bold;
	}
	
	.style17reg {
	font-size: 1.5rem;}
}

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

.styleUnderline {
	text-decoration: Underline;
}

.style19 {font-size: 1.2rem}


.style20 {
	font-size: 1rem;
	font-weight: bold;}
	
.style20-unbold {
	font-size: 1rem;}
	
.style22 {font-size: 0.7rem}
.style25 {font-weight: bold}
.style26 {
	line-height: 4pt;
	font-size: 60%;
}
.style29 {
	font-size: 1rem;
	font-weight: bold;
}
.style31 {color: #96A9A4; font-weight: bold; }
.style33 {color: #ff0000}

.style34WHITE {color: #ffffff; font-weight: bold; letter-spacing: 0.04rem; }

.style-BEST-SELLING {
	color: #F1790C;
	font-weight: bold;
	letter-spacing: 0.04rem;}
	
.style-BOLD-LAVENDER {
	color: #adb7e1;
	font-weight: bold;
	letter-spacing: 0.04rem;}
	
	.style-LAVENDER {
	color: #adb7e1;
	letter-spacing: 0.04rem;}

.style-MICROFREAK-ORANGE {
	color: #F1790C;
	font-weight: bold;
	letter-spacing: 0.04rem;}

.style-JU06-BLUE {
	color: #248bff;
	font-weight: bold;
	letter-spacing: 0.04rem;}
	
.style-MINILOGUE XD LAVENDER {
	color: #adb7e1;
	font-weight: bold;
	letter-spacing: 0.04rem;}

.style-DEEPMIND-LAVENDER {
	color: #adb7e1;
	font-weight: bold;
	letter-spacing: 0.04rem;}

.style-MINIBRUTE-FUCHSIA {
	color: #c090d0;
	font-weight: bold;
	letter-spacing: 0.04rem;}
	
.style19-BestValue {font-size: 1.2rem;  }

.style-JDXI-RED {
	color: #FF491C;
	font-weight: bold;
	letter-spacing: 0.04rem;}
	
.style-UNO-RED {
	color: #FF491C;
	font-weight: bold;
	letter-spacing: 0.04rem;}
	
.style-D05-LIME {
	color: #a9f800;
	font-weight: bold;
	letter-spacing: 0.04rem;}
	
.style-JP08-ORANGE {
	color: #ff7e00;
	font-weight: bold;
	letter-spacing: 0.04rem;}
	
.style-BASSTN2-SKYBLUE {
	color: #52C0E4;
	font-weight: bold;
	letter-spacing: 0.04rem;}
	
.style-MONOLOGUE-GOLD {
	color: #CCC200;
	font-weight: bold;
	letter-spacing: 0.04rem;}
	
.style-MINILOGUE-PURPLE {
	color: #c090d0;
	font-weight: bold;
	letter-spacing: 0.04rem;}
	
.style-SH01A-GREY {
	color: #899fff;
	font-weight: bold;
	letter-spacing: 0.04rem;}
	
.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-Genre-List {color: #ffffff;
letter-spacing: 0.1rem;
line-height: 0.9rem;
font-size: 0.8rem;
font-weight: bold;}
.style-Genre-Bullets-Blue {color: #248bff; font-size: 1.1rem; line-height: 0.9rem; font-weight: bold; letter-spacing: 0.05rem;}
.style-Genre-Bullets-Pink {color: #FF3399; font-size: 1.1rem; line-height: 0.9rem; font-weight: bold; letter-spacing: 0.05rem;}
.style-As-Seen-On-Blue {color: #999; font-size: 0.9rem; line-height: 0.7rem; font-weight: bold; font-style: italic;letter-spacing: 0.02rem;}

	.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: #FFFFFF; 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: #FFFFFF; font: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; font-size: 1.1rem;}
.style99SM {color: #FFFFFF; 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;}

/* sjd custom 2017 styles end */

/* sjd - microchip logo color */
 .fa-microchip {
      color: #bbb200;
	  text-shadow: 0 0 0px #33C, 0 0 0px #FFF;
    }
	
	/* sjd - customized bullet list icons - unused on index pg  */
.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;
	}
	
	/* sjd end custom bullet list icons  */