/* ---------------------
 * Common styles - www.pgmusic.com
 * Revised Sept 2018. v2.9
 * April 2019. v3.0
 * Don't autoprefix. Minify for production.
 * Some sections prefixed already for IE.
 * 
 * --Sections--
 * Default and Reset
 * General BG and txt styles 
 * lists
 * win/mac symbols 
 * videos
 * 'new' stickers
 * HTML5 audio player
 * General Layout
 * Useful grid and flex classes
 * Block headings
 * Main Header - Layout
 * Main Header: PG logo
 * Main Header: Contact
 * Main Header: Utils 
 * Main Header: Dropdowns
 * Modals: General
 * Modals: Positioning 
 * Modals: Content
 * Modals: Intl 
 * Google custom Search Overrides
 * Main Nav: General
 * Main Nav: Live help
 * Breadcrumbs
 * Sub Nav: General
 * Sub Nav: Button
 * Tabbed Nav
 * Nav: Highlight current
 * Footer
 * -- TODO update all CSS between --
 * -- Footer and responsivity ------
 * Buttons: New
 * Button: Small 
 * Button: big
 * Popups - old style
 * Popups: Content (old style)
 * Large blocks of text
 * Small blocks of text
 * Utility
 * forms
 * pagination 
 * ----------------------------------
 * Responsivity ( > 1000px )
 * Responsivity ( 320px - 1000px )
 
 * Useful links
 * https://autoprefixer.github.io (don't use for this file)
 * https://cssminifier.com/
------------------------*/


/* ---------------------
 * Default and Reset
 * ---------------------*/
 
* {
	margin: 0px;
	padding: 0px;
	border: 0px;
	outline-style: none;
	color: #242424;
}

/* html5 elements for older browsers */
header, section, footer, aside, nav, main, article, figure {
	display: block;
}

body {
	font-family: Arial,Verdana,sans-serif;
	background-color: #f3f6f7;
}

a {
	text-decoration: none; 
	cursor: pointer;
}

b,i,em,u,strong,font,sup{
	color: inherit;
}

/* links to anchor tag need to be offset due to fixed header */
/* Note: this is done with JS now.  CSS solutions do not work consistently
/* for all browsers.
/*
a[name]:before, a.v-offset:before {
	display: block;
	content: "";
	height: 80px;
	margin-top: -80px;
}

Previously, this was the following 
a[name], a.v-offset {
	display:block;
	position:relative;
	top: -60px;
	visibility:hidden;
}
However this stopped working in some browsers e.g. Edge, if the anchor was at the top of a div.
Still problems if the anchor is at the top (doesn't scroll down far enough), however at
least it scrolls. Feb 28 2019.

*/



/* some tags might need to be excluded from the offset with: 
a[id=audioPlayer] {display: inline;top: 0;visibility: visible} */

/* small dot used as a separator */ 
.divdot:before {content: "."}	
.divdot {
	font-size: 30px;
	line-height: 0px;
	position:relative;
	top:-2px;   	
}

/* Generic css fa icon */
.icon::after {
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
  	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}



/* --------------------- 
 * General background & 
 * text styles
 * --------------------- */
	
