:root{
    --font-title: serif;
    --font-text:sans-serif;
    --color-link:rgb(0, 101, 185);
    --color-text:rgb(46, 43, 55);
    --mainBgCol:#fff;
    --mainBgTrans:rgba(255,255,255,0);
    --subMenuHeight: 0;
    --menuBarBgCol: #18161c;
    --menuBarColor: #fff;
    --menuBarBorderCol: rgba(0, 0, 0, 0.4);
    --navheight: 0;
    --mastheight: 0;
    --mastBgColor:#fff;
    --bttBtnColor: var(--color-link);
    --bttBtnBg: #fff;
    --showCaseGrad: linear-gradient(180deg,#fff 0,#f9fafb 100%);

    --dbFiltBgInit: #18161c;
    --dbFiltColInit: #fff;
    --dbFiltBg: #000;
    --dbFiltCol:var(--dbFiltColInit);
    --dbFiltSeCol:#f1d901;
    --dbFiltSeBg:rgba(255,255,255,.1);

}


html, body{
    font-family: var(--font-text);
    color: var(--color-text);

}

@media (max-width: 767px) {

    html, body{
        font-size:95%;
    }
}

@media (max-width: 480px) {

    html, body{
        font-size:90%;
    }
}

html{
    opacity: 0;
    transition: opacity .25s;
}
html.loaded{
    opacity: 1;
}

a{ color: var(--color-link); }


:focus:not(.hide-focus){
    outline: 1px dotted #212121;
    outline: 5px auto -webkit-focus-ring-color;
}

.js-loading .load-hide{
    opacity: 0 !important;
    transition: opacity .5s;
}


#_t{
    position: absolute;
    top:calc(var(--mastheight) + 1px);
}


/*--  BACK TO TOP  --*/
#btt{
    position: fixed;
    opacity: 0;
    z-index:-100;
    pointer-events: none;
    bottom:0;
    right:0;
    transition: opacity 1s;

}

#btt a.btn{
    background:var(--bttBtnBg);
    margin:1em;
    box-shadow: 0 0 32px -.5em rgba(0,0,0,0.5);
    border:1px solid transparent;
    outline:none;
    font-size:1em;
    padding:1em;
    animation: glow .5s infinite ease-in-out alternate;
    border-color: var(--bttBtnColor);
    color: var(--bttBtnColor);

}


#btt .a.btn:hover{ border-color: var(--bttBtnColor);}
@keyframes glow {
  from { transform: scale(.96);}
  to {; transform: scale(1);}
}

.show-btt #btt{
    opacity: 1;
    z-index:20;
    pointer-events: auto;
}



/*--  Utils  --*/

.mz{
    cursor: zoom-in;
}

.btn{
    display: inline-flex;
    align-items: center;
    padding:1em 1.5em;
    border-radius:.5em;
    cursor: pointer;
    text-decoration: none;
}
.btn > * {
    margin:.25em;
}

.btn.dark{
    background-color: var(--color-text);
    color:#fff;
    transition:100ms ease-in-out;
}

.btn.il{
    background-color: var(--color-link);
    color:#fff;
}

.btn.grow:hover{
    transform:scale(1.05);
}


/*--  Rule Title  --*/
.rule-title{
    display:flex;
    flex-flow:row nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
}
.rule-title em{
    padding:.25em .75em;
    border-radius: .5em;
    background:var(--mainBgCol);
}

.rule-title::before,
.rule-title::after {
   content: " ";
   border-top: 1px solid var(--color-text);
   flex:1 1 auto;
 }
.rule-title::before{
    flex:0 0 .65em;

}




/* _____________________________________________________________________________________


_____________________________________________________________________________________ */
#siteFrame{
    min-height:100vh;
    background: var(--mainBgCol);
}


#masthead{
    background:var(--mastBgColor);
    display: flex;
    flex-flow:row nowrap;
    justify-content: center;
    position: relative;
    z-index: 5;

}
#masthead a{
    background-image:var(--brandLogo);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 12em;
    flex:0 1 500px;
    max-width:70%;
    margin:2em;
    transition: opacity .5s;
}


#sitenav{
    background:var(--menuBarBgCol);

    position: sticky;
    top:0;
    z-index:7;

    display: flex;
    flex-flow:row nowrap;
    align-items: stretch;

    font-size:.9em;
    box-shadow:0 10px 10px -10px rgba(0,0,0,0.1);
    color:rgba(255,255,255,.9);
    border-bottom:1px solid var(--menuBarBorderCol);
}


#sitenav .mast-replacement a{
    transition: opacity .5s;
    opacity: 0;

    pointer-events: none;
    background-image:var(--brandLogo);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 70%;
    height:100%;
    display: block;

}


#sitenav ul{
    display: flex;
    flex-flow:row wrap;
    align-items: stretch;
    flex:1 1 auto;
    justify-content: center;
    position: sticky;
    top:0;
}

#sitenav ul li{
    display: block;
    padding:.5em .25em;
}

#sitenav ul li a{
    display: block;
    padding:.75em;
    text-decoration: none;
    border-radius: .5em;
    font-weight: 600;
    color:var(--menuBarColor);
    cursor: pointer;
}
#sitenav ul li a:hover{
    backdrop-filter:brightness(.98);
}


#mbMenuTog,
#mbMenuTogLabel {
    display: none;
}

#mbMenuTogLabel{
    padding:.75em;
    text-decoration: none;
    border-radius: .5em;
    font-weight: 600;
    color:inherit;

}


#mbMenuTogLabel::after{ content: "\f0c9"; }
#mbMenuTog:checked + #mbMenuTogLabel::after{ content: "\f057"; }

