/* 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;}
.gridBanner1 > div {grid-template-columns: repeat(3, 1fr); -ms-grid-columns: 1fr 1fr 1fr;}
.gridBanner1 > div > a:nth-child(1) {grid-column: 1/3; grid-row: 1/3;}
.gridBanner1 > div > a:nth-child(4) {grid-column: 2/4;grid-row: 3/5;}


[class*="grirow"] > div {display: grid; padding: 0 0 0.5em 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:0.5em;}
.gg05, .gg05 > div{grid-gap:0.5em;}
.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 {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 > div {padding-bottom: 20px;}
.textBottom > div a {padding-bottom: 100px;}
.textBottom .bannerDescGrid, .textBottom .bannerTitleGrid, .textBottom .bannerViewGrid {color: #222; padding: 0;}
.textBottom .bannerTitleGrid {-webkit-line-clamp: 1;}
.alignleft, .alignleft .bannerTxtCtrGrid {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}

.photo {background-size: cover;background-position: center;height: 100%;display: block;}
.photo:after {padding-bottom: 100%;content: "";display: block;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;height: 100%;}

.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% !important;}
.All100 .photo span:after, .All100 .photo:after, .All100 .photo div:after {padding-bottom: 100% !important;}
.All75 .photo span:after, .all75 .photo:after, .all75 .photo div:after {padding-bottom: 75% !important;}
.All50 .photo span:after, .All50 .photo:after, .All50 .photo div:after {padding-bottom: 50% !important;}
.All30vh .photo span:after, .All30vh .photo:after, .All30vh .photo div:after {padding-bottom: 30vh !important;}

.fullwspan {font-family: 'citrfontbold';text-transform: uppercase;text-align: center;position: relative;padding: 16px;}
.fullwspan:after {content: '';position: absolute;top: 50%;left: 0;border-top: 1px solid #dadada; width: 100%;transform: translateY(-50%);z-index: 0;}
.fullwspan span {padding: 16px;background: #fff;z-index: 2;position: relative;font-size: 1.25rem;}


[class*="gBrands"] {text-align:center}
[class*="gBrands"] >div > a {display: inline-block;margin: 8px;width: 120px;}
[class*="gBrands"] span[class*="css-image"] {background-size: contain !important;height: 120px;}
[class*="gBrands"] .photo {background:#fff;height: fit-content;max-width: 120px;}
[class*="gBrands"] .photo:after {padding-bottom: 0px !important;}
[class*="gBrands"] > div > a:hover .photo span:after {background:none;}



[class*="gColour"] {text-align:center;margin: 16px 0;}
[class*="gColour"] a {margin: 12px;}
[class*="gColour"] .alpcolour-circle {border: 1px solid #e2e2e2;background: #ffffff;width: 50px;height: 50px;border-radius: 100%;text-align: center;position: relative;display: inline-block;}
[class*="gColour"] .alpcolour-circle > div {border: 1px solid #0000001a;width: 25px;height: 25px;border-radius: 100%;text-align: center;position: absolute;left: 50%;transform: translateX(-50%) translateY(-50%);top: 50%;      /* Also the same as */transition: all .1s cubic-bezier(0.69, 0.01, 0.52, 0.5);}
[class*="gColour"] a div:nth-child(2) { display:none}
[class*="gColour"] a:hover .alpcolour-circle > div  {width: 45px;height: 45px;}
.alpcolour-circle {width:40px;height:40px;}
[data-colour="black"] {background:black;}
[data-colour="blue"] {background: #4a93d9;}
[data-colour="brown"] {background: #915d2e;}
[data-colour="clear"] {background:#f4f4f4;}
[data-colour="gold"] {background:Goldenrod;}
[data-colour="green"] {background:ForestGreen;}
[data-colour="grey"] {background:Gainsboro;}
[data-colour="orange"] {background:darkorange;}
[data-colour="pink"] {background:pink;}
[data-colour="purple"] {background:#9e72d6;}
[data-colour="red"] {background:red;}
[data-colour="silver"] {background:silver;}
[data-colour="white"] {background:white;}
[data-colour="yellow"] {background:yellow;}


.gSize {text-align:center;margin: 16px 0;}
.gSize a {margin: 16px;position: relative;height: 65px;width: 65px;display: inline-block;vertical-align: middle;}
.gSize .bannerTitleGrid {border: 1px solid #646464;display: inline-block;width: 65px;height: 65px;line-height: 62px;border-radius: 100%;}
.gSize a div {display: inline-block;width: 0px;height: 0px;line-height: 65px;border-radius: 100%;position: absolute;left: 50%;transform: translateX(-50%) translateY(-50%);top: 50%;transition: all .1s cubic-bezier(0.69, 0.01, 0.52, 0.5);background: #646464;}
.gSize a:hover .bannerTitleGrid {color:#fff;z-index: 1;position: relative;}
.gSize a:hover div {height: 65px;width: 65px;}


/* 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;}
	[class*="gColour"]{display:inline-block;}
	[class*="gColour"] a {display: inline-block;width: 20%;float: left;text-align: center;margin: 8px 0;}
	.gSize a, .gSize .bannerTitleGrid {height: 47px;width: 47px;line-height: 47px;display:inline-block;}
	.gSize a { margin:8px}
}

/* iPads (portrait and landscape) --------------------------------------------------------------- */
@media screen and (min-width : 768px) and (max-width : 1023.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;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(3, 1fr) !important; -ms-grid-columns: 1fr 1fr}
	
	
}

/* laptops Large  ------------------------------------------------------------------------------------- */
@media screen and (min-width : 1024px) and (max-width : 1439.9px)
{    

}

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


/* Fancybox Styling */
.fncbx {padding: 0;}
.fncbxContent {max-width: 600px;}
@media screen and (max-width: 767.9px)
{
	.fncbx {max-width: 300px;}
	.fncbx .zflex-v {display: inline-block;}
	.fncbx .col-2 {max-width: auto; width:auto}
}

@media screen and (max-width: 1023.99px) and (min-width: 768px){
	.fncbx {max-width: 400px;}
	.fncbx .zflex-v {display: inline-block;}
	.fncbx .col-2 {max-width: auto; width:auto}
}


/* Patagonia Alp page */
form[action*="./patagonia?facet=patagonia"] .ALPDescription-desktop-brand, form[action*="./patagonia?facet=patagonia"] .ALPDescription-desktop-desc > h2, form[action*="./patagonia?facet=patagonia"] .ALPDescription-desktop-desc > div > p { display: none}
.imgOffset {padding: 16px;position: relative;top: -150px;background: #efefef;margin-bottom: -150px;}
.patLPConture {background: url(/Images/alpimages/patagonia/contour_map.jpg);z-index: 1;text-align: center;position: relative;max-width: 100%;margin: auto;}
.patLPSpacing {text-align: center; margin: auto; }
.patLPSpacing p { margin: 32px auto; max-width: 1000px;}
.fncbxLink { color: #4a93d9; text-decoration: underline}
@media screen and (max-width: 767.9px){ 
	.imgOffset {padding: 8px;position: relative;top: -75px;margin-bottom: -75px;}
	.patLPConture, .patLPSpacing {max-width: 100%;}
}
@media screen and (max-width: 1023.99px) and (min-width: 768px){
	.imgOffset {padding: 16px;position: relative;top: -75px;margin-bottom: -75px;}
	.patLPConture, .patLPSpacing {max-width: 100%;}
}