.gold-grad-bg {
	background: #FCBF20; /* Old browsers */
	background: -moz-linear-gradient(top,  #FCBF20 0%, #FCD352 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #FCBF20 0%,#FCD352 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #FCBF20 0%,#FCD352 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FCBF20', endColorstr='#FCD352',GradientType=0 ); /* IE6-9 */
}

.green-grad-bg {
	background: #2df213; /* Old browsers */
	background: -moz-linear-gradient(top,  #2ae212 0%, #299a0b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #2ae212 0%,#299a0b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #2ae212 0%,#299a0b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2ae212', endColorstr='#299a0b',GradientType=0 ); /* IE6-9 */
}

.blue-grad-bg {
	background: linear-gradient(to bottom,  #fbfcfc 0%,#ccd2db 100%);
}

.gold-bg {background: #FCBF20}
.gold-txt{color:#F5DB82}
.green-txt {color:#3BF03D}
.bluegrey-bg {background: #41525E}
.grey-bg {background: #49555B}

sup {
	font-size:70% /* reg symbol */
}

.gold-grad-text {
	font-size:28px;
	background: -webkit-linear-gradient(45deg,  #e8b61a 2%,#bb832d 49%,#e8b61a 91%);
	background: -o-linear-gradient(45deg,  #e8b61a 2%,#bb832d 49%,#e8b61a 91%);
	background: linear-gradient(45deg, #ce9f0d 2%,#bb832d 49%,#d7a50a 91%);
	color:transparent;
	-webkit-background-clip: text;
	background-clip: text;
}

.light-gold-grad-text {
	font-size:28px;
	background: -webkit-linear-gradient(45deg,  #e8b61a 2%,#bb832d 49%,#e8b61a 91%);
	background: -o-linear-gradient(45deg,  #e8b61a 2%,#bb832d 49%,#e8b61a 91%);
	background: linear-gradient(45deg,  #e8b61a 2%,#bb832d 49%,#e8b61a 91%);
	color:transparent;
	-webkit-background-clip: text;
	background-clip: text;
}


.grey-radial-bg {
	background: radial-gradient(ellipse at center, rgb(255, 255, 255) 0%,rgb(167, 162, 162) 100%);
}

.wax-radial-bg {
	background: radial-gradient(ellipse at center,  rgba(252,255,244,1) 0%,rgba(233,233,206,1) 100%);
}

.bright-gold-radial-bg {
	background: radial-gradient(ellipse at center,  #f5c20a 0%,#b88005 100%);
}

.gold-grad-bg {
	/*background: linear-gradient(45deg,  #e8b61a 2%,#bb832d 49%,#e8b61a 91%);	*/
	background: linear-gradient(45deg,  #bb832d 2%, #F5C20A 49%,#bb832d 91%);
}

.darkgrey-trans-bg {
	background: rgba(34,34,35,0.6);
}

.black-ltr-grad {
	background: linear-gradient(to right, #e5e5e5 1%,#0e0e0e 55%);	
}

.white-bg {
	background:#fff;
}

.dark-grey-border {
	border: 3px solid #454545;
}
.white-border {
	border:5px solid #fff;
	border-radius:4px;	
}

.white-txt-shadow {
	text-shadow: 1px 0px 1px #FFFFFF;	
}

.black-txt-shadow {
	text-shadow: 1px 0px 1px #000000;	
}

.shadow {
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);	
}

.gold-border {
	border: 2px solid #aa7304;
	border-radius: 4px;
}

.gold-grad-border {
	/*border:4px solid transparent;*/
	border:4px solid rgba(0,0,0,0.01); /* Safari fix, didn't like transparent */
	border-image: linear-gradient(45deg, #e8b61a 2%,#bb832d 49%,#e8b61a 91%);
	border-image-slice:1;
	box-shadow: 0 15px 25px rgba(0,0,0,.2);
}

/*gold checkmark (list also available - see below) */
.fa-check {
	font-size: 18px;
	color: #CE9722;
	line-height: 17px;
	margin-bottom: 2px;
	position: relative;
	top: -2px;
	padding: 5px;
}

/* --------------------- 
 * lists
 * ---------------------*/

/* Basic list item icon using Font Awesome */
.list-icon {
	padding-left:20px; /* space for icon */
	list-style-type:none; 
}	

.list-icon li, .text .list-icon li {
	background:none; /* remove any bullet image */
}

.list-icon li:before {
	margin:0 5px 0 -15px;/*allows list items to indent properly*/
	font-family: "Font Awesome 5 Free";
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
}

/* Lists (e.g. newsbits) with overflow hidden 
   the icon is hidden if a negative margin is used.
   This solution is fine for single-line lists */
.list-icon.no-offset {
	padding-left:0px;
}

.list-icon.no-offset li:before {
	margin:0 5px 0 0;
}

/* fa list types */

.gold-caret li:before{
	content: "\f0da";
	font-size:15px;
	line-height:15px;
	color: #B17905;
	font-weight: 900;  	
	margin-right: 7px;
	position:relative;
	top:2px;
}

.gc-large li::before {
	font-size:20px;	
}

.gc-small li::before {
	font-size:15px;	
}

.gold-check li:before{
	content: "\f00c";
	font-size: 18px;
	color: #CE9722;
	line-height: 17px;
	margin-bottom: 2px;
	position: relative;
	top: -2px;
	padding: 5px;
}

.gchk-large li::before {
	font-size:18px;	
}

.gchk-small li::before {
	font-size:15px;	
}


/* --------------------- 
 * WIN or MAC symbol 
 * ---------------------*/

/* absolute, mainly for video (requires positioned parent) */
.os-badge,
.os-badge-1,
.os-badge-2 {
	text-transform:uppercase;
	border-radius:2px;
	border: 1px solid #ddd;
	padding: 0px 2px;
	float: right;
	font-size: 12px;
	position: absolute;
	right: 3px;
	top: 3px;
	line-height:16px;
}

/* left symbol if both OS's */
.os-badge-1 {right:38px;}

/* inline, next to page title */
.os-badge-inline-title {
	font-weight: normal;
	text-transform: uppercase;
	border-radius: 5px;
	border: 1px solid #adadad;
	padding: 2px 8px;
	font-size: 18px;
	line-height: 18px;
	background: linear-gradient(to bottom, #fff 0%,#dadada 100%);
}

/* -----------------
 * Videos
 * ----------------- */
 
.video {
	cursor:pointer;	
	position: relative; /* allow OS badge to be absolutely positioned */
	-webkit-box-sizing: border-box;
	box-sizing: border-box;	
	text-align:center;
}

/* Big year is used in some video titles */
.year {
	font-size:30px;
	line-height:30px;
	font-weight:900;	
}

/* video sizes */

.sm-rect {
	height: 50px;
	font-size: 15px;
	font-weight: bold;
	padding: 2px 10px;
	width: 18vw;
	line-height:15px;
	max-width:265px;
	overflow: hidden;
}
@media only screen and (max-width: 950px) {
	.mobile .sm-rect{font-size:14px;}
}
@media only screen and (max-width: 780px) {
	.mobile .sm-rect{font-size: 12px; line-height: 15px;}
}

@media only screen and (max-width: 700px) {
	/* win and mac boxes stack at this point 
	 * TODO more generic solution */
	.mobile .sm-rect{width:36vw}
}

.lg-rect {
	min-height: 80px;
	font-size: 18px;
	font-weight: bold;
	padding: 4px;
	max-width: 250px;
	width: 100%;
}

.md-rect {
	height: 76px;
	font-size: 17px;
	font-weight: bold;
	padding: 5px 5px 2px 5px;
	max-width: 230px;
	width: 100%;
}

.sm-square {
	width: 100px;
	height: 73px;
	font-size: 17px;
	font-weight: bold;
	padding: 5px;
	margin: 4px;
}

.md-square {
	width: 175px;
	height: 100px;
	font-size: 16px;
	font-weight: bold;
	padding: 5px;
}

.vid-title {
	padding-right:13px;
	line-height:17px;	
}

.vid-container {
	padding:12px;
	max-width:500px;
	border-radius:4px;
	margin: 12px 12px 12px 0;
}

.vid-container .vid-cap {
	line-height: 18px;
	color: #242424;
	font-size: 14px;
	font-weight: normal;
	text-align: center;	
}

.vid-container .vid-cap strong {
	font-size:15px;
}

/* play icon */
.play::after {
	content: "\f144";
	font-size:32px;
	line-height:35px;
	color:#EFB306;
	background: -webkit-linear-gradient(45deg,  #bc842f 0%,#bb832d 42%,#e8b61a 76%);
	background: -o-linear-gradient(45deg,  #bc842f 0%,#bb832d 42%,#e8b61a 76%);
	background: linear-gradient(45deg,  #bc842f 0%,#bb832d 42%,#e8b61a 76%);
	color:transparent;
	-webkit-background-clip: text;
	background-clip: text;
	position: relative;
	top: 4px;	
}

/* -----------------
 * IE 10-11 do not support conditional comments, however we can target them here.
 * Fix for gradient text */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)  {		
		/* no support for gradient text using this technique */
		.play::after {
			color:#EFB306;
			background: none;
		}
			
		.gold-grad-text, light-gold-grad-text {
			color:#EFB306;
			background:none;
		}  
}

/* -----------------
 * "New" stickers
 * ----------------- */

.sticker {
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	text-align:center;
	position:absolute;
	font-size:24px;
	color:#fff;
	font-weight:bold;
	text-transform:uppercase;
	text-shadow:-1px -1px 0px #666;
	-webkit-box-shadow: 0px 0px 14px 3px rgba(0,0,0,.1);
	box-shadow: 0px 0px 14px 3px rgba(0,0,0,.1);
	line-height: 24px;
	-ms-flex-item-align: self-start;
	-ms-grid-row-align: self-start;
	align-self: self-start; /* overrides grid center align */
	margin-top: 3px;	
}

.str-inline {
	display:inline-block;
	margin: 0 4px;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	position:relative;
	-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,.5);
	box-shadow: 1px 1px 2px 0px rgba(0,0,0,.5);
}

.str-sqr {
	width:78px;
	height:36px;
	border-radius:2px;
	padding: 5px 0;
	border: 2px solid #F3F6F7;
}

.str-sqr-center {
	left: 50%;
	margin-left: -39px;	
}

.str-sqr-right {
	left: 100%;
	margin-left: -81px;	
}

.str-sqr-left {
	left: 0%;
	margin-left: 3px;
}

.str-circ {
	width:78px;
	height:78px;
	border-radius:50%;
	padding: 24px 0;
	border: 4px solid #F3F6F7;
}
	
.str-circ-right {
	right:-14px;
	margin-left: -81px;
	padding: 26px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	top: -17px;	
}

.str-circ-left {
	left: -14px;
	padding: 26px 0;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	top:-17px;
}
	
@media only screen and (max-width: 1050px) {
	.mobile .sticker{font-size:18px; line-height:18px;}
	.mobile .str-sqr {width: 64px;height: 31px;}
	.mobile .str-sqr-right{margin-left:-67px}
	.mobile .str-circ {width:65px; height:65px;}
	.mobile .str-circ-right {}
	.mobile .str-circ-left {}
}


/* ---------------------
 * HTML5 Audio player
 * --------------------- */
 

.rtauddemos5 {
	margin: 0px 6px 0px 13px;
	font-size: 12px;
	color: #004FC3;
	cursor: pointer;
}

audio.minimal1 {
	display:block; 
	position:relative; 
	top:0px; 
	cursor:pointer; 
	width:200px;
	border:thin solid #222;
}

/* ---------------------
 * General Layout
 * --------------------- */

#container {
	margin: 0 auto; 
	overflow:hidden;
}

.col {float: left}
.col-third {width: 33.33%;}
.col-quarter {width:25%;}
.col-fifth {width:20%;}
.col-left {float:left; width:50%}
.col-right {float:right; width:50%}

#header-bg {
	height: 66px;
	left: 0;
	top: 0;
	z-index: 999;
	opacity: 1;
	background: #41525E;
	overflow:hidden;
	box-sizing:border-box;
	/*background: #364450; alternative (mn) */	
}

#header-content,
#nav_main-content {
      top: 0;
	margin:0 auto;
	min-width:960px;
	padding:0px 4px 6px 4px;
      z-index: 1000;
}

#nav_main-content {
	max-width:1168px;
}

/* when the navbar becomes fixed (add class sticky-nav), this prevents the page from jumping */
#nav_main-bg-wrapper {
	height: 42px;
}

#nav_main-bg {
	padding:3px 0 5px 0;
	height: 42px;
	left: 0;
	width: 100%;
	z-index: 998;
	box-shadow:  0px 2px 4px #999;
	background: #2C3840;
 	/* background: #22313F; alternative (mn) */
}

#main-content {
	margin:4px auto 0 auto;
	padding-top:4px;
	box-sizing:border-box;
	max-width:1168px; /* was width:1168px*/
}


.rowBlock {
	width: 1168px;
	margin: 12px 0px;
	overflow: hidden; /* was visible */
	border-radius: 4px;
	box-shadow: rgba(0,0,0,.3) 1px 1px 3px;
	background: #ffffff;
      position: relative;
      z-index:10;
}

.rowBlockTabs {
	margin: 0 0 12px 0; 
	overflow: hidden; 
	background: #ffffff;
	z-index:20; 
	position:relative; 
	border-top: 1px solid #d9dcdd; 
	border-radius: 0px 4px 4px 4px;
	box-shadow: rgba(0,0,0,.3) 1px 1px 3px;}

.rowBlock .fullBlock {
	padding: 16px 22px;
}

.rowBlock .block {float: left}
.rowBlock .shortBlock {height:215px}
.rowBlock .oneHalf {width: 50%}
.rowBlock .oneThird {width: 33.3%}
.rowBlock .twoThirds {width: 66.6%}
.rowBlock .oneQuarter {width:25%}
.rowBlock .threeQuarters {width: 75%}
.rowBlock .oneFifth {width: 20%}
.rowBlock .twoFifths {width: 40%}
.rowBlock .threeFifths {width: 60%}
.rowBlock .fourFifths {width: 80%}


/* -----------------
 * Useful grid and flex classes
 * ----------------- */
 
 /* not used now but may be useful */	
.boxes {
  	display: grid;
  	grid-auto-rows: minmax(125px, auto);
  	grid-gap: .5rem;
}


 /* default flex box.
  * use "flex-grid" to define number/width of columns.
  * NOTE: flex-grid defaults to two columns, 50%, and becomes 
  * one column below 700px */
.flex-grid, .flex {
	display:flex;	
	justify-content:space-between; /* align left and right */
	align-items: stretch;/* cols have same height */
	flex-wrap:nowrap;	
}

/* default 2 columns of equal width. */
.flex-grid > .flex-col {
	flex: 1 1 50%;	
}

/* flex item (child) */
[class*='flex-col']{
	flex-grow: 1;
	flex-shrink: 1;
	box-sizing:border-box;
}

[class*='flex-col-']::after {
	content: "";
      clear: both;
      display: table;
}

.flex-col-1 {flex-basis: 8.33%;}
.flex-col-2 {flex-basis: 16.66%;}
.flex-col-3 {flex-basis: 25%;}
.flex-col-4 {flex-basis: 33.33%;}
.flex-col-5 {flex-basis: 41.66%;}
.flex-col-6 {flex-basis: 50%;}
.flex-col-7 {flex-basis: 58.33%;}
.flex-col-8 {flex-basis: 66.66%;}
.flex-col-9 {flex-basis: 75%;}
.flex-col-10 {flex-basis: 83.33%;}
.flex-col-11 {flex-basis: 91.66%;}
.flex-col-12 {flex-basis: 100%;}

@media only screen and (max-width: 700px) {
	.flex-grid {display:block;}
	[class*='flex-col-']{display:block;}
}

.fcenter, .flex-center {
	align-items: center;
	justify-content: center;
}

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

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


.fspaced, .flex-spaced {
	justify-content: space-around;
}

.fwrap, .flex-wrap {
	flex-wrap:wrap;	
}

.fcol, .flex-dir-col {
	flex-direction: column;
}

.frow, .flex-dir-row {
	flex-direction: row;
}


/* ---------------------
 * Block headings
 * ---------------------*/

.block .titleBar {
	/*height: 22px;*/
	opacity: .95;
	color: #fff;
	background: #2C3840;
	border-right: 1px solid #ECBD1C;
	border-left: 1px solid #e5eaec;
	font-size: 12px;
	font-weight: bold;
	padding: 6px 10px 4px 8px;
    overflow: hidden;
}

.block .content {border-left: 1px solid #cbd4d8;}
.first .titleBar{border-radius: 4px 0 0 0;}
.first .content {border-radius:0 0 0 4px;}
.first .titleBar, .first .content {border-left: none !important;}
.last .titleBar {border-radius: 0 4px 0 0}
.last .titleBar, .last .content {border-right: none !important;}
.last .content {border-radius:0 0 4px 0;}


/* ---------------------
 * Main Header - Layout
 * --------------------- */

/* flex container */
#header {
	display: flex;
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
  	display: -ms-flexbox;  /* TWEENER - IE 10 */
  	display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
	flex-wrap:nowrap;
	justify-content:space-between; 
	-webkit-justify-content: space-between;
	-moz-justify-content: space-between;
}

/* flex item */
.header-item {
}
	 
#header .contact-util {
	float: left;
	padding-left:10px;
	padding-right: 6px;	
}

#header .header-util {
	float: left;
	padding-left: 10px;
	border-right: 2px solid #878c8d;
	padding-right: 10px;
	height: 38px;
}

#header #header-utils .header-util:first-child,
#header #header-contact-info .header-util:last-child {
    	border-right: none;
}

#header #header-utils .header-util {
	float:right;
}

#header #util-search {
	border-right:none;
	margin-right:4px;
}

#util-contact-info:hover .util-desc,
#util-contact-status a:hover,
#hc-method-chat:hover a,
#hc-method-ordering:hover a,
#header-utils .util-main:hover ,
#util-login-loginout:hover,
#util-minicart .util-detail:hover,
#util-contact-info:hover .util-detail,
#util-intl:hover .util-detail,
#util-search:hover .util-detail {
	text-decoration:underline;
	cursor:pointer;
}

#header .util-icon {
	float:left;
	padding:0 6px 0 0;
}

#header .util-icon *,
#header .util-detail * {
	color:#fff;
}

/*mobile version only */
#header .mobile-util-detail {
	display:none;
	font-size:11px;
}

#header .util-detail {
	font-size: 12px;
	text-align:right;
	height:16px;
	color:#fff;
}

#header .util-desc {
	height:20px;
	font-size: 12px;
}

#header .util-main {
	height:18px;
	margin-top:3px;
	cursor:pointer;
}

