body {
    font-family: 'alegre_sans', 'Oxygen', sans-serif;
	font-size:16px;
  color:#767575;
  background: #fff;
	margin:0px;
	padding:0px;
}

.sup{
	padding:0px;
	vertical-align:top;
	font-size:9px;
}

#footer{
	clear:both;
	background:black;
	height:34px;
	font-size:9px;
	text-align:center;
	color:white;
	margin: 0px 0px 0px 0px;
	padding: 15px 0px 2px 0px;
}

#footer2{
  display:none;
}
.faqs{

}
.faqs h4{
	color:black;
}
.footer_txt {
	background:black;
	margin: 0px 0px 0px 0px;
	padding: 25px 0px 25px 0px;
}
.footer_txt2 {
	display:none;
}

#footer a{
	font-size:9px;
	color:#B5B3AB;
}

#navbar, #main, #height_fix{
	float: left;
}

#navbar{
	position:relative;
	left:3px;
	width: 200px;
	height: 370px;
	margin: 0px 0px 0px -3px;
	color:#fff;
	padding: 3px 0px 0px 0px;
}

#navbar a{
	color:#000000;
	text-decoration:none;
	text-transform:uppercase;
	font-size:10px;
}

#navbar a:hover{
	text-decoration:underline;
}

.navUL {
	margin:0px 0px 0px 0px;
	padding:0px;
}

.navUL li{
	list-style-type: none;
	margin: -3px 0px -3px 0px;
	padding: 0px;
}

#mainTxt{
	margin: 0px 0px 0px 0px;
	padding: 10px 10px 10px 10px;
	color:#113711;
	width:760px;
}

#mainTxt h3{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 0px;
	margin: 2px 4px 2px 2px;
}

#mainTxt ul{
	list-style-type:disc;
}

#mainText li{
	color:#113711;
}

#sectionTitle{
	width:596px;
	height:44px;
	text-align: right;
	margin-bottom:20px;
}

.btnspacer{
	margin: -14px 0px 0px 0px;
	padding: 0px;
}

#nextNback {
	font-size:10px;
}

#nextNback a{
	color:#113711;
}

/************ page styles **********/
a {
	color:inherit;
}

.noline{
	text-decoration:none;
}

.em{
	text-decoration:line-through;
}

img{
	border:0;
}
/*
#gallery_pix{
    width:175px;
    height:120px;
    overflow:hidden;
    float:left;
    margin:5px;
}

#gallery_pix_mobile{
    width:95%;
    margin:5px;
 }*/


 /******* Coupon *******/

 #coupon1{
    width:80%;
    max-width:400px;
    /*height:152px;*/
    padding:10% 5% 5% 5%;
    text-align:left;
    position:relative;
    /* z-index:4; */
}

#couponText{
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
    z-index:5;
}

#printlink{
    font-family:"Quattrocento Sans", Helvetica, Arial, sans-serif;
    font-size:15px;
}

/************ other styles **********/
.tiny{font-size:9px}

.tdInv{
	background-color:#eeeeee;
	padding: 2px;
}

.menu{
	margin: 0 0 0 150px;
}

.tblBorder{
border: 1px solid #001A55;
margin: 0 0 10px 0;
}

.title {font-size: 17pt;
		font-weight: bold;
	}

.midtitle {font-size: 14pt;
		font-weight: bold;
	}

.smltitle {font-size: 12pt;
		font-weight: bold;
	}

.minititle {font-size: .9em;
		font-weight: bold;
	}

a.linktitle:link, a.linktitle:visited, a.linktitle:hover, a.linktitle:active{
		font-size: .9em;
		font-weight: bold;
	}

a.linktitle:hover{
		text-decoration:none;
	}

ul.nobullets{
list-style-type:none;
}

