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

.gg4, .gg4 > div{grid-gap:4em;}
.gg2, .gg2 > div{grid-gap:2em;}
.gg1, .gg1 > div{grid-gap:1em;}
.gg0 {grid-gap:0em;}

.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 {}
a:hover .bannerViewGrid {background:#fff; color:#000}
.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}


.BrandIcon a {background: none;transform: scale3d(1,1,1);transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);}
.BrandIcon img {background-size: contain !important;opacity: inherit;  -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  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 img {filter: grayscale(100%);opacity: 0.3;}
.BrandIcon  a:hover img {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;}


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

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

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


.Banner > .photo {overflow:hidden;background: #212121;}
.Banner > .photo > div {transform: scale3d(1,1,1);transition: transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);opacity: 0.9;}
.Banner:hover > .photo > div {transform: scale3d(1.04,1.04,1.04);}

.hidecta .bannerView, .hideTitle .bannerTitle, .hideDesc .bannerDesc { display: none;}




/* 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}
	.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;}
.modernizr-no-cssgrid [class*="grirow"] > div,
.modernizr-no-cssgrid [class*='grirow'] > div > a {display: block;}


/* background unpick */
.bannerDesc, .bannerTitle, .bannerView {background:none;color: inherit;text-transform: initial;letter-spacing: 0;padding: 0 !important;line-height: 130%;border: none;}
[class*="hmBanner"] > div > a:hover .bannerView {background: none;}
.bannerTitle {color: inherit;margin:8px 0;font-size: xx-large;text-shadow: 1px 1px #00000036;}
.bannerDesc {color: inherit;font-family: 'citrfontbold';font-size:initial;}


/* text overlay  --------------------------------------------------------------- */
.bannerTitle, .bannerView, .bannerDesc {background: none;line-height: 1em;}
.bannerView {position: relative;bottom: -5px;-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 > span.bannerView, .ytplayerOverlay a {border: none;position: relative;font-family: 'citrfontbold';background: #d02b47 !important;padding: 12px 18px !important;color: #fff;line-height: 100%;top: 0;font-size: 14px;border-radius: 50px;}
.ytplayerOverlay a::before {
    background-color: #448aff;
    content: "";
    display: inline;
    transform-origin: 50% 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 101%;
    height: 101%;
    will-change: transform;
    z-index: -1;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
}
.ytplayerOverlay a:hover::before {
     -webkit-transform: scaleY(1);
    transform: scaleY(1);
}


[class*="hmBanner"] > div > a:hover .bannerView, [class*="hmBanner"] > div > a:hover .ytplayerOverlay a  {opacity: 1;}
[class*="hmBanner"] > div > a:hover .bannerDesc {opacity: 1;top: 0;}
[class*="hmBanner"] > div {
    padding: 0;
    grid-gap: 0;
}



.hmCalltoActions { padding:64px 0}
.bgTrail { background: url("/Images/contour_map.jpg")}
.bgTrail h1, .bgTrail h3 {background: #f2f2f2;display:inline-block;}
.bgTrail span, .bgTrail p {
    color: #333333;
}
.bgTrail h1 a {
    color: #333333;
    margin: 0;
    display: inline-block;
    line-height: 0.85;
    text-shadow: 2px 2px #f2f2f2, 2px -2px #f2f2f2, -2px 2px #f2f2f2, -2px -2px #f2f2f2;
    border-bottom: 2px solid #cda53a;
}

.hmTitle *  {margin: 16px;}
.hmTitle strong {font-size:xx-large;line-height: 125%;font-family: 'citrfontbold';font-weight: 100 !important;}
.hmTitle p {font-size:x-large;}


.ctaGrid {grid-template-columns: repeat(3,1fr);}
@media screen and (max-width: 767.9px)
{
	.ctaGrid {grid-template-columns: repeat(1,1fr);}
}
.ctaGrid h3:before {color: #2f76ec;}


/* text overlay  --------------------------------------------------------------- */
.bannerTxtCtr {
    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 !important;
    -webkit-justify-content: flex-end !important;
    flex-wrap: wrap;
    text-align: left;
    padding: 32px;
    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/#000000+0,000000+100&0+50,0.39+100 */
     /* FF3.6-15 */
     /* Chrome10-25,Safari5.1-6 */
     /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     /* IE6-9 */
    background: -moz-linear-gradient(top, rgba(13,14,18,0) 0%, rgba(13,14,18,0) 50%, rgba(13,14,18,0.60) 100%);
    background: -webkit-linear-gradient(top, rgba(13,14,18,0) 0%,rgba(13,14,18,0) 50%,rgba(13,14,18,0.60) 100%);
    background: linear-gradient(to bottom, rgba(13,14,18,0) 0%,rgba(13,14,18,0) 50%,rgba(13,14,18,0.60) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000d0e12', endColorstr='#630d0e12',GradientType=0 );
}

.bannerDesc, .bannerTitle, .bannerView {
    background: none;
    text-transform: uppercase;
}

    .bannerDesc:empty, .bannerTitle:empty, .bannerView:empty {
        display: none;
    }

.bannerTxtCtr > span {
    padding: 8px 16px;
    -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 cubic-bezier(0.9, 0.01, 0.17, 1.01);
    background: none;
    overflow: hidden;
}
[class*="grirow"] > div > a:hover .bannerView {
    opacity: 1;
}

[class*="hmBanner"] > div > a .bannerTxtCtr > .bannerTitle {position:relative;padding: 0;}
[class*="hmBanner"] > div > a .bannerTxtCtr > .bannerTitle:before {content: '';position: absolute;bottom: 0;width: 100%;height: 1px;-webkit-transform: none;transform: none;will-change: transform;transition: -webkit-transform .6s cubic-bezier(.19,1,.22,1);transition: transform .6s cubic-bezier(.19,1,.22,1);-webkit-transform-origin: center;transform-origin: center;-webkit-transform: scaleX(0);transform: scaleX(0);}
[class*="hmBanner"] > div > a:hover .bannerTxtCtr > .bannerTitle:before {
    opacity: 1;
    -webkit-transform: none;
    /* transform: none; */
}

.bannerDesc {
    letter-spacing: 1px;
    font-size: 11px;
    padding: 0px !important;
    -webkit-text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.51);
    -moz-text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.51);
    text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.51);
}

.bannerTitle {
    text-transform: initial;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -webkit-text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.51);
    -moz-text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.51);
    text-shadow: 0px 0px 16px rgba(0, 0, 0, 0.51);
}

.bannerView {
    margin-top: 0px;
    font-size: small;
    border-radius: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    line-height: 20px;
    text-decoration: none;
    text-transform: uppercase;
    user-select: none;
}

.buttonAll {
    margin-top: 0px;
    font-size: small;
    border-radius: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 15px 25px;
    background-color: #d2a333;
    border: 1px solid;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    line-height: 20px;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: .2s ease;
    transition: .2s ease;
    -webkit-transition-property: background-color,color,-webkit-box-shadow,-webkit-transform;
    transition-property: background-color,color,-webkit-box-shadow,-webkit-transform;
    transition-property: box-shadow,transform,background-color,color;
    transition-property: box-shadow,transform,background-color,color,-webkit-box-shadow,-webkit-transform;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
}
.buttonAll:hover{
	background: #d2a333;
	color: white;
	-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.12);
}



@media screen and (max-width: 767.9px) {
	.hmBanner1 .bannerTxtCtr { padding:16px !important}
	.bannerDesc { display:none !important}
	.bannerTitle {font-size: 20px !important;}
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.99px)
{
    .hmBanner1 .bannerTxtCtr { padding:16px !important}
	.bannerDesc { display:none !important}
    .bannerTitle {font-size: 26px !important;}
}


.hmBanner1 > div {
    grid-template-columns: repeat(1,1fr);
    -ms-grid-columns: 1fr 1fr 1fr;
}
.hmBanner1 > div > a:nth-child(4){grid-column: auto;grid-row: auto;}
@media screen and (max-width: 767.9px) {
	.bannerTxtCtr { padding: 16px}
	.hmBanner1 > div {grid-template-columns: repeat(1,1fr);}
}
/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.9px)
{
	.bannerTxtCtr { padding: 16px}
	.hmBanner1 > div {grid-template-columns: repeat(2,1fr);}
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.9px)
{    
	.bannerTxtCtr {padding: 16px;}
	.bannerTitle {font-size: 26px;}
}

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

/* 4K   ------------------------------------------------------------------------------------------ */
@media screen and (min-width : 1914px) {
}


@media screen and (max-width: 767px) {
    .NodeLevel0 > .CSSFacetNavModules.active {position: relative;}
	.hmBannerfooterLarge > div {grid-template-columns: repeat(2,1fr);}
	.hmBannerfooterSmall > div {grid-template-columns: repeat(2,1fr);}
}
@media screen and (min-width : 768px) and (max-width : 1024px){
	.NodeLevel0 > .CSSFacetNavModules.active {position: relative;}
	.hmBannerfooterLarge > div {grid-template-columns: repeat(3,1fr);}
	.hmBannerfooterSmall > div {grid-template-columns: repeat(3,1fr);}
}


.MainBanner .photo div:after {
    padding-bottom: calc(75vh - 75px);
}

@media screen and (max-width: 1024px) {
    .MainBanner .photo div { max-height:calc(75vh - 75px)}
    .MainBanner .photo div:after {
    padding-bottom: calc(75%);
    }
}