#header .header-util .util-title {
	height:18px;
	float: right;
	font-size:16px;
	color:#fff;	
}

#header .util-title a {
	font-size:16px;
}


/* -----------------
 * Main Header:  PG logo 
 * ----------------- */

#pglogo-main-header {
	padding:8px 6px 0;
	margin-right:10px;
	float:left;	
}

#pglogo-main-header,
#pglogo-main-header img  {
	width:160px
}


/* -----------------
 * Main Header: Contact 
 * ----------------- */
 
#util-contact-time {
	text-align:right;
	min-width: 90px; /* smoother transition when displaying the time */
}
 
#header .util-icon .fa-question-circle { 
	font-size:21px;
	position:relative;
	top:-5px;
	padding-right:0px;
}

#header-contact-info {
	height: 38px;
	padding: 6px 0;
	margin: 9px 0 0 0;
	border-radius: 2px;
	background: #394C59; /* PG request */
	box-shadow: 0px 0px 0px 1px rgb(0,0,0,.2); /* maybe */
}

#header-contact-info a {
	color:#fff;
	font-weight:normal;
	
}

#header-contact-info .hc-method:not(:last-child) {
	margin: 0 3px 0 0px;
}

#header-contact-info .hc-method .fa-phone {
	font-size:14px;
	cursor:pointer;
	color:#fff;
}

#header-contact-info .hc-method .fa-comments {
	font-size: 12px;
	cursor:pointer;
	padding-right: 3px;
	color:#fff;
	
}

#header-contact-info .hc-method .fa-caret-down {
	margin-left:8px;
	cursor:pointer;
	font-size:14px;
}

#header-contact-info .hc-status {
	padding: 0 4px;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: bold;
	cursor:pointer;
}

#header-contact-info .contact-opt-closed {
	font-size:10px;
	color:#fff;	
}

#header-contact-info #hc-ordering-status {
	padding:0 4px 0 1px;	
}

/*hours display above phone numbers for mobile*/
#header .util-detail#hc-mobile-open-today {
	display:none; 
	margin: 0 0 3px 0;
	text-align:center;
}

#header .util-detail#hc-mobile-open-today #hc-m-time {color: #F5DB82 }


/* -----------------
 * Main Header:  Utils 
 * ----------------- */

#header-utils {
	margin-top: 15px;
	float:right;
}

#header #util-myaccount .util-detail span {
	font-size:12px;
}

#header #util-search .util-detail,
#header #util-minicart .util-detail a span,
#header #util-login-loginout {
	font-size:11px;
	white-space:nowrap;
}

#header #util-search .util-icon {
	float:right
}

#header .header-util .util-icon .fa-shopping-cart{
	font-size:20px;
	position:relative;
	top:-3px;
}

#header .util-icon .fa-user,
#header .util-icon .fa-globe {
	font-size:21px;
	position:relative;
	top:-5px;
	padding-right:3px;
}

#header-utils .fa-search {
	font-size:19px;
	position:relative;
	top:-1px;
}


/* -----------------
 * Main Header:  Dropdowns
 * ----------------- */

/* The container <div> - needed to position the dropdown content */
.dropdown {
	position: relative;
	display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #fff;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 11; /* rowblock has z-index 10*/
	margin-top:2px;
}

/* Links inside the dropdown */
#header .dropdown-content a {
	color: #067182;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	font-size:14px;
}

#header #account-dropdown {
	position: fixed;
	top: 57px;
	right: 3%;
	width:200px;	
}

#header #cart-dropdown {
	position: fixed;
	top: 57px;
	right: 2%;	
}

#header .dropdown-content .dd-heading {
	padding: 12px 16px;
	font-weight:bold;
    	display: block;
    	font-size:14px;
	color:#242424;	
	border-bottom:1px solid #e3e4e5;
}

/* hidden until cart info successfully retrieved */
#header .dropdown-content #cart-dropdown-heading {display:none}

#header .dropdown-content .dd-heading * {
	font-weight:normal;
	font-size:14px;
	color:#242424;
	text-decoration: none;
}

#dd-loggedin {display:none}
#dd-loggedout {display:block}

/* Change color of dropdown links on hover */
#header .dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu. JS adds this class to .dropdown-content */
.show {display:block;} 



/* -----------------
 * Modals: General
 * ----------------- */

.modal-container {
	-webkit-border-radius: 2px 2px 2px 2px;
	border-radius: 2px 2px 2px 2px;
	z-index:10001;
	display:none;
}

.modal-container button.close {
	position: relative;
	top: -9px;
	left: 6px;
	cursor: pointer;
}

.modal-container .fa-window-close{
	font-size: 20px;
	color:#454545;	
}

/* overlays the page when modal dialog active */
.modal-backdrop {
	 position:fixed;
	 top:0;
	 right:0;
	 bottom:0;
	 left:0;
	 z-index:10000;
	 background-color:#000;
	 opacity:.5;
}

/* -----------------
 * Modals: Positioning 
 * ----------------- */

/* generic modal, positioned in center */
.modal-container {
	position:fixed;
	max-width:340px;
	width:100%;
	top:30%;
	right:initial;
	bottom:initial;
	left:40%;	
}

.modal-container#ordering-modal {
	position: fixed;
	width: 300px;
	bottom: 10%;
	right: 16%;	
	top: initial;
	left: initial;	
}

.modal-container#contact-modal {
	position: fixed;
	max-width: 500px;
	width:100%;
	bottom: 7%;
	right: 16%;
	top:initial;
	left: initial;
}

.modal-container#other-modal {
	position: fixed;
	width: 340px;
	bottom: 7%;
	right: 16%;	
	top:initial;
	left:initial;
}

.modal-container#intl-bb-modal {
	position: fixed;
	width:100%;
	max-width: 600px;
	top: 60px;
	right: 3.5%;
	bottom:initial;
	left:initial;	
}

.modal-container#head-searchbox-modal {
	position: fixed;
	width: 50%;
	max-width:initial;
	top:59px;
	right: 56px;
	bottom:initial;
	left:initial;	
}

.modal-container#manual-searchbox-modal {
	position: fixed;
	max-width:initial;
	width: 50%;
	top: 60px;
	right: 19%;
	bottom:initial;
	left:initial;	
}

/* below 960px, modals are left aligned and not fixed. 
   Searchbox expands to full width */
@media screen and (max-width: 960px) {
	.modal-container {left:0% !important; position:absolute !important;}
	#head-searchbox-modal {width:100%}
}


/* -----------------
 * Modals: Content
 * ----------------- */

.modal-open .modal {
	 overflow-x:hidden;
	 overflow-y:auto
}

.modal-dialog {
	 position:relative;
	 width:auto;
	 margin:10px
}

.modal-content {
	 position:relative;
	 display:-webkit-box;
	 display:-ms-flexbox;
	 display:flex;
	 -webkit-box-orient:vertical;
	 -webkit-box-direction:normal;
	 -ms-flex-direction:column;
	 flex-direction:column;
	 background-color:#fff;
	 background-clip:padding-box;
	 border:1px solid rgba(0,0,0,.2);
	 box-shadow:0 3px 9px rgba(0,0,0,.5);
	 outline:0
}

.modal-backdrop.fade {opacity:0}
.modal-backdrop.show {opacity:.5}

.modal-header {
	 display:-webkit-box;
	 display:-ms-flexbox;
	 display:flex;
	 -webkit-box-align:center;
	 -ms-flex-align:center;
	 align-items:center;
	 -webkit-box-pack:justify;
	 -ms-flex-pack:justify;
	 justify-content:space-between;
	 font-weight: 500;
	 font-size:16px;
	 padding:0px 15px 15px;
	 border-bottom:1px solid #e3e4e5;
}

.modal-header-first{
	 padding:15px;	
}

.modal-title {
	 margin-bottom:0;
	 font-size:16px;
	 font-weight:bold;
	 line-height:1.5;
}