#mbMenuTog:checked ~ ul {
    display: flex !important;
}


.tight-menu #sitenav ul{
    justify-content: flex-start;
}
.tight-menu #sitenav .mast-replacement{
    flex:0 0 10em;
}
.tight-menu #sitenav .mast-replacement a{
    pointer-events: all;
    opacity: 1;
}
.tight-menu #masthead a{ opacity: 0; }


@media (max-width: 767px) {
    .tight-menu #sitenav .mast-replacement{
        flex-basis:7em;
        display: xnone;
    }
    .tight-menu #sitenav ul{ }
    #sitenav ul li a{
        padding:.25em .25em;
        font-size:.9em;
    }
}


@media (max-width: 480px) {

    .tight-menu #mbMenuTogLabel {
        display: flex;
        align-items: baseline;
        margin-left:auto;
    }
    .tight-menu #mbMenuTogLabel span{
        padding-right:.5em;
    }


    #sitenav{
        flex-wrap:wrap;
    }

    .tight-menu #sitenav ul {
        display: none;
        flex:0 0 100%;
        border-top:1px solid rgba(0,0,0,0.1);
        justify-content: center;
    }
    .tight-menu #sitenav ul li{
        display: inline-block;
    }
}




/*--  YarnBar  --*/

#yarnBar{
    display: none;
    position: relative;
    background: #fff;
    position: sticky;
    top:calc(var(--navheight));
    z-index:12;
    border-bottom:.5em solid var(--menuBarBgCol);
    box-shadow:0 10px 20px -10px rgba(0,0,0,0.2), inset 0 10px 10px -10px rgba(0,0,0,0.2);
}
#yarnBar.open{display: block;}
#yarnBar .hscroll{ overflow-x: auto; padding-bottom:.75em; }

#yarnBar .ind{
    position:absolute;
    z-index:5;
    font-size:2em;
    flex-flow:column;
    justify-content: center;
    align-items: center;
    display: none;
    height:100%;
    animation: scalepulse .75s infinite;
}
@keyframes scalepulse {
    0% { transform:scale(.96) }
    50% { transform:scale(1) }
    100% { transform:scale(.96) }
}
.ind i.fa-circle{
    color:#fff;
    filter:drop-shadow(0 0 24px rgba(0,0,0,0.4));
}

#yarnBar .ind.L{ left:0; }
#yarnBar .ind.R{ right:0; }

#yarnBar.has-overflow.ind-left .ind.L{ display: flex; }
#yarnBar.has-overflow.ind-right .ind.R{ display: flex; }

 #yarnBar.has-overflow.ind-left.ind-right  .ind.R,
 #yarnBar.has-overflow.ind-left.ind-right  .ind.L { display: flex; }


.yarn-tiles{
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: flex-start;
}
.yarn-tiles li{
    flex:0 0 12%;
    min-width:8em;
    text-align: center;
}

.yarn-tiles li img{
    width:100%;
    display: block;
    mix-blend-mode: multiply;
}
.yarn-tiles li .yarn-name{
    font-family:var(--font-text);
}

.yarn-tiles li > a{
    text-decoration: none;
    color: inherit;
    padding:.5em;
    height:100%;
    display: block;

}
.yarn-tiles li > a > *{
}
.yarn-tiles li > a:hover{
    background-color: rgba(0,0,0,0.025);
}

.yb-open #siteFrame::after{
    content:"";
    top:0;right:0;bottom:0;left:0;
    background-color:rgba(0,0,0,0.6);
    position: fixed;
    z-index: 4;
}

@media (max-width: 1024px) {
    .yarn-tiles li{
        flex:0 0 calc(100% / 6);
    }
}

/* _____________________________________________________________________________________


_____________________________________________________________________________________ */
#billboard{
    width: 100%;
    height: calc(100vw / 2.5);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-image:url(../../assets/img/site.main.jpg);
}

#billboard.tiled{
    background:none;
    height: auto;

}
#billboard.tiled .tiles{
    overflow-x: auto;
}
#billboard.tiled .tile-list{
    display: flex;
    flex-flow:row nowrap;
}
#billboard.tiled .tile-list li{
    flex:0 0 calc(100vw / 2.5);
    max-width:400px;
}
#billboard.tiled .tiles a.dm-pop{
    display: block;
    width:100%;
    position: relative;
}
#billboard.tiled .tiles img{
    height:100%;
    width:100%;
    object-fit: cover;
}



/* _____________________________________________________________________________________

    Showcase
_____________________________________________________________________________________ */

#yarnShowcase{
    background:var(--mainBgCol);
}

.yarn-feature{
    padding:4em 1em;
    background-image:var(--showCaseGrad);
    min-height:78vh;
    display: flex;
    flex-flow: column;
    justify-content: center;
}


.yarn-feature .top{
    display: flex;
    flex-flow:row nowrap;
    align-items: center;
    justify-content: center;
}

.yarn-feature .yl-image{
    flex:0 1 24em;
    background-image: radial-gradient(rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 0) 56%);
}
.yarn-feature .yl-image img.yarn-img{
    display: block;
    width:100%;
    mix-blend-mode: multiply;
    object-fit: contain;
    max-height:50vh;
    border-radius: 1em;
}



.yarn-feature .yarnline-title-specs{
    flex:0 1 auto;
}
.yarn-feature .yarnline-title-specs .yarn-descr{
    max-width:58ch;
}



.yarn-go{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding:2em;
}




/*--  Alternate  --*/
.yarn-feature:nth-child(even) .top .yl-image{
    order:2;
}

.yarn-feature:nth-child(even) .top .yarnline-title-specs{
    text-align: right;
}

