/* CSS Document */
/* CSS Grid Banners - FACET COLLECTIONS PAGE --------------------------------------------------------------- */
div[class*="css-image"], span[class*="css-image"] {-webkit-background-size: 100% !important;-moz-background-size: cover !important;-o-background-size: cover !important;background-size: cover !important;background-position: center center !important; position: relative;width:100%;height:100%;z-index:1;}
div[class*="css-image"].bgContain, span[class*="css-image"].bgContain {background-size:contain !important; background-color: white !important;}
span[class*="css-image"] {display: block;}
[class*="gridBanner"] > div, [class*="grirow"] > div {display: grid;padding: 0 0 1em 0;grid-gap: 3em;}
[class*="gridBanner"] > div > a, [class*="grirow"] > div > a {position: relative; width: 100%; height: 100%}
[class*="gridBanner"] > div > a:hover .photo span:after, [class*="grirow"] > div > a:hover .photo span:after {opacity: 1;}
[class*="grirow"] > div {display: grid; padding: 0 0 0 0;}
.grirow1 > div {grid-template-columns: repeat(1, 1fr); -ms-grid-columns: 1fr;}
.grirow2 > div {grid-template-columns: repeat(2, 1fr);-ms-grid-columns: 1fr 1fr;}
.grirow3 > div {grid-template-columns: repeat(3, 1fr); -ms-grid-columns: 1fr 1fr 1fr;}
.grirow4 > div {grid-template-columns: repeat(4, 1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr;}
.grirow5 > div {grid-template-columns: repeat(5, 1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;}
.grirow6 > div {grid-template-columns: repeat(6, 1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
.grirow7 > div {grid-template-columns: repeat(7, 1fr); -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}

.gg1, .gg1 > div{grid-gap:1em;}
.gg0, .gg0 > div{grid-gap: 0em !important;}

.bannerTxtCtrGrid {position:absolute;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;flex-direction: row;align-items: center;justify-content: flex-end;flex-wrap: wrap;text-align: center;padding: 32px 16px;z-index: 2;width: 100%;height: 100%;flex-direction: column;-ms-flex-direction: column;color: white;/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0d0e12+0,0d0e12+100&0+50,0.39+100 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ /* IE6-9 */}
.bannerDescGrid:empty, .bannerTitleGrid:empty, .bannerViewGrid:empty{display:none;}
.bannerTxtCtrGrid > span {padding: 1em 2em;}
.bannerDescGrid {font-size: smaller; padding: 0 !important;}
.bannerTitleGrid {font-size: x-large;text-transform: uppercase;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-family: 'citrfontbold';font-weight: normal;}
.bannerViewGrid {font-size: small}

.textBottom .bannerTxtCtr {background: none;position: relative;height: auto;order: 1;padding: 16px 0 32px;color: #000;}
.textBottom > div {padding-bottom: 20px;}
.textBottom > div a {display: inline-grid;}
.textBottom .bannerDescGrid, .textBottom .bannerTitleGrid, .textBottom .bannerViewGrid {color: #222; padding: 0;}
.textBottom .bannerTitleGrid {-webkit-line-clamp: 1;}
.textBottom .bannerView {right: 0;margin: 0;border: none;}
.textBottom .bannerTitle {text-shadow: none;font-size: 16px;}
.alignleft, .alignleft .bannerTxtCtr {text-align:left; align-items:end}

.gBrandsBut {padding: 1em;background: #000;margin-bottom: 1em;}
.gBrandsBut > div > a {text-align: center;padding: 1em 2em;color: #fff;text-decoration: underline;font-size: 14px; border: 1px solid #fff;}
.gBrandsBut > div > a:hover {color: #BF1009; border: 1px solid #bf1009;}
.gBrandsLogo { padding:16px 0}

.layout1 > div > a:nth-child(1) {
    grid-column: 1/3;
    grid-row: 1/3;
}


.gGradient .bannerTxtCtr, .gGradient .bannerTxtCtr:hover {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0d0e12+0,0d0e12+100&0+50,0.39+100 */
    background: -moz-linear-gradient(top, rgba(13,14,18,0) 0%, rgba(13,14,18,0) 50%, rgba(13,14,18,0.39) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(13,14,18,0) 0%,rgba(13,14,18,0) 50%,rgba(13,14,18,0.39) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(13,14,18,0) 0%,rgba(13,14,18,0) 50%,rgba(13,14,18,0.39) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000d0e12', endColorstr='#630d0e12',GradientType=0 ); /* IE6-9 */
}

.All125 .photo span:after, .All125 .photo:after, .All125 .photo div:after {padding-bottom: 125%;}
.All100 .photo span:after, .All100 .photo:after, .All100 .photo div:after {padding-bottom: 100%;}
.All75 .photo span:after, .all75 .photo:after, .All75 .photo div:after {padding-bottom: 75%;}
.All50 .photo span:after, .All50 .photo:after, .All50 .photo div:after {padding-bottom: 50%;}
.All30 .photo span:after, .All30 .photo:after, .All30 .photo div:after {padding-bottom: 30%;}

.All125v .photo span:after, .All125v .photo:after, .All125v .photo div:after {padding-bottom: calc(125vh - 75px);}
.All100v .photo span:after, .All100v .photo:after, .All100v .photo div:after {padding-bottom: calc(100vh - 75px);}
.All75v .photo span:after, .all75v .photo:after, .All75v .photo div:after {padding-bottom: calc(75vh - 75px);}
.All50v .photo span:after, .All50v .photo:after, .All50v .photo div:after {padding-bottom: calc(50vh - 75px);}
.All30v .photo span:after, .All30v .photo:after, .All30v .photo div:after {padding-bottom: calc(30vh - 75px);}


.Banner > .photo {overflow:hidden;}


/* Large Mobile Phones  --------------------------------------------------------------- */
@media screen and (max-width: 767.9px)
{
	.gridBanner1 > div {grid-template-columns: repeat(2, 1fr); -ms-grid-columns: 1fr 1fr;}
	.gridBanner1 > div > a:nth-child(1) {grid-column: 1/3;grid-row: 1/3;}
	.gridBanner1 > div > a:nth-child(4) {grid-column: span 2;}
    [class*="grirow"] > div {grid-template-columns: repeat(1, 1fr) !important; -ms-grid-columns: 1fr 1fr}
	.grirow2 > div {grid-template-columns: repeat(1, 1fr) !important; -ms-grid-columns: 1fr 1fr}
	.grirow4 > div {grid-template-columns: repeat(2, 1fr) !important; -ms-grid-columns: 1fr 1fr}
	.grirow5 > div {grid-template-columns: repeat(2, 1fr) !important; -ms-grid-columns: 1fr 1fr}
	.grirow6 > div {grid-template-columns: repeat(2, 1fr) !important; -ms-grid-columns: 1fr 1fr}
	.All75v .photo span:after, .all75v .photo:after, .All75v .photo div:after {padding-bottom: calc(75%);}
	.All50v .photo span:after, .All50v .photo:after, .All50v .photo div:after {padding-bottom: calc(75%);}
	.All30v .photo span:after, .All30v .photo:after, .All30v .photo div:after {padding-bottom: calc(75%);}
	.bannerTxtCtrGrid {padding:8px;}
	.bannerTxtCtrGrid > span {padding: 0px 8px;}
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.9px)
{
	[class*="gridBanner"] > div, [class*="grirow"] > div {grid-gap: 1em;}
	.gridBanner1 > div {grid-template-columns: repeat(2, 1fr); -ms-grid-columns: 1fr 1fr;}
	.gridBanner1 > div > a:nth-child(1) {grid-column: 1/3; grid-row: 1/3;}
	.gridBanner1 > div > a:nth-child(4) {grid-column: span 2;grid-row: span 2;}
	[class*="grirow"] > div {grid-template-columns: repeat(1, 1fr) !important; -ms-grid-columns: 1fr 1fr}
	.grirow2 > div {grid-template-columns: repeat(1, 1fr) !important; -ms-grid-columns: 1fr 1fr}
	.grirow4 > div {grid-template-columns: repeat(2, 1fr) !important; -ms-grid-columns: 1fr 1fr}
	.grirow5 > div {grid-template-columns: repeat(2, 1fr) !important; -ms-grid-columns: 1fr 1fr}
	.grirow6 > div {grid-template-columns: repeat(2, 1fr) !important; -ms-grid-columns: 1fr 1fr}

}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.9px)
{    
	[class*="gridBanner"] > div, [class*="grirow"] > div {grid-gap: 1em;}
}

/* Desktops  ------------------------------------------------------------------------------------ */
@media screen and (min-width : 1440px) and (max-width : 1913.9px) {}

/* 4K   ------------------------------------------------------------------------------------------ */
@media screen and (min-width : 1914px) {
	.gridBanner1 > div > a:nth-child(1) {grid-column: 1/2;grid-row: 1/2;}
}

/* Fallback for older devices */
.modernizr-no-cssgrid [class*="gridBanner"] > div,
.modernizr-no-cssgrid [class*='gridBanner'] > div > a {display: block;}

/* background unpick */
.bannerDesc, .bannerTitle, .bannerView {letter-spacing: 0;bottom: 0;width: 100%;left: 0;background: none !important;font-weight: 800;line-height: normal;text-transform: uppercase !important;padding: 0 !important;margin: 0;}
[class*="hmBanner"] > div > a:hover .bannerView {background: none;}
.bannerTitle {display: block;text-transform: uppercase;font-size: xx-large;color: #fff;/* letter-spacing: 4px; */order: -1;}
.bannerDesc {display: inline-block;line-height: 1.5em;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;width: 60%;font-size: initial;text-transform: uppercase;letter-spacing: 1px;line-height: 100% !important;padding: 0;margin: 0;}


/* text overlay  --------------------------------------------------------------- */
.bannerTitle {text-transform: capitalize;background: none;padding: 8px;line-height: 1em;font-size: 30px;}
.bannerTxtCtr > span.bannerView {
    font-size: 10px !important;
    width: auto;
    padding: 8px 12px !important;
}
[class*="grirow"] > div > a:hover .bannerView {background: #90c742 !important;padding: 8px 24px !important;border: 1px solid #90c742;}
.bannerDesc {bottom: 0;width: 100%;left: 0;background: none !important;font-family: futura-pt, sans-serif;line-height: normal;text-transform: uppercase !important;padding: 0 !important;margin: 0;font-weight: 500;}
.bannerTxtCtr {width:100%;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.bannerTxtCtr {justify-content: flex-end !important;grid-gap: 16px;}
.NodeLevel0 > a:before, .NodeLevel0 > a:after {background: #e1f2fd;}
.Banner:hover .bannerTxtCtr {
    /* background: #00000000; */
}

.hmTitle *  {line-height: 175%;}
.ctaGrid {grid-template-columns: repeat(3,1fr);}
@media screen and (max-width: 767.9px)
{
	.ctaGrid {grid-template-columns: repeat(1,1fr);}
}

.Banner1 .bannerTitle {
    font-size: 3vw !important;
    margin: 0;
}

.banner2 div a:nth-child(1), .banner2 div a:nth-child(3) {
    grid-row: span 12;
}

@media screen and (max-width: 1024px)
{
	.Banner1 .bannerTitle {
		font-size: 24px !important;
		margin: 0;
	}
	.bannerView {
    font-size: 18px !important;
    }
    .bannerTitle {font-size: 20px !important;}
    .bannerTxtCtr > span.bannerView { display:none}
}

.banner2 .bannerTxtCtr {justify-content: flex-end;text-align: left;}


.invert, .invert .container {background: #2f3548;}
.invert *,  .invert a.ghost-button { color: #ffffff;}
.BrandIcon {text-align:center;border-top: 1px solid #d8d8d8;}
.BrandIcon a {max-width:150px;display: inline-block;width: 100%;}
.largerBrand a { max-width:250px;}
.BrandIcon .bannerTxtCtr { display: none;}
.BrandIcon .photo {
    background: none;
    padding: 12px 24PX;
    transform: scale3d(1,1,1);
    transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.BrandIcon [class*="css-image"] {background-size: contain !important;opacity: inherit;}
.BrandIcon  a { -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}
.BrandIcon:hover  a [class*="css-image"] {filter: grayscale(100%);opacity: 0.3;}
.BrandIcon  a:hover [class*="css-image"] {filter: grayscale(0%);opacity:1;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.BrandIcon  .Banner:hover > .photo > div {
    transform: none;
}