.modal-body {
	 position:relative;
	 -webkit-box-flex:1;
	 -ms-flex:1 1 auto;
	 flex:1 1 auto;
	 padding:15px;
}

.modal-body p {
	font-size:14px;
	line-height:18px;
	margin: 6px 0;	
}

.modal-body ul {
	list-style:none;
	margin:14px;	
}

.modal-body ul li {
	font-size: 16px;
	line-height: 22px;
	margin-bottom: 14px;
}

.modal-body ul.contact-modal li {
	font-size: 14px;
	line-height: 18px;
	margin-bottom: 10px;
}

.modal-body ul li a, .modal-header h5.modal-title a {color:#067182;}
.modal-body ul li a:hover, .modal-header h5.modal-title a:hover{text-decoration:underline;	}
.modal-body ul li .fa-caret-right {padding:0 8px 0 0;	}
.modal-body ul li .leftcol {float:left}
.modal-body ul li .rightcol {float:left;padding-left:6px;}


/* -----------------
 * Modals: Intl 
 * ----------------- */
 
#intl-bb-modal {
	display:none;
}


#intl-bb-modal img {
	border: 1px solid #000000;
	margin: 3px 8px 0px 0px;
	-webkit-box-shadow: rgba(0,0,0,.6) 1px 1px 3px; 
	-moz-box-shadow: rgba(0,0,0,.6) 1px 1px 3px; 
	box-shadow: rgba(0,0,0,.6) 1px 1px 3px;
}

#intl-bb-modal .flagscol {
	float:left;
	width:42%;		
}

#intl-bb-modal  .flagscol li {
	font-size: 14px;
	line-height: 16px;
	margin-bottom: 16px;
}


/* -----------------
 * Google custom 
 * Search Overrides
 * ----------------- */

/* Hide other refinements other than the one we're searching. */
.modal-content .gsc-tabhInactive{display:none;}

/* mostly hide the tab outline, and style the text */
.modal-content .gsc-tabsArea {border:none}
.modal-content .gsc-tabHeader span {font-size:16px}
.modal-content .gsc-tabHeader {font-size:14px;}
.modal-content .gsc-tabHeader:before {content: "Searching: ";}


/* -----------------
 * Main Nav: General
 * ----------------- */

/* navigation bar becomes fixed to top of screen */
.sticky-nav {
	position: fixed;
	top: 0;
	width: 100%;
	opacity:.88;
	border-top:1px solid #888;
}

#nav_main ul {
	box-sizing:border-box;
	list-style: none;
	display: table;
	height: 44px;
	overflow: hidden;
	/*width:100%;*/
}

#nav_main ul li {
	float: left;
	/*padding:0 17px;  on child anchor tag instead*/
	box-sizing: border-box;
}

#nav_main ul li .fa-home {
	font-size:20px;	
}

#nav_main ul li:hover {
	background:#41525E;
	border-bottom: 3px solid #ECBD1C;
}

/* Highlight the currrent page */
.homepage #nav_main ul li#nav-homepage,
.bbwin #nav_main ul li#bbwin,
.bbmac #nav_main ul li#bbmac,
.otherproducts #nav_main ul li#otherproducts,
.support #nav_main ul li#support,
.forums #nav_main ul li#forums,
.news #nav_main ul li#news,
.about #nav_main ul li#about {
	background:#41525E;
	border-bottom: 3px solid #ECBD1C;
}

#nav_main ul li a {
	padding:0 17px; /* july 2019 - previously on parent li but the button was not entirely clickable */
	display:block;
	height: 44px; /* required for hover effect */
	vertical-align: middle;
	text-align:center;
}

#nav_main ul li a span.nav-txt {
	color: #fff;
	display:block;
	padding: 13px 0 0 0;
	font-weight: bold;
	font-size:14px;
}

#nav_main ul li a span.nav-txt-two-line {
	padding: 5px 0 0 0;
}

/*contact status moves to nav on mobile */
#nav-contact-mobile {
	display:none;
	float:right;	
	margin:6px 8px 0 0;
}

#nav-contact-mobile * {
	font-size:11px;
	color:#fff;
	line-height:16px;
}

#nav-contact-mobile a:hover {
	text-decoration:underline;
}

#nav-contact-mobile #nc-m-time {
	color:#F5DB82;
}


/* mobile menu */
#hamburger {
	float:left;
	display:none;
	text-align: center;
	cursor:pointer;
	margin: 0 6px 0 3px;
}

/* fa-bars */
#hamburger .icon-bars::after {
	content: "\f0c9";
	font-size:32px;
	line-height:32px;
	color:#fff;
	margin: 0 2px 0 2px;
}

/* fa-times (close): displayed when menu open */
#hamburger .icon-times::after { 
	content: "\f00d";
	font-size:24px;
	line-height:24px;
	color:#fff;
	margin: 5px 0 0 6px;
}

#hamburger .menulbl {
	font-size:11px;
	color:#fff;	
}

/* Mobile nav menu (.mobilenav added with JS) is vertical menu 
   with abolute positioning */
.mobile #nav_main-bg.mobilenav ul {
	width:100%;
	display:block;
	height:auto;
	position:absolute;
	overflow:hidden;
	top:105px; /*below the navbar*/
	background: #2C3840;/*same as the navbar*/
	z-index:1000;/*seems necessary*/
}

.mobile #nav_main-bg.mobilenav #nav_main ul li {display:block}

.mobile #nav_main-bg.mobilenav #nav_main-content {
	padding:0 0 0 0;	
}

.mobile #nav_main-bg.mobilenav #nav_main ul li:hover{
	border:none;	
}

.mobile #nav_main-bg.mobilenav ul li {
	display:block;
	float:none;
	text-align:left;
}

.mobile #nav_main-bg.mobilenav ul li a {
	text-align:left;
}

/* -----------------
 * Main Nav: Live help
 * ----------------- */
 
#nav_main #liveHelp {
	float:right;	
}

#nav_main #liveHelp .fa-comments {
	padding:0 8px 0 0;	
}

#nav_main #liveHelp #nav-live-hlp {
	border-radius: 2px;
	padding: 2px 6px;
	font-size: 14px;
	color: #fff;
	font-weight: bold;
	margin: 3px 6px 0 0;
	height:34px;
	min-width:120px;
	text-align:center;
	cursor:pointer;
}

.live-hlp-grey-bg{background:#41525E}

.live-hlp-green-bg {
	background: #2df213; /* Old browsers */
	background: -moz-linear-gradient(top,  #18cc00 0%, #1d7b05 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #18cc00 0%,#1d7b05 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #18cc00 0%,#1d7b05 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18cc00', endColorstr='#1d7b05',GradientType=0 ); /* IE6-9 */

}

.live-hlp-green-bg:hover {background:#1FD505}

.live-hlp-blue-bg {
	background: #006777; /* Old browsers */
	background: -moz-linear-gradient(top,  #1a90a3 0%,#006777  100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #1a90a3 0%,#006777 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #1a90a3 0%,#006777 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */	
}

.live-hlp-blue-bg:hover {background:#0bb1c6}

#nav-live-hlp-status {
	font-size: 12px;
	color: #4FF55B;
	color:#fff;
	text-transform: uppercase;
	font-weight: bold;
}

/* ----------------
   Scroll to top button
   ---------------- */
   
#topBtn {
	display: none;
	position: fixed;
	bottom: 9px;
	right: 45px;
	z-index: 99;
	border: none;
	outline: none;
	background-color: black;
	color: white;
	cursor: pointer;
	padding: 3px 14px 6px;
	border-radius: 12px;
	font-size: 18px;
	opacity: 0.6;
}

#topBtn:hover {
    opacity: .8;
}	


/* -----------------
 * Breadcrumbs
 * ----------------- */

#breadcrumb ul {
	margin: 6px 0px 0px 6px;	
	padding: 0px;
	list-style-type: none;
	color: #747474;
	font-size: 11px;
	line-height: 15px;
}
    
#breadcrumb ul * {color:inherit}
#breadcrumb ul li {display: inline}
#breadcrumb ul li a:hover {color: #242424}

/* can be used for generic css fa icon */
#breadcrumb ul li::after {
  	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

/* fa-angle-right */
#breadcrumb ul li::after {
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f105";
	margin:0 6px;
}

#breadcrumb ul li:last-child::after {content: ""}

/* -----------------
 * Sub Nav: General
 * ----------------- */

#nav_sub {
	/*margin: 6px 0px 0px 0px;
	height: 56px;*/
	margin: 13px 4px 20px 4px;
}

#nav_sub::after {
	content: "";
      clear: both;
      display: table;
}

#nav_sub .title {
      float: left;
      font-size: 22px;
      font-weight: bold;
      line-height: 22px;
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

#nav_sub .title:hover {
	text-shadow: 1px 1px 2px rgba(0,0,0, .45);
}

#nav_sub .title a:hover {
	color: #000000;
}
	
#nav_sub .title .tagline {
      display: block;
      font-size: 12px;
      line-height: 16px;
      font-weight: normal;
      padding: 0px 0 4px 2px;
      margin-bottom:4px;
      text-shadow:none;
}

#nav_sub .title .tagline2 {
	display: inline;
	font-size: 12px;
	font-weight: normal;
	line-height: 30px;
	margin-bottom: 4px;
	padding: 0 0 4px 10px;
	text-shadow: none;
}
	
#nav_sub ul {
	float:right;
	list-style: none;
	font-size: 12px;
	font-weight: bold;
	/*margin: 19px 0px 0px 0px;*/
	margin: 0 0 0 20px;
}

#nav_sub ul li {
	float: left;
	border-left: 1px solid #cccccc;
}

#nav_sub ul li:first-child {
	border-left: none;
}

#nav_sub ul li a {
	display: block;
	padding: 4px 5px;
	color:inherit;
}

#nav_sub ul li a:hover {
	color: #fff;
	background: url(gfx/bg_navsubon.png) repeat-x top left;
	background:#2C3840;
	background:#364450; /*alternative (mn)*/
}