.yarn-feature:nth-child(even) .yarnline-title-specs{
    order:-1;
    text-align: right;
}
.yarn-feature:nth-child(even) .yarnline-title-specs .yarn-descr{
    margin-left:auto;
}
.yarn-feature:nth-child(even) .yarnline-title-specs .yarn-care,
.yarn-feature:nth-child(even) .yarnline-title-specs .other-specs{
    justify-content: flex-end;
}



@media (max-width: 1024px) {


    #yarnShowcase .yarn-feature .top {
        flex-wrap:wrap;
    }

    #yarnShowcase .yarn-feature .top  .yarnline-title-specs{
        text-align: left !important;
        order:3 !important;
    }
    .yarn-feature:nth-child(even) .yarnline-title-specs .yarn-descr{
        margin-left:0;
    }
    #yarnShowcase .yarn-feature:nth-child(even) .yarnline-title-specs .yarn-care,
    #yarnShowcase .yarn-feature:nth-child(even) .yarnline-title-specs .other-specs{
        justify-content: flex-start;
    }
}




/* _____________________________________________________________________________________

    Yarnline Specs
_____________________________________________________________________________________ */

.yarnline-title-specs .yarn-name{
    font-size:4em;
    font-weight:100;
    font-family:var(--font-title);
    padding:.25em 0;
}


.yarnline-title-specs .yarn-composition{font-size:1em; line-height: 1.3}
.yarnline-title-specs .yarn-composition .fiber-amount{
    padding-left:.25em;
}
.yarnline-title-specs .yarn-composition .fiber-name{
    font-weight:600;
}


.yarnline-title-specs .yarn-care{
    display: flex;
    flex-flow:row nowrap;
    align-items: center;
    padding:.5em 0;
}
.yarnline-title-specs .yarn-care > li{
    flex:0 0 1.8em;
    cursor: pointer;
}
.yarnline-title-specs .yarn-care img{
    display: block;
    width:100%;
    padding:.125em;
    border-radius: .5em;
}
.yarnline-title-specs .yarn-care  img:hover,
.yarnline-title-specs .yarn-care img:focus{
    outline:1px dashed rgb(191, 191, 191);
}


.yarnline-title-specs .other-specs{
    display: flex;
    flex-flow:row wrap;
    align-items: center;
    margin:0 -1em;
}
.yarnline-title-specs .other-specs li{
    padding:.5em 1em;
    font-weight: 300;
}
.yarnline-title-specs .other-specs li > div{
    padding:.25em .5em;
    border-radius: .5em;
    background-color: rgba(0,0,0,.035);
    border-bottom:1px solid rgba(0,0,0, 0.075);
}


.yarnline-title-specs .yarn-putup .mw{ font-weight:900; }
.yarnline-title-specs .yarn-putup .yd{ font-weight:900; }

.yarnline-title-specs .yarn-gauge{
    font-size:1em;
    display: flex;
    flex-flow:row nowrap;
    align-items: center;
    margin:0 -.35em;

}
.yarnline-title-specs .yarn-gauge > *{
    padding:0 .175em;
}
.yarnline-title-specs .yarn-gauge .craft{
    font-weight: 400;
}
.yarnline-title-specs .yarn-gauge .sts{
    font-weight:900;
}


.yarnline-title-specs .yarn-descr{
    line-height: 1.5;
    max-width:58ch;
    padding:2em 0;
}


@media (max-width: 767px) {
    .yarnline-title-specs .yarn-name{
        font-size:3em;
    }
}


/* _____________________________________________________________________________________

    design scroller
_____________________________________________________________________________________ */



.design-scroller{
display: flex;
justify-content: center;
filter: drop-shadow(0 20px 20px rgba(0,0,0,0.2));
margin:2em -1em;
}
.design-scroller .designs{
    display: inline-flex;
    flex-flow: row nowrap;
    overflow-y: auto;
    padding:1em 5px;
}


.design-scroller .designs .more-btn{
    content:"More designs...";
    padding:2em;
    display: none;
    flex-flow: column;
    justify-content: center;
    align-content: center;
}
.design-scroller.more .designs .more-btn{
display: flex;
}

.design-scroller .designs a{
display: block;
margin:0 1em;
flex:0 0 auto;
}
.design-scroller .designs a:first-child{ margin-left:1em }
.design-scroller .designs a:last-child{ margin-right:0 }

.design-scroller .designs a img.di{
    display: block;
    border-radius: .5em;

    width:auto;
    height:12em;
}





/* _____________________________________________________________________________________

    Designs & Patterns Page
_____________________________________________________________________________________ */


.si-wrap{
    position: relative;
    display: flex;
    flex-flow:row nowrap;
}
.si-wrap .si-inp{
    flex:0 0 100%;
}
.si-wrap .si-close{
    position: absolute;
    right:.5em;
    display: flex;
    flex-flow:column;
    justify-content: center;
    height:100%;
    font-size:1.5em;
    opacity: .5;
    color:#888;
    background-blend-mode: difference;
    cursor: pointer;
}
.si-wrap .si-close:hover{
    color:rgb(210, 78, 78);
    opacity: .8;

}
.si-wrap.emp .si-close{
    display: none;
}

.patterns-and-designs #siteFrame{
    background:var(--dbBgCol);
}


.patterns-and-designs .filters{
    position: sticky;
    top:var(--navheight);


    z-index:6;
    display: flex;
    flex-flow: row wrap;
    justify-content:center;
    padding:1em ;
}
.patterns-and-designs .filters::after{
    content:'';
    flex:0 0 0;
    transition:flex .5s;

}

