/*
 *
 *	Ballard Brand Styles
 *	* These styles will migrate into 'brand.sass' brand sass overwites in CornerStone release cycles
 *	* These styles are extensions of the base bootstrap sass files, maily overwrites to adjust brand styles - 
 *	* Some for brand specific components, and brand styles as well.
 */

 /*
	
	TOC
	1.) Lazy Loader
	2.) Utilities
	3.) Custom Buttons
	4.) Brand Colors
	5.) Brand Components
	6.) Bootstrap Extensions

 */




/*  -----  1.) Lazy Loader  -----  */

.desktop-site img.lazyload { width:100%; height:auto; margin:auto; opacity:.5; /* Spinner Loader -> */ background:rgba(209,204,188,0) url('https://www.ballarddesigns.com/wcsstore/images/BallardDesigns/loaders/loader_spinner.gif') no-repeat center center; }
.desktop-site img.lazyload.lazyloaded { min-height:auto!important; background:transparent none!important; opacity:1; transition:opacity 0.1s; }
.desktop-site img.lazyload.lazyloaded:not(.no-resizer) { width:100%!important; height:auto!important; }

.mobile-site img.lazyload { width:100%!important; height:auto!important; }



/*  -----  2.) Text Utilities  -----  */

/* Grid Utilities */
.desktop .flex-vertical-align { display:flex; align-items:center; justify-content:center; }
.desktop .flex-row-reverse    { flex-direction:row-reverse; }

/* Add to .row div in full width layout to create wrapper in row */
.desktop .row-wrapper { max-width:1280px!important; min-width:767px!important; margin-left:auto!important; margin-right:auto!important; }

.text-lowercase { text-transform:lowercase!important; }
.text-uppercase { text-transform:uppercase!important; }
.text-transform-none { text-transform:none!important; }

.mobile .m-text-left   { text-align:left!important; }
.mobile .m-text-center { text-align:center!important; }
.mobile .m-text-right  { text-align:right!important; }

/* Mobile Fixes */
.m-framework .text-uppercase { text-transform:uppercase!important; }