#nav_sub ul li:first-child a {
	border-radius: 2px 0px 0px 2px; 
}

/* -----------------
 * Sub Nav: Button
 * ----------------- */
 
/* TODO - create modern buttons */

#nav_sub ul li.button a {
	padding: 0px;
	margin: 0px 1px 0px 6px;
	margin-top: -1px;
	border-radius: 4px; 
	box-shadow: rgba(0,0,0,.25) 1px 1px 3px;
}

#nav_sub ul li.button a:hover  {
	background: none !important;
}

#nav_sub ul li.button .leftcap {
	display: block;
	float: left;
	width: 10px;
	height: 21px;
	background: url(gfx/button_small_leftcap.png) no-repeat top left;
}

#nav_sub ul li.button .rightcap {
	display: block;
	float: left;
	width: 21px;
	height: 21px;
	background: url(gfx/button_small_rightcap_black.png) no-repeat top left;
}

#nav_sub ul li.button .title {
	display: block;
	float: left;
	height: 21px;
	margin: 0px;
	padding-right: 10px;
	background: url(gfx/button_small_bg.png) repeat-x top left;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 10px;
	line-height: 21px;
	text-shadow: 1px 1px 1px rgba(255,255,255, 1);
	white-space: nowrap;
}


/* -----------------
 * Tabbed Nav
 * ----------------- */

#nav_tabs {
	margin:22px 0 0 0;
    	height:27px;
}
	
#nav_tabs ul {
	cursor:pointer;
	display:inline;
}
#nav_tabs li { 
	float:left; 
	margin: 0px 3px 0px 0px; 
	vertical-align:middle;
	text-align:center;
	line-height:11px;
	padding:0;
	overflow: hidden;
	border-radius: 4px 4px 0 0;
	box-shadow: 1px 0px 3px rgba(0, 0, 0, 0.1);
	background: #f7fafb;
	height:30px;
	position:relative;
	top:1px;
	z-index: 10;
	list-style:none;
	font-size:12px;
	font-weight:normal;
	cursor:pointer;
	color:#014E8C;
	width:13vw;
	min-width:94px;
	max-width:150px;
	border-top: 1px solid #d9dcdd; 
	border-right: 1px solid #d9dcdd; 
	border-left: 1px solid #d9dcdd;
}

#nav_tabs li a {
	color:#454545;
	padding:9px 2px;
	display:block;
}

#nav_tabs li a span{
	font-size:12px;
	/*color:#454545;*/
}

#nav_tabs li:hover {
	background-color:#ffffff;
	box-shadow: 1px -1px 2px rgba(0, 0, 0, .15);
	z-index: 10;
}

#nav_tabs li.active {
	background: #ffffff;
	box-shadow: 1px -1px 1px rgba(0, 0, 0, .15);
	z-index: 30;
	border-left:1px solid #D9DCDD;
}

#nav_tabs li.active a {
	color:#242424;
	font-weight:bold;
}

#nav_tabs li a:hover{
	color:#000;
}

/*remove the left border from the left-most tab*/
#nav_tabs ul li:first-child,
#nav_tabs ul li.nav-cur-page:first-child {
	border-left:none
}

/* -----------------
 * Nav: Highlight current
 * ----------------- */

/* This class is added with JS to 
 * sub-nav items whose ID matches 
 * one of the container classes. */
#nav_sub ul li.nav-cur-page{
	border-bottom: 2px solid #ECBD1C;
	background: #41525E;
	background: #22313F; /* alternative (mn)*/
	color:#fff;
}

/* And likewise for the current tab on some pages */
#nav_tabs ul li.nav-cur-page{
	background: #ffffff;
	box-shadow: 1px -1px 1px rgba(0, 0, 0, .15);
	z-index: 30;
	border-left:1px solid #D9DCDD;
	color:#000;
}

#nav_tabs ul li.nav-cur-page a {
	font-weight:bold;
	color:#242424;
}


/* -----------------
 * Footer
 * ----------------- */

#footer-bg {
	left: 0;
	top: 0;
	z-index: 999;
	opacity: .8;
	background: #2C3840;
	border-top: 1px solid #242424;
}

#footer-content {  
	width: 72%;
	min-width: 960px;
	max-width: 1168px;
	padding:10px;
	margin:0 auto;
	box-sizing:border-box;
}

#footer-content * {
	color:#fff;	
}

#footer-connect {
	padding:20px;
	font-size:23px;
	border-bottom: 1px solid #ECBD1C;	
}

#footer-connect .col {text-align:center}
#footer-connect .social {margin-right: 16px; font-size:12px;}
#footer-connect i.fa-envelope {margin-right:16px;}
#footer-connect #fc-newsletter {font-size:21px;}
#footer-connect #fc-newsletter:hover {cursor:pointer;text-decoration:underline;}

#footer-contact {
	padding: 20px 19% 20px 14%;
	text-align:center;
	border-bottom: 1px solid #ECBD1C;
}

#footer-contact .ft-status {
	padding: 0 4px;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
}

#footer-contact .contact-opt-closed {
	font-size:11px;	
}

.ft-method-details {padding:0 6px;}
.ft-method-details a:hover {cursor:pointer;text-decoration:underline;}

#fc-phone {float:left;}
#fc-chat {float:right;}

#ft-method-chat {cursor:pointer}

#footer-contact .fa-phone, 
#footer-contact .fa-comments {
	font-size:20px; 
	padding-right:6px;
}

#footer-content .green-txt {color: #3CF03D}

#footer-util-links {
	padding:18px 0;
	border-bottom: 1px solid #ECBD1C;	
}

#footer-util-links h5 {
	font-size:18px;
	font-weight:bold;
	color:#fff;
	padding: 17px 0 9px;
}

#footer-util-links ul {
	list-style:none;
	
}

#footer-util-links li {
	padding:4px 0;
	text-align:left;
}

#footer-util-links li a{
	font-weight:normal;
	color:#ddd;
	font-size:15px;
}

#footer-util-links li a:hover{
	color:#fff;
	cursor:pointer;
}

#footer-legal {padding:18px 0;font-size:12px}
#footer-legal a {opacity:.8}
#footer-legal a:hover {opacity:1}
#footer-legal #ft-copyright{float:left;line-height:18px; margin-bottom:10px;}
#footer-legal #ft-terms {float:right}
#footer-legal #ft-terms ul {list-style:none}
#footer-legal #ft-terms li {display:inline}


/* ----------------- 
 * TODO - all CSS below 
 * this point needs to be 
 * reviewed and updated as 
 * appropriate.  Lots still
 * in use though.
 * ----------------- */ 

/* -----------------
 * Buttons: New
 * ----------------- */