.filters > *{
    background-color:var(--dbFiltBgInit);
    color:var(--dbFiltColInit);
    box-shadow:0 1em 30px var(--dbFiltBgInit);
    transition: background-color 1s;

}

.filters .count{


    padding:1em;
    display: flex;
    flex-flow:column;
    justify-content: center;
    border-radius: .75em;
    text-align: center;
    margin:.5em;
}
.filters .count .fig{
    font-size:2em;
    font-weight: 700;
    padding:0 .25em;
}
.filters .count .lbl{
    font-size:.75em;
}

.filters .keywords{
    border-radius: .75em;
    overflow: hidden;
    padding:3px;
    margin:.5em;

}
.filters .keywords .f-sub{
    font-size:.8em;
    padding:.5em;
    text-align: right;
}


.design-board .filters input#keywords{
    font-size:1.3em;
    padding:.5em 2.5em .5em 1em;
    color:var(--dbFiltSeCol);
    background:var(--dbFiltSeBg);;
    border-radius: .5em .5em ;
    box-shadow: 0 2px 3px rgba(34, 25, 25, 0.2) inset;
    transition: 1s border-radius;
}
.design-board .filters input#keywords:focus{
}

.tight-menu.patterns-and-designs .filters::after{
flex:1 1 auto;
}

.tight-menu .design-board .filters input#keywords{
    border-radius: .5em .5em 3px 3px;
}

.tight-menu .design-board .filters .count,
.tight-menu .design-board .filters .keywords{
    background:var(--dbFiltBg);
    color:var(--dbFiltCol);
}


@media (max-width: 767px) {

    .patterns-and-designs .filters{
        font-size:.85em;
        flex-wrap:nowrap;
    }

    .patterns-and-designs .filters .count {
        font-size:.8em;
    }

    .patterns-and-designs .filters .keywords{
        flex:1 1 auto;
    }

    .patterns-and-designs .filters #keywords{
        width:100%;
    }

    .scrolled .patterns-and-designs .filters{
        top:0;
    }



}





/* _____________________________________________________________________________________

    DESIGN MODAL
_____________________________________________________________________________________ */

.d-img{
    cursor: pointer;
}

#overlayer .design-detail {
    display: flex;
    flex-flow:row nowrap;
    align-items: flex-start;
    position: relative;
    height:100%;
}

#overlayer .design-detail .image-side{
    flex:1 0 auto;
    height:100%;
    background-color:#000;
    overflow: hidden;
}


#overlayer .design-detail  img.main{
    object-fit: contain;
    object-position: center top;
    height:100%;
    width:auto;
    display:block;
}


#overlayer .design-detail .text-side{
    flex:200 1 30ch;
    padding:0 2em 2em;
    position: relative;
    overflow-y:auto;
    height:100%;
    background-color:var(--mainBgCol);
}

#overlayer .design-detail .text-side .d-main{
    padding-top:2em;
}

#overlayer .design-detail .d-sub{
    font-size:.6em;
    letter-spacing: .05em;
    color:#000;
    font-weight:900;
    display: inline-block;
    border-bottom:1px solid #ccc;
    padding-bottom:1px;
    text-transform: uppercase;
    line-height: 1.3;
}

#overlayer .design-detail .d-sub i{
    text-transform: initial;
    font-size:.8rem;
    font-weight: 400;
}

#overlayer .design-detail .d-title{
    font-size:1.8em;
    line-height: 1.3;
    margin-bottom:1rem;
}
#overlayer .design-detail .d-descr{
    font-style: italic;
    line-height: 1.5;

    margin-top:.25rem;
    max-width:58ch;
    white-space: pre-line;

    padding:.5em 0 .5em 1em;
    margin-top:.5em;
    border-left:5px solid rgb(255, 249, 221)

}

#overlayer .design-detail .d-foundin{
    margin-top:1em;
}

#overlayer .design-detail .d-from{
    margin:1rem 0;
    line-height: 1.4;
}
#overlayer .design-detail .pub-title{
    font-style: italic;
    font-weight:700;
}
#overlayer .design-detail .d-materials{
    margin-top:2em;
}
#overlayer .design-detail .d-materials .garm-list > li{
    margin:.5em 0;
    padding:.5em 0;
}
#overlayer .design-detail .d-materials .garm-list > li:first-child{
    border:none;
}
#overlayer .design-detail .d-materials .garm-list > li .mats{
    margin-top:.5rem;
    list-style: disc outside;
    padding:0 0 0 1em;
}

#overlayer .design-detail .d-materials .garm-list > li .mats li{
margin:.5em;
}

#overlayer .design-detail .amt{
    font-weight: 700;
}
#overlayer .design-detail .prod {
    white-space: nowrap;
}
#overlayer .design-detail .prod .yl{
    font-family: var(--font-title);
    font-weight:700;
}

#overlayer .design-detail .d-stockists{
    margin-top:4em;
}


#overlayer .design-detail .d-stockists .stockist-list .co-top{
top:calc(var(--stickPad) * -1);
}

#overlayer .design-detail .d-stockists .stockist-list .country-header{
top:var(--stickPad);
}

#overlayer .design-detail .d-stockists .stockist-co-nav{
top:0;
}




.legend{
    margin:.5em 0 1em;
    font-size:.75em;
    padding:0 .5em;
    text-align: right;
}


#overlayer .design-detail .rule-title::before,
#overlayer .design-detail .rule-title::after{
    border-top: 1px solid rgba(0, 0, 0, 0.26);
}


/*--  errata  --*/
.d-errata{
    line-height: 1.3;
    margin-top:1em;
}
.d-errata ul{

    display:inline-block;
    padding:.5em 0 .5em 1em;
    margin-top:.5em;
    border-left:2px solid rgb(255, 84, 0)
}