.formBorder{
	background-color:#FFF;
	border:1px solid #001A55;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.9em;
	color:#001A55;
}
.formBorderFake{
	height:20px;
	margin-top:1px;
	padding: 1px 8px 1px 8px;
	background-color:#FFF;
	border:1px solid #001A55;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.9em;
	color:#001A55;
	text-decoration:none;
}
.formBtn{
	background-color:#FFF;
	border:1px solid #001A55;
	text-transform:uppercase;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.9em;
	color:#001A55;
}
/************ Error Styles **********/
#errTitle{
	font-size:20px;
	font-weight:bold;
	margin: 0 10px 0 0;
	padding: 0 0 0 0px;
}

.errSmall{font-size:8pt}

#errFooter{
	margin: 0;
	font-size:9px;
	color:#CCCCCC;
}

#errBlock{
	margin: 0 auto;
	width: 350px;
	font-family: courier;
	font-size:12px;
	color: #003366;
	border:1px solid #003366;
	background-color:#FFFFFF;
}
/************ END Error Styles **********/

.cycle-slideshow {
	width:100%;
    max-height: 670px;
    overflow:hidden;
	z-index:3;
	position:relative;
    overflow: hidden;
}

.cycle-slideshow img{
	width:100%;

}

.cycle-overlay{
	position:absolute;
	top:0;
	right:0;
	margin:35px 0px 0px 0px;
	padding:10px 10px 10px 10px;
	width:100%;
	min-height:20px;
	color:white;
	z-index:4;
	background:rgba(255,255,255,0.7);
	-webkit-box-shadow: 2px 5px 9px 0px rgba(200,200,200,0.8);
	-moz-box-shadow: 2px 5px 9px 0px rgba(200,200,200,0.8);
	box-shadow: 2px 5px 9px 0px rgba(200,200,200,0.8);
}


.divider
{
  position: relative;
  margin-top: 90px;
  margin-bottom: 50px;
  height: 1px;
}

.div-transparent:before
{
  content: "";
  position: absolute;
  top: 0;
  left: 5%;
  right: 5%;
  width: 90%;
  height: 1px;
  background-image: linear-gradient(to right, transparent, rgb(48,49,51), transparent);
}


.div-dot:after
{
  content: "";
  position: absolute;
  z-index: 1;
  top: -9px;
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  background-color: #d7dd97;
  border: 1px solid rgb(48,49,51);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px white,
          0 0 0 4px white;
}
.prod_img2{
	width:25% !important;
	padding-top:1.5%;
	display:inline;
}

.prod_img2 img:hover{
	transform:scale(1.25);
}

.prod_img2:hover{
	width:100%;
}


.prod_img2 img{
	width:150px !important;
	margin:0;
	transition:all .2s ease-in-out
}


div.img-persist {
    height: 81%;
	line-height: 81%;
	overflow: hidden;
}

div.img-persist img {
    vertical-align: middle;
    margin: auto;
}
@media ( min-width: 100px ) and ( max-width: 629px ) {
	div.img-persist {
		height: 100%;
		line-height: auto;
	}
}
@media ( min-width: 630px ) and ( max-width: 1000px ) {
	div.img-persist {
		height: 73%;
		line-height: auto;
	}
}

@media ( min-width: 697px ) and ( max-width: 1446px ) {
	div.img-persist {
		height: 60%;
	}
}
@media ( min-width: 652px ) and ( max-width: 696px ) {
	div.img-persist {
		height: 33%;
	}
}

@media ( min-width: 1250px ) and ( max-width:1450px ) {
	div.img-persist {
		height: 70%;
	}
}

/* 
@media ( min-width: 100px ) and ( max-width: 700px ) {
	div.img-persist {
		height: 100%;
		line-height: auto;
	}
}
@media ( min-width: 701px ) and ( max-width: 1000px ) {
	div.img-persist {
		height: 135px;
		line-height: 135px;
	}
}
@media ( min-width: 1001px ) and ( max-width: 1150px ) {
	div.img-persist {
		height: 245px;
		line-height: 245px;
	}
}
@media ( min-width: 1151px ) and ( max-width: 1225px ) {
	div.img-persist {
		height: 81%;
	}
}
@media ( min-width: 1151px ) and ( max-width: 1350px ) {
	div.img-persist {
		height: 220px;
		line-height: 220px;
	}
} */

.cycle-slide {
	width: 100%;
}