.buy-btn {
	background: #eeeeee; /* Old browsers */
	background: -moz-linear-gradient(top,  #FFFFFF 20%,#888888 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #FFFFFF 20%,#888888 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #FFFFFF 20%,#888888 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#888888',GradientType=0 ); /* IE6-9 */
	border-radius: 4px;
	cursor:pointer;
	box-shadow: rgba(0,0,0,.57) 2px 2px 5px;
}

.buy-btn .icon {
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900; 
	content: "\f04b";
	font-size:32px;
	line-height:32px;
	color:#fff;
	margin: 3px 2px 0 2px;	
}

.buy-btn:hover {
	box-shadow: rgba(0,0,0,.65) 2px 3px 5px;
}

.buy-btn .rightcap {
	background: #272727; /* Old browsers */
	background: -moz-linear-gradient(top,  #272727 0%, #080808 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #272727 0%,#080808 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #272727 0%,#080808 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#272727', endColorstr='#080808',GradientType=0 ); /* IE6-9 */	
}

.buy-btn.big {
	height:37px;	
}

.buy-btn.big .title {
	display: block;
	float: left;
	padding: 6px 10px 0px 6px;
	height: 31px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px !important;
	line-height: 13px !important;
	text-shadow: 0px 1px 1px rgba(255,255,255, 1) !important;
	white-space: nowrap;
}

.buy-btn.big .price {
	display: block;
	float: left;
	padding: 6px 3px 0px 6px;
	height: 31px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 24px !important;
	line-height: 26px !important;
	text-shadow: 1px 1px 1px rgba(255,255,255, 1) !important;
	white-space: nowrap;
}

/* -----------------
 * Button: Small
 * ----------------- */

/* TODO replace with modern button */

.button_small {
	float:left;
	height: 21px;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: rgba(0,0,0,.57) 2px 2px 5px;
}

.button_small .leftcap {
	display: block;
	float: left;
	width: 10px;
	height: 21px;
	background: url(gfx/button_small_leftcap.png) no-repeat top left;
}

.button_small .rightcap {
	display: block;
	float: left;
	width: 21px;
	height: 21px;
	background: url(gfx/button_small_rightcap_black.png) no-repeat top left;
}

.button_small .title {
	display: block  !important;
	float: left  !important;
	height: 21px;
	padding: 0px 10px 0px 0px;
	margin: 0px !important;
	background: url(gfx/button_small_bg.png) repeat-x top left !important;
	border: none !important;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px  !important;
	line-height: 21px  !important;
	text-shadow: 1px 1px 1px rgba(255,255,255, 1);
	text-decoration:none;
	white-space: nowrap;
}

.button_small a .title {
	text-decoration:none  !important;
}

.button_small .price {
	display: block  !important;
	float: left  !important;
	height: 21px;
	padding: 0px 6px 0px 0px;
	margin: 0px !important;
	background: url(gfx/button_small_bg.png) repeat-x top left !important;
	border: none !important;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 14px  !important;
	line-height: 21px  !important;
	text-shadow: 1px 1px 1px rgba(255,255,255, 1);
	white-space: nowrap;
}

.button_small:hover {
	box-shadow: rgba(0,0,0,.4) 4px 4px 4px;
}
	
.button_small#realpaks {
	float: right;
	position: absolute;
	top: 13px;
	right: 20px;
	cursor: pointer;
}
	
/* -----------------
 * Button: big
 * ----------------- */

.button_big {
	cursor:pointer;
	float:left;
	height: 37px;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: rgba(0,0,0,.57) 2px 2px 5px;
}

.button_big .leftcap {
	display: block;
	float: left;
	width: 4px;
	height: 37px;
	background: url(gfx/button_big_leftcap.png) no-repeat top left;
}

.button_big .rightcap {
	display: block;
	float: left;
	width: 39px;
	height: 37px;
	background: url(gfx/button_big_rightcap_black.png) no-repeat top left;
}

.button_big .rightcap_red {
	display: block;
	float: left;
	width: 39px;
	height: 37px;
	background: url(gfx/button_big_rightcap_red.png) no-repeat top left;
}

.button_big .price {
	display: block;
	float: left;
	padding: 6px 3px 0px 6px;
	height: 31px;
	background: url(gfx/button_big_bg.png) repeat-x top left;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 24px !important;
	line-height: 26px !important;
	text-shadow: 1px 1px 1px rgba(255,255,255, 1) !important;
	white-space: nowrap;
}

.button_big .title,
.button_big .buttonTitle {
	display: block;
	float: left;
	padding: 6px 8px 0px 6px;
	height: 31px;
	padding-right: 10px;
	background: url(gfx/button_big_bg.png) repeat-x top left !important;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px !important;
	line-height: 13px !important;
	text-shadow: 0px 1px 1px rgba(255,255,255, 1) !important;
	white-space: nowrap;
}

.button_big .big {
	font-size: 13px !important;
	line-height: 26px !important;
}


.button_big:hover {
	box-shadow: rgba(0,0,0,.65) 2px 3px 5px;
}

/* Add to cart buttons */

.button_addToCart {
	width: 301px;
	height: 37px;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: rgba(0,0,0,.57) 2px 2px 5px;
}

.button_addToCart:hover {
	box-shadow: rgba(0,0,0,.6) 3px 3px 6px;
}

.button_addToCart .rightcap_blue {
	display: block;
	float: left;
	width: 39px;
	height: 37px;
	background: url(gfx/button_addtocart_rightcap_blue.png) no-repeat top left;
}

.button_addToCart .leftcap {
	display: block;
	float: left;
	width: 4px;
	height: 37px;
	background: url(gfx/button_big_leftcap.png) no-repeat top left;
}

.button_addToCart .leftcap_win {
	display: block;
	float: left;
	width: 39px;
	height: 37px;
	background: url(gfx/button_addtocart_leftcap_win.png) no-repeat top left;
}

.button_addToCart .price {
	display: block;
	float: left;
	width: 41px;
	height: 37px;
	font-weight: bold;
	font-size: 16px !important;
	line-height: 37px !important;
	background: url(gfx/button_addtocart_bg.png) repeat-x top left;
}

.button_addToCart .rightcap_red {
	display: block;
	float: left;
	width: 39px;
	height: 37px;
	background: url(gfx/button_addtocart_rightcap_red.png) no-repeat top left;
}

.button_addToCart .leftcap_mac {
	display: block;
	float: left;
	width: 39px;
	height: 37px;
	background: url(gfx/button_addtocart_leftcap_mac.png) no-repeat top left;
}


.button_addToCart .title {
	display: block;
	float: left;
	padding: 6px 8px 0px 6px;
	width: 201px;
	height: 31px;
	padding-right: 10px;
	background: url(gfx/button_addtocart_bg.png) repeat-x top left;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 11px !important;
	line-height: 13px !important;
	text-shadow: 1px 1px 1px rgba(255,255,255, 1) !important;
	white-space: nowrap;
	overflow: hidden;
}

.button_addToCart .titleFull {
	display: block;
	float: left;
	padding: 6px 8px 0px 6px;
	width: 242px;
	height: 31px;
	padding-right: 10px;
	background: url(gfx/button_addtocart_bg.png) repeat-x top left;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 12px !important;
	line-height: 24px !important;
	text-shadow: 0px 1px 1px rgba(255,255,255, 1) !important;
	white-space: nowrap;
	overflow: hidden;
}


/* -----------------
 * Popups - old style
 * ----------------- */

/* TODO - replace with newer style modals */

#modalOverlay {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background: none;
	background: #ffffff;
	opacity: .7;
}

#popFrame {
	position: fixed;
	width: 575px;
	height: 450px;
	top: 50%;
	left: 50%;
	margin-top: -260px;
	margin-left: -300px;
	padding: 16px;
	background: url(gfx/bg_popover.png) repeat-x top left;
	z-index: 10001;
	border-radius: 6px;
	box-shadow: rgba(0,0,0,.6) 5px 5px 16px;
}

#popFrameInfo {
	position: fixed;
	width: 575px;
	top: 50%;
	left: 50%;
	margin-top: -260px;
	margin-left: -300px;
	padding: 16px;
	background: url(gfx/bg_popover.png) repeat-x top left;
	z-index: 10001;
	border-radius: 6px;
	box-shadow: rgba(0,0,0,.6) 5px 5px 16px;
}

#popFrameInfo .success-msg {
	background: url("gfx/newsletter-list-check.png") no-repeat 6px 15px; 
	color: #037919;
    	font-size: 18px;
	border: 1px solid green;
    	padding: 6px 6px 6px 36px;
	margin:10px;
	line-height:24px;
}

#popFrameInfo .text h3 {font-size:20px; margin: 20px 0 8px 0px; padding: 0 0 8px;}

#popFrameInfo .text p {margin-bottom:8px;}

#popFrameInfo ul {list-style:none;}
#popFrameInfo ul li {
	background-image:url("gfx/listbullet_bluearrow_small.png"); 
	background-repeat:no-repeat; 
	background-position:0 6px; 
	padding: 0 6px 0 19px; 
	margin-bottom:16px; 
	line-height:19px
}

#popFrameInfo #infoPopOkBtn {
	margin: 0 auto;
	border: 1px solid #888;
	color: #242424;
	cursor: pointer;
	font-size: 18px;
	font-weight: normal;
	padding: 4px 0;
	text-align: center;
	width: 100px;
	border-radius: 4px;
	box-shadow: 1px 1px 2px 0 #aaa;
	background: linear-gradient(to bottom,  rgba(247,247,247,1) 0%,rgba(214,214,214,1) 100%);
}

#popFrameInfo #infoPopOkBtn:hover {
	background: linear-gradient(to bottom,  rgba(232,232,232,1) 0%,rgba(193,193,193,1) 100%); /* W3C */
}

#popFrameLarge {
	position: fixed;
	width: 805px;
	height: 620px;
	top: 30px;
	left: 50%;
	margin-left: -402px;
	padding: 16px;
	background: url(gfx/bg_popover.png) repeat-x top left;
	z-index: 10001;
	border-radius: 6px;
	box-shadow: rgba(0,0,0,.6) 5px 5px 16px;
}

#popFrameBuyIt {
	position: fixed;
	width: 446px;
	top: 50%;
	left: 50%;
	margin-top: -300px;
	margin-left: -200px;
	padding: 10px 65px 30px 65px;
	background: linear-gradient(to bottom, #fcfffc 0%, #e3e9eb 100%);
	z-index: 10001;
	border-radius: 6px;
	box-shadow: rgba(0,0,0,.6) 5px 5px 16px;
	box-sizing: border-box;
}

#closePop {
	width:22px;
	height:22px;
	background: url(gfx/button_closevideo.png) no-repeat top left;
	cursor: pointer;
	position: absolute;
	top: -11px;
	right: -11px;
}


#videoPlayer {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
}

/* mobile support for old style popups */
@media screen and (max-width: 650px) {
	#popFrameBuyIt, #popFrame {
		position: fixed;
		width: 87%;
		top: 14px;
		left: 2px;
		margin-top: 0px;
		margin-left: 0px;
		margin-right:px;
		padding: 10px 4% 30px 4%;
	}
	/* button needs to narrow, wrap text */
	.button_addToCart {width: 301px;}
	.button_addToCart .titleFull {width: 235px; white-space:normal;line-height:15px;}
	.popBuyIt .bbpackages .buttons {padding-left:0px;}
}


/* -----------------
 * Popups: Content (old style)
 * ----------------- */
	
.popBuyIt {
	text-align: center; 
}	

.popBuyIt .bbpackages {
	text-align: left; 
}	
	
.popBuyIt .buttons p {
	font-size: 14px;
	margin-top: 10px;
	margin-bottom: 20px;
}

.popBuyIt .bbpackages .buttons {
	text-align: center;
	padding-left: 19px;
}

.popBuyIt .titles {
	padding-top:24px;
	font-weight: bold;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

.popBuyIt .bbpackages .titles {
	text-align: left;
}

.popBuyIt .info p {
	padding-top:30px;
	font-weight: bold;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
}

.popBuyIt .bbpackages .info p {
	text-align: left;
	font-weight: normal;
}

.popBuyIt .bbpackages .info p a {
	text-decoration: underline;
	color: blue;
}	



/* Large blocks of text
----------------------------------*/

.pagetitle {
	font-size: 24px;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(0,0,0, .3);
}

.heading {
	font-size: 14px;
	font-weight: bold;
	color: #472424;
	width: 100%;
	padding: 5px 5px 3px 8px;
	text-shadow: 1px 1px 1px rgba(255,255,255, 1);
}

#banner_main .content .title {
	font-weight: bold;
	font-size: 24px;
	text-shadow: 1px 1px 1px rgba(0,0,0, .3);
}


td div .tlink {
	margin: 11px 0px 0px 6px;
	font-size: 24px;
	font-weight: bold;
	text-shadow: 2px 2px 2px rgba(0,0,0, .3);
    	display:block;
    	cursor:pointer;
}

td div.tlink:hover {
    	color: #243883;
	text-shadow: 2px 2px 2px #8196e7;
}

.text p {
	margin: 0px 0px 16px 0px;
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
}

.text p.large-txt {
	font-size:20px
}