.d-errata .er{
    opacity: .8;
    font-family: var(--font-system-mono);
    font-size:.8em;

}
.d-errata .er del{
    background: rgb(255, 237, 242);
    color: rgb(176, 124, 144);
    padding:.125em .25em;
    display: inline-block;
    border-radius: 3px;
}
.d-errata .er em{
    background: rgb(171, 255, 227);
    padding:.125em .25em;
    display: inline-block;
    color: rgb(0, 112, 52);
    border-radius: 3px;
}

@media (max-width: 960px) {
    #overlayer .design-detail{
        display:block
    }

    #overlayer .design-detail .image-side{
        max-height:calc(4 / 6 * 100vh);
        position: relative;
    }

    #overlayer .design-detail .image-side::before{
        content:"";
        background-image: var(--tmpBg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size:200%;
        position: absolute;
        top:0;right:0;bottom:0;left:0;
         opacity: .2;
    }
    #overlayer .design-detail .image-side img.main{
        position: relative;
        margin:0 auto;
        object-position: top center;
        display: block;

    }



    #overlayer .design-detail .text-side{
        overflow-y:visible;
        height:auto;
    }

}


@media (max-width: 767px) {
    #overlayer .design-detail .text-side{
        padding:0 1em;
    }
}
@media (orientation: portrait) {
    #overlayer .design-detail .image-side{
        height:min(80% , calc(4 / 6 * 80vh) );
    }
    #overlayer .design-detail{
        display:block
    }

    #overlayer .design-detail .image-side{
        max-height:calc(4 / 6 * 100vh);
        position: relative;
    }

    #overlayer .design-detail .image-side::before{
        content:"";
        background-image: var(--tmpBg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size:200%;
        position: absolute;
        top:0;right:0;bottom:0;left:0;
         opacity: .2;
    }
    #overlayer .design-detail .image-side img.main{
        position: relative;
        margin:0 auto;
        object-position: top center;
        display: block;

    }



    #overlayer .design-detail .text-side{
        overflow-y:visible;
        height:auto;
    }
}




/* _____________________________________________________________________________________

    Yarn page Design banner
_____________________________________________________________________________________ */

.design-banner-for-yarn{
background:var(--mainBgCol);
display: flex;
justify-content: center;
position: relative;
z-index: 4;
}


.designs-for-yarn{}
.design-banner-for-yarn .designs{
    display: inline-flex;
    flex-flow: row nowrap;
    overflow-y: visible;
    overflow-x:auto;
}

.design-banner-for-yarn .designs li{}

.design-banner-for-yarn .designs li img{
    height:29vh;
    min-height:200px;
    display: block;
}

 .banner-sub{
     position: relative;
    top:-2.2em;
    z-index: 4;
    padding:.5em;
    display: flex;
    flex-flow:row nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.4;
    font-size:.8em;
}


.banner-sub span{
    padding:.25em .75em;
    border-radius: .5em;
    background:var(--mainBgCol);
    display:flex;
    flex-flow:row wrap;
    align-items: center;
    margin-left:2em;
    box-shadow: 0 -1px 5px -5px #000;
}
.banner-sub span em{
    text-align: right;
    line-height: 1;
}
.banner-sub span b{
    font-weight:100;
    font-family:var(--font-title);
    font-size:2em;
    padding-left:.25em;
}




.scroll-split{
    display: flex;
    flex-flow:row nowrap;
    align-items: flex-start;
    padding:3em 1em;
    --swatchTagWidth:6rem;
}
.scroll-split .split-left{
    flex:0 0 28rem;
    position: sticky;
    top:calc(var(--navheight));
    padding:0 3rem 1rem 3rem;
}
.scroll-split.unstick .split-left{
    position: relative;
    align-self: stretch;
}

.scroll-split.unstick .split-left .restick{
    position:sticky;
    top:calc(var(--navheight) * 1);
}

.scroll-split  .page-nav {
    color:var(--menuBarBgCol);

    position: fixed;
    overflow: hidden;
    opacity: 0;
    right:1rem;
    z-index: 3;
    top:calc(var(--navheight) + 1rem);
    background: var(--menuBarBgCol);
    border-radius: .5em;
    box-shadow:0 0 32px 0 rgba(0,0,0,0.5);
    transition: opacity 2s;

    box-shadow:  0 0 30px rgba(133, 133, 133, 0.42);
    border:1px solid var(--color-text);
}

.scroll-split  .page-nav a.btn{
    background-color: transparent;
    font-weight: bold;
}



.tight-menu .scroll-split .page-nav {
    opacity: 1;
}

.scroll-split  .page-nav .nav-sub{
    text-align: center;
    padding:.5em .5em 0;
}

.scroll-split  .page-nav .nav-sub .yarn-name{
    font-weight:100;
    font-family:var(--font-title);
}

.scroll-split .page-nav ul{
    display: flex;
    flex-flow:row wrap;
    justify-content:flex-end;
    gap:.5em;
    font-size:.9em;
}

.scroll-split  .page-nav ul .btn{
    color:var(--menuBarColor);
    background: var(--menuBarBgCol);

    padding:.75em;
    border-radius: 0;
}
.scroll-split  .page-nav ul .btn:hover{
    background: var(--menuBarColor);
    color:var(--menuBarBgCol);
}

.scroll-split .split-left .yarnline-image{
    background:var(--mainBgCol);

}