/* Brand Custom Headings */
.title-modern { font-family:"Montserrat",sans-serif!important; /*font-weight:500;*/ font-style:normal!important; text-transform:uppercase; color:#000; }
.mobile h2.title-modern { font-size:1.7em; text-transform:uppercase!important; }

.title-modern .subtitle { padding-top:10px; font:500 italic 1em 'Cormorant'; color:#3d3226; text-transform:lowercase; display:block; }

.title-serif { font-size:1.7em; font-family:'Cormorant',serif!important; font-weight:normal!important; font-style:italic!important; text-transform:lowercase; }

a.module-link {}
a.module-link:hover,
a.module-link:active { text-decoration:none!important; }
a.module-link:hover h2,
a.module-link:active h2,
a.module-link:hover h3,
a.module-link:active h3,
a.module-link:hover h4,
a.module-link:active h4,
a.module-link:hover h5,
a.module-link:active h5,
a.module-link:hover h6,
a.module-link:active h6,
a.module-link:hover p,
a.module-link:active p { text-decoration:none; opacity:.5; }

a.link-color-black,
a.link-color-black { color:#000!important; }

a.module-link p { line-height:1.1em; margin-bottom: 5px!important; }

a.link-underline { text-decoration:underline!important; }
a.link-underline:hover,
a.link-underline:active,
a.link-underline:focus { text-decoration:none!important; }

a.link-inline-normal { font-size:1em; text-transform:none; text-decoration:underline!important; }
a.link-inline-normal:hover,
a.link-inline-normal:active,
a.link-inline-normal:focus { text-decoration:none!important; }


/* Font Sizes */
.font-size-6xl 	{ font-size:28px; }
.font-size-5xl 	{ font-size:26px; }
.font-size-4xl 	{ font-size:24px; }
.font-size-3xl 	{ font-size:22px; }
.font-size-xxl 	{ font-size:20px; }
.font-size-xl 	{ font-size:18px; }
.font-size-lg 	{ font-size:16px; }
.font-size-xmd 	{ font-size:14px; }
.font-size-md 	{ font-size:11px; }

.mobile .font-size-6xl 	{ font-size:24px; }
.mobile .font-size-5xl 	{ font-size:22px; }
.mobile .font-size-4xl 	{ font-size:20px; }
.mobile .font-size-3xl 	{ font-size:18px; }
.mobile .font-size-xxl 	{ font-size:16px; }
.mobile .font-size-xl 	{ font-size:14px; }
/* .mobile .font-size-lg { font-size:14px; } */
.mobile .lead.font-size-lg 	{ font-size:16px; }

/* Line Heights */
.line-height-1   { line-height:1em!important;   }
.line-height-1-1 { line-height:1.1em!important; }
.line-height-1-2 { line-height:1.2em!important; }
.line-height-1-3 { line-height:1.3em!important; }
.line-height-1-4 { line-height:1.4em!important; }
.line-height-1-5 { line-height:1.5em!important; }
.line-height-1-6 { line-height:1.6em!important; }
.line-height-1-7 { line-height:1.7em!important; }
.line-height-1-8 { line-height:1.8em!important; }
.line-height-1-9 { line-height:1.9em!important; }
.line-height-2   { line-height:2em!important;   }

.font-style-normal { font-style:normal!important; }

/* Lists */
ul.list-dashed { list-style:none; margin:20px 0 20px 30px; }
ul.list-dashed li { position:relative; margin:0 0 25px; font-weight:500; }
ul.list-dashed li:before { content:'-'; position:absolute; top:-2px; left:-15px; display:block; font-size:1.3em; }
	.mobile ul.list-dashed { margin:20px 0; }
	.mobile ul.list-dashed li { margin-bottom:15px; }

dl.list-def 	{}
dl.list-def dt 	{ text-transform:uppercase; font-weight:800; }
dl.list-def dd 	{ margin-bottom:25px; font-weight:500; }

/* Blockquotes */
blockquote[class*="ballard-blockquote"] { position:relative; padding:0; margin:0 0 30px; border:none; }
blockquote[class*="ballard-blockquote"] > p { position:relative; z-index:2; }
blockquote[class*="ballard-blockquote"]:before { content:'“'; position:absolute; left:-40px; top:21px; font-family:'Cormorant', serif; font-weight:800; color:rgb(204, 204, 204, .5); font-size:170px; z-index:-1; }
blockquote[class*="ballard-blockquote"]:after  { content:'”'; position:absolute; right:-22px; bottom:-16px; font-family:'Cormorant', serif; font-weight:800; color:rgb(204, 204, 204, .5); font-size:170px; z-index:-1; }

blockquote.ballard-blockquote-1 { font-size:18px; line-height:1.3em; }
blockquote.ballard-blockquote-2 { font-size:24px; line-height:1.3em; font-family:'Cormorant', serif; }
blockquote.ballard-blockquote-3 { font-family:'Georgia', sans; font-style:italic; }
blockquote.ballard-blockquote-3:before,
blockquote.ballard-blockquote-3:after { display:none; }

@media (max-width:1200px){
  blockquote[class*="ballard-blockquote"]:before { left:-15px; }
  blockquote[class*="ballard-blockquote"]:after  { right:-15px; bottom:-45px; }
}

.mobile blockquote[class*="ballard-blockquote"]:before { left:-6px; top:-4px; font-size:140px; }
.mobile blockquote[class*="ballard-blockquote"]:after  { right:12px; bottom:-60px; font-size:140px; }


/* Brand Tip */
.brand-tip 		{ display:flex; align-items:center; }
.brand-tip h3 	{ font:700 2.2em 'Montserrat'; color:#656565; display:inline-block; border-right:2px solid #656565; margin:0; padding:30px; }
.brand-tip p  	{ display:inline-block; margin:0; padding:30px; font:500 italic 28px 'Cormorant'; }
.mobile .brand-tip { display:block; text-align:center; }
.mobile .brand-tip h3 { border-right:none; border-bottom:2px solid #656565; padding:15px; font-weight:500; }
.mobile .brand-tip p  { padding:20px 0; font-size:24px; }


/* Borders */
.border-top { border-top:1px solid #dfdbd8; }
.border-top-arrow { border-top:1px solid #dfdbd8; position:relative; }
.border-top-arrow::before { content: ""; display: block; position: absolute; width: 50px; height: 40px; left: calc(50% - 38px); top: -28px; border-bottom: 1px solid #dfdbd8; transform: rotate(25deg); background-color: #fff; }
.border-top-arrow::after { content: ""; display: block; position: absolute; width: 40px; height: 50px; left: calc(50% + -5px); top: -33px; border-right: 1px solid #dfdbd8; transform: rotate(65deg); background-color: #fff; }
.border-bottom { border-bottom: 1px solid #dfdbd8; }


/* Utility Extensions */
.margin-none { margin:0!important; }

.margin-top-5  { margin-top:5px!important;  }
.margin-top-10 { margin-top:10px!important; }
.margin-top-20 { margin-top:20px!important; }
.margin-top-25 { margin-top:25px!important; }
.margin-top-30 { margin-top:30px!important; }
.margin-top-35 { margin-top:35px!important; }
.margin-top-40 { margin-top:40px!important; }
.margin-top-45 { margin-top:45px!important; }

.margin-bottom-5  { margin-bottom:5px!important; }
.margin-bottom-10 { margin-bottom:10px!important; }
.margin-bottom-20 { margin-bottom:20px!important; }
.margin-bottom-25 { margin-bottom:25px!important; }
.margin-bottom-30 { margin-bottom:30px!important; }
.margin-bottom-35 { margin-bottom:35px!important; }
.margin-bottom-40 { margin-bottom:40px!important; }
.margin-bottom-45 { margin-bottom:45px!important; }

.margin-left-5 { margin-left:5px!important; }

.margin-right-5 { margin-right:5px!important; }
.margin-right-10 { margin-right:10px; }

/* Display */
.display-block { display:block!important; }
.display-inline { display:inline!important; }
.display-inline-block { display:inline-block!important; }

/* Mobile Overwrite */
.mobile .m-clear-col      { clear:both; }
.mobile .m-nomargin       { margin:0!important; }
.mobile .m-nopad          { padding:0!important; } 
.mobile .m-margin-top     { margin-top:12px!important; }
.mobile .m-margin-right   { margin-right:12px!important; }
.mobile .m-margin-bottom  { margin-bottom:12px!important; }
.mobile .m-margin-left    { margin-left:12px!important; }
.mobile .m-padding-top    { padding-top:12px!important; }
.mobile .m-padding-right  { padding-right:12px!important; }
.mobile .m-padding-bottom { padding-bottom:12px!important; }
.mobile .m-padding-left   { padding-left:12px!important; }

.mobile .m-margin-bottom-5  { margin-bottom:5px!important; }
.mobile .m-margin-bottom-10 { margin-bottom:10px!important; }
.mobile .m-margin-bottom-20 { margin-bottom:20px!important; }
.mobile .m-margin-bottom-25 { margin-bottom:25px!important; }
.mobile .m-margin-bottom-30 { margin-bottom:30px!important; }
.mobile .m-margin-bottom-35 { margin-bottom:35px!important; }
.mobile .m-margin-bottom-40 { margin-bottom:40px!important; }
.mobile .m-margin-bottom-45 { margin-bottom:45px!important; }

.mobile .m-padding-left-45  { padding-left:45px!important; }
.mobile .m-padding-right-45 { padding-right:45px!important; }
.mobile .m-padding-left-50  { padding-left:50px!important; }
.mobile .m-padding-right-50 { padding-right:50px!important; }


.mobile .m-full-width 	  { padding-left:0!important; padding-right:0!important; max-width:none!important; }
.mobile .m-full-width-box { margin-left:-12px!important; margin-right:-12px!important; width:calc(100% + 24px); max-width:none!important; }

.mobile .m-btn-block { display:block; }

/* Desktop Full-Width Utilities */
@media(min-width:1280px){
    .visible-full-width { display:inline-block; }
    .hidden-full-width  { display:none; }
}
@media(max-width:1280px){
    .visible-full-width { display:none; }
    .hidden-full-width  { display:inline-block; }
}



/* -- Borders -- */

/* Title Border */
.title-border-left { display:block; text-align:left; position:relative; }
.title-border-left::after { content:''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #ccc; z-index:0; }
.title-border-left span { background:#fff; padding:0 15px 0 0; display:inline-block; z-index:990; position:relative; }

/* Title Border - Mobile (Title Centered and seperated from line) */
.mobile .title-border-left { text-align:center; }
.mobile .title-border-left::after { top:0; }
.mobile .title-border-left span { padding:12px 0 0; }



/* -- CLP Product Grid - Utilities -- */

.ballard-sub-category-name-header { font-family:"Montserrat",Verdana,Helvetica,sans-serif; font-style:normal!important; font-size:14px; line-height:24px; margin:7px 0; }
.mobile .ballard-sub-category-name-header { color:#333; font-weight:500; text-decoration:none; }



/*  -----  3.) Custom Buttons  -----  */

.btn.btn-xl { padding:1em 1.5em; font-size:1.2em; }

/* Btn > Double Arrow  */
.btn.btn-double-arrow { color:#000; background-color:transparent; border:none; font-size:1.4em; border:none; letter-spacing:0; font-weight:normal; margin:0 0 0 -15px; padding:0; }
.btn.btn-double-arrow:after { content:'\00bb'; position:absolute; top:40%; right:-18px; /*color:#000;*/ background:none; border:none; font-size:1.3em; }
.btn.btn-double-arrow:hover,
.btn.btn-double-arrow:active { opacity:.5; }

.btn.btn-weight-500,
.btn.btn-weight-500:after { font-weight:800; }
.btn.btn-weight-800,
.btn.btn-weight-800:after { font-weight:800; letter-spacing:0; }
.btn.btn-weight-800:after { right:-14px; }

.btn.btn-double-arrow.btn-xs { font-size:1.2em; }
	.btn.btn-double-arrow.btn-xs:after { font-size:1em; }
.btn.btn-double-arrow.btn-sm { font-size:1.3em; }
	.btn.btn-double-arrow.btn-sm:after { font-size:1em; }
.btn.btn-double-arrow.btn-md { font-size:1.4em; }
	.btn.btn-double-arrow.btn-md:after { font-size:1em; }
.btn.btn-double-arrow.btn-lg { font-size:1.8em; }
	.btn.btn-double-arrow.btn-lg:after { font-size:1em; }
.btn.btn-double-arrow.btn-xl { font-size:2em; }
	.btn.btn-double-arrow.btn-xl:after { font-size:1em; }

.c-button.btn-double-arrow.btn-xs, .pw-button.btn-double-arrow.btn-xs { font-size:1.2em; }	
.c-button.btn-double-arrow.btn-sm, .pw-button.btn-double-arrow.btn-sm { font-size:1.3em; }
.c-button.btn-double-arrow.btn-md, .pw-button.btn-double-arrow.btn-md { font-size:1.4em; }
.c-button.btn-double-arrow.btn-lg, .pw-button.btn-double-arrow.btn-lg { font-size:1.8em; }
.c-button.btn-double-arrow.btn-xl, .pw-button.btn-double-arrow.btn-xl { font-size:2em; }

@media(max-width:320px){
	.c-button.btn-double-arrow.btn-xs, .pw-button.btn-double-arrow.btn-xs { font-size:1em; }
	.c-button.btn-double-arrow.btn-xs:after, .pw-button.btn-double-arrow.btn-xs:after { top:7px;  right:10px; }	
}

.c-button.btn-double-arrow,
.pw-button.btn-double-arrow { color:#000; border:none; font-size:1.4em; line-height:1em; padding-top:8px; padding-bottom:0; border:none; letter-spacing:0; font-weight:normal; margin-left:-20px!important; }
.c-button.btn-double-arrow:after,
.pw-button.btn-double-arrow:after { content:'\00bb'; position:absolute; top:5px; right:5px; color:#000; background:none; border:none; font-size:1.3em; }
.c-button.btn-double-arrow:hover,
.c-button.btn-double-arrow:active,
.pw-button.btn-double-arrow:hover,
.pw-button.btn-double-arrow:active { opacity:.5; background-color:transparent; }

.link-double-arrow { display:inline-block; padding-right:12px; }
.link-double-arrow:after { content:'\00bb'; margin-left:4px; background:none; border:none; font-size:1em; }
.link-double-arrow:hover,
.link-double-arrow:active { opacity:.5; }



/*  -----  4.) Brand Colors  -----  */

.brand-bkgcolor-white 		{ background-color:white!important; }
.brand-bkgcolor-transparent { background-color:transparent!important; }
.brand-bkgcolor-dark-brown 	{ background-color:#624630!important; }
.brand-bkgcolor-brown 		{ background-color:#947B6A!important; }
.brand-bkgcolor-tan			{ background-color:#D1CCBC!important; }
.brand-bkgcolor-light-tan	{ background-color:#F3F1E9!important; }
.brand-bkgcolor-lighter-tan	{ background-color:#FAF9F5!important; }
.brand-bkgcolor-red			{ background-color:#E76C68!important; }
.brand-bkgcolor-light-blue 	{ background-color:#71B6E0!important; }
.brand-bkgcolor-light-blue-2 { color:#266e9f!important; }
.brand-bkgcolor-dark-blue-2 { color:#243a5c!important; }
.brand-bkgcolor-dark-green	{ background-color:#0E8880!important; }
.brand-bkgcolor-green		{ background-color:#73AEA0!important; }
.brand-bkgcolor-hotpink		{ background-color:#ef3969!important; }
    	
.brand-bordercolor-light-blue-2 { border-color:#266e9f!important; }

.brand-fontcolor-black				{ color:#000!important; }
.brand-fontcolor-brown,
.title-modern.brand-fontcolor-brown	{ color:#583724!important; }
.brand-fontcolor-hotpink 			{ color:#ef3969; }
.brand-fontcolor-red				{ color:#E76C68; }
.brand-fontcolor-darkbrown  { color:#635446!important; }
.brand-fontcolor-darkblue   { color:#0C6C82!important; }
.brand-fontcolor-medgray    { color:#333!important; }

.brand-btn-black { color:#000!important; border-color:#000!important; }
.brand-btn-black:hover,
.brand-btn-black:active,
.brand-btn-black:focus { color:rgba(0,0,0,.6)!important; border-color:rgba(0,0,0,.6)!important; }

.brand-btn-hotpink { background-color:#ef3969!important; border-color:#ef3969!important; }
.brand-btn-hotpink:hover,
.brand-btn-hotpink:active,
.brand-btn-hotpink:focus { background-color:#bb113e!important; border-color:#bb113e!important; }



/*  -----  5.) Brand Components  -----  */

.brand-well { background-color:#f6f5f2!important; outline:1px solid rgba(148,123,106,.2); border: 15px solid #f6f5f2; box-shadow:inset 0px 0px 0px 1px rgba(148,123,106,.5); box-sizing: border-box; }
.brand-well-2 { background-color:#f9f8f6; margin:0 0 30px; padding:30px 20px; border:1px solid #ccc; }
.brand-well.brand-bkgcolor-white { border-color:#fff!important; box-shadow:inset 0px 0px 0px 1px rgb(148 123 106 / 40%); outline:1px solid #ccc; }


/* Ballard Carousels */

/* Multi-Carousel */
.desktop .brand-multi-carousel 							{ margin:0 15px 30px; }
.desktop .brand-multi-carousel .carousel-control 		{ width:4%; }
.desktop .brand-multi-carousel .carousel-control i 		{ color:#583724; text-shadow:none; opacity:1; top:50%; font-size:20px; margin:-40px 0 0; }
.desktop .brand-multi-carousel .carousel-control.left  	{ left:-40px; width:40px; margin:0; background-image:none; }
.desktop .brand-multi-carousel .carousel-control.right 	{ right:-40px; width:40px; margin:0; background-image:none; }

.desktop .brand-multi-carousel .item.active img { opacity:0; }
.desktop .brand-multi-carousel .item.active img { opacity:1; transition:opacity 0.1s; }

/* Variation: Hover Panel Style */
.desktop .brand-multi-carousel.hover-panel .module-link 	{}
.desktop .brand-multi-carousel.hover-panel .module-link img + p {
	display:none; position:absolute; top:0; right:0; bottom:0; background:rgba(255,255,255,.8); overflow:hidden; text-align:center; width:100%; margin:0; padding:0 15px; align-items:center; justify-content:center; font-weight:500; line-height:1.3em; }
.desktop .brand-multi-carousel.hover-panel .module-link:hover img + p { display:flex; color:#583724!important; }
.desktop .brand-multi-carousel.hover-panel .module-link *:hover, 
.desktop .brand-multi-carousel.hover-panel .module-link *:active { opacity:1!important; }

/* Variation: PLP-Grid Style */
.desktop .brand-multi-carousel.plp-grid { opacity:1; transition:opacity 0.5s; min-height:320px; }
.desktop .brand-multi-carousel.plp-grid[class*="loading"] * { opacity:0;  }
.desktop .brand-multi-carousel.plp-grid .carousel-control 	{ height:240px; }
.desktop .brand-multi-carousel .carousel-control i 			{ margin:-20px 0 0; }
.desktop .brand-multi-carousel.plp-grid .module-link 		{}

/*
.desktop .brand-multi-carousel.plp-grid .module-link img + p {
	display:none; position:absolute; top:0; right:0; bottom:0; background:rgba(255,255,255,.8); overflow:hidden; text-align:center; width:100%; margin:0; padding:0 15px; align-items:center; justify-content:center; font-weight:500; line-height:1.3em; }
.desktop .brand-multi-carousel.plp-grid .module-link:hover img + p { display:flex; color:#583724!important; }
.desktop .brand-multi-carousel.plp-grid .module-link *:hover, 
.desktop .brand-multi-carousel.plp-grid .module-link *:active { opacity:1!important; }
*/

@media (max-width:1280px){
	.desktop .brand-multi-carousel .carousel-control.left  	{ left:-28px; width:30px;  }
	.desktop .brand-multi-carousel .carousel-control.right 	{ right:-28px; width:30px; }	
}
@media (max-width:768px){
	.desktop .brand-multi-carousel .carousel-control.left  	{ left:-27px;  }
	.desktop .brand-multi-carousel .carousel-control.right 	{ right:-27px; }	
}

/* Transistions
.desktop .brand-multi-carousel .carousel-inner > .item { transition: 0ms ease-in-out left; //opacity:0;// }
.desktop .brand-multi-carousel .carousel-inner .active {}
.desktop .brand-multi-carousel .carousel-inner .active.left,
.desktop .brand-multi-carousel .carousel-inner .active.right {}
.desktop .brand-multi-carousel .carousel-inner .active.left { left: -8.3333333334%; }
.desktop .brand-multi-carousel .carousel-inner .active.right { left: 8.3333333334%; }
.desktop .brand-multi-carousel .carousel-inner .next { left: 8.3333333334%; }
.desktop .brand-multi-carousel .carousel-inner .prev { left: -8.3333333334%; }
@media all and (transform-3d), (-webkit-transform-3d) {
	.desktop .brand-multi-carousel .carousel-inner > .item { transition: 0ms ease-in-out left; transition: 0ms ease-in-out all; backface-visibility: visible; transform: none !important; }
}
*/

/*
  Bootstrap Carousel Fade Transition (for Bootstrap 3.3.x)
  CSS from:       http://codepen.io/transportedman/pen/NPWRGq
  and:            http://stackoverflow.com/questions/18548731/bootstrap-3-carousel-fading-to-new-slide-instead-of-sliding-to-new-slide
  Inspired from:  http://codepen.io/Rowno/pen/Afykb 
*/
/* Fade 
.desktop .brand-multi-carousel .carousel-inner .item { opacity: 0; transition-property: opacity; }
.desktop .brand-multi-carousel .carousel-inner .active { opacity: 1; }
.desktop .brand-multi-carousel .carousel-inner .active.left,
.desktop .brand-multi-carousel .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; }
.desktop .brand-multi-carousel .carousel-inner .next.left,
.desktop .brand-multi-carousel .carousel-inner .prev.right { opacity: 1; }
.desktop .brand-multi-carousel .carousel-control { z-index: 2; }
*/

/* Slide - (To Do: This should be removed) */
/* 
.carousel-inner .item.left.active { transform: translateX(-33%); }
.carousel-inner .item.right.active { transform: translateX(33%); }
.carousel-inner .item.next { transform: translateX(33%) }
.carousel-inner .item.prev { transform: translateX(-33%) }
.carousel-inner .item.right,
.carousel-inner .item.left { transform: translateX(0); }
*/

/* Fade Lazyload */
@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}
.desktop .loading-bkg {
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f4f4f4;
    background: linear-gradient(to right, #f4f4f4 8%, #eeeeee 18%, #f4f4f4 33%);
    background-size: 800px 104px;
    position: relative;
}


/*
  WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
  Need to override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .desktop .brand-multi-carousel .carousel-inner > .item.next,
    .desktop .brand-multi-carousel .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .desktop .brand-multi-carousel .carousel-inner > .item.prev,
    .desktop .brand-multi-carousel .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .desktop .brand-multi-carousel .carousel-inner > .item.next.left,
    .desktop .brand-multi-carousel .carousel-inner > .item.prev.right,
    .desktop .brand-multi-carousel .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

/* Desktop: Hero Carousel */
.desktop-site .brand-hero-carousel img.lazyload { background-image:none; }
.desktop .brand-hero-carousel { margin-bottom:30px; }
.desktop .brand-hero-carousel .carousel-control { background-image:none!important; text-shadow:none!important; opacity:1; }
.desktop .brand-hero-carousel .carousel-indicators { bottom:-40px; }
.desktop .brand-hero-carousel .carousel-indicators li { width:12px; height:12px; margin:0 1px; border-color:rgba(0,0,0,1); }
.desktop .brand-hero-carousel .carousel-indicators .active { background-color:rgba(0,0,0,.5); border-color:rgba(0,0,0,.5); }
.desktop .brand-hero-carousel .carousel-control .glyphicon { top: calc(50% - 25px); font-size:50px; }



/* Features Carousel */
.carousel.brand-features-carousel { margin-bottom:50px; }
.carousel.brand-features-carousel .carousel-indicators { background-color:#4E575F; bottom:-50px; left:0px; z-index: 15; width:100%; margin:0; padding:5px 0 0; 
    /*background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0.0001) 0%, rgba(0,0,0,0.8) 70%);
    background-image: -o-linear-gradient(bottom, rgba(0,0,0,0.0001) 0%, rgba(0,0,0,0.8) 70%);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.0001) 0%, rgba(0,0,0,0.8) 70%);
    background-repeat: repeat-y;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);*/
}
.carousel.brand-features-carousel .carousel-indicators li { display:inline-block; background-color: rgba(255, 255, 255, 0); width: 16%; height:40px; margin: 0; padding: 0; text-indent: 0; border: none; border-radius: 0; cursor: pointer; overflow: hidden; }
.carousel.brand-features-carousel .carousel-indicators li.active { background-color: rgba(255, 255, 255, 0); }
.carousel.brand-features-carousel .carousel-indicators li span { position: relative; display: block; background-color: rgba(255, 255, 255, 0); width: auto; height: 40px; margin: 0 3px 0 0; text-indent: 0; border: 2px solid rgba(255, 255, 255, 0); border-radius: 0; cursor: pointer; padding:0 5px; font-size: 13px; line-height:1em; color: #fff; font-weight: bold; text-transform: uppercase;
                                                                           display:-webkit-flex; -webkit-align-items:center; justify-content:center; display:flex; align-items:center; text-align:center; }
.carousel.brand-features-carousel .carousel-indicators li:hover span:before,
.carousel.brand-features-carousel .carousel-indicators li:active span:before,
.carousel.brand-features-carousel .carousel-indicators li.active span:before { content: ""; border: 2px solid rgba(255, 255, 255, .7); position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

@media (max-width:992px){
    .carousel.brand-features-carousel .carousel-indicators li { width:15%; height:45px; }
    .carousel.brand-features-carousel .carousel-indicators li span { font-size:1.5rem; line-height:1em; height:40px; padding:0px 5px; white-space:pre-wrap; display:-webkit-flex; -webkit-align-items:center; justify-content:center; display:flex; align-items:center; text-align:center; }
}
@media (max-width:768px){
    .carousel.brand-features-carousel { margin-bottom:113px; }
    .carousel.brand-features-carousel .carousel-inner { max-height:482px; }
    .carousel.brand-features-carousel .carousel-indicators { bottom:-163px; background-color:#4E575F; background-image:none; }
    .carousel.brand-features-carousel .carousel-indicators li { width:30%; height:50px; }
    .carousel.brand-features-carousel .carousel-indicators li span { font-size:1rem; height:50px; padding:0px 5px; line-height:1em; white-space:pre-wrap; }
}
@media (max-width:420px){
    .carousel.brand-features-carousel .carousel-inner { max-height:250px; }
    .carousel.brand-features-carousel .carousel-indicators li span { font-size:1rem; }
}



/* Transition: Fade */
.desktop .carousel-fade .carousel-inner .item { transition-property: opacity; }
.desktop .carousel-fade .carousel-inner .item,
.desktop .carousel-fade .carousel-inner .active.left,
.desktop .carousel-fade .carousel-inner .active.right { opacity: 0; }
.desktop .carousel-fade .carousel-inner .active,
.desktop .carousel-fade .carousel-inner .next.left,
.desktop .carousel-fade .carousel-inner .prev.right { opacity: 1; }
.desktop .carousel-fade .carousel-inner .next,
.desktop .carousel-fade .carousel-inner .prev,
.desktop .carousel-fade .carousel-inner .active.left,
.desktop .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.desktop .carousel-fade .carousel-control { z-index: 2; }


/* -- Mobile -- */

/* Mobile: Multi-Carousel */
.mobile .brand-multi-carousel .carousel-inner { position:relative; margin:0 0 0 -6px; padding:0 6px; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; width:calc(100% + 6px); }
.mobile .brand-multi-carousel .carousel-inner:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.mobile .brand-multi-carousel .carousel-inner > .item { overflow:hidden; max-height:none!important; width:65%!important; display:inline-flex; float:none!important; padding:0; margin:0 6px; }
.mobile .brand-multi-carousel .carousel-inner > .item:first-child { margin-left:20px; }
.mobile .brand-multi-carousel .carousel-inner > .item:last-child  { margin-right:12px; }
.mobile .brand-multi-carousel .carousel-inner > .item a {}
.mobile .brand-multi-carousel .carousel-inner > .item { height:100%!important; max-width:none; max-height:200px; text-align:center; }
.mobile .brand-multi-carousel .carousel-inner > .item a p { white-space:normal!important; margin-bottom:0px!important; font-size:13px!important; line-height:1.3em!important; }
.mobile .brand-multi-carousel .carousel-control { display:none; }
.mobile .col-xs-12 .brand-multi-carousel { margin:0 -10px; }

.mobile .brand-multi-carousel.plp-grid .carousel-inner h2 { white-space:normal; }

/* Mobile: Hero Carousel */
.mobile .brand-hero-carousel { margin-bottom:30px; }
.mobile .brand-hero-carousel .carousel-inner { position:relative; margin:0 0 0 -6px; padding:0 6px; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; width:calc(100% + 6px); }
.mobile .brand-hero-carousel .carousel-inner:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.mobile .brand-hero-carousel .carousel-inner > .item { overflow:hidden; max-height:none!important; width:85%!important; display:inline-block; float:none!important; padding:0; margin:0 6px; }
.mobile .brand-hero-carousel .carousel-inner > .item:first-child { margin-left:12px; }
.mobile .brand-hero-carousel .carousel-inner > .item:last-child  { margin-right:12px; }
.mobile .brand-hero-carousel .carousel-inner > .item a {}
.mobile .brand-hero-carousel .carousel-inner > .item { height:100%!important; max-width:none; max-height:200px; text-align:center; }
.mobile .brand-hero-carousel .carousel-inner > .item a p { white-space:normal!important; margin-bottom:0px!important; font-size:13px!important; line-height:1.3em!important; }
.mobile .brand-hero-carousel .carousel-control { display:none; }
.mobile .brand-hero-carousel .carousel-indicators { display:none; }

.mobile .brand-hero-carousel.mobile-height-412 img { height:412px!important; width:100%!important; }

/* Options
	@media (max-width: 767px) {
		.desktop .carousel-inner .active.left { left: -100%; }
		.desktop .carousel-inner .next        { left:  100%; }
		.desktop .carousel-inner .prev		 { left: -100%; }
		.desktop .active > div { display:none; }
		.desktop .active > div:first-child { display:block; }

	}
	@media (min-width: 767px) and (max-width: 992px ) {
		.desktop .carousel-inner .active.left { left: -50%; }
		.desktop .carousel-inner .next        { left:  50%; }
		.desktop .carousel-inner .prev		 { left: -50%; }
		.desktop .carousel .active > div { display:none; }
		.desktop .carousel .active > div:first-child { display:block; }
		.desktop .carousel .active > div:first-child + div { display:block; }
	}
	@media (min-width: 992px ) {
		.desktop .carousel-inner .active.left { left: -25%; }
		.desktop .carousel-inner .next        { left:  25%; }
		.desktop .carousel-inner .prev		 { left: -25%; }	
	}
*/

/* Horizontal Swiper
   - Add brand-swipe-grid div between .row and .col-* grid items to trigger swipe on mobile expirience */
.mobile [class*="brand-swipe-grid"] { margin:0 0 0 -6px; padding:0 6px; overflow-x:scroll; overflow-y:hidden; white-space:nowrap; width:calc(100% + 6px); }
.mobile [class*="brand-swipe-grid"]:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.mobile .gutter-10 [class*="brand-swipe-grid"] > [class*="col-"],
.mobile .gutter-4 [class*="brand-swipe-grid"] > [class*="col-"] { margin:0; }
.mobile [class*="brand-swipe-grid"] > [class*="col-"] { overflow:hidden; max-height:none!important; width:65%!important; display:inline-flex; float:none!important; padding:0; margin:0 6px; }
.mobile [class*="brand-swipe-grid"] > [class*="col-"]:first-child { margin-left:20px; }
.mobile [class*="brand-swipe-grid"] > [class*="col-"]:last-child  { margin-right:12px; }
.mobile .gutter-4 [class*="brand-swipe-grid"] > [class*="col-"]:first-child { margin-left:0; }
.mobile .gutter-4 [class*="brand-swipe-grid"] > [class*="col-"]:last-child { margin-right:0; }
.mobile .gutter-10 [class*="brand-swipe-grid"] > [class*="col-"]:first-child { margin-right:6px; }
.mobile .gutter-10 [class*="brand-swipe-grid"] > [class*="col-"]:last-child { margin-right:6px; }
.mobile [class*="brand-swipe-grid"] > [class*="col-"] a {}
.mobile [class*="brand-swipe-grid"] > [class*="col-"] { height:100%!important; max-width:none; max-height:200px; text-align:center; }
.mobile [class*="brand-swipe-grid"] > [class*="col-"] a p { white-space:normal!important; margin-bottom:30px; }
.mobile [class*="brand-swipe-grid"] > [class*="col-"] a p.c-heading.c--6 { margin:12px 0!important; }

/* Mobile Swipe Columns */
.mobile .brand-swipe-grid-3 > [class*="col-"] { width:40%!important; }
.mobile .brand-swipe-grid-3 > [class*="col-"]:first-child { margin-left:5px; }
.mobile .brand-swipe-grid-3 > [class*="col-"]:last-child  { margin-right:5px; }



/*  -----  6.) Bootstrap Extensions  -----  */

/*
 *	Note: The following styles are to extend the current Bootstrap components, some bootstrap overrides reside in the sassOverwrite file for bootstrap overwrite and global scope.
 */


/* Bootstrap: Table Extensions */

/* Table - Bordered Chart */
table.table-bordered-chart { border:4px solid #bcb8a5; }
table.table-bordered-chart>thead>tr>th, table.table-bordered-chart>thead>tr>td { border-top:4px solid #bcb8a5; font-weight:800; padding:15px 25px; text-transform:uppercase; color:#333; font-weight:800; font-size:1.5em; }
table.table-bordered-chart>tbody>tr>th, table.table-bordered-chart>tbody>tr>td, table.table-bordered-chart>tfoot>tr>th, table.table-bordered-chart>tfoot>tr>td { border-top:4px solid #bcb8a5; border-bottom:4px solid #bcb8a5; border-left:2px solid #bcb8a5; border-right:2px solid #bcb8a5; }
table.table-bordered-chart > tbody > tr > td  { font-size:1.8em; font-weight:500; padding:7px 25px!important; color:#333; font-size:1.3em; line-height:1.3em; vertical-align:middle; }

.mobile	table.table-bordered-chart { border:2px solid #bcb8a5; }
.mobile	table.table-bordered-chart>thead>tr>th, .mobile	table.table-bordered-chart>thead>tr>td { border-top:2px solid #bcb8a5; font-weight:800; font-size:.7em; }
.mobile	table.table-bordered-chart>tbody>tr>th, .mobile	table.table-bordered-chart>tbody>tr>td, .mobile	table.table-bordered-chart>tfoot>tr>th, .mobile	table.table-bordered-chart>tfoot>tr>td { border-top:2px solid #bcb8a5; border-bottom:2px solid #bcb8a5; border-left:1px solid #bcb8a5; border-right:1px solid #bcb8a5; }
.mobile	table.table-bordered-chart>tbody>tr>td { font-size:1em; padding:2px 2%!important; vertical-align:middle; }

	/* Bordered Chart - Feature Dots */
	[class^="icon-circle"] { display:inline-block; border:14px solid #bcb8a5; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; }
	table [class^="icon-circle"] { margin:2px 0 -2px; }
	.icon-circle-full {}
	.icon-circle-half { border-right:14px solid #fff; border-bottom:14px solid #fff; transform:rotate(315deg); -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); }

	.mobile [class^="icon-circle"] { border:9px solid #bcb8a5; }
	.mobile .icon-circle-half { border-right:9px solid #fff; border-bottom:9px solid #fff; }


/* Bootstrap: Alert Extensions */

.alert.alert-v2 { position:relative; min-height:90px; justify-content:center; margin:0 0 15px; padding:20px 28px 22px 113px; border:1px solid #ccc; background-color:#fff; -webkit-border-radius:12px; -moz-border-radius:12px; border-radius:12px; display:flex; flex-direction:column; color:#333; font-family:'Montserrat'; font-size:1.3em; line-height:1.5em; font-weight:500; }
.alert.alert-v2:before { font-family:'Font Awesome 5 Free'; content:'\f06a'; font-size:3.4em; font-weight:900; color:#fff; height:100%; position:absolute; top:0; left:0; background-color:#333; width:85px; display:flex; align-items:center; justify-content:center;
                		 -webkit-border-top-left-radius:12px; -webkit-border-bottom-left-radius:12px; -moz-border-radius-topleft:12px; -moz-border-radius-bottomleft:12px; border-top-left-radius:12px; border-bottom-left-radius:12px; }
.alert.alert-v2 h3 { font:800 17px/1.5em 'Montserrat'; text-transform:uppercase; margin:8px 0 2px; }
.alert.alert-v2 p:last-child,
.m-framework .alert.alert-v2 p:last-child { margin-bottom:0; }

.alert-v2.alert-info:before { background-color:#205A8D; }
.alert-v2.alert-info h3 { color:#205A8D; /* OLD Non-ADA Safe Teal #01A4C7*/ }
.alert-v2.alert-danger:before { background-color:#AB1C1C; }
.alert-v2.alert-danger h3 { color:#AB1C1C; }
.alert-v2.alert-default:before { content:'\f05a'!important; background-color:#8F8176!important; }

.mobile .alert.alert-v2 { margin:0 0 12px; padding:20px 36px 22px 85px; }
.mobile .alert.alert-v2:before { font-size:2.5em; width:65px; }
.mobile .alert.alert-v2 h3 { margin:8px 0; font-size:.8em; }
.mobile .alert.alert-v2 p { font-size:.7em; }

/* Alerts - Dismissable */
.alert-v2.alert-dismissable .close, 
.alert-v2.alert-dismissible .close { position: absolute; top: calc(50% - 17px); right: 15px; color: inherit; font-size: 30px; }

/* Alerts - Dismissable - Mobile Button */
.mobile .alert-v2.alert-dismissable .close, .mobile .alert-v2.alert-dismissible .close { top:0px; right:10px; background-color:transparent; min-height:auto; border:none; padding:0; }
.mobile .alert-v2.alert-dismissable .close:before, .mobile .alert-v2.alert-dismissible .close:before { display:none; }



/* Bootstrap: Button Extensions */

.btn.btn-v2, .pw-button.btn-v2, .c-button.btn-v2 { background-color:#333; border-color:#333; color:#fff; letter-spacing:0; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
.btn.btn-v2:before, .pw-button.btn-v2:before, .c-button.btn-v2:before { display:none; }
.btn.btn-v2:hover, .btn.btn-v2:active, .btn.btn-v2:focus, 
.pw-button.btn-v2:hover, .pw-button.btn-v2:active, .pw-button.btn-v2:focus,
.c-button.btn-v2:hover, .c-button.btn-v2:active, .c-button.btn-v2:focus { background-color:#707070; border-color:#707070; }
.btn.btn-v2.btn-light, .pw-button.btn-v2.btn-light, .c-button.btn-v2.btn-light { background-color:#fff; border:2px solid #ccc; color:#333; }
.btn.btn-v2.btn-light:hover, .btn.btn-v2.btn-light:active, .btn.btn-v2.btn-light:focus, 
.pw-button.btn-v2.btn-light:hover, .pw-button.btn-v2.btn-light:active, .pw-button.btn-v2.btn-light:focus,
.c-button.btn-v2.btn-light:hover, .c-button.btn-v2.btn-light:active, .c-button.btn-v2.btn-light:focus { background-color:#333; border:2px solid #333; color:#fff; }
.btn.btn-v2.btn-lg, .pw-button.btn-v2.btn-lg, .c-button.btn-v2.btn-lg { padding:16px 15px; font-size:1.6em; }
.btn.btn-v2.btn-xmd, .pw-button.btn-v2.btn-xmd, .c-button.btn-v2.btn-xmd { padding:1em 2em; font-size:1.4em; }
.btn.btn-v2.btn-md, .pw-button.btn-v2.btn-md, .c-button.btn-v2.btn-md { padding:.8em 1.8em; font-size:1.1em; }

/* Mobile */
.pw-button.btn-v2.m-btn-xmd, .c-button.btn-v2.m-btn-xmd { padding:0.5em 1em; font-size:1.2em; }
.pw-button.m-btn-full, .c-button.m-btn-full { width:calc(100% - 4px); }

.btn.btn-half, .pw-button.btn-half, .c-button.btn-half { width:calc(50% - 4px); }
.btn.btn-threequarter, .pw-button.btn-threequarter, .c-button.btn-threequarter { width:calc(75% - 4px); }
.btn.btn-full, .pw-button.btn-full, .c-button.btn-full { width:calc(100% - 4px); }


/* Bootstrap: Panel Extensions */

.panel.panel-box { background-color:#faf9f5; border:1px solid #ccc; padding:40px; }
.panel.panel-box > img.panel-box-image { width:calc(100% + 80px); height:auto; max-width:none; margin:-40px -40px 20px; }

.mobile .panel.panel-box { padding:15px; margin-bottom:15px; }
.mobile .panel.panel-box > img.panel-box-image { width:calc(100% + 30px); margin:-15px -15px 15px; }


/* -- Banners -- */

/* Geolocation Store Banner - Desktop */
#ballard-geolocation-store-banner { position:relative; margin:30px 0 45px; padding:30px 0; border-top:1px solid #ccc; border-bottom:1px solid #ccc; width:100%; }
#ballard-geolocation-store-banner::before { content:''; display:block; position:absolute; top:-25px; left:calc(50% - 45px); margin-left:0; background:#fff url('/wcsstore/images/BallardDesigns/interface/icons/Location.svg') no-repeat center center; background-size:33px; width:90px; height:45px; }
.desktop #ballard-geolocation-store-banner h2 span:last-child { font-size:1em; }

/* Geolocation Store Banner - Mobile */
.mobile #ballard-geolocation-store-banner { width:calc(100% + 48px); margin:15px -24px 40px!important; padding:30px 24px!important; }
.mobile #ballard-geolocation-store-banner h2 span:first-child { font-size:1em; margin-right:0!important; }
.mobile #ballard-geolocation-store-banner h2 span:last-child { font-size:.65em; text-wrap:nowrap; }