.text h2 {
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 14px;
	padding-top: 12px;
}

.text h2.pullright {margin-left:60px}

.text h2.large {
	font-size: 24px;
	text-shadow: 1px 0px 1px rgba(0,0,0, .3);	
}

.text h2.large img.new {
	margin:4px 6px -18px 0px;
}


.text h3 {
	font-weight: bold;
	font-size: 16px;
	margin-top: 20px;
	margin-bottom: 10px;
}

.text a {
	color: #004fc3;
}


.text a:hover {
	color: #ff0000;
}

.text ul, .text ol {
	margin: 0px 0px 16px 14px;
}

.text ul {
	list-style: none;
}

ul.genericlistblue li,
.text ul.genericlistblue li,
ul.winlist li,
.text ul.winlist li {
	background: url("gfx/listbullet_link_blue.png") no-repeat 5px 5px; 
	padding-left: 20px; 
	padding-right:10px; 
	list-style:none; 
	margin:0 0 14px 12px
}

ul.maclist li,
.text ul.maclist li {
	background: url("gfx/listbullet_link_red.png") no-repeat 5px 5px; 
	padding-left: 20px; 
	padding-right:10px; 
	list-style:none; 
	margin:0 0 14px 12px
}

ul.genericlist li,
.text ul.genericlist li {
	background: url("gfx/listbullet_link_large.png") no-repeat 5px 5px; 
	padding-left: 20px; 
	padding-right:10px; 
	list-style:none; 
	margin:0 0 14px 12px
}

ul.genericlist-small li,
.text ul.genericlist-small li {
	background: url("gfx/listbullet_grey.png") no-repeat 5px 5px; 
	padding-left: 20px; 
	padding-right:10px; 
	list-style:none; 
	margin:0 0 14px 12px
}


.text ul li {
	background: url(gfx/listbullet.png) no-repeat 0px 3px;
}

.text li {
	font-weight: normal;
	font-size: 14px;
	line-height: 20px;
	padding: 0px 0px 0px 18px;
	margin-bottom: 3px;
}

/*nested lists have no top and bottom margins and no list-styles*/
.text ul ul, .text ul ol,  
.text ol ul, .text ol ol {
  margin-top: 2px;
  margin-bottom: 0;
  margin-left:0;
}

.text ul ul li,  
.text ol ul li{
  background: url(gfx/listbullet_small.png) no-repeat 4px 8px;
  margin-bottom: 0px;
}

.text ul ol li,  
.text ol ol li {
  background: none;
  margin-bottom: 0px;
}


.text img.title {
	margin-bottom: 8px;
}

.text img.boxshot {
	float: right;
	margin: 0px 0px 0px 22px;
}


/* Small blocks of text
----------------------------------*/

.smalltext .title {
	font-weight: bold;
	font-size: 14px;
	line-height: 20px;
}

.smalltext p {
	margin: 0px 0px 16px 0px;
	font-weight: normal;
	font-size: 12px;
	line-height: 18px;
}

.smalltext ul, .text ol {
	margin: 0px 0px 16px 14px;
}

.smalltext ul {
	list-style: none;
}

.smalltext ul li {
	background: url(gfx/listbullet.png) no-repeat 0px 2px;
}

.smalltext li {
	font-weight: normal;
	font-size: 12px;
	line-height: 18px;
	padding: 0px 0px 0px 18px;
}

.quotebox {
    margin: 10px 50px;
    background: #e6edf1 url(gfx/quoteboxbg.png) no-repeat right top;
    padding: 20px 40px;
    border-right: 19px double #fff;
    border-left: 19px double #fff;
    min-height: 20px;
    text-align:center;
    box-shadow:2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 5px #888;
    -webkit-box-shadow: 2px 2px 5px #888;
    border-radius:10px;
    -moz-border-radius:10px;
    cursor:pointer;
}
.bgcolor1 {
    background-color: #ebe2c3;
}
.bgcolor2 {
    background-color: #c3ebe3;
}
.bgcolor3 {
    background-color: #e3c3eb;
}
.bgcolor4 {
    background-color: #caebc3;
}
.tail {
    text-align:right;
    padding-right:100px;
    font-weight:bold;
    font-size:125%;
    margin-bottom:50px;
}

/* the following rules can likely be removed */
.expandable {display:none;}/*expandable text */
.leftCol {float:left;}
.rightCol {float:none;}
.bottom {bottom: 0px !important;}
.right {text-align: right !important;right: 0px;}


/* Utility
----------------------------------*/

/* Modern clearfix - Sept 2018*/
.clearfix::after {
	content: "";
      clear: both;
      display: table;
	/*content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;*/
}


/* forms
----------------------------*/

#formfields {
    margin:auto;
    width:75%;
}
#formfields input, #formfields textarea {
    padding:3px;
    background-image:url("gfx/formbg.jpg");
    background-repeat:repeat-x;
    width: 90%;
    border: 1px solid #bbb;
    margin-bottom:10px;
}

#formfields select { 
    border: 1px solid #bbb;
    margin-bottom:10px;    
}
#formfields .radio {
    width: 15px;
}
#formfields .submit {
    background-color:#ddd;
    background-image:none;
    cursor: pointer;
    width: 150px;
    border: 1px outset;
}

/* 
 pagination 
------------*/

.rowBlock .pagerow ul {
    width: 100%;
    list-style: none;
}

.rowBlock .pagerow ul li {
    float:left;
    background-image: none;
    padding-left:5px;
    padding-right:5px;
}

.rowBlock .pagerow .left {
    background: url("gfx/prev.png") no-repeat scroll left center;
    padding-left: 10px;
}

.rowBlock .pagerow .right {
    float: right;
    background: url("gfx/next.png") no-repeat scroll right;
    padding-right: 10px;
    margin-right:25px;
}

.rowBlock .pagecenter {
    margin: 18px auto;
    padding: 0 5px;
    text-align:center;
    font-size: 13px;
    width: 80%;
}

/* clearly this isn't a true center, in-line CSS will have to correct the padding-left adjustmnent. 
   it makes more sense than negative vertical margins in a separate element below */



/* misc 
-----------*/

.reg {
    font-size: 60%;
    margin: 0 2px;
    position: relative;
    top: -3px;
    vertical-align: top;
}

.special {
    color: red;
    display: block;
    font-size: 13px;
    font-weight: bold;
    margin-top: -1px;
}

.red {
    color: red;
    font-size: 13px;
    font-weight: bold;
}

.important {
	color: red;
	font-size: 15px;
	font-weight: normal;    
}

.requirement {
	color: red;
	font-size: 12px;
	font-weight: normal;
}

.smaller {
	font-size:86%;
}

.lighter {
	font-weight:normal;
}

.nosub {
    margin-top:20px !important;
}

.boxed {
    border-radius: 3px 3px 3px 3px;
    box-shadow: 1px 1px 3px grey;
    display: block;
    margin: 30px 0;
    padding: 10px 10px 1px;
}

#img-container  img {
	background-color: #FFF;	
}

.everything-in-5 {
	max-width:500px
}