.scroll-split .split-left .yarnline-image .yarn-img{
    display: block;
    width:100%;
    mix-blend-mode: multiply;
    object-fit: contain;
    max-height:45vh;
    border-radius: 1em;
}
.scroll-split .split-left .yarnline-title-specs{
    text-align: center;
}
.scroll-split .split-left .yarnline-title-specs .yarn-care,
.scroll-split .split-left .yarnline-title-specs .other-specs{
    justify-content: center;
}




.scroll-split .split-right{
    flex:1 1 auto;
}

.scroll-split .split-right .yarnline-descr{
    line-height: 1.9;
    max-width:max(58ch, calc(100% - var(--swatchTagWidth)));
    padding:2em 0;
    font-size:1.2em;
}


.scroll-split .split-right .swatch-list{
    --gapTb:3em;
    --gapLr:1.5em;
    display: flex;
    flex-flow:row wrap;
    gap:var(--gapTb) var(--gapLr);
    padding:0 0;
}

.scroll-split .split-right .swatch-list.swatch_HL{
    gap:calc(var(--gapTb) / 2) 0;
}

.no-flex-gap .scroll-split .split-right .swatch-list.standard{
    margin-left:calc(var(--gapLr) / 2 * -1);
    margin-right:calc(var(--gapLr) / 2 * -1);;
}
.no-flex-gap .scroll-split .split-right .swatch-list.standard .swatch{
    padding:calc(var(--gapTb) / 2) calc(var(--gapLr) / 2);
}



.scroll-split .split-right .swatch-list.standard{
    justify-content: space-around;
}

.scroll-split .split-right .swatch-list.standard .swatch{
    --swatchDiam: 8rem;
    flex:0 0 auto;
}


.hash-hopper{
    position:relative;
    font-size:2em;
}

.hash-hopper .pos{
    position:absolute;
    top:calc(var(--navheight) * -1);
}
.hash-hopper.rule-title{
    padding:2em 0 1em 0;
}





.swatch-list.standard .swatch .swatch-image{
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center center;
    background-color:#fff;
    height:var(--swatchDiam);
    width:var(--swatchDiam);
    border-radius: 50%;
    border:.3rem solid #fff;
}


.swatch-list.standard .swatch .swatch-text{
    margin-top:.5em;
}



.scroll-split .split-right .swatch-list.swatch_HL .swatch{
    flex:0 0 100%;
    min-height:12vw;
    display: flex;
    flex-flow:row nowrap;
    align-items: center;
}

.swatch-list.swatch_HL .swatch .swatch-text{
    flex:0 0 var(--swatchTagWidth);;
}


.swatch-list .swatch .swatch-text .num{
    text-align: center;
    font-family: var(--font-title);
    font-size:2em;
    font-weight:100;
}
.swatch-list .swatch .swatch-text .name{
    text-align: center;
    font-style: italic;
    font-size:.9em;
    line-height: 1.3;
    margin-top:.5em;
}


.swatch-list.swatch_HL .swatch .swatch-image{
    background-repeat:repeat-y;
    background-size:100% auto;
    height:12vw;
    max-height: 9em;
    border-radius: .75em;
    flex:1 1 auto;
}


.scroll-split .split-right .design-gallery{
    --numCols: 4;
    --gapSize: 2em;
    --imgWidth: calc(calc(100% / var(--numCols)) - calc(calc(var(--numCols) - 1) * var(--gapSize) / var(--numCols)) );

    display:flex;
    flex-flow:row wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap:var(--gapSize);
    padding: 4em 0;
    filter: drop-shadow(0 20px 20px rgba(0,0,0, 0.26));


}
.scroll-split .split-right .design-gallery > a{
    display: block;
    flex: 0 0 var(--imgWidth);
    border-radius: .5em;
    overflow: hidden;

}

.scroll-split .split-right .design-gallery > a .iw{

}

.scroll-split .split-right .design-gallery > a .iw img{

}

.scroll-split .split-right .design-gallery img.di{
    display: block;
    width:100%;
}

.swatch-image.zoom{
    cursor: zoom-in;
}
.swatch-image.sw-zoom{
    box-shadow: 0 0 48px -.5em rgba(0,0,0,0.5);
    cursor: zoom-out;
    z-index:1;
    position: relative;
}


.swatch-list.standard .swatch .swatch-image.sw-zoom{
    transform:scale(2);
}

.swatch-list.swatch_HL .swatch .swatch-image.sw-zoom{
    transform:scale(1.3);
}



@media (max-width: 1023px) {
    .scroll-split {
        flex-wrap:wrap;
        justify-content: flex-start;
    }
    .scroll-split .split-left{
        position: static;
        top:0;
        flex:0 0 100%;
        padding:1rem;

    }
    .scroll-split .split-left .yarnline-image{
        max-width:320px;
        margin:0 auto;
    }
    .scroll-split .split-left .yarnline-image .yarn-img{
        max-height:none;
    }

    .scroll-split.unstick .split-left .yarnline-title-specs{
        position:static;
    }



    .scroll-split .split-right{
        flex:0 0 100%;
    }
}


@media (max-width: 767px) {
.scroll-split .split-right .design-gallery{
    --numCols: 3;
    --gapSize: 1em;
}

.scroll-split .page-nav{
    font-size:.8em;
}
.scroll-split .page-nav ul{
    flex-wrap: nowrap;
}
}


@media (max-width: 480px){

    .scroll-split .split-right .design-gallery{
        --numCols: 2;
        --gapSize: 1em;
    }

    .scroll-split{
        padding:3em 1.5em;
    }
    .scroll-split .split-right .swatch-list.swatch_HL{
        gap:1em;
    }
    .scroll-split .split-right .swatch-list.swatch_HL .swatch{
        flex-wrap:wrap;
        border-bottom:1px dashed rgba(0,0,0, 0.175);
        padding-bottom:1em;

    }
    .scroll-split .split-right .swatch-list.swatch_HL .swatch .swatch-text{
        flex:0 0 100%;
    }
    .scroll-split .split-right .swatch-list.swatch_HL .swatch .swatch-image{
        flex:0 0 100%;
        height:20vw;
    }


}







