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

.gg2, .gg2 > div{grid-gap:2em;}
.gg1, .gg1 > div{grid-gap:1em;}
.gg05, .gg05 > div{grid-gap:0.5em;}
.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: 50%;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 */gap: 8px;bottom: 0;}
.bannerDescGrid:empty, .bannerTitleGrid:empty, .bannerViewGrid:empty{display:none;}
.bannerDescGrid {font-size: large;}
.bannerTitleGrid {font-size: xX-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;line-height: 115%;padding: 0;}
.bannerViewGrid {font-size: small;color: #ffffff;border: 2px solid #ffffffa1;padding: 4px 8px;font-size: 12px;letter-spacing: 1px;font-family: 'citrfontbold';}

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


.gGradient .bannerTxtCtrGrid {/* 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%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000d0e12', endColorstr='#630d0e12',GradientType=0 ); /* IE6-9 */
}
.gBGcover .bannerTxtCtrGrid {background: rgba(0, 0, 0, 0.5);}

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

.All100 .photo div:after, .All100 .photo span:after {padding-bottom: 100% !important;}
.All75 .photo div:after, .all75 .photo span:after {padding-bottom: 75% !important;}
.All75vh .photo div:after, .All75vh .photo span:after {padding-bottom: 75vh !important;}
.All50vh .photo div:after, .All50vh .photo span:after {padding-bottom: 50vh !important;}
.All30vh .photo div:after, .All30vh .photo span:after {padding-bottom: 30vh !important;}

.All66 .photo div:after, .All66 .photo span:after {padding-bottom: 66.66% !important;}
.All50 .photo div:after, .All50 .photo span:after {padding-bottom: 50% !important;}
.All25 .photo div:after, .All25 .photo span:after {padding-bottom: 25% !important;}
.All12 .photo div:after, .All25 .photo span:after {padding-bottom: 12.5% !important;}

.Banner > .photo {overflow:hidden;}
.Banner > .photo > div {transform: scale3d(1,1,1);transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);}
.photo span:after {padding-bottom: 75%;content: "";display: block;width: 100%;}

.logos .Banner > .photo > div {
    background: #666666 !important;
}

.textCenter .bannerTxtCtrGrid {
    justify-content: center;
}