.sr-only {
	border: 0 !important;
	clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
	-webkit-clip-path: inset(50%) !important;
		clip-path: inset(50%) !important;  /* 2 */
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	padding: 0 !important;
	position: absolute !important;
	width: 1px !important;
	white-space: nowrap !important;            /* 3 */
}

/*
	Use in conjunction with .sr-only to only display content when it's focused.
	@note Useful for skip links 
	@see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
	@note Based on a HTML5 Boilerplate technique, included in Bootstrap
	@note Fixed a bug with position: static on iOS 10.0.2 + VoiceOver
		@author Sylvain Pigeard
		@see https://github.com/twbs/bootstrap/issues/20732
*/
.sr-only-focusable:focus,
.sr-only-focusable:active {
	clip: auto !important;
	-webkit-clip-path: none !important;
		clip-path: none !important;
	height: auto !important;
	margin: auto !important;
	overflow: visible !important;
	width: auto !important;
	white-space: normal !important;
}




/* 03/2020 COLLAGE REBUILD */
.collage {
	width:100%;
	padding-bottom: 45px;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 1fr 1fr;
	grid-template-areas:
		"quad01"
		"quad02";
}


.collage-ie {
	display: none;
}



.collage-quad01 {
	grid-area: quad01;
	padding: 5%;

}

.collage-quad02 {
	grid-area: quad02;

}
	.collage-sub-grid {
		display: grid;
		height:100%;
		grid-template-columns: 50% 50%;
		grid-template-rows: 50% 50%;
		grid-template-areas:
		"sg01 sg02"
		"sg01 sg03";

	}

	.sub-grid-01 {
		grid-area: sg01;
	}

	.sub-grid-02 {
		grid-area: sg02;
		overflow:hidden;
	}

	.sub-grid-03 {
		grid-area: sg03;
		overflow:hidden;
	}
		.sg-square-img {
			height:100%;
			width:100%;
			background-size: cover; 
			background-position: center;
		}

		.sg-tall-img {
			height:100%;
			width:100%;
			background-size: cover; 
			background-position: center;
		}




.collage-quad03 {
	grid-area: quad03;
	display: flex;
}
	.quad03-item {
		flex: 1 50%; 
		position:relative;
	}

	.quad03-item {
		flex: 1 50%; 
		position:relative;
	}

		.quad03-item > img {
			position: absolute; 
			top:0; 
			left:0; 
			width: 100%;
		}

		.quad03-item > div {
			height:100%; 
			width: 100%; 
			background-size: cover; 
			background-position: bottom center;
		}

.collage-quad04 {
	grid-area: quad04;
}

	.collage-quad04 > div {
		height:100%; 
		width: 100%; 
		background-size: cover; 
		background-position: bottom center;
	}


@media only screen and (min-width: 550px) {
	.collage {
		grid-template-rows: .6fr 1fr;
	}

	.collage-sub-grid {
		min-height: 550px;
	}
}


@media only screen and (min-width:670px) and (max-width:750px) and (orientation:landscape) {
	.collage-sub-grid {
		min-height: 625px;
	}
}

@media only screen and (min-width: 768px) {
	.collage {
		grid-template-columns: 50% 50%;
		grid-template-rows: 1fr;
		grid-template-areas:
			"quad01 quad02";
	}
}


@media only screen and (min-width: 1000px) {
	.collage {	
		grid-template-rows: 3fr 1fr;
		grid-template-areas:
			"quad01 quad02"
			"quad03 quad04";
	}
	
}


@media only screen and (min-width: 1200px) {
	.collage-sub-grid {
		min-height: 800px;
	}
}

@media only screen and (min-width: 1500px) { 
	.collage {
		margin-bottom: 50px;
	}
}

@media only screen and (min-width: 1600px) {
	.collage {
		margin-bottom: 150px;
	}
}



@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
	.collage {
		display: none;
	}
	.collage-ie {
		display: block;
	}
}

.brand_column a:hover{
	color:#333;
}
.int_prod_links ul li:hover a{
	color:#333;
	text-decoration: underline;
}