.pattern-board {
    position: relative;
    padding: 1em 1em;

    --rowHeight:calc(100vw / 8);
    --colWidth:calc(100vw / 6.2);
	display: grid;
	grid-gap: 1em;
	grid-template-columns: repeat(auto-fill, minmax(var(--colWidth), 1fr));
	grid-auto-rows: var(--rowHeight); /* minmax(var(--rowHeight), auto); */
    grid-auto-flow: row dense;
}


.pattern-board.designs-for-yarn{
    padding: 0;
}


.pattern-board .x{
    visibility: hidden;
    grid-column: span 5;
}

.pattern-board.typing .dsn{
    opacity: .3;
    pointer-events: none;
}
.pattern-board.typing::before{
    content:"";
    position: fixed;
    width:100vw;
    height:100vh;
    top:0;right:0;bottom:0;left:0;
    background-image:url('../img/loader.svg');
    background-repeat:no-repeat;
    background-position: center center;
    background-size:8em;
    z-index: 22;
    pointer-events: none;
}


.pattern-board > .dsn {
    display: block;
    grid-column: span 1;
    grid-row: span 2;
    position: relative;
    overflow: hidden;
    border-radius: .5em;
}

.pattern-board > .dsn .inf{
    display: none;
}
.pattern-board > .dsn:hover .inf{
    display: block;
    background-color: rgba(0,0,0,0.92);
    position: absolute;
    top:0;
    left:0;
    right:0;
    z-index:3;
    padding:.5em;
    color:#fff;
}
.pattern-board > .dsn:hover .inf h3{
    font-size:.9em;
}
.pattern-board > .dsn:hover .inf .d-keys{
    margin:.45em 0;
    font-size:.8em;
    line-height: 1.3;
}
.pattern-board > .dsn:hover .inf .d-keys.tags::before{content:'tags: ';opacity: .7;}
.pattern-board > .dsn:hover .inf .d-keys.yarn::before{content:'yarn: ';opacity: .7;}
.pattern-board > .dsn:hover .inf .d-keys li{ display: inline; margin-left:.5em;}

.pattern-board > .dsn:hover .inf .d-keys li button{
    font-family: var(--font-system-mono);
    color:var(--color-link);
    white-space: nowrap;
}

.pattern-board > .dsn.hide{display: none;}

.pattern-board > .dsn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
    display: block;

}

.pattern-board .dsn:nth-child(9n-1) {
	grid-column: span 2;
	grid-row: span 4;
}


@media (max-width: 1024px) {
    .pattern-board{
        --rowHeight:calc(100vw / 7);
        --colWidth:calc(100vw / 5);
    }




}
@media (max-width: 767px) {
    .pattern-board{
        --rowHeight:calc(100vw / 5);
        --colWidth:calc(100vw / 4);
    }

    .pattern-board.designs-for-yarn{
        --rowHeight:calc(100vw / 6);
        --colWidth:calc(100vw / 5);
    }



    .dsn .d-keys{
        display: none;
    }

}




#stockists{
    padding-top:2em;

}

.stockist-co-nav{
    position: sticky;
    top:var(--navheight);
    padding:1em 0;
    z-index:2;
    background:var(--mainBgCol);
    display: flex;
    flex-flow:row nowrap;
    align-items: center;
}
.stockist-co-nav > *{
}
.stockist-co-nav select{
    border:1px solid rgba(0,0,0,0.3);
    font-size:.75em;
}

.stockist-list {
    padding-bottom:30vh;
    --stickPad: 3em;
}
.stockist-list.single-co{
    --stickPad:1.4em;
}

.stockist-list .legend{
    margin:2em 0 1em;
    padding:0 .5em;
    font-size: .75em;
    text-align: right;
}

.stockist-list .stockist-in-country{
    position: relative;
    width:100%;
}

.stockist-list .co-top{
position:absolute;
top:calc((var(--navheight) + var(--stickPad)) * -1);
}

.stockist-list .country-header{
    position: sticky;
    top:calc(var(--navheight) + var(--stickPad));
    padding:.5em .25em;

    background:var(--mainBgCol);

    border-bottom:1px solid var(--color-text);
    border-left:3px solid var(--color-text);
    box-shadow:0 10px 10px -10px rgba(0,0,0,0.2);
    border-bottom:1px solid rgba(0, 0, 0, 0.26);
    z-index:1;
    font-size:1.2em;
}

.stockist-list .country-header .loc-spec{
    font-family: var(--font-system-mono);
    font-size: .75em;
    display: block;
}
.stockist-list .country-header .loc-spec em{
    font-weight:900;
}
.stockist-list .country-header .loc-spec span{
    font-style: italic;
}
.stockist-list .country-header b{
    font-weight: 800;
    white-space: nowrap;
}



.stockists-page-list .country-header::before{
    content:"Brand Stockists"
}


.stockist-list .state-sep{
    margin:3em 0 1em;
    text-transform: uppercase;
    display: flex;
    flex-flow:row nowrap;
    align-items: center;
    font-size: .8em;
    padding-left:1em;

}
.stockist-list .state-sep::before{
    content:"\f5a0";
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    margin-right:.5em;
    font-size: 1.5em;

}
.stockist-list .state-sep::after{
    flex:1 1 auto;
    margin-left:1em;
    content:"";
    border-top:1px dashed rgba(0,0,0,0.2);
}