/* Large Mobile Phones  --------------------------------------------------------------- */
@media screen and (max-width: 767.9px)
{
	.gg1, .gg1 > div{grid-gap:0.5em;}
	.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(1, 1fr) !important; -ms-grid-columns: 1fr 1fr}
	.grirow5 > div {grid-template-columns: repeat(1, 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 .bannerTitleGrid {}
}

/* 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}
	.brandLogo div {grid-template-columns: repeat(3, 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;}
}

.textBottom .bannerTxtCtrGrid {background: none;position: relative;height: auto;order: 1;padding: 4px 0 0;color: #000;align-items: flex-start;justify-content: flex-start;}
.textBottom > div a {display: inline-grid;}
.textBottom .bannerDescGrid, .textBottom .bannerTitleGrid, .textBottom .bannerViewGrid {color: #222;padding: 0;background: none;}
.textBottom .bannerTitleGrid {-webkit-line-clamp: 1;}
.textBottom .bannerView.bannerView {right: 0;margin: 0;border: none;position: absolute;background: none;top: -64px;left: 32px;width: 100%;opacity:0;display: none;}
.textBottom > div :hover .bannerView.bannerView {opacity: 1;top: -70px;display: none;}
.textMiddle .bannerTxtCtrGrid{align-items: center;justify-content: flex-end;}

.mainBanner > div > a:nth-child(1)  {grid-column: span 2;grid-row: span 2;}
.mainBanner .bannerDescGrid, .mainBanner .bannerTitleGrid, .mainBanner .bannerViewGrid {background: none;}
.mainBanner .bannerDescGrid {background: none;color: #ffffff;font-size: 14px;padding: 0 0 8px 0;letter-spacing: 1px;text-shadow: 0px 0px 4px #000000;}
.mainBanner .bannerTitleGrid {background: none;text-shadow: 0px 0px 8px #000000b0;line-height: 150%;}
.mainBanner .bannerViewGrid {color: #ffffff;border: 1px solid #ffffffa1;padding: 4px 8px;font-size: 10px;letter-spacing: 1px;margin-top: 8px;}
.mainBanner > div > a:hover .bannerViewGrid {background: #498cbc;color: #fff;padding: 4px 16px;border: 1px solid #498cbc;}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 0px) and (max-width : 1024px)
{
	.mainBanner .bannerTitleGrid {font-size: 16px}
    .mainBanner .bannerViewGrid {display:none}
}
@media screen and (min-width : 0px) and (max-width : 768px)
{
	.mainBanner > div > a:nth-child(1)  {grid-column: auto ;grid-row: auto;}
}


.mainBanner2 > div > a:nth-child(1), .mainBanner2 > div > a:nth-child(2), .mainBanner2 > div > a:nth-child(3)  {grid-row: 1/3;}
.mainBanner2 > div > a:nth-child(1) .bannerTitleGrid, .mainBanner2 > div > a:nth-child(2) .bannerTitleGrid, .mainBanner2 > div > a:nth-child(3) .bannerTitleGrid  {line-height: 100%;overflow: hidden;}
.mainBanner2 .bannerDescGrid, .mainBanner2 .bannerTitleGrid, .mainBanner2 .bannerViewGrid {background: none;}
.mainBanner2 .bannerDescGrid {background: none;color: #ffffff;padding: 0 0 8px 0;text-shadow: 0px 0px 4px #000000;}
.mainBanner2 .bannerTitleGrid {background: none;padding: 0 0 8px 0;order: -1;text-shadow: 0px 0px 8px #000000b0;}
.mainBanner2 .bannerViewGrid {color: #ffffff;border: 1px solid #ffffffa1;padding: 4px 8px;font-size: 10px;letter-spacing: 1px;}
.mainBanner2 > div > a:hover .bannerViewGrid {background: #498cbc;color: #fff;padding: 4px 16px;border: 1px solid #498cbc;}


.grirow3.All75 a:nth-child(n+4) .photo div::after {
    padding-bottom: 50% !important;
}


.Brands {position:relative;text-align: center;}
.Brands .overlay {background: linear-gradient(to top,#ffffff,#fff0);position: absolute;width: 100%;height: 100%;z-index: 1;}
.Brands a {display: inline-block;max-width: 175px;}
.Brands  img {width: 100%;}
.Brands  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;}
.Brands:hover  a {filter: grayscale(100%);opacity: 0.3;}
.Brands  a:hover {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;}
.imgBlue a {background: #498cbc;}
.imgBlue .photo {opacity: 0.3;filter: grayscale(100%);}

[class*="desaturate"] 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;}
[class*="desaturate"] a:hover {filter: grayscale(0%);}
.desaturate50 a {filter: grayscale(50%);}
.desaturate75 a {filter: grayscale(75%);}
.desaturate100 a {filter: grayscale(100%);}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 0px) and (max-width : 1023.9px)
{
	.mainBanner2 > div > a:nth-child(1)  {grid-column: span 1;grid-row: span 1;}
	.mainBanner2 .bannerTitleGrid {font-size: 28px !important;padding: 8px 0 !important;}
	.mainBanner2 > div > a:nth-child(1), .mainBanner2 > div > a:nth-child(2), .mainBanner2 > div > a:nth-child(3)  {grid-row: span 1;}
}

.blogHomepage {display: grid;grid-gap: 1em;padding: 0 0 0 0;}
.blogHomepage {grid-template-columns: repeat(4, 1fr);}
.blogHomepage img {width:100%;object-fit: cover;max-height: 150px;}
.blogHomepage > span:first-of-type {grid-column: span 2;grid-row: span 4;height: 100%;display: inline-flex;flex-direction: column;}
.blogHomepage > span:nth-child(2) {grid-column: span 1;grid-row: span 1;height: 100%;display: inline-block;}
.blogHomepage > span:nth-child(3) {grid-column: span 1;grid-row: span 1;height: 100%;display: inline-block;}
.blogHomepage > span:first-of-type img {/* position:absolute; */max-width: 100%;/* height: 100%; */top: 0;max-height: initial;}
.blogHomepage > span:first-of-type .blogSnipText {display: inline-block;margin: 0;padding: 0 0 16px 0;position: relative;opacity: 0.7;order: 0;}
.blogHomepage > span:first-of-type .blogSnipText a {color: #ffffff;border: 1px solid #ffffffa1;padding: 4px 8px;font-size: 10px;letter-spacing: 1px;text-transform: uppercase;margin : 8px}
.blogHomepage .hmBlog {position:relative;display: flex;border-bottom: 1px solid #505050;padding-bottom: 16px;}
.blogHomepage .hmBlog:hover h2 {text-decoration: underline;}
.blogHomepage .blogSnipImg {max-width: 40%;}
.blogHomepage .blogSnipText { display:none}
.blogHomepage > span:first-of-type .blogSnipImg {max-width: 100%;padding-right: 0;}
.blogHomepage .blogSnipImg {order: -2;padding-right:16px;z-index: 0;width: 100%;}
.blogHomepage > span:first-of-type  h2 {font-size: larger !important;}
.blogHomepage h2 {padding:0;margin:0;font-family: inherit;font-size: 14px;line-height: 130%;font-weight: 700;padding-bottom: 4px;font-size: smaller !important;}
.blogHomepage p {padding: 0;margin: 0;font-size: 11px;color: #ffffff47;}
.blogHomepage p strong {display:none}
.blogHomepage > span:first-of-type > span:last-of-type {padding: 16px 0;order: -1;}
.blogHomepage .blogSnipImg :after {content: "";display: block;width: 100%;}
.blogHomepageMore  {margin: 32px 0;}
.blogHomepageMore p { color:#949494; font-size:14px}
.blogHomepageMore a {color: #ffffff;border: 1px solid #ffffffa1;padding: 4px 8px;font-size: 10px;letter-spacing: 1px;text-transform: uppercase;}
/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 0px) and (max-width : 1023.9px)
{
	.blogHomepage {grid-template-columns: repeat(1, 1fr);padding-bottom: 56px;}
	.blogHomepage > span:first-of-type {grid-column: span 1;grid-row: span 1;}   
}