.everything-in-5 .ei5_vid {	
 	padding: 10px;
	margin-bottom:6px;
	-webkit-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
	border: 2px solid #aa7304;
	background: radial-gradient(ellipse at top center,  rgba(255,255,255,1) 0%,rgba(188,188,188,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.everything-in-5 .ei5_vid .ei5_vid_cap {
	float:left;
	width:58%;
	line-height:18px;
	color: #242424;
	font-size: 14px;
      font-weight: normal;
      text-align:center;
	padding:10px 4px 10px 0;
}

.everything-in-5 .ei5_vid .ei5_vid_cap strong {
	font-weight:bold;
	font-size:15px;
}

.everything-in-5 .ei5_vid .ei5_vid_vid {
	float:left;
	width:40%;
	font-size: 14px;
	line-height:18px;
}

.everything-in-5 .ei5_vid .ei5_vid_vid a {
	display:block;
	text-align:right;
}

.everything-in-5 .ei5_vid .ei5_vid_vid a img,
#main .everything-in-5 .ei5_vid .ei5_vid_vid a img {
	display:block;
	text-align:right;
	border:none;
	box-shadow:none;
	-webkit-box-shadow:none;
	float:none;
}

.want-it-all {
	background: radial-gradient(ellipse at top center,  rgba(255,255,255,1) 0%,rgba(188,188,188,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	display:block;	
	/*box-shadow:0px 0px 6px #000;*/
	padding:9px;
	margin:0 0 0 20px;
	float:right;
	border-radius:4px;
	border:2px solid #888;
	font-size:14px;
	line-height:18px;
	width:378px;
}

.three-reasons a,
.limited-special a {
	color: #fef8e2;
    text-decoration: underline;	
	border:none;
}

.three-reasons a:hover,
.limited-special a:hover {
	color:#55A5F4;		
}

.three-reasons, 
.limited-special {
	margin: 20px 15px;
	padding: 10px;
	border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
	background: radial-gradient(ellipse at center,  rgba(76,76,76,1) 0%,rgba(17,17,17,1) 88%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); 
}


.three-reasons h3, 
.limited-special h3{
	color: #FFD800;
	font-size: 18px;
	font-weight: bold;
	text-align:center;
	margin-top:5px;
}

.three-reasons li, 
.limited-special li{
	color: #FFD800;
	font-size: 12px;
	font-weight: bold;
	line-height:20px
}

.three-reasons li strong, 
.limited-special li strong{
	font-size: 16px;
	font-weight: bold;
	padding-right:4px;
}

.three-reasons li,
.limited-special li {
	background: url("gfx/listbullet_link_white.png") no-repeat 5px 5px;
}


.three-reasons a,
.limited-special a {
	color: #fef8e2;
	text-decoration: underline;	
	border:none;
}

.three-reasons a:hover,
.limited-special a:hover {
	color:#55A5F4;		
}

/* additional layout */
.rowBlock .columns .full {
	padding: 0px 0px 10px 0px;
	margin: 0px;
	float: left;
}

.rowBlock .columns .twoThirds {
	width: 610px;
	float: left;
}

.rowBlock .columns .oneThird {
	width: 305px;
	float: left;
}

.rowBlock .columns .oneHalf {
	width: 428px;
	float: left;
}

/* ---------------------
 * Responsivity ( > 1000px )
 * Note - This is a 'desktop-first' design
 * ---------------------*/

@media screen and (max-width: 1270px) {
	#pglogo-main-header img, #pglogo-main-header {width:120px}
	#pglogo-main-header {padding: 13px 2px 0;}  
	#header .contact-util .util-title,
	#header .header-util .util-title {font-size:15px;}
	#header .util-title a {font-size:15px;}
	#header #util-myaccount .util-desc span,
	#header #util-myaccount .util-desc a {font-size:11px;}
}

@media screen and (max-width: 1210px) {
   	#main-content {width:98%; min-width:960px;} 
   	.rowBlock {width:98%; min-width:960px} 
	#nav_main ul li a span.nav-txt {font-size:13px;}
	#nav_main ul li a {padding:0 15px;} /* previously on li */
}

@media screen and (max-width: 1150px) {
	#header .contact-util .util-icon {padding: 0 3px 0 0}	
	#header #util-search {margin-right:0;padding-right:0}
	#header .header-util {padding:0 8px}
	#header #util-login-loginout, #header #intl-title,
	#header .util-desc *:not(.divdot), #header .util-detail, 
	#header .util-detail *, #header #header-contact-info a,
	#header #util-myaccount .util-detail span {font-size:11px}
	#header .contact-util .util-title {font-size: 14px; padding-top: 1px}
	#header .header-util .util-icon .fa-shopping-cart{font-size:17px}
	#header .header-util .util-icon .fa-globe{font-size:18px}
	#header .header-util .util-icon .fa-user{font-size:18px; top: -4px}
	#header .header-util .util-title {font-size:13px}
	#header-utils .fa-search {top: -4px}
	#header-contact-info .fa-question-circle {font-size: 19px}
}

@media screen and (max-width: 1080px) {
	#nav_main ul li {float: left;} 
	#nav_main ul li a {padding: 0 14px;} /* previously on li */
	#nav_main ul li a span.nav-txt {font-size: 12px;}
}

@media screen and (max-width: 1024px) {
	/*minor tweak to prevent overflowing of nav menu items if mobile not supported on page*/
	#nav_main #liveHelp #nav-live-hlp {padding: 2px 2px; min-width:auto;margin: 3px 0px 0 0;}
	.mobile #nav_main #liveHelp #nav-live-hlp {padding: 2px 6px; min-width:120px;margin: 3px 6px 0 0;}
}

/* ---------------------
 * Responsivity ( 320px - 1000px )
 * Apply to pages with container
 * class 'mobile'
 * ---------------------*/

@media screen and (max-width: 1000px) {
	
	/*general*/
	.mobile #main-content {min-width:320px; width:100%; padding:4px;}
	.mobile #header-content, .mobile #nav_main-content, 
	.mobile #main-content, .mobile #footer-content {min-width:320px; width:100%}
	.mobile .rowBlock, .mobile #banner_main {min-width:320px; width:99%}
	/*header - utils*/
	.mobile #header #header-utils .util-icon {text-align:center;}
	.mobile #header #header-utils .util-detail,
	.mobile #header #header-utils .util-title {display:none}
	.mobile #header #header-utils {border-right:none; padding-right: 4px;}
	.mobile #header #header-utils .mobile-util-detail {display:block}
	/*icons*/
	.mobile #header .util-icon .fa-user, .mobile #header .util-icon .fa-globe, 
	.mobile #header .util-icon .fa-shopping-cart, .mobile #header .util-icon .fa-search {font-size:20px}	
	/*nav*/
	.mobile #nav_main ul li a {padding:0 13px} /* previous on li */
	.mobile #nav_main ul li a span.nav-txt {font-size:12px}
	.mobile #nav_main ul li#rbwin {display:none} /*hide RealBand menu*/
	/*sub nav*/
	.mobile #nav_sub ul {float:left}
	/*footer*/
	.mobile #footer-contact {padding: 20px 2% 20px;}
}

@media screen and (max-width: 900px) {	
	.mobile #nav_main ul li a {padding:0 8px} /* previously on li */
	.mobile #nav_main ul li a span.nav-txt-two-line {padding:5px 0 0 0;}
	/* switch to mobile contact info */
	.mobile #util-contact-info {margin-top:9px;}
	.mobile #header #util-contact-time,
	.mobile #header #util-contact-info .util-title,
	.mobile #header #util-contact-info .util-detail{display:none}
	.mobile #header #util-contact-info .util-icon {text-align:center;}
	.mobile #header #util-contact-info {padding-right: 4px;}
	.mobile #header #util-contact-info .mobile-util-detail {display:block}
	.mobile #header .util-icon .fa-question-circle {font-size:20px; top:-4px;}
	.mobile #header .util-detail#hc-mobile-open-today{display:block}
	.mobile #header .util-desc {height: 18px; font-size: 11px;}
	.mobile #header-contact-info {height: 48px; padding: 2px 0; margin: 7px 0 0 0;}
	/* Shrink liveHelp button */
	.mobile #nav_main ul li a span#nav-live-hlp {padding: 2px 0px;}
	.mobile #nav_main ul li a span#nav-live-hlp #nav-live-hlp-status {font-size:11px}
}

@media screen and (max-width: 800px) {	
	.mobile #nav_main ul li#bbwinplugin {display:none} /*hide VST DAW menu*/
}

@media screen and (max-width: 830px) {	
	.mobile #nav_main ul li a span.nav-txt {font-weight:normal; font-size:12px;}
	.mobile #header #util-contact-time {display:none}
	/* stack rowBlocks quick fix */
	.mobile .rowBlock .oneQuarter {width: 50%;}
	.mobile .rowBlock .oneThird {width: 100%; border-bottom: 1px solid #ddd;}
	.mobile .rowBlock .twoThirds {width: 100%;}
}

@media screen and (max-width: 750px) {
	.mobile #nav_main ul li a {padding:0 7px} /*previously on li */
	.mobile #header .util-icon .fa-question-circle {font-size:20px; top:-4px;}
	.mobile #header .header-util:not(#util-contact-info) {padding-right: 0px;} /*squish together utils*/
	.mobile #contact-modal,
	.mobile #intl-bb-modal {position:absolute;}/*prevents bottom of modals from being hidden*/
	/*footer*/
	/* TODO footer would be better with flexbox or grid */
	.mobile #footer-util-links .col-quarter {width:50%}
	.mobile #footer-contact #fc-phone {display:block; float:none; margin-bottom:8px;}
	.mobile #footer-contact #fc-chat {float:none;}
	.mobile #footer-connect #fc-connect {display:block; float:none;}
	.mobile #footer-connect #fc-social {display:block; margin:14px 0; float:none;}
	.mobile #footer-connect .col-third {width:auto;}
	.mobile #footer-connect .col {float:none;}
	.mobile #footer-legal #ft-terms {float:left;}		
	/*subnav*/
	.mobile #nav_sub ul li {margin-bottom:6px;}
	.mobile #nav_sub ul li.nav-cur-page {border-bottom:none} /*allows it to wrap properly*/
	.mobile #nav_sub ul {margin: 10px 0 0 0;} /*better alignment */
}

@media screen and (max-width: 700px) {
	/*header*/
	.mobile #header-bg {height:54px}/*header is shortened*/
	.mobile #pglogo-main-header img {width:110px}
	.mobile #pglogo-main-header {width:110px; padding: 9px 6px 0 8px; margin:0}
	.mobile #header #header-contact-info {margin: 6px 0 3px; height: 40px; padding: 2px 2px;}
	.mobile #header #header-contact-info .header-util {border-right:none}
	/*header - contact*/
	.mobile #util-contact-info {margin-top:1px;}
	.mobile #header #util-contact-status {margin:2px 0 0 0}
	.mobile #header #util-contact-status .util-desc {height:18px;}
	.mobile #header #util-contact-time {display:none}
	.mobile #header #util-contact-status #hc-chat-status,
	.mobile #header #util-contact-status #hc-phone-status,
	.mobile #header #util-contact-status .util-desc:last-child {display:none}
	.mobile #header #util-contact-status .hc-method .fa-comments {padding-right:4px;}
	/*header - utils */
	.mobile #header-utils {margin-top:11px;}
	.mobile #header #header-utils .header-util {border-right:none; padding: 0px 4px 0 0px;}
	/*nav (mobilenav is styled in main nav section)*/
	.mobile #nav_main ul li {display:none;} /*nav items are hidden; becomes 3-bar menu */
	.mobile #nav_main #hamburger {display:block;}
	.mobile #nav_main ul li a span.nav-txt {font-weight:bold;}
	/*sub nav*/
	.mobile #nav_sub .title {float:none}	
}

@media screen and (max-width: 620px) {
	/*move contact info to navbar*/
	.mobile #header #header-contact-info {margin: 9px 0 3px; padding: 0;}
	.mobile #nav-contact-mobile {display:block}
	.mobile #header #util-contact-status {display:none}
}

@media screen and (max-width: 430px) {
	/* live help button shrinks */
	.mobile #nav_main #liveHelp #nav-live-hlp {width:50px; min-width:50px;}
	.mobile #nav_main #liveHelp #nav-live-hlp .fa-comments {display:none;}
	.mobile #nav-live-hlp-status {display:none;}
}

@media screen and (max-width: 380px) {
	.mobile #pglogo-main-header {width: 100px;padding: 12px 6px 0 0px;}
	.mobile #pglogo-main-header img {width: 100px;}
	.mobile #header .util-icon {padding: 0 2px 0 0;}
}

@media screen and (max-width: 320px) {
	/*try to allow scrolling on ultra narrow screens */
	.mobile #container {overflow: scroll;}
}