.stockist-list .state-sep:empty{
    display: none;
}









.stockist-list .the-stockists{
    display: grid;
	grid-gap: 1em;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	grid-auto-rows: auto;
    grid-auto-flow: row dense;
    padding:1em 0 2em ;
    --bcol:#ccc;
}
.stockist-list .the-stockists:last-child{
    padding-bottom:4em;
}
.stockist{
    padding:1em;
    background-color:#f5f5f5;
    outline:none;
    border-radius: .5em;
    position: relative;
    z-index: 0; /* original z-index */

    display: flex;
    flex-flow:column;
    justify-content: flex-start;
}

/*
.stockist-list .the-stockists{
    display: grid;
	grid-gap: 1px;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	grid-auto-rows: auto;
    grid-auto-flow: row dense;
    padding:0 1px 2em 1px;
    --bcol:#ccc;
}
.stockist-list .the-stockists:last-child{
    padding-bottom:4em;
}
.stockist{
    padding:1em;
    background-color:var(--mainBgCol);

    outline: 1px solid var(--bcol);
    position: relative;
    z-index: 0;

}

*/








.recent-icon{
    color:rgb(255, 184, 0);
}
.stockist .st-name{
    margin-bottom:.25em;
    font-weight: 900;
}
.stockist .st-name::before{
    content:"\f3c5";
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    margin-right:.25em;
    color:rgb(126, 145, 227)
}

.stockist .st-addr{
    font-size:.8em;
    line-height: 1.3;
    margin-bottom:.25em;
    font-family:var(--font-system-mono);
    max-width: 100%;

}
.stockist  .pocs{
    display: flex;
    flex-flow:row wrap;
    gap:.5em;
    align-items: center;

    margin-top:auto;
    justify-content: flex-end;
    font-size: .8em;

}
.stockist  .poc{
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap:.25em;
    padding:.25em .5em;
    background:rgb(255, 255, 255);
    border:1px solid var(--color-link);
    border-radius: .25em;
    font-size: .8em;
    font-weight: 700;
}


@media (max-width: 868px){
    .the-stockists{
        --rowSize:2;
    }

}
@media (max-width: 480px){
    .the-stockists{
        --rowSize:1;
    }
}




/* _____________________________________________________________________________________

    stockist page
_____________________________________________________________________________________ */

.stockists .page-descr{
    padding:4em 0;
}
.stockists .page-descr h1{
    font-size:2em;
    margin-bottom:.25em;
    font-weight: 600;

}
.stockists .page-descr p{
    line-height: 1.5;
    margin-bottom:.75em;
}

.stockists .page-descr .emph{
    font-weight: 600;
}
.stockists .page-descr h2{
    margin-top:2em;
    font-size:1.2em;
    font-weight: 600;
    margin-bottom:.25em;
}






/* _____________________________________________________________________________________

    ABOUT PAGE
_____________________________________________________________________________________ */

body.about #siteFrame .page-content{
    padding:2em;
    display: flex;
    flex-flow:row nowrap;
    align-items: flex-start;
    justify-content: center;

}

.about .article-title{
    text-align: center;
    margin:1em 1rem;
}

.about article{
    flex:0 1 52ch;
    min-width:32ch;
    font-size:1.2em;
    font-family: var(--font-title);
    --lh:2;
}

.about article strong{
    font-weight: 800;
}

.about article p,
.about article blockquote{
    line-height: var(--lh);
    margin:1.5em 0;
}

.about article p.fl::first-letter{
    display: inline-block;
    float:left;
    font-size:calc(var(--lh) * 1.1 * 3 * 1em );
    font-weight: 800;
    padding:0 .1em 0 0;
    line-height: .8;
}

.about article blockquote{
padding:.5em 1em;
border-radius: .5em;
}

.about article q{
    font-style: italic;
    font-weight: 800;
}

.about .image-gallery{
    flex:1 1 auto;
    padding-left:2em;
}


.image-gallery ul {
    position: relative;
    padding: 1em 0;


    --rowHeight:calc(100vw / 12);
    --colWidth:calc(100vw / 6);

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--colWidth), 1fr));
	grid-auto-rows: var(--rowHeight); /* minmax(var(--rowHeight), auto); */
    grid-auto-flow: row dense;
}



.image-gallery ul > li {
    display: block;
    grid-column: span 1;
    grid-row: span 2;
    position: relative;
    border:.25em solid var(--menuBarBgCol);
    overflow: hidden;
}



.image-gallery ul > li  img {
	width: 100%;
	height: 100%;
	object-fit: cover;
    display: block;
    cursor: pointer;
    transition:transform .5s ;
}

.image-gallery ul > li  img:hover{
    transform: scale(1.2);
}

.image-gallery ul > li:nth-child(8n+1) {
	grid-column: span 2;
	grid-row: span 4;
}


@media (max-width: 1024px) {

    body.about #siteFrame .page-content{
        padding:0 1em;
        flex-wrap:wrap;
    }
    .about .image-gallery{
        padding-left:0;
    }

    .about article{
        min-width:0;
    }

}
@media (max-width: 767px) {
    .image-gallery ul{
        --rowHeight:calc(100vw / 7);
        --colWidth:calc(100vw / 5);
    }

}



.e404 h1{
    font-size:8em;
    line-height: 1;
    font-family: var(--font-title);
    text-align:center;
    margin:1em 0 0;
}
.e404 h2{
    font-size:2em;
    font-family: var(--font-text);
    text-align:center;
    margin:1em 0;
    padding-bottom:5em;
}