@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
@font-face {
    font-family: 'Fave';
    src: local('Fave Script Bold Pro'), local('Fave-Script-Bold-Pro'),
        url('Fave-ScriptBoldPro.woff2') format('woff2'),
        url('Fave-ScriptBoldPro.woff') format('woff'),
        url('Fave-ScriptBoldPro.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }

/*@media only screen and (min-width: 300px) {*/
    body {
        overflow: hidden;
        color: #191919;
    }
    .wrapper {
        min-width: unset;
    }
    .page {
        width: 100%;
        background: unset;
    }
    .nav-container {
        display: none;
        background: #64b0b0;
    }
    .nav-container ul li a {
        border-right: solid 2px #50a0a0;
    }
    .nav-container ul li .menu-block {
        max-width: 1030px;
        box-sizing: border-box;
        margin: auto;
    }
    .cms-index-index .main, .cms-home .main {
        width: 100%;
    }
    select::-ms-expand {
        display: none;
    }
    select {
        font-size: 10px;
        line-height: 16px;
        background: url('/media/menuicons/selectarrows.svg') no-repeat 100% 50%;
        -webkit-appearance: none;
        -moz-appearance: none;
        border-radius: 5px;
        background-color: white;
        padding: 0 5px;
    }
    h1, .page-title h1, .page-title h2 {
        color: #191919;
    }

    .catalog-product-view .wrapper {
        margin-top: 56px;
    }

    /* header */
    .header-container {
        width: 100%;
        top: 0;
        left: 0;
        background: white;
        position: fixed;
        z-index: 11;
        border-bottom: 1px solid #d6d6d6;
    }
    .header-container .header-delay-message {
        display: none;
    }
    .header-container .header-delay-message.active {
        background: gold;
        font-weight: bold;
        padding: 2px 0;
    }
    .header {
        padding: 5px;
        box-sizing: border-box;
        height: 56px;
    }

    .header a.logo {
        margin: 5px 0 0 44px !important;
    }
    .header a.logo img {
        width: 100%;
        max-width: 120px;
    }
    .header .links {
        position: absolute;
        width: 50%;
        right: 35px;
        top: 25px;
        font-size: 8px;
    }
    .header .links li {
        padding: 0 5px;
        font-size: 11px;
    }
    .header .links li a:link,
    .header .links li a:visited {
        position: relative;
        padding: 24px 0 0 0;
        background: none;
        font-size: 11px;
    }
    .header .links li a img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .header .links .accountlink {
        display: none;
    }
    .header .links .mobileaccountlink {
        position: relative;
    }
    .header .links .mobileaccountlink img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50% ,-100%);
    }
    #mobilesearchtoggle {
        position: relative;
        padding-top: 24px;
        text-decoration: none;
        color: #191919;
        font-size: 11px;
    }
    .mobilesearchmask {
        display: none;
    }
    .mobilesearchmask.active {
        display: block;
        background: black;
        opacity: 0.4;
        top: 50px;
        bottom: 0;
        width: 100%;
        position: fixed;
        left: 0;
    }
    .headersearchbar {
        width: 100%;
        height: 48px;
        transform: translate(0, 0);
        top: 48px;
        left: 0;
        display: none;
        background: #efefef;
    }
    .headersearchbar .searchautocomplete .nav {
        width: calc(100% - 40px);
        height: 48px;
    }
    .headersearchbar .searchautocomplete .nav .nav-input {
        line-height: 48px;
    }
    .headersearchbar .searchautocomplete .nav .nav-input input {
        font-size: 14px;
        line-height: 28px;
    }
    .headersearchbar .searchautocomplete .nav-submit-button {
        height: 48px;
        padding: 0 5px;
    }
    .headersearchbar .searchautocomplete .nav-submit-button .button {
        padding: 14px 5px !important;
    }
    .headersearchbar .searchautocomplete .nav-submit-button .button img {
        width: 19px;
        height: 19px;
    }
    .headersearchbar .form-search {
        width: 100%;
        height: 48px;
    }
    .headersearchbar .form-search input.input-text{
        width: calc(100% - 40px);
        height: 44px;
        border: none;
        background: #efefef;
        padding: 5px 5px 5px 10px;
        box-sizing: border-box;
        margin: 0;
    }
    .headersearchbar .form-search .button  {
        padding: 14px 5px !important;
        background: #efefef;
        border-radius: 0;
        margin: 0;
    }
    .headersearchbar .form-search .button img {
        width: 19px;
        height: 19px;
    }
    .block-currency  {
        width: 90px;
        background: none;
    }
    .block-currency, .block-title-curency {
        display: none;
    }
    .block-title-curency span {
        text-transform: capitalize;
    }
    #topmessages {
        display: none;
    }
    #attic24message {
        display: none;
    }
    #basketmessage {
        bottom: unset;
        right: 15px;
        padding-top: 25px;
        font-size: 11px;
    }
    #basketmessage .mobilebaskettext {
        display: block;
        color: #191919
    }
    #basketmessage .baskettextwrapper {
        display: none;
        
    }
    #basketmessage .baskettextwrapper a {
        text-transform: capitalize;
    }
    #basketmessage img {
        position: absolute;
        left: 3px;
        top: 0;
        width: 25px;
        display: none;
    }
    #basketmessage img.active {
        display: block;
    }
    #basketmessage .filledbasket {
        position: absolute;
        left: 0;
        top: 0;
        display: none;
    }
    #basketmessage .filledbasket .ball.one {
        left: 5px;
        top: 5px;
        transform: rotate(25deg);
    }
    #basketmessage .filledbasket .ball.two {
        left: 10px;
        top: 7px;
    }
    #basketmessage .filledbasket .ball.three {
        left: 16px;
        top: 6px;
        height: 8px;
        transform: rotate(335deg);
    }
    #basketmessage .filledbasket .ball.four {
        left: 7px;
        top: -1px;
        width: 9px;
    }
    #basketmessage .filledbasket .ball.five {
        left: 16px;
        top: 0;
        transform: rotate(125deg);
    }
    #basketmessage #minicart-group {
        position: fixed;
        width: 100%;
        top: 48px;
        display: none;
    }
    #basketmessage #minicart-group .view-basket-link {
        height: 41px;
        line-height: 41px;
        background: #008849;
        color: white;
        font-size: 15px;
        border-radius: 3px;
    }
    #basketmessage #minicart-group.showbasket {
        display: block;
    }
    #basketmessage #minicart-group .mini-cart-topline {
        background: #efefef;
        padding: 5px;
        box-sizing: border-box;
    }
    #basketmessage .basketmask {
        display: none;
        position: fixed;
        height: 100%;
        width: 100%;
        background: black;
        opacity: 0.4;
        left: 0;
        top: 48px;
    }
    #basketmessage .basketmask.showbasket {
        display: block;
    }
    .mobile-viewbasketbuttons {
        display: flex;
        padding: 5px;
        box-sizing: border-box;
        gap: 5px;
        border-bottom: 1px solid #d6d6d6;
    }
    #header-continue {
        background: #bedede;
        padding: 10px;
        width: 50%;
        box-sizing: border-box;
    }
    #header-view-full-basket {
        background: #008849;
        width: 50%;
        box-sizing: border-box;
    }
    #header-view-full-basket a {
        color: white;
        font-weight: bold;
        padding: 10px;
        display: block;
    }
    #basketmessage #minicart-group.showbasket .view-basket-link {
        display: none;
    }
    #basketmessage #minicart-group .cartitems{
        overflow: auto;
        max-height: 500px;
    }

    /*  account popout */
    .mobile-popout-account-links {
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
        position: fixed;
        z-index: 11;
        top: 0;
        left: 0;
        display: none;
    }
    .mobile-popout-account-links .links-container {
        position: absolute;
        width: 100%;
        z-index: 11;
    }
    .mobile-popout-account-links.active {
        display: block;
    }
    .mobile-popout-account-links .mask {
        background: black;
        opacity: 0.7;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1;
    }
    .mobile-popout-account-links .account-header {
        background: #efefef;
        width: 100%;
        box-sizing: border-box;
        border-right: none;
        border-left: none;
        padding: 10px 20px;
        display: block;
        height: 48px;
        line-height: 28px;
        font-size: 14px;
    }
    .mobile-popout-account-links .account-header .close-icon {
        width: 48px;
        height: 48px;
        position: absolute;
        top: 0;
        right: 0;
        border-left: 1px solid #d6d6d6;
    }
    .mobile-popout-account-links .account-header .close-icon:before,
    .mobile-popout-account-links .account-header .close-icon:after {
        background-color: #6f6f6f;
        border-radius: 2px;
        content: '';
        display: block;
        width: 2px;
        height: 14px;
        margin: 2px 0;
        transition: all .2s ease-in-out;
        opacity: 1;
        position: absolute;
        top: 10px;
        left: 23px;
    }
    .mobile-popout-account-links .account-header .close-icon:before {
        transform: translate(0,6px) rotate(-45deg);
    }
    .mobile-popout-account-links .account-header .close-icon:after {
        transform: translate(0,6px) rotate(45deg);
    }
    .mobile-popout-account-links li {
        color: #191919;
        font-size: 14px;
        padding: 10px 20px;
        border-bottom: 1px solid #d6d6d6!important;
        border-left: 1px solid #d6d6d6!important;
        border-right: 1px solid #d6d6d6!important;
        background: white;
        height: 48px;
        line-height: 28px;
        box-sizing: border-box;
    }
    .mobile-popout-account-links li:first-child {
        border-top: 1px solid #d6d6d6!important;
    }
    .mobile-popout-account-links li a {
        text-decoration: none;
        font-weight: bold !important;
        color: #191919;
        display: block;
    }

    /* mobile nav */
    .mobilemask {
        display: none;
    }
    .mobilemask.active {
        display: block;
        background: black;
        opacity: 0.4;
        top: 0;
        bottom: 0;
        width: 100%;
        position: fixed;
        left: 0;
    }
    .mobilebk {
        background: black;
        opacity: 0.4;
        position: absolute;
        top: 30px;
        bottom: 0;
        width: 100%;
    }
    .mobile-nav-container {
        position: fixed;
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
        top: 0;
        left: -100%;
        z-index: 10;
        transition: all .2s ease-in-out;
        opacity: 0;
    }
    .mobile-nav-container.active {
        left: 0;
        opacity: 1;
    }
    .mobile-nav-container.hide {
        left: -100%;
        opacity: 0;
    }
    .menu-topbar {
        background: #efefef;
        height: 48px;
        border-bottom: 1px solid #d6d6d6;
        text-align: left;
        font-size: 14px;
        vertical-align: middle;
        display: table-cell;
        width: 100vw;
    }
    .menu-topbar .text {
        display: inline-block;
        box-sizing: border-box;
        padding: 0 20px;
        width: calc(100% - 58px);
    }
    .menu-topbar .backmenu {
        width: 48px;
        height: 48px;
        position: absolute;
        right: 48px;
        top: 0;
        border-left: 1px solid #d6d6d6;
        border-right: 1px solid #d6d6d6;
    }
    .menu-topbar .closemenu {
        width: 48px;
        height: 48px;
        position: absolute;
        top:0;
        right: 0;

    }
    .menu-topbar .closemenu:after,
    .menu-topbar .closemenu:before {
        background-color: #191919;;
        border-radius: 2px;
        content: '';
        display: block;
        width: 2px;
        height: 14px;
        margin: 2px 0;
        transition: all .2s ease-in-out;
        opacity: 1;
        position: absolute;
        top: 10px;
        left: 23px;
    }
    .menu-topbar .closemenu:after {

        transform: translate(0,6px) rotate(45deg)
    }
    .menu-topbar .closemenu:before {
        transform: translate(0,6px) rotate(-45deg)
    }
    .menu-topbar .backmenu:after,
    .menu-topbar .backmenu:before {
        background-color: #191919;;
        border-radius: 2px;
        content: '';
        display: block;
        width: 2px;
        height: 10px;
        margin: 2px 0;
        transition: all .2s ease-in-out;
        opacity: 1;
        position: absolute;
        top: 11px;
        left: 23px;
    }
    .menu-topbar .backmenu:after {

        transform: translate(0,4px) rotate(45deg)
    }
    .menu-topbar .backmenu:before {
        transform: translate(0,10px) rotate(-45deg)
    }
    .menu-topbar .topmenu-currency {
        position: absolute;
        top: 0;
        right: 48px;
        height: 48px;
        width: 70px;
        border-left: 1px solid #d6d6d6;
        border-right: 1px solid #d6d6d6;
        text-align: center;
        transition: all .2s ease-in-out;
    }
    .topmenu-currency.active {
        background: white;
    }
    #dropdown-curent-curency img {
        padding-right: 0;
        padding-top: 8px;
    }
    .topmenu-currency.active .close-currency:before,
    .topmenu-currency.active .close-currency:after {
        display: none;
        background-color: #191919;;
        border-radius: 2px;
        content: '';
        width: 2px;
        height: 10px;
        margin: 2px 0;
        transition: all .2s ease-in-out;
        opacity: 1;
        position: absolute;
        top: 11px;
        left: 23px;
    }
    .close-currency:after {

        transform: translate(11px,16px) rotate(45deg)
    }
    .close-currency:before {
        transform: translate(11px,16px) rotate(-45deg)
    }
    .topmenu-currency.active .close-currency:before,
    .topmenu-currency.active .close-currency:after {
        display: block;
    }
    .topmenu-currency.active .topmenu-title-currency {
        display: none;
    }
    .currency-selection-mask {
        display: none;
        position: fixed;
        height: 100vh;
        width: 100%;
        background: black;
        opacity: 0.4;
        z-index: 8;
        top: 48px;
    }
    .currency-selection {
        display: none;
        position: absolute;
        top: 48px;
        background: white;
        z-index: 9;
        border-bottom: 1px solid #d6d6d6;
    }
    
    .currency-selection .textlist-currency {
        text-align: center;
        padding: 10px 20px;
        display: block;
    }
    .currency-selection ul {
        border-top: 1px solid #d6d6d6;
    }
    .currency-selection ul li {
        line-height: 48px;
        border-bottom: 1px solid #d6d6d6;
    }
    .currency-selection ul li a {
        text-decoration: none;
        color: #313131;
        display: block;
        padding-left: 40px;
    }
    .currency-selection ul li a img {
        vertical-align: unset;
    }
    .currency-selection ul li a .code-name {
        padding-left: 10px;
    }
    .bottom-currency-close {
        line-height: 48px;
        background: #efefef;
        text-align: center;
    }
    .mobile-delay-message {
        display: none;
    }
    .mobile-delay-message.active {
        display: block;
        background: gold;
        font-weight: bold;
        padding: 2px;
        box-sizing: border-box;
        text-align: center;
    }
    .mobile-nav-container .mobile-top-li {
        background: white;
        display: inline-block;
        width: 100%;
        color: #313131;
        text-align: left;
        box-sizing: border-box;
        border-bottom: 1px solid #d6d6d6;
    }
    

    .mobile-nav-container .mobile-top-li .mobile-top-li-title {
        text-decoration: none;
        line-height: 48px;
        font-weight: bold;
        color: #191919;
        font-size: 14px;
        height: 48px;
        transition: all .2s ease-in-out;
        display: block;
        margin-left: 20px;
    }
    .mobile-nav-container .mobile-top-li.clearance .mobile-top-li-title {
        color: white;
    }
    .mobile-nav-container .mobile-top-li.expanded .mobile-top-li-title  {
        color: #313131;
    }
    .mobile-nav-container .mobile-top-li .mobile-top-li-title a {
        text-decoration: none;
        color: #313131;
    }
    .mobile-nav-container .mobile-top-li .arrow {
        position: absolute;
        right: 0;
        width: 48px;
        height: 48px;
        transition: all .2s ease-in-out;
    }
    .mobile-nav-container .mobile-top-li .arrow:before,
    .mobile-nav-container .mobile-top-li .arrow:after {
        background-color: #191919;;
        border-radius: 2px;
        content: '';
        display: block;
        width: 2px;
        height: 10px;
        margin: 2px 0;
        transition: all .2s ease-in-out;
        opacity: 1;
        position: absolute;
        top: 11px;
        left: 23px;
    }
    .mobile-nav-container .mobile-top-li .arrow:before {
        transform: translate(0,10px) rotate(45deg)
    }
    .mobile-nav-container .mobile-top-li .arrow:after {
        transform: translate(0,4px) rotate(-45deg)
    }
    .expand-icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 48px;
        height: 48px;
        transition: all .2s ease-in-out;
    }
    .expanded .expand-icon {
        transform: rotate(180deg);
    }
    .expand-icon:after,
    .expand-icon:before {
        background-color: #191919;;
        border-radius: 2px;
        content: '';
        display: block;
        width: 2px;
        height: 10px;
        margin: 2px 0;
        transition: all .2s ease-in-out;
        opacity: 1;
        position: absolute;
        top: 12px;
        left: 23px;
    }
    .expanded .expand-icon:after,
    .expanded .expand-icon:before {
        background-color: white;
    }
    .expand-icon:after {

        transform: translate(3px,6px) rotate(45deg)
    }
    .expand-icon:before {
        transform: translate(-3px,6px) rotate(-45deg)
    }

    .mobile-nav-container .mobile-top-li .expanded-list {
        background: white;
        display: none;
    }

    .mobile-nav-container .mobile-top-li .expanded-list ul li {
        width: 100%;
        display: inline-block;
        border-bottom: 1px solid #bfbfbf;
    }
    .mobile-nav-container .mobile-top-li .expanded-list ul .pink {
        background: #ffeeff;
    }
    .mobile-nav-container .mobile-top-li .expanded-list ul .green{
        background: #d6ebeb;
    }
    .mobile-nav-container .mobile-top-li .expanded-list ul li .expanded-list-li-title {
        color: #191919;
        font-size: 14px;
        font-weight: bold;
        line-height: 30px;
        width: 80%;
        display: inline-block;
    }
    .mobile-nav-container .mobile-top-li .expanded-list ul li .expanded-list-li-title a {
        text-decoration: none;
        color: #191919;
        display: block;
    }
    .mobile-nav-container .mobile-top-li .expanded-list ul li .expanded-list-li-title .whatnewlink {
        color: #64b0b0;
    }

    .mobile-nav-container .mobile-top-li .expanded-list ul li .expand-icon {
        transform: rotate(-90deg);
    }
    .mobile-nav-container .mobile-top-li .expanded-list ul li .expand-icon:after,
    .mobile-nav-container .mobile-top-li .expanded-list ul li .expand-icon:before {
        background: #191919;
    }

    .mobile-nav-container .deliverymessage {
        text-align: center;
        padding: 10px;
        color: #cc9999;
        font-size: 16px;
        font-weight: bold;
    }
    .mobile-nav-container .callusmessage {
        color: red;
        font-size: 15px;
    }
    .mobile-nav-container .internationalmessage a {
        color: red;
        font-size: 15px;
        text-decoration: none;
    }
    .yarntopmenuimagebuttons {
        padding: 5px 0;
        text-align: center;
    }
    .yarntopmenuimagebuttons a {
        display: inline-block;
        margin: 5px 0;
    }
    .mobile-nav-container .licensed-box {
        display: block;
        background: #efefef;
    }
    .mobile-nav-container .licensed-box .licensed-heading {
        color: #313131;
        font-size: 14px;
        font-weight: bold;
        line-height: 30px;
    }
    .mobile-nav-container .licensed-box a {
        padding: 5px;
        box-sizing: border-box;
        display: block;
    }
    .mobile-nav-container .licensed-box img {
        width: 100%;
    }
    .mobile-nav-container .fabric-salebannergrp {
        background: #474f64;
        display: block;
        padding: 5px;
        width: 100%;
        box-sizing: border-box;
    }
    .mobile-nav-container .fabric-salebannergrp a  {
        text-decoration: none;
        display: block;
    }
    .mobile-nav-container .fabric-salebannergrp a .fabric-saleborder {
        border: 1px dashed white;
        display: block;
    }

    .mobile-nav-container .fabric-salebannergrp a .fabric-saleborder  h1 {
        font-weight: normal;
        font-family: Serif;
        color: white;
        text-align: center;
        font-size: 17px;
    }
    .selected-list-container {
        position: absolute;
        left: -100%;
        width: 100%;
        top: 0;
        background: white;
        text-align: left;
        color: #191919;
        z-index: 15;
        transition: all .2s ease-in-out;
        opacity: 0;
        height: 100vh;
        overflow-y: scroll;
    }
    .selected-list-container.active {
        left: 0;
        opacity: 1;
    }
    .selected-list-container .selected-ul {
        
    }
    .selected-list-container .doubleline {
        line-height: 24px;
    }
    .selected-list-container .selected-li {
        width: 100%;
        border-bottom: 1px solid #d6d6d6;
        position: relative;
    }
    .selected-list-container .selected-li.clearance {
        background: #f0607d
    }
    .selected-list-container .selected-ul .selected-li .linkcontainer {
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        font-weight: bold;
        display: block;
    }
    .selected-list-container .selected-ul .selected-li .expandable {
        height: 48px;
        line-height: 48px;
        font-size: 14px;
        font-weight: bold;
        padding-left: 20px;
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
    }
    .selected-list-container .selected-ul .selected-li a {
        text-decoration: none;
        color: #191919;
        background: white;
        display: block;
        padding-left: 20px;
    }
    .selected-list-container .selected-ul .selected-li ul li a {
        font-size: 13px;
        padding: 0 13px;
        line-height: 13px;
        text-align: center;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .selected-list-container .selected-li.clearance .linkcontainer a {
        color: white;
        background: unset;
    }
    .selected-li .expandable.expanded {
        background: #64b0b0;
        color: white;
    }
    .selected-li .selection-title {
        padding: 5px;
        text-align: center;
        display: block;
    }
    .expanded-list {
        display: none;
    }
    .expanded-list .flexlist {
        display: flex;
    }
    .expanded-list ul {
        width: 100%;
        background: #d6d6d6;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .expanded-list li {
        line-height: 48px;
        padding: 1px;
    }
    .expanded-list li a {
        display: block;
        padding-left: 20px;
        background: white;
    }

    .selection-list-container {
        position: absolute;
        left: -100%;
        width: 100%;
        top: 0;
        background: white;
        text-align: center;
        color: #191919;
        z-index: 10;
        transition: all .2s ease-in-out;
        opacity: 0;
    }
    .selection-list-container.active {
        left: 0;
        opacity: 1;
    }
    .selection-list-container .selection-back {
        width: 100%;
        display: block;
        font-weight: bold;
        height: 35px;
        line-height: 35px;
        font-size: 13px;
        border-bottom: 1px solid #bfbfbf;
        border-top: 1px solid #bfbfbf;
        background: #99cccc;
        color: white;
    }
    .selection-list-container .selection-title {
        width: 100%;
        display: block;
        font-weight: bold;
        border-bottom: 1px solid #bfbfbf;
        text-decoration: none;
        color: #313131;
        font-size: 13px;
        line-height: 35px;
    }
    .selection-list-container .list-container{
        height: calc(100vh - 150px);
        overflow-y: scroll;
    } 
    .selection-list-container ul {
        width: 100%;
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
        border-bottom: 1px solid #bfbfbf;
        padding-bottom: 10px;
    }
    .selection-list-container ul li {
        width: 100%;
        line-height: 30px;
        float: left;

    }
    .selection-list-container ul li a {
        color: #313131;
        text-decoration: none;
        display: block;
        font-size: 13px;
        line-height: 30px;
    }
    .selection-list-container ul li a.doubleline {
        line-height: 15px;
    }
    .selection-list-container ul li a .colourlink {
        display: inline-block;
        width: 18px;
        height: 18px;
        float: left;
        border: solid 1px black;
        margin: 6px 10px 6px 10px;
    }
    .mobile-menu-button {
        background: white;
        width: 40px;
        height: 30px;
        padding: 5px 9px;
        box-sizing: border-box;
        position: absolute;
        top: 4px;
        left: 6px;
    }
    .mobile-menu-button .menu-button-text {
        position: absolute;
        left: 5px;
    }

    .menu-footer {
        background: #64b0b0;
        text-align: left;
        padding: 0 20px;
    }
    .menu-footer h3 {
        color: white;
        font-size: 14px;
        padding-top: 10px;
    }
    .menu-footer a {
        color: white;
        text-decoration: none;
        line-height: 48px;
        display: block;
        font-size: 14px;
    }
    .nav-icon {

    }
    .nav-icon:after,
    .nav-icon:before,
    .nav-icon div {
        background-color: #706f6f;
        border-radius: 3px;
        content: '';
        display: block;
        height: 3px;
        margin: 3px 0;
        transition: all .2s ease-in-out;
        opacity: 1;
    }
    .nav-icon.active div {
        opacity: 0;
    }
    .nav-icon.active:before {
        transform: translateY(6px) rotate(135deg);
    }
    .nav-icon.active:after {
        transform: translateY(-6px) rotate(-135deg);
    }
    .nav-icon.hide:before {
        transform: translateY(10px) rotate(45deg);
        width: 15px;
    }
    .nav-icon.hide:after {
        transform: translateY(-10px) rotate(-45deg);
        width: 15px;
    }
    .salesbannerbackground {
        height: 0;
        padding: 0;
        display: block;
        margin-top: 56px;
    }
    .salesbannerbackground.active {
        height: 30px;
    }
    .catalogsearch-result-index .main-container {
        margin-top: 56px;
    } 
    .main-container.col1-layout {
        margin-top: 56px;
    }
    #check-gift-title {
        margin-top: 56px;
    }
    .product-gift-voucher .col-main {
        margin-top: 56px;
    }
    .catalog-product-view .main-container.col1-layout {
        margin-top: 0;
    }
    .cms-page-view .main-container {
        padding: 0;
    }
    .cms-page-view .main-container .main {
        padding: 10px;
        box-sizing: border-box;
    }
    /* home page */
    .cms-home .main-container {
        margin-top: 56px !important;
    }
    .homepage-craft-swiper {
        border: none;
        overflow: hidden;
    }

    .block-subscribe-inline label {
        color: white;
        font-size: 14px;
    }

    .block-subscribe-inline .actions button.button span span {
        color: white !important;
        font-size: 14px;
    }

    #hometopslider {
        border: none;
        margin-bottom: 10px;
    }
    #hometopslider .swiper-slide img {
        width: 100%;
    }
    #hometopslider .swiper-pagination-bullets {
        bottom: 0;
    }
    #hometopslider .swiper-pagination-bullet {
        width: 16px;
        height: 16px;
    }
    #hometopslider .swiper-button-next, #hometopslider .swiper-button-prev {
        width: 50px;
        height: 50px;
        top: 50%;
        background: white;
        border-radius: 50%;
        border: 1px solid #64b0b0;
    }
    #hometopslider .swiper-button-next {
        right: 15px;
    }
    #hometopslider .swiper-button-prev{
        left: 15px;
    }
    #hometopslider .swiper-button img {
        width: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
    }
    
    .swiper-button-next {
        width: 30px;
        right: 5px;
        top: 0;
        margin-top: 0;
    }
    .swiper-button-prev {
        width: 30px;
        left: 5px;
        top: 0;
        margin-top: 0;
    }
    .swiper-button img {
        width: 100%;
        top: 50%;
        transform: translate(0, -50%);
        position: absolute;
    }
    .homepage-craft {
        padding: 0 35px;
        overflow: hidden;
        border: none;
    }
    
    .homepage-craft-item {
        border: none;
    }
    .homepage-craft-item img {
        width: 100%;
        max-width: 170px;
        height: 100%;
    }
    .homepage-craft-item .homepage-craft-title {
        font-size: 12px;
    }
    .homepage-category {
        width: 50%;
    }
    .homepage-category .homepage-category-title span {
        font-size: 8px;
    }
    .homepage-ranges {
        padding: 0 20px;
    }
    .homepage-range img {
        width: 100%;
        max-width: 165px;
    }
    .homepage-designers a {
        width: 50%;
        float: left;
        box-sizing: border-box;
    }
    .homepage-designers a img {
        width: 100%;
        height: auto;
    }

    .homepage-imagelinks {
        width: 100%;
        margin: auto;
        text-align: center;
        box-sizing: border-box;
        display: inline-block;
        padding: 5px;
    }
    .homepage-imagelinks .homepage-imagelink {
        width: 50%;
        float: left;
        padding: 5px;
        box-sizing: border-box;
    }
    .homepage-imagelinks .homepage-imagelink .image-container {
        overflow: hidden;
        width: 100%;
        position: relative;
        border-radius: 5px;
        box-sizing: border-box;
    }
    .homepage-imagelinks .homepage-imagelink .image-container .homepage-imagelink-background {
        width: 100%;
        transition: all 0.3s ease-in-out;
        transform: scale(1);
    }
    .homepage-imagelinks .homepage-imagelink .image-container .homepage-imagelink-hover {
        width: 100%;
        position:absolute;
        left: 0;
        bottom: 100%;
        transition: all 0.3s ease-in-out;
        transform: scale(1);
    }
    .homepage-link-text {
        position: absolute;
        z-index: 10;
        bottom: 10px;
        width: 100%;
        padding: 10px 20px;
        box-sizing: border-box;
    }
    .homepage-link-text span {
        background: rgba(255, 255, 255, 0.7);
        padding: 5px;
        width: 100%;
        display: block;
        box-sizing: border-box;
        border-radius: 5px;
    }
    .homepage-link-text span div {
        box-sizing: border-box;
        color: black;
        font-size: 10px;
        font-weight: bold;
        border-radius: 5px;
    }
    .homepage-imagelinks .homepage-imagelink:hover .homepage-link-text span {
        background: rgba(255, 255, 255, 0.9);
    }

    .sheepspacer {
        padding: 50px;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        float: left;
    }
    .sheepspacer span {
        border-top: 1px solid #bfbfbf;
        width: 100%;
        height: 0;
        box-sizing: border-box;
        display: inline-block;
    }
    .sheepspacer .jumpingsheep {
        width: 100px;
        position:absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .homepage-title {
        font-family: "Fave";
        font-size: 55px;
        padding: 0;
    }

    .homepage-products {
        width: 100%;
        box-sizing: border-box;
        margin: auto;
        position: relative;
        overflow: hidden;
        display: block;
        padding: 0 35px;
    }
    .homepage-product-swiper {
        overflow: hidden;
        box-sizing: border-box;
    }
    .homepage-product-swiper .swiper-slide {
        padding: 10px;
        box-sizing: border-box;
    }
    #homepage-product-swiper-button-next, #homepage-product-swiper-button-prev,
    #homepage-brand-swiper-button-next, #homepage-brand-swiper-button-prev {
        background-image: none;
    }
    .homepage-products .homepage-product {
        width: 100%;
        display: inline-block;
        text-align: center;
        overflow: hidden;
        border-radius: 5px;
        color: #191919;
        text-decoration: none;
    }
    .homepage-products .homepage-product img {
        width: 100%;
        display: block;
        max-width: 170px;
        margin: auto;
    }
    .homepage-products .homepage-product .product-title {
        font-weight: 200;
        font-size: 13px;
        line-height: 13px;
        width: 100%;
        float: left;
        padding: 0 5px;
        box-sizing: border-box;
    }
    .homepage-products .homepage-product .product-price {
        padding: 0 5px;
        box-sizing: border-box; 
        font-weight: bold;
        color: black;
        font-size: 15px;
        display: flex;
        justify-content: space-evenly;
    }
    .homepage-products .homepage-product .product-price .product-wasprice {
        color: #7f7f7f;
        text-decoration: line-through;
        font-weight: 400;
    }
    .homepage-products .homepage-product .product-shades {
        font-weight: bold;
        float: left;
        width: 100%;
        padding: 0 5px;
        box-sizing: border-box;
        color: #191919;
    }
    .homepage-brand-swiper {
        overflow: hidden;
        box-sizing: border-box;
    }
    .homepage-brands {
        width: 100%;    
        box-sizing: border-box;
        margin: auto;
        padding: 0 35px;
        position: relative;
        overflow: hidden;
    }
    .homepage-brands .homepage-brand {
        padding: 10px;
        display: inline-block;
    }
    .homepage-brands .homepage-brand img {
        width: 100%;
        margin: auto;
        border-radius: 5px;
    }
    .brand-text-container {
        padding: 10px;
        margin: 0 10px;
        border-radius: 5px;
        border: 1px solid #d6d6d6;
        transition: all 0.3s;
        box-sizing: border-box;
    }
    .brand-text-container .brand-text {
        display: none;
    }
    .brand-text-container .brand-text.active {
        display: block;
    }
    .brand-text-container .brand-text .brand-text-links {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
    .brand-text-container .brand-text .brand-text-links a {
        text-align: center;
        background: #bedede;
        border-radius: 5px;
        padding: 5px;
        font-size: 14px;
        text-decoration: none;
        color: #191919;
        width: calc(50% - 10px);
        box-sizing: border-box;
    }

    .homepages .saleheading {
        padding: 10px;
        text-align: center;
        display: block;
        box-sizing: border-box;
    }
    .homepages .saleheading h2 {
        color: white;
        font-size: 20px;
        background: #f0607d;
        border-radius: 5px;
        padding: 5px;
        box-sizing: border-box;
        margin: 0;
    }
    .homepages .saletext {
        padding: 0 10px;
        text-align: center;
    }
    .homepages .saletext p {
        margin: 0;
    }
    .homepages .salelinks {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        padding: 5px;
        box-sizing: border-box;
    }
    .homepages .salelinks li {
        padding: 5px;
        box-sizing: border-box;
    }
    .homepages .salelinks li a {
        border-radius: 5px;
        overflow: hidden;
        display: block;
        position: relative;
    }
    .homepages .salelinks li a img {
        width: 100%;
    }
    .homepages .salelinks li a .redmask {
        background: red;
        width: 100%;
        height: 100%;
        position: absolute;
        display: block;
        top: 0;
        opacity: 0;
        transition: all 0.3s ease-in-out;
    }
    .homepages .salelinks li a:hover .redmask {
        opacity: 0.5;
    }
    .homepages .salelinks li a .linkbox {
        position: absolute;
        top: 50%;
        left: 50%;
        background: rgba(255, 255, 255, 0.7);
        width: 70%;
        transform: translate(-50%, -50%);
        transition: all 0.3s ease-in-out;
        border-radius: 10px;
        text-align: center;
        padding: 10px 0;
        box-sizing: border-box;
    }
    .homepages .salelinks li a:hover .linkbox {
        background: rgba(255, 255, 255, 1);
    }
    .homepages .salelinks li a .linkbox .text {
        width: 100%;
        display: block;
        font-size: 11px;
        font-weight: bold;
        color: #191919;
    }

    /* footer */
    .footer-container {
        background: #64b0b0;
    }
    .footer {
        width: 100%;
        max-width: 1030px;
        border: none;
        background: #64b0b0
    }
    .footer .footer_block {
        padding: 5px 8px;
        border: none;
        background: #64b0b0;
    }
    .footer_block .links_block div {
        margin: 0;
        width: 50%;
        color: white;
        float: left;
    }
    .footer_block .links_block div ul {
        display: inline-block;
        margin-bottom: 10px;
    }
    .footer_block .links_block div ul li {
        display: inline-block;
        width: 50%;
        box-sizing: border-box;
        padding: 0;
    }
    .footer_block .links_block div.last {
        margin: 0;
    }
    .footer_block #sagepaycardsaccepted {
        position: relative;
        bottom: unset;
        right: unset;
        margin: 10px 5px;
    }
    .footer_block #sagepaycardsaccepted img {
        width: 100%;
    }
    .footer_block #socialmedia {
        position: relative;
        width: 100%;
        display: inline-block;
        bottom: unset;
        right: unset;
    }
    .footer_block #socialmedia #facebook,
    .footer_block #socialmedia #twitter,
    .footer_block #socialmedia #ravelry,
    .footer_block #socialmedia #instagram,
    .footer_block #socialmedia #tiktok, 
    .footer_block #socialmedia #pinterest,
    .footer_block #socialmedia #webackedbipoc {
        background-size: 100%;
        display: block;
        width: 39px;
        height: 39px;
        float: left;
        margin: 0 10px 0 0;
    }
    .footer_block #socialmedia #webackedbipoc {
        width: 50px;
    }
    .footer_block #socialmedia a img {
        width: 100%;
    }
    

    .consent-bar-container {
        box-sizing: border-box;
    }
    .consent-bar-container #acceptCookiesButton {
        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
        border: none;
        background: #efefef;
        color: #191919;
        padding: 10px 12px;
        line-height: 12px;
        transition: all ease-in-out 0.3s;
    }

    .main {
        width: 100%;
        background: white;
    }
    .main .col-main {
        width: 100%;
    }

    /* list page */
    .mobile-layerednav-toggle {
        height: 48px;
        width: 100%;
        display: flex;
        background: #efefef;
        box-sizing: border-box;
    }
    .mobile-layerednav-toggle .mobile-layerednav-filter-button {
        background: #efefef;
        width: 50%;
        font-weight: bold;
        text-align: center;
        line-height: 48px;
        height: 100%;
        border: 1px solid #bfbfbf;
        box-sizing: border-box;
    }
    .mobile-layerednav-toggle .mobile-layerednav-sort-button {
        background: #efefef;
        width: 50%;
        font-weight: bold;
        text-align: center;
        line-height: 48px;
        height: 100%;
        border: 1px solid #bfbfbf;
        box-sizing: border-box;
        position: relative;
    }
    .mobile-layerednav-toggle .mobile-layerednav-sort-button.active {
        background: #bedede;
    }
    .mobile-layerednav-toggle .mobile-layerednav-sort-button.active .sort-expand{
        transform: rotate(180deg);
    }
    .mobile-layerednav-toggle .mobile-layerednav-sort-button .sort-expand {
        position: absolute;
        top: 0;
        right: 0;
        width: 48px;
        height: 48px;
        transition: all .2s ease-in-out;
    }
    .mobile-layerednav-toggle .mobile-layerednav-sort-button .sort-expand:before,
    .mobile-layerednav-toggle .mobile-layerednav-sort-button .sort-expand:after {
        background-color: #191919;
        border-radius: 2px;
        content: '';
        display: block;
        width: 2px;
        height: 10px;
        margin: 2px 0;
        transition: all .2s ease-in-out;
        opacity: 1;
        position: absolute;
        top: 12px;
        left: 23px;
    }
    .mobile-layerednav-toggle .mobile-layerednav-sort-button .sort-expand:after {
        transform: translate(3px,6px) rotate(45deg)
    }
    .mobile-layerednav-toggle .mobile-layerednav-sort-button .sort-expand:before {
        transform: translate(-3px,6px) rotate(-45deg)
    }

    .layered-nav-mask {
        background: black;
        opacity: 0.5;
        height: 100vh;
        width: 100%;
        position: fixed;

    }
    .mobile-layered-nav-options {
        background: #efefef;
        height: 48px;
        border-bottom: 1px solid #bfbfbf;
        text-align: left;
        font-size: 14px;
        vertical-align: middle;
        display: table-cell;
        width: 100vw;
    }
    .mobile-layered-nav-options .close-layered-nav {
        width: 48px;
        height: 48px;
        position: absolute;
        top:0;
        right: 0;
        border-left: 1px solid #bfbfbf;
    }
    .mobile-layered-nav-options .close-layered-nav:after,
    .mobile-layered-nav-options .close-layered-nav:before {
        background-color: #6f6f6f;;
        border-radius: 2px;
        content: '';
        display: block;
        width: 2px;
        height: 14px;
        margin: 2px 0;
        transition: all .2s ease-in-out;
        opacity: 1;
        position: absolute;
        top: 10px;
        left: 23px;
    }
    .mobile-layered-nav-options .close-layered-nav:after {

        transform: translate(0,6px) rotate(45deg)
    }
    .mobile-layered-nav-options .close-layered-nav:before {
        transform: translate(0,6px) rotate(-45deg)
    }
    .mobile-layered-nav-options .resetfilter {
        position: absolute;
        height: 48px;
        top: 0;
        right: 48px;
        border-left: 1px solid #bfbfbf;
        padding: 10px;
        box-sizing: border-box;
        line-height: 14px;
    }
    .mobile-layered-nav-options .resultfilter {
        position: absolute;
        height: 48px;
        top: 0;
        right: 102px;
        border-left: 1px solid #bfbfbf;
        padding: 10px;
        box-sizing: border-box;
        line-height: 14px;
        text-align: center;
        background-color: #018748;
    }
    .mobile-layered-nav-options .resultfilter span {
        font: normal 12px/16px 'Open Sans', Arial, Helvetica, sans-serif;
        color: white;
        text-decoration: none;
    }
    .mobile-layered-nav-options .filtertitle {
        padding-left: 18px;
    }
    #backtotopbtn {
        display: none;
        position: fixed;
        bottom: 0;
        border-radius: 5px;
        color: white;
        opacity: 0.7;
        padding: 10px;
        box-sizing: border-box;
        right: 50%;
        transform: translate(50%, -100%);
        background: #64b0b0;
        font-weight: bold;
        z-index: 10;
    }
    #backtotopbtn:hover {
        opacity: 1;
    }
    .main .col-left {
        position: absolute;
        left: 0;
        width: 100%;
        top: 0;
        display: none;
        transition: all .2s ease-in-out;
        z-index: 20;
    }
    .block-layered-nav {
        width: 100%;
        padding: 0;
        background: white;
    }
    .block-layered-nav .selectedheader {
        font-size: 14px;
        font-weight: bold;
        padding-left: 10px;
    }
    .block-layered-nav .appliedfilters {
        display: flex;
        justify-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        border-bottom: 1px solid #d6d6d6;
    }
    .block-layered-nav .selectedfiltername {
        font-weight: bold;
        padding-left: 10px;
    }
    .block-layered-nav .selectedfilterlabel {
        margin: 5px;
        padding: 5px 15px;
        border-radius: 5px;
        background: #bedede;
        display: inline-block;
        font-weight: bold;
        cursor: pointer;
        height: 25px;
        line-height: 25px;
    }
    .block-layered-nav .selectedfilterlabel span {
        padding-left: 5px;
    }
    .block-layered-nav .block-content {
        background: white;
        padding: 0;
    }
    .block-layered-nav .block-title {
        display: none;
        background: white;
    }
    .block-layered-nav .block-title strong {
        text-align: center;
        text-transform: capitalize;
        height: unset;
        font-weight: 400;
        border: 1px solid #efefef;
        background: #efefef;
        font-size: 12px;
    }
    .block-layered-nav #narrow-by-list {
       
    }
    .block-layered-nav .expandable {
        border-bottom: 1px solid #dedede;
        height: 48px;
        line-height: 48px;
        padding: 0 18px;
        font-size: 13px;
    }
    .block-layered-nav .expandable.expanded {
        border: none;
        background: #64b0b0;
        color: white;
    }
    .block-layered-nav .expandable .expand-icon {
        position: absolute;
        top: 0;
        right: 0;
        width: 48px;
        height: 48px;
        transition: all .2s ease-in-out;
    }
    .block-layered-nav .expandable.expanded .expand-icon {
        transform: rotate(180deg);
    }
    .block-layered-nav .expandable .expand-icon:after,
    .block-layered-nav .expandable .expand-icon:before{
        background-color: #191919;
        border-radius: 2px;
        content: '';
        display: block;
        width: 2px;
        height: 10px;
        margin: 2px 0;
        transition: all .2s ease-in-out;
        opacity: 1;
        position: absolute;
        top: 12px;
        left: 23px;
    }
    .block-layered-nav .expandable.expanded .expand-icon:after,
    .block-layered-nav .expandable.expanded .expand-icon:before{
        background-color: white;
    }
    .block-layered-nav .expandable .expand-icon:after {
        transform: translate(3px,6px) rotate(45deg)
    }
    .block-layered-nav .expandable .expand-icon:before {
        transform: translate(-3px,6px) rotate(-45deg)
    }
    .block-layered-nav dd  {
        display: none;
        border-bottom: 1px solid #d6d6d6;
        padding: 0;
    }
    .m-filter-item-list {
        display: inline-block;
        width: 100%;
    }
    .m-filter-item-list li {
        width: 50%;
        height: 48px;
        float: left;
        padding: 5px;
        box-sizing: border-box;
        border: 1px solid #d6d6d6;
        background: white;
    }
    
    .m-filter-item-list input[type=checkbox] {
        margin: 0 10px;
        opacity: 0;
    }
    
    .m-filter-item-list li label {
        display: flex;
        height: 100%;
        cursor: pointer;
        align-items: center;
        font-size: 13px;
        position: relative;
        line-height: 15px;
        padding-left: 3px;
    }
    .m-filter-item-list li label .checkmark {
        position: absolute;
        width: 20px;
        height: 20px;
        left:7px;
    }
    .m-filter-item-list li label input ~ .checkmark {
        background: #d6d6d6;
    }
    .m-filter-item-list li label input:checked ~ .checkmark {
        background: #64b0b0;
    }
    .m-filter-item-list li label .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    .m-filter-item-list li label input:checked ~ .checkmark:after {
        display: block;
    }

    .m-filter-item-list li label .checkmark:after {
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .m-filter-item-list li a {
        display: block;
        height: 100%;
        cursor: pointer;
    }
    .col2-left-layout {

    }
    .col2-left-layout .category-products {
        margin: 0;
    }
    .herobanner {
        width: 100%;
    }
    .category-image img {
        width: 100%;
    }
    .products-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        padding: 5px;
        width: 100%;
        box-sizing: border-box;
    }
    .products-list li.item {
        margin: 5px 0;
        padding: 5px 5px 15px 5px;
        width: 50%;
        box-sizing: border-box;
        display: flex;
        flex-flow: column;
        border-bottom: 1px solid #d6d6d6 !important;
    }
    .products-list li.item.lastrow2col {
        border-bottom: none !important;
        margin-bottom: 0;
        padding-bottom: 8px;
    }
    .products-list .mobile-product-name {
        margin-top: 10px;
        font-size: 13px;
    }
    .products-list .mobile-product-name a {
        text-decoration: none;
        color: #313131;
        text-align: center;
        display: block;
    }
    .products-list li .release-wrapper, .patterns-grid .pattern-item .pattern-item-content .release-wrapper {
        top:0;
    }
    .products-list .product-image {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        position: relative;
        border: 1px solid #d6d6d6;
        border-radius: 3px;
        overflow: hidden;
    }
    .products-list .product-image:hover {
        border: 1px solid #bfbfbf;
    }
    .products-list .product-image.patternimage {
        width: 159px;
        height: 225px;
        border-radius: 3px;
        border: 1px solid #d6d6d6;
        overflow: hidden;
        margin: 0 auto;
    }
    .products-list .product-image.patternimage img{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
    
    }
    .products-list .product-image img {
        width: 100%;
        height: auto;
    }
    .products-list .product-image .new-icon-image {
        top: 0 !important;
        transform: unset !important;
        left: 0;
    }
    .products-list .product-image .savingpercentgroup {
        position: absolute;
        right: 5px;
        top: 5px;
        background: #fddc03;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        padding: 3px;
        box-sizing: border-box;
        transform: rotate(10deg);
        text-align: center;
        color: #191919;
    }
    .products-list .product-image .savingpercentgroup .savetext {
        font-size: 9px;
        display: block;
    }
    .products-list .product-image .savingpercentgroup .percentage {
        font-size: 14px;
        font-weight: bold;
        line-height: 12px;
        display: block;
    }
    .products-list li .outstock-wrapper {
        top: unset;
        bottom: 0;
        right: 0;
    }
    .products-list li .outstock-group {
        background-color: #ffcccc !important;
        color: #c00000;
        width: 150px;
    }
    .products-list .product-shop {
        width: 100%;
        margin-left: unset;
        display: inline-block;
        box-sizing: border-box;
        position: relative;
    }
    .products-list .product-name,
    .products-list .product-name a {
        font-size: 12px;
        padding-right: 5px;
        margin: 0 0 30px;
        height: 30px;
        overflow: hidden;
        display: none;
    }
    .products-list .price-box {
        font-size: 22px;
        position: relative;
        margin-bottom: 5px;
        right: 0;
        margin-top: auto;
    }
    .products-list .price-box .price-group{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5px;
    }
    .products-list .price-box .fromprice {
        font-size: 10px;
        position: absolute;
        line-height: 10px;
        top: -2px;
    }
    .products-list .price-box .gbp-price {
        display: flex;
        justify-content: center;
    }
    .products-list .price-box .gbp-price .gbp-price-value {
       display: block;
       font-weight: bold;
    }
    .products-list .price-box .gbp-price .metre-label {
        font-size: 10px;
        position: relative;
        line-height: 30px;
        margin-left: 5px;
        display: flex;
        align-items: end;
    }
    .products-list .freepricebuffer {
        position: relative;
        text-align: center;
        right: unset;
        font-size: 28px;
        margin-top: auto;
    }
    .products-list .price-box .converted-price {
        position: relative;
        top: unset;
        text-align: center;
        line-height: 10px;
        margin-top: 10px;
        font-size: 11px;
        font-style: italic;
        color: #7f7f7f;
    }
    .products-list  .price-box .fat-q-price {
        position: relative;
        display: flex;
        justify-content: center;
    }
    .products-list  .price-box .fat-q-price .fat-q-price-value {
        font-size: 22px;
        display: block;
        font-weight: bold;
    }
    .products-list  .price-box .fat-q-price .fat-q-label {
        position: relative;
        font-size: 10px;
        line-height: 30px;
        margin-left: 5px; 
        display: flex;
        align-items: end;
    }
    .products-list .price-box .sale-price {
        color: #7f7f7f;
        text-decoration: line-through;
        font-size: 22px;
        margin-right: 10px;
    }
    .products-list .price-box .sale-price .title-sale {
        font-size: 10px;
        font-weight: bold;
    }
    .products-list .price-box .sale-price .was-price {
        font-size: 10px;
    }
    .products-list .morecontainer {
        font-size: 8px;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        right: unset;
        bottom: unset;
    }
    .products-list .morecontainer .link-more,
    .products-list .morecontainer .link-more:visited {
        padding: 9px 5px;
        font-size: 13px;
        font-weight: 400 !important;
        text-transform: capitalize;
        background: #bedede;
    }
    .products-list .desc {
        font-size: 10px;
        position:relative;
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }
    .products-list .desc p {
        margin: 0;
    }
    .products-list .desc span {
        padding: 0 5px;
        margin: 0 5px;
    }
    .products-list .freecontainer {
        display: flex;
        flex-direction: column;
    }
    .products-list .freecontainer span {
        width: 100%;
        text-align: center;
        padding: 5px 5px 0px 5px;
        box-sizing: border-box;
    }
    .products-list .freecontainer span a {
        background: #bedede;
        color: #191919;
        width: 100%;
        display: block;
        box-sizing: border-box;
        padding: 9px 5px;
        text-decoration: none;
        border-radius: 3px;
        font-size: 13px;
    }
    .products-list .freecontainer .freedownload a {
        background: #008849;
        color: white;
        width: 100%;
        display: block;
        box-sizing: border-box;
        padding: 9px 5px;
        text-decoration: none;
        border-radius: 3px;
        font-size: 13px;
    }
    .products-list .freecontainer span a:hover {
        background: #f3afbc;
    }
    .toolbar {
        display: none;
        height: 48px;
        font-weight: 400;
        text-transform: capitalize;
        background: #efefef;
        border-bottom: 1px solid #d6d6d6;
        border-top: 1px solid #d6d6d6;
        box-sizing: border-box;
    }
    .toolbar .prettydropdown .end {
        width: 26px;
        height: 26px;
    }
    .toolbar .sort-by {
        font-size: 11px;
        padding: 8px 0;
        width: 35%;
        height: 48px;
        position: relative;
        text-align: center;
        box-sizing: border-box;
        float: left;
        line-height: 26px;
    }
    .toolbar .sort-by select {
        height: 26px;
        margin: 0;
        width: 100%;
    }
    .toolbar .sort-by .selector {
        width: unset !important;
    }
    .toolbar .sort-by .selector span {
        width: 88px !important;
        text-align: left;
    }
    .toolbar .limiter {
        font-size: 11px;
        line-height: 26px;
        font-weight: unset;
        position: absolute;
        width: 70px;
        height: 48px;
        display: flex;
        left: 51%;
        transform: translate(-50%, 0);
        align-items: center;
    }
    .toolbar .limiter label {
        position: absolute;
        right: 100%;
        top: 0px;
        transform: translate(2px, 11px);
    }
    .toolbar .limiter select {
        height: 26px;
        width: 100%;
        text-align: center;
    }
    .toolbar .limiter .selector, .toolbar .limiter .selector span {
        width: 46px !important;
    }
    .toolbar .limiter .prettydropdown {
        width: 100% !important;
        min-width: unset;
    }
    .toolbar .pages .prettydropdown ul ,
    .toolbar .limiter .prettydropdown ul ,
    .toolbar .sort-by .prettydropdown ul  {
        max-height: 26px !important;
    }
    .toolbar .pages .prettydropdown ul li,
    .toolbar .limiter .prettydropdown ul li,
    .toolbar .sort-by .prettydropdown ul li {
        width: 100% !important;
        height: 26px !important;
        line-height: 24px !important;
        min-width: unset;
        padding: 0 13px 0 5px;
        text-transform: none;
    }
    .toolbar .onepage {
        text-align: end;
        line-height: 48px;
        padding: 0 5px;
        box-sizing: border-box;
        text-transform: none;
    }
    .toolbar .pages {
        padding-top: 8px;
        padding-right: 5px;
    }
    
    .toolbar .pages label {
        font-weight: unset;
    }
    
    .toolbar .pages select {
        padding: 0 15px 0 0;
    }
    .toolbar-bottom .toolbar {
        display: block;
        background: #efefef;
        border-bottom: 1px solid #d6d6d6;
        border-top: 1px solid #d6d6d6;
    }
    .toolbar-bottom .toolbar .pager {
        display: block;
        padding: 0;
    }
    .toolbar-bottom .toolbar .onepage {
        text-align: center;
    }
    .toolbar-bottom .pages {
        border: none;
        display: flex;
        justify-content: center;
    }
    .toolbar-bottom .pages .prettydropdown ul {
        overflow: hidden;
    }
    .toolbar-bottom .toolbar .pages label {
        position: relative;
        top: unset;
        right: unset;
        padding-right: 5px;
    }
    #uniform-page-selector {
        width: 70px !important;
        float: left;
    }
    #uniform-page-selector span {
        width: 72px !important;
    }
    .toolbar .pages .changepagebutton {
        height: 22px;
        width: 22px;
        border: 1px solid #d6d6d6;
        float: left;
        margin: 4px 0px 5px 3px;
        border-radius: 3px;
        display: block;
    }
    .toolbar .pages .changepagebutton .pagebutton {
        position: relative;
        height: 26px;
    }
    .toolbar .pages .changepagebutton .pagebutton::before {
        position: absolute;
        top: 50%;
        right: 50%;
        height: 10px;
        border: 5px solid transparent;
        box-sizing: border-box;
        content: '';
        display: block;
        margin: auto;
    }
    .toolbar .pages .changepagebutton .pagebutton.next::before {
        transform: translate(9px,-6px);
        border-left-color: #6f6f6f;
    }
    
    .toolbar .pages .changepagebutton .pagebutton.prev::before {
        transform: translate(2px,-6px);
        border-right-color: #6f6f6f;
    }
    .patterns-grid .pattern-item {
        width: 50%;
        height: unset;
    }
    .patterns-grid .pattern-item .pattern-item-content .desc p {
        font-size: 9px;
    }
    .patterns-grid .pattern-item .pattern-item-content .price-box {
        font-size: 22px;
    }
    .breadcrumb {
        width: 100%;
        display: block;
        background: #efefef;
        border-bottom: 1px solid #d6d6d6;
        border-top: 1px solid #d6d6d6;
        padding: 9px 5px;
        box-sizing: border-box;
    }
    .breadcrumb a {
        color: #191919;
        text-decoration: none;
        padding: 0 10px;
        font-size: 13px;
    }
    .product-view {
        padding: 0;
    }
    .product-view .product-name {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        margin-top: 10px;
    }
    .product-view .product-name h1 {
        font-size: 16px;
        margin: 0 0 10px 0;
    }
    .product-view .product-img-box span {
        display: none;
    }
    .product-view .product-img-box .savingpercentgroup {
        position: absolute;
        right: 30px;
        top: 20px;
        background: #fddc03;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        padding: 3px;
        box-sizing: border-box;
        transform: rotate(10deg);
        z-index: 10;
    }
    .product-view .product-img-box .savingpercentgroup .savetext {
        font-size: 9px;
        display: block;
    }
    .product-view .product-img-box .savingpercentgroup .percentage {
        font-size: 14px;
        font-weight: bold;
        line-height: 12px;
        display: block;
    }
    .product-view .product-img-box .release-wrapper {
        margin: 0;
    }
    .product-view .product-img-box .new-icon-image {
        width: 50px !important;
        height: 50px !important;
        left: 10px;
    }
    .product-view .saleendbox {
        background: #f0607d;
        color: white;
        padding: 5px 26px;
        margin: 0 10px;
        box-sizing: border-box;
        border-radius: 3px;
        text-align: center;
        font-weight: bold;
        font-size: 12px;
        line-height: 15px;
    }
    .product-view .listnosigned,
    .product-view .add-to-list-button {
        text-align: center;
        width: 40px;
        height: auto;
        display: block;
        position: absolute;
        bottom: unset;
        left: 10px;
        font-size: 9px;
    }
    .product-view .product-shop .add-to-box .add-to-list {
        bottom: unset;
        top: 5px;
    }
    .product-view .product-shop .add-to-box .add-to-list.fabric,
    .product-view .listnosigned.fabric {
        top: -25px;
    }
    .product-view .product-shop .add-to-box .add-to-list .add-to-list-button {
        bottom: unset;
        top: 0;
        cursor: pointer;  
    }
    .product-view .product-shop .downloadproductlink {
        width: 50%;
        box-sizing: border-box;
        background-color: #bedede;
        padding: 7px 7px 7px 30px;
        border-radius: 3px;
    }
    .product-view .listnosigned a,
    .product-view .add-to-list-button a {
        line-height: 9px;
    }
    .product-view .add-to-list {
        padding: 0;
        background: unset;
        margin: 0;
        position: absolute;
        width: 43px;
        top: 20px;
    }

    .product-view .add-to-list-button img {
        width: 100%;
    }
    .product-view .add-to-list-button span {
        position: absolute;
        font-size: 11px;
        font-weight: bold;
        width: 43px;
        line-height: 11px;
        left: 0;
        color: white;
        top: 8px;
        text-align: center;
    }
    .product-view .add-to-list .list-group {
        background: white;
        z-index: 10;
        position: absolute;
        top: 36px;
        width: 100%;
        border: solid 1px #d6d6d6;
        box-sizing: border-box;
        display: none;
    }
    .product-view .add-to-list .list-group .list-item {
        padding: 5px;
        position: relative;
        display: block;
        border-bottom: dashed 1px #d6d6d6;
        cursor: pointer;
    }
    .product-view .add-to-list .list-group .list-item:hover {
        background: #ffeeff
    }
    .product-view .add-to-list .list-group .list-item h2 {
        color: #393939;
    }
    .product-view .add-to-list .list-group .new-wishlist {
        background: #99cccc;
        padding: 10px;
        border: 0;
        text-transform: uppercase;
        color: #393939 !important;
        font-weight: bold;
        width: 100%;
        display: block;
        box-sizing: border-box;
        text-decoration: none;
        text-align: center;
        font-size: 12px;
    }
    .product-view .add-to-list .list-group .close-add-wishlist{
        padding: 10px;
        background: #efefef;
        border: 0;
        text-transform: uppercase;
        color: #393939 !important;
        font-weight: bold;
        width: 100%;
        display: block;
        box-sizing: border-box;
        text-decoration: none;
        text-align: center;
        font-size: 12px;
        cursor: pointer;
    }
    .multiaddgroup {
        display: none;
        margin-bottom: 10px;
    }
    .multiaddgroup.show {
        display: flex;
        justify-content: end;
        width: 100%;
    }
    .multiaddgroup .multiaddbuttons {
        width: 50%;
    }
    .multiaddgroup .multiaddbuttons .multiaddbutton{
        width: 100%;
        min-width: unset;
        border-radius: 3px;
        text-transform: none;
    }
    .multiaddgroup .wishlistloginmessage {
        width: 100%;
        
    }
    .multiaddgroup .wishlistloginmessage a {
        border-radius: 3px;
        background: #bedede;
    }
    
    .col1-layout .product-view .product-shop {
        width: 100% !important;
        height: unset;
        padding: 0 5px;
        min-height: 110px;
        box-sizing: border-box;
    }
    .product-view .product-info-table {
        color: #191919;
    }

    .product-view .product-shop .price-box {
        font-size: 26px;
        right: 5px;
        width: 100%;
        
    }
    .product-view .product-shop .price-box .fat-q-price {
        padding: 10px;
    }
    .product-view .product-shop .price-box .price-group {
        display: flex;
        justify-content: right;
        margin-top: 5px;
        padding-right: 10px;
    }
    .product-view .product-shop .price-box .converted-price {
        position: unset;
        padding-right: 10px;
        font-size: 12px;
        font-style: italic;
        color: #7f7f7f;
    }
    .product-view .product-shop .price-box .sale-price {
        color: #7f7f7f;
        text-decoration: line-through;
        font-size: 26px;
        font-weight: 400;
        margin: 0;
        background: none;
        width: unset;
        padding: 0;
    }
    .product-view .product-shop .price-box .sale-price .title-sale {
        font-size: 10px;
        font-weight: bold;
    }
    .product-view .product-shop .dyelotdropdowncontainer .dropdownlabel .what-is-dye {
        color: #50a0a0;
        text-decoration: none;
        padding: 0 10px;
    }
    .product-view .dropdowncontainer .selector {
        max-width: 100%;
    }
    .product-view .dropdowncontainer .selector span {
        width: 100% !important;
    }

    .product-view .product-shop .instockmessage,
    .product-view .product-shop .outofstockmessage {
        top: 40px;
        right: 0;
        padding: 10px;
    }
    .product-view .product-shop .instockmessage {
        color: #008849;
        width: 25%;
        float: right;
    }

    .product-view .product-shop .add-to-box {
        padding: 7px 0;
        margin: 0;
        position: relative;
        width: 50%;
        float: right;
        min-height: 40px;
    }

    

    .product-view .product-shop .add-to-box .add-to-cart .qtyboxcontainer {
        height: 39px;
        width: calc(100% - 60px);
        position: relative;
        right: unset;
        text-align: center;
        float: right;
        box-sizing: border-box;
        padding: 0px;
    }
    .product-view .product-shop .add-to-box .add-to-cart .qtyboxcontainer .minus {
        width: 35px;
        height: 35px;
        position: absolute;
        left: 0;
        line-height: 35px;
        border: 1px solid #d6d6d6;
        border-radius: 3px 0 0 3px;
        background: #efefef;
        font-size: 20px;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .product-view .product-shop .add-to-box .add-to-cart .qtyboxcontainer .qty {
        width: calc(100% - 81px) !important;
        text-align: center;
        padding: 0 !important;
        margin: 0;
        position: absolute;
        left: 35px;
        height: 35px;
        border: 1px solid #d6d6d6;;
        color: #191919;
        font-size: 20px;
        font-weight: bold;
    }
    .product-view .product-shop .add-to-box .add-to-cart .qtyboxcontainer .qty::-webkit-outer-spin-button,
    .product-view .product-shop .add-to-box .add-to-cart .qtyboxcontainer .qty::-webkit-inner-spin-button
     {
        -webkit-appearance: none;
        margin: 0;
    }
    .product-view .product-shop .add-to-box .add-to-cart .qtyboxcontainer input[type=number]{
        -moz-appearance: textfield;
        -webkit-border-radius: 0;
    }

    .lds-ring {
        display: none;
        position: relative;
        width: 48px;
        height: 48px;
    }
    .lds-ring.adding {
        display: inline-block;
    }
    .lds-ring div {
        box-sizing: border-box;
        display: block;
        position: absolute;
        width: 25px;
        height: 25px;
        margin: 8px;
        border: 3px solid #fff;
        border-radius: 50%;
        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        border-color: #fff transparent transparent transparent;
    }
    .lds-ring div:nth-child(1) {
        animation-delay: -0.45s;
    }
    .lds-ring div:nth-child(2) {
        animation-delay: -0.3s;
    }
    .lds-ring div:nth-child(3) {
        animation-delay: -0.15s;
    }
    @keyframes lds-ring {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    #addedpopup,
    #notaddedpopup {
        display: none;
        position: fixed;
        z-index: 100;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    #addedpopup .addedmask,
    #notaddedpopup .notaddedmask {
        display: block;
        position: fixed;
        z-index: 100;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: #191919;
        opacity: 0.4;
        cursor: pointer;
    }
    #addedpopup .addedbox,
    #notaddedpopup .notaddedbox {
        background: white;
        width: 100%;
        max-width: 900px;
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 10px;
        box-sizing: border-box;
        z-index: 100;
    }
    #addedpopup .addedbox .addedmessage,
    #notaddedpopup .notaddedbox .notaddedmessage {
        font-size: 15px;
        font-weight: bold;
    }
    #addedpopup .addedbox .viewbasket {
        max-width: 230px;
        margin: auto;
    }
    #addedpopup .addedbox .viewbasket a {
        background: #008849;
        width: 100%;
        display: block;
        padding: 5px;
        color: white;
        text-decoration: none;
        font-size: 14px;
        font-weight: bold;
        line-height: 30px;
    }
    #addedpopup .addedbox .addedclose,
    #notaddedpopup .notaddedbox .notaddedclose {
        width: 48px;
        height: 48px;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
    }
    #addedpopup .addedbox .addedclose:after,
    #addedpopup .addedbox .addedclose:before,
    #notaddedpopup .notaddedbox .notaddedclose:after,
    #notaddedpopup .notaddedbox .notaddedclose:before {
        background-color: #191919;
        border-radius: 2px;
        content: '';
        display: block;
        width: 2px;
        height: 25px;
        margin: 2px 0;
        transition: all .2s ease-in-out;
        opacity: 1;
        position: absolute;
        top: 10px;
        left: 23px;
    }
    #addedpopup .addedbox .addedclose:before,
    #notaddedpopup .notaddedbox .notaddedclose:before {
        transform: translate(0,6px) rotate(-45deg);
    }
    #addedpopup .addedbox .addedclose:after,
    #notaddedpopup .notaddedbox .notaddedclose:after {
        transform: translate(0,6px) rotate(45deg);
    }
    
    .product-view .product-shop .add-to-box .add-to-cart .qtyboxcontainer .plus {
        width: 35px;
        height: 35px;
        position: absolute;
        right: 10px;
        line-height: 35px;
        border: 1px solid #d6d6d6;
        border-radius: 0 3px 3px 0;
        background: #efefef;
        font-size: 20px;
        cursor: pointer;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .product-view .product-shop .add-to-box .add-to-cart .addtobasketbuttoncontainer {
        width: calc(100% - 10px);
        text-align: center;
        padding: 10px 5px 0;
        box-sizing: border-box;
        margin: 5px 5px 0px;
    }
    .add-to-box .add-to-cart #addToCartButton {
        width: 100%;
        float: unset;
        background: #008849;
        text-transform: capitalize;
        overflow: hidden;
    }
    .add-to-box .add-to-cart #addToCartButton span span {
        color: white !important;
        line-height: 30px;
    }
    .multiaddgroup .multiaddbutton {
        background: #008849;
        color: white;
        border-radius: 3px;
    }
    .multiaddgroup .multiaddbutton:hover, .multiaddtobasketbox .multiaddbutton:hover {
        background: #008849;
        color: white;
    }
    #addingmultitocart {
        background: #008849;
        color: white;
        border-radius: 3px;
        text-transform: none;
    }
    .multiaddtobasketbox {
        width: 100%;
        max-width: 1030px;
        border: 1px solid #d6d6d6;
        top: 56px;
        left: 0;
        transform: translate(0, 0);
        z-index: 11;
    }
    .multibackground {
        background: black;
        width: 100%;
        display: none;
        height: 100%;
        position: fixed;
        left: 0;
        top: 0;
        opacity: .5;
        z-index: 11;
    }
    .multiaddtobasketbox h2,
    .multiaddtowishbox h2 {
        color: #191919;
        font-size: 16px;
    }
    .multiaddtobasketbox .addmultilist {
        background: white;
        border: 1px solid #d6d6d6;
        max-height: 350px;
        padding: 0;
        margin: 10px 0;
    }
    .multiaddtobasketbox .addmultilist .productli {
        min-height: unset;
        border: none;
        border-bottom: 1px solid #d6d6d6;
        margin: 0;
        width: 100%;
        min-height: 90px;
        float: left;
    }
    .multiaddtobasketbox .addmultilist .productli img {
        float: left;
        width: 75px;
        margin: 0;
        padding: 0 5px 5px 0;
    }
    .multiaddtobasketbox .addmultilist .productli h2 {
        float: left;
        font-size: 12px;
        font-weight: bold;
        width: 75%;
        margin: 0;
    }
    .multiaddtobasketbox .addmultilist .productli .stockmessage {
        position: absolute;
        right: 15px;
        top: 40px;
        font-size: 1.2em;
        line-height: 1em;
        font-weight: bold;
    }
    .multiaddtobasketbox .addmultilist .productli .qtypricegroup {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: stretch;
        float: right;
    }

    .multiaddtobasketbox .addmultilist .productli .qtypricegroup .qty {
        width: 33%;
        position: relative;
        display: flex;
    }
    .multiaddtobasketbox .addmultilist .productli .qtypricegroup .qty input {
        height: 40px;
        width: 40px!important;
        box-sizing: border-box;
        text-align: center;
        background: white;
        border: 1px solid #d6d6d6;
        font-size: 20px;
        color: #191919;
    }
    .multiaddtobasketbox .addmultilist .productli .qtypricegroup .qty input::-webkit-outer-spin-button,
    .multiaddtobasketbox .addmultilist .productli .qtypricegroup .qty input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .multiaddtobasketbox .addmultilist .productli .qtypricegroup .qty input[type=number] {
        -moz-appearance: textfield;
        -webkit-border-radius: 0
    }
    .multiaddtobasketbox .addmultilist .productli .qtypricegroup .qty .basketchangeqty {
        height: 40px;
        line-height: 38px;
        width: 40px;
        text-align: center;
        background: #efefef;
        border: 1px solid #d6d6d6;
        box-sizing: border-box;
        font-size: 20px;
        user-select: none; 
    }
    .multiaddtobasketbox .addmultilist .productli .qtypricegroup .qty .basketchangeqty.minus {
        border-radius: 3px 0 0 3px;
    }
    .multiaddtobasketbox .addmultilist .productli .qtypricegroup .qty .basketchangeqty.plus {
        border-radius: 0 3px 3px 0;
    }
    .multiaddtobasketbox .addmultilist .productli .qtypricegroup .unitprice {
        font-size: 16px;
        font-weight: bold;
        padding-right: 5px;
        box-sizing: border-box;
        width: 33%;
        text-align: right;
    }

    .multiaddtobasketbox .addmultilist .productli .remove-addlist-item-button {
        background: none;
        width: 30px;
        position: absolute;
        right: 10px;
        top: 0px;
    }
    .multiaddtobasketbox .addmultilist .productli .remove-addlist-item-button img {
        width: 100%;
    }

    .addedcartmessage, .addingcartloading, .gettingcartloading {
        display: none;
        position: fixed;
        left: 50%;
        background: white;
        border: 1px solid #99cccc;
        width: 200px;
        text-align: center;
        padding: 10px;
        transform: translate(-50%, 0%);
        font-weight: bold;
        z-index: 11;
    }

    .multiaddtowishbox {
        width: 100%;
        max-width: 1030px;
        border: 1px solid #d6d6d6;
        top: 56px;
        left: 0;
        transform: translate(0, 0);
        z-index: 11;
    }
    .multiaddtowishbox .multiwishlist {
        background: white;
        max-height: 350px;
        padding: 0;
        margin: 10px 0;
    }
    .multiaddtowishbox .multiwishlist .list-item {
        border: none;
        background: #bedede;
        min-height: unset;
        text-align: center;
        border-radius: 5px;
    }
    .multiaddtowishbox .multiwishlist .list-item:hover {
        background: #64b0b0;
    }
    .multiaddtowishbox .multiwishlist .list-item:hover h2 {
        color: white;
    }
    .multiaddtowishbox .createmultiwishlistgroup #createwishlisttext {
        padding: 0 5px;
        width: 100%;
        box-sizing: border-box;
    }
    .multiaddtowishbox .createmultiwishlistgroup #createmultiwishlistbutton,
    .multiaddtowishbox .createmultiwishlistgroup #createmultiwishlistbutton:hover {
        color: white;
        background: #008849;
        border-radius: 5px;
        width: 100%;
    }

    .product-view .product-shop .colourdropdowncontainer .dropdownlabel, .product-view .product-shop .dyelotdropdowncontainer .dropdownlabel, .product-view .product-shop .qtyboxcontainer .qtyboxlabel, .product-view .product-shop .diameterdropdowncontainer .dropdownlabel, .product-view .product-shop .lengthdropdowncontainer .dropdownlabel, .product-view .product-shop .threaddropdowncontainer .dropdownlabel, .zipdropdowncontainer .dropdownlabel, .ribdropdowncontainer .dropdownlabel, .feltdropdowncontainer .dropdownlabel, .fabricsizedropdowncontainer .dropdownlabel, .fabricqtydropdowncontainer .dropdownlabel, .fabricfatqtydropdowncontainer .dropdownlabel {
        float: unset;
        padding-left: 10px;
    }
    .product-view .product-shop .dyelotdropdowncontainer .dropdownlabel {
        display: flex;
        justify-content: space-between;
        padding: 0;
    }
    .product-view .product-shop .colourdropdowncontainer,
    .product-view .product-shop .diameterdropdowncontainer,
    .product-view .product-shop .feltdropdowncontainer {
        position: absolute;
        top: 55px;
        width: 50%;
        box-sizing: border-box;
        padding: 0 10px 0 5px;
    }
    .product-view .product-shop .dyelotdropdowncontainer,
    .product-view .product-shop .fabricqtydropdowncontainer {
        position: absolute;
        bottom: 9px;
        width: 50%;
        box-sizing: border-box;
        padding: 0 10px 0 5px;
    }
    .product-view .product-shop .colourdropdowncontainer .dropdowncontainer,
    .product-view .product-shop .dyelotdropdowncontainer .dropdowncontainer {
        width: 100%;
        display: block;
    }
    .product-view .product-shop .colourdropdowncontainer .dropdowncontainer #subprod_colourdropdown, .dropdowncontainer #subprod_diameterdropdown, .dropdowncontainer #subprod_lengthdropdown, .dropdowncontainer #subprod_threaddropdown, .dropdowncontainer #subprod_zipdropdown, .dropdowncontainer #subprod_ribdropdown, .dropdowncontainer #subprod_feltdropdown, .dropdowncontainer #subprod_fabricsdropdown, .dropdowncontainer #subprod_fabricsizedropdown, .dropdowncontainer #subprod_fabricqtydropdown, .dropdowncontainer #subprod_fabricfatqtydropdown, .product-view .product-shop .dyelotdropdowncontainer .dropdowncontainer #subprod_dyelotdropdown {
        width: 100%;
        line-height: 25px;
    }
    .product-view .product-shop .colourdropdowncontainer .prettydropdown,
    .product-view .product-shop .dyelotdropdowncontainer .prettydropdown,
    .product-view .product-shop .feltdropdowncontainer .prettydropdown,
    .product-view .product-shop .fabricqtydropdowncontainer .prettydropdown {
        width: 100% !important;
    }
    .product-view .product-shop .colourdropdowncontainer .prettydropdown ul li,
    .product-view .product-shop .dyelotdropdowncontainer .prettydropdown ul li,
    .product-view .product-shop .feltdropdowncontainer .prettydropdown ul li,
    .product-view .product-shop .fabricqtydropdowncontainer .prettydropdown ul li {
        width: 100% !important;
        padding: 0 8px;
    }
    #uniform-subprod_fabricsdropdown,
    #uniform-subprod_fabricqtydropdown {
        width: 100% !important;
        max-width: 208px;
    }
    #uniform-subprod_fabricsdropdown span,
    #uniform-subprod_fabricqtydropdown span {
        width: 100% !important;
        max-width: 208px;
    }
    #uniform-amount_dropdown,
    #uniform-amount_dropdown span {
        width: 100% !important;
        max-width: 65px;
    }
    .product-view .product-img-box {
        width: 100%;
        min-height: unset;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .product-view .product-img-box .product-image {
        border: 1px solid #d6d6d6;
        border-radius: 5px;
        overflow: hidden;
    }
    .product-view .product-img-box img {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        
    }
    .product-view .image-swiper {
        overflow: hidden;
    }
    .product-view .image-swiper .swiper-slide img {
        cursor: zoom-in;
    }
    .product-view .image-swiper .swiper-button-next, .product-view .image-swiper .swiper-button-prev {
        background-image: none;
        width: 30px;
        opacity: 0.5;
        height: auto;
        transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        margin: 0;
        height: 30px;
        top: 50%;
        background: white;
        border-radius: 50%;
        border: 1px solid #64b0b0;
    }
    .product-view .image-swiper .swiper-button-next:hover, .product-view .image-swiper .swiper-button-prev:hover {
        opacity: 1;
    }
    .product-view .image-swiper .swiper-button-next {
        right: 20px;
    }
    .product-view .image-swiper .swiper-button-prev {
        left: 20px;
    }
    .product-view .swiper-lightbox  .swiper-button-next {
        right: 15px;
    }
    .product-view .swiper-lightbox  .swiper-button-prev {
        left: 15px;
    }
    .product-view .image-swiper .swiper-button-disabled {
        opacity: 0;
    }

    .product-view .swiper-lightbox  .swiper-button-next, .product-view .swiper-lightbox  .swiper-button-prev {
        background-image: none;
        width: 30px;
        opacity: 0;
        height: auto;
        transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        margin: 0;
        height: 30px;
        top: 50%;
        background: white;
        border-radius: 50%;
        border: 1px solid #64b0b0;
    }
    .product-view .swiper-lightbox:hover  .swiper-button-next, .product-view .swiper-lightbox:hover  .swiper-button-prev {
        opacity: 0.5;
    }
    .product-view .swiper-lightbox .swiper-button-next:hover, .product-view .swiper-lightbox  .swiper-button-prev:hover {
        opacity: 1;
    }
    .product-view .swiper-lightbox .swiper-button img {
        width: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        padding: 0;
        margin: 0;
    }
    .image-thumb-swiper {
        display: none;
    }
    #lightbox {
        z-index: 11;
    }
    #lightbox-close {
        position: absolute;
        top: 0;
        right: 0;
        box-sizing: border-box;
        width: 50px;
        height: 50px;
    }
    #lightbox-close img {
        margin: 0;
    }
    
    .swiper-lightbox, .swiper-lightboxsingle {
        width: 100%;
        overflow: hidden;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        position: absolute;
    }
    .product-view .image-swiper {
        border: 1px solid #d6d6d6;
        border-radius: 5px;
        overflow: hidden;
    }
    .product-view .image-swiper .swiper-wrapper {
        display: flex;
        align-items: center;
    }
    .product-view .image-thumb-swiper {
        margin: 5px 0;
    }
    .product-view .image-thumb-swiper .swiper-wrapper {
        display: flex;
        align-items: stretch;
    }
    .product-view .image-thumb-swiper .swiper-wrapper .swiper-slide {
        height: unset;
        border: 1px solid #d6d6d6;
        border-radius: 3px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
    }
    
    .product-view .image-swiper .swiper-button-next img, .product-view .image-swiper .swiper-button-prev img{
        width: 50%;
        top: 50%;
        transform: translate(-50%, -12px);
        position: absolute;
        padding: 0;
        margin: 0;
    }
    .product-view .product-info-table {
        display: none;
    }
    .product-view .product-shop .email-alert {
        width: 100%;
        padding: 10px 5px 5px;
        margin: 6px 0;
        box-sizing: border-box;
        position: relative;
        display: flex;
    }
    .product-view .product-shop .email-alert .email-form {
        position: relative;
        width: 100%;
    }
    .product-view .product-shop .email-alert .email-form input {
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 5px;
        border-radius: 3px;
        padding: 8px;
    }
    .product-view .product-shop .email-alert .email-form strong {
        position: relative;
        padding: 5px 0;
        display: block;
    }
    .product-view .product-shop .email-alert .btn-cart {
        margin: 0;
        width: 100%;
        text-transform: capitalize;
        font-weight: bold;
        background: #bedede;
    }
    .product-view .product-shop .email-alert .btn-cart span {
        padding: 2px;
        height: unset;
    }
    .product-view .product-shop .email-alert .btn-cart span span {
        font-size: 18px;
        line-height: 22px;
        font-weight: 400;
    }
    .add-to-cart .addtobasketbuttoncontainer .freedownloadbutton {
        background: #008849;
        color: white !important;
        margin-top: 30px;
    }
    .product-tabs {
        display: none;
        background: #efefef;
        border-top: 1px solid #d6d6d6;
        border-bottom: 1px solid #d6d6d6;
        padding: 5px 0px;
    }
    .accordion-tab {
        display: block;
        padding: 10px 15px 10px 40px;
        background: #efefef;
        position: relative;
        border-top: 1px solid #d6d6d6;
        border-bottom: 1px solid #d6d6d6;
        font-size: 13px;
    }
    .accordion-tab .tabarrow {
        position: absolute;
        left: 0;
        top: 1px;
        bottom: 0;
        width: 40px;
        transition: all ease-in-out .2s;
    }
    .accordion-tab.expanded .tabarrow {
        transform: rotate(180deg);
    }
    .accordion-tab .tabarrow:before,
    .accordion-tab .tabarrow:after {
        background-color: #191919;
        border-radius: 2px;
        content: '';
        display: block;
        width: 3px;
        height: 10px;
    }
    .accordion-tab .tabarrow:after {
        transform: translate(-1px,-50%) rotate(-45deg);
        position: absolute;
        top: 50%;
        right: 50%;
    }
    .accordion-tab .tabarrow:before {
        transform: translate(1px,-50%) rotate(45deg);
        position: absolute;
        top: 50%;
        left: 50%;
    }
    .product-tabs li {
        margin: 0;
        width: 100%;
        border-left: 1px solid #d6d6d6;
        border-radius: 0;
        padding: 0 0 0 20px;
        font-weight: 400;
        position: relative;
        background: #efefef;
    }
    .product-tabs li.first{
        border: none;
        margin-left: 10px;
    }
    .product-tabs li a {
        color: #313131;
    }
    .product-tabs li .tabarrow {
        position: absolute;
        left: 2px;
        top: -2px;
        width: 25px;
        transition: all ease-in-out .2s;
    }
    .product-tabs li .tabarrow:before,
    .product-tabs li .tabarrow:after {
        background-color: #191919;
        border-radius: 2px;
        content: '';
        display: block;
        width: 2px;
        height: 10px;
        margin: 2px 0;
    }
    .product-tabs li .tabarrow:after {
        transform: translate(16px,-6px) rotate(45deg)
    }
    .product-tabs li .tabarrow:before {
        transform: translate(10px,6px) rotate(-45deg)
    }
    .product-tabs li a:hover {
        background: unset;
        cursor: default;
    }
    .product-tabs li.active {
        font-weight: bold;
        background-color: #efefef;
    }
    .product-tabs li.active .tabarrow  {
        transform: rotate(180deg);
    }
    .product-tabs li.active:hover {
        background: #efefef;
    }
    .product-tabs li.active a {
        color: #313131;
    }
    .product-collateral {
        margin: 0;
    }
    .product-tabs-content {
        padding: 2px 10px;
        border: none;
    }
    #product_tabs_colourselector_contents {
        padding: 0;
    }
    .product-gift-voucher #product_accordion-tab_attributes {
        display: none;
    }
    .product-gift-voucher #product_tabs_attributes_contents {
        display: none !important;
    }
    .more-colours .crosssellswrapper {
        background: #efefef;
        border-top: 1px solid #d6d6d6;
        border-bottom: 1px solid #d6d6d6;
        padding: 7px 5px 5px 15px;
    }
    .more-colours {
        padding: 2px 1px;
        position: relative;
    }
    .more-colours .sort-bar,
    .more-thread-shades .sort-bar {
        display: inline-block;
        width: 100%;
        padding: 0 5px;
        box-sizing: border-box;
        min-height: 30px;
    }
    .more-colours .shadecardDisplaySelectGroup {
        position: absolute;
        right: 10px;
        top: -37px;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
    }
    .more-colours .shadecardDisplaySelectGroup #uniform-shadecard_display_selector,
    .more-colours .coloursortSelectGroup #uniform-coloursort_selector {
        width: 90px !important;
    }
    .more-colours .shadecardDisplaySelectGroup #uniform-shadecard_display_selector span,
    .more-colours .coloursortSelectGroup #uniform-coloursort_selector span {
        width: 90px !important;
    }
    .more-colours #coloursortlink, .more-colours #shadecodesortlink, .more-thread-shades #coloursortlink, .more-thread-shades #shadecodesortlink {
        padding: 5px;
        background: unset;
        color: #191919;
        font-weight: 400;
        font-size: 12px;
        border: 1px solid #d6d6d6;
    }
    .more-colours #coloursortlink,
    .more-thread-shades #coloursortlink {
        border-radius: 0 3px 3px 0;
    }
    .more-colours #shadecodesortlink,
    .more-thread-shades #shadecodesortlink{
        border-radius: 3px 0 0 3px;
    }

    .more-colours #coloursortlink.active, .more-colours #shadecodesortlink.active, .more-thread-shades #coloursortlink.active, .more-thread-shades #shadecodesortlink.active {
        padding: 5px;
        background: unset;
        color: #191919;
        font-weight: bold;
        font-size: 12px;
        border: 1px solid #d6d6d6;
    }
    .more-colours .sort-label,
    .more-thread-shades .sort-label {
        float: left;
        line-height: 28px;
        padding-right: 5px;
    }
    .coloursortSelectGroup {
        position: absolute;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
    }
    .multiple-selection-container {
        float: right;
        width: 190px;
        display: flex;
        justify-content: end;
        align-items: center;
        flex-wrap: wrap;
    }
    .multiple-selection-container span {
        line-height: 33px;
        padding-right: 5px;
    }
    .more-colours .coloursortbuttonswrapper, .more-thread-shades .coloursortbuttonswrapper {
        height: auto;
        background: unset;
        padding: 0;
        margin: 0;
        display: inline-block;
    }
    .more-colours  .multiselectbutton, .more-thread-shades  .multiselectbutton {
        padding: 5px;
        background: unset;
        color: #191919;
        font-weight: 400;
        text-transform: uppercase;
        font-size: 12px;
        border: 1px solid #d6d6d6;
        float: unset;
        height: 30px;
        border-radius: 3px;
    }
    .more-colours  .multiselectallbutton, .more-thread-shades .multiselectallbutton {
        padding: 5px;
        margin: 0 1px;
        border-radius: 3px;
        text-transform: uppercase;
        background: unset;
        border: 1px solid #d6d6d6;
        color: #191919;
        font-size: 12px;
        font-weight: unset;
        height: 30px;
        margin-bottom: 2px;
    }
    .more-colours ul .multi:hover, .more-colours ul .multiselectlink:hover, .more-thread-shades ul .multi:hover {
        background: unset;
        color: #191919;
    }
    .more-colours ul .multiselectbutton:hover,  .more-colours ul .multiselectlink:hover, .more-thread-shades ul .multiselectbutton:hover {
        background: white;
    }
    .more-colours #coloursortlink:hover, .more-colours #shadecodesortlink:hover, .more-thread-shades #coloursortlink:hover, .more-thread-shades #shadecodesortlink:hover {
        background: #bedede;
    }
    .more-colours ul .multiselectbutton:hover, .more-colours ul .multiselectallbutton:hover, .more-colours ul .multiselectlink:hover, .more-thread-shades ul .multiselectbutton:hover, .more-thread-shades ul .multiselectallbutton:hover {
        background: #bedede;
    }
    .more-colours ul li, .more-needlesizes ul li, .more-relatedneedles ul li, .more-relatedproducts ul li, .more-thread-shades ul li {
        width: 20%;
        padding: 2px;
    }
    .more-colours ul li a, .more-needlesizes ul li a, .more-relatedneedles ul li a, .more-relatedproducts ul li a, .more-thread-shades ul li a {
        border-radius: 3px;
        overflow: hidden;
    }
    .more-colours ul li.circles {
        width: 33.3%;
        padding: 15px;
    }
    .more-colours ul li .multiselectgrp input, .more-thread-shades ul .multiselectgrp input {
        position: absolute;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
    }
    .more-colours ul .more-colours-li.circles .multiselectgrp input {
        top: calc(50% - 13px);
    }
    .more-colours ul .fabric-li {
        width: 33.3% !important;
    }
    .more-colours ul li a .imgcontainer, .more-needlesizes ul li a .imgcontainer, .more-relatedneedles ul li a .imgcontainer, .more-relatedproducts ul li a .imgcontainer, .more-thread-shades ul li a .imgcontainer{
        width: 100%;
        position: relative;
        aspect-ratio: 3/2;
    }
    .more-colours ul li .colourcaption, .more-needlesizes ul li .needlesizecaption, .more-relatedneedles ul li .relatedneedlecaption, .more-relatedproducts ul li .relatedproductcaption, .more-thread-shades ul li .threadshadecaption {
        width: 100%;
        box-sizing: border-box;
        bottom: 0;
        font-size: 5px;
        color: #191919;
        background: #bfbfbf;
        padding: 1px 0 0 2px;
        line-height: 7px;
    }
    .more-colours ul li img, .more-needlesizes ul li img, .more-thread-shades ul li img, .more-relatedneedles ul li img, .more-colours ul li .fabric {
        width: 100%;
        max-width: unset;
        height: auto;
    }
    .more-colours ul, .pack-product-list .pack-ul {
        padding: 0;
    }
    .new-icon-image {
        position: absolute;
        left: 0;
        width: 30px !important;
        height: auto !important;
        top: 0;
    }
    .more-colours ul {
        padding: 0 2px 2px 0px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 1px;
    }
    .more-colours ul li .multiselectgrp, .more-thread-shades ul .multiselectgrp {
        position: absolute;
        top: -3px;
        left: 0px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 5px;
        display: none;
    }
    .more-colours ul li.circles a {
        text-decoration: none;
    }
    .more-colours ul li.circles .imgcontainer {
        aspect-ratio: 1;
        border-radius: 50%;
        position: relative;
    }
    .more-colours ul li.circles .imgcontainer img {
        width: 150%;
        transform: translate(-50%, 0);
        left: 50%;
        position: absolute;
    }
    
    .more-colours ul li.circles .colourcaption {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: none;
        font-size: 12px;
        line-height: 12px;
        padding-top: 10px;
    }
    .more-colours ul li.circles .colourcaption.outofstock {
        background-color: unset !important;
    }
    .more-colours ul li.circles .colourcaption span {
        text-align: center;
        text-decoration: none;
    }
    .more-colours ul li.circles .colourcaption .split {
        display: none;
    }
    .more-colours ul li.circles:hover .imgcontainer img {
        
    }
    .more-colours ul li.circles:hover .colourcaption {
        background: none;
    }
    .more-relatedneedles ul li a {
        position: relative;
        display: block;
    }

    .product-tabs-content table {
        width: 100% ;        
        display: block;
    }

    #customiser-element .ui.container {
        margin: 0!important;
    }
    #customiser-element #colour-picker {
        padding: 0;
    }
    .changeyarnpopup {
        width: 100%;
        top: 0;
        left: 0;
        height: 500px;
    }
    .changeyarnpopup .changeyarnlist {
        height: 390px;
        margin-top: 5px;
    }
    .changeyarnpopup .changeyarnlist .yarngroup {
        width: 50%;
        height: auto;
    }
    .changeyarnpopup .changeyarnlist .yarngroup .imgcontainer img {
        width: 100%;
        height: auto;
    }
    .changeyarnpopup .changeyarnlist .yarngroup .imgcontainer .colourcaption {
        position: relative;
        bottom: 0;
        width: 100%;
    }
    .changeyarnpopup .changeyarnlist .yarngroup .stockmessage {
        position: relative;
        width: 100%;
        display: block;
        right: 0;
        text-align: right;
        padding: 0 5px;
        box-sizing: border-box;
    }
    #yarn-select .yarnattributescontainer .gbp-price {
        position: relative;
    }
    .addtocartyarns ul {
        width: 100%;
    }
    .addtocartyarns ul li {
        margin: 5px;
    }
    .addtocartyarns ul li .productname {
        width: 100%;
    }
    .addtocartyarns ul li .totalyarnprice {
        position: relative;
        padding: 5px;
        top: unset;
        left: unset;
    }
    .customer-account-index .main .col-left, .customer-account-edit .main .col-left, .customer-address-index .main .col-left, .customer-address-form .main .col-left,
    .sales-order-history .main .col-left, .downloadable-customer-products .main .col-left, .giftvoucher-index-index .main .col-left,
    .sales-order-view .main .col-left, .sales-order-invoice .main .col-left, .sales-order-shipment .main .col-left,
    .wool-projects-index-index .main .col-left, .wool-projects-index-edit .main .col-left, .wool-projects-index-mood .main .col-left {
        top: unset;
        display: block;
        margin-top: 78px;
    }
    .mobile-account-links {
        width: 100%;
    }
    .mobile-account-links .account-header {
        background: #efefef;
        width: 100%;
        box-sizing: border-box;
        border-right: none;
        border-left: none;
        padding: 10px 20px;
        display: block;
    }
    .mobile-account-links li {
        color: #191919;
        font-size: 12px;
        padding: 10px 20px;
        border-bottom: 1px solid #d6d6d6!important;
        border-left: 1px solid #d6d6d6!important;
        border-right: 1px solid #d6d6d6!important;
        background: white;
    }
    .mobile-account-links li:first-child {
        border-top: 1px solid #d6d6d6!important;
    }
    .mobile-account-links li a {
        text-decoration: none;
        font-weight: bold !important;
        color: #191919;
        display: block;
    }
    .mobile-account-links li.active {
        color: #191919;
        font-size: 12px;
        padding: 10px 20px;
        border-bottom: 1px solid #d6d6d6!important;
        border-left: 1px solid #d6d6d6!important;
        border-right: 1px solid #d6d6d6!important;
        background: #bedede;
    }
    .mobile-account-links li span {
        font-weight: bold;
    }
    .form-list label {
        color: #191919;
    }
    .form-list a {
        color: #64b0b0;
    }
    .form-list .field {
        float: left;
        width: 100%;
        box-sizing: border-box;
    }
    .form-list input.input-text {
        width: 100%;
        box-sizing: border-box;
    }
    .form-list li.wide input.input-text {
        width: 100%;
    }
    .form-list .input-box {
        display: block;
        clear: both;
        width: 100%;
        box-sizing: border-box;
        padding: 0 10px;
    }
    .form-list li.wide .input-box {
        width: 100%;
    }
    .block-account {
        width: 100%;
        display: none;
    }
    .block-account .block-title strong {
        width: 100%;
        box-sizing: border-box;
        height: 35px;
        border-bottom: 1px solid #d6d6d6;
        border-right: none;
        border-left: none;
        text-transform: capitalize;
        font-weight: unset;
        background: #efefef;
    }
    .block-account .block-content {
        color: #191919;
        padding: 0;
    }
    .block-account .block-content li {
        color: #191919;
        font-size: 12px;
        padding: 10px 20px;
        border-bottom: 1px solid #d6d6d6!important;
        border-left: 1px solid #d6d6d6!important;
        border-right: 1px solid #d6d6d6!important;
        background: white;
    }
    .block-account .block-content li a {
        font-weight: bold !important;
    }
    .block-account .block-content li.current {
        color: #191919;
        font-size: 12px;
        padding: 10px 20px;
        border-bottom: 1px solid #d6d6d6!important;
        border-left: 1px solid #d6d6d6!important;
        border-right: 1px solid #d6d6d6!important;
        background: #bedede;
    }
    .projects-list-wrapper .project-group .project-group-content {
        background: white;
        padding: 5px;
    }
    .projects-list-wrapper .project-group .project-group-content .project-name h2 {
        width: 100%;
        box-sizing: border-box;
    }
    .page-title {
        box-sizing: border-box;
    }
    .page-title .link-print {
        color: white;
        background: #008849;
        text-decoration: none;
        padding: 5px;
        border-radius: 3px;
        display: inline-block;
        margin-top: 30px;
    }
    .buttons-set .back-link {
        background: #bedede;
        padding: 5px;
        margin-bottom: 15px;
        border-radius: 3px;
    }
    .buttons-set .back-link a {
        color: #191919 !important;
        font-size: 12px;
    }
    .my-account {
        margin: 56px 0px 0px;
        padding: 0 10px;
        position: relative;
    }
    .dashboard .page-title {
        padding: 10px !important;
    }
    .dashboard .welcome-msg {
        padding: 10px;
        margin: 0;
    }

    .my-account .data-table {
        width: 100%;
        overflow: scroll;
        display: block;
    }
    .box-account {
        border: none;
    }
    .box-account .box-head a {
        color: #191919;
        background: #bedede;
        text-decoration: none;
        padding: 5px;
        border-radius: 3px;
    }
    .my-account .data-table thead th {
        background: #efefef;
    }
    .my-account .data-table tbody td {
        border-bottom: solid 1px #efefef;
        border-right: solid 1px #efefef;
    }
    .my-account .data-table a {
        color: #191919;
        background: #bedede;
        text-decoration: none;
        padding: 5px;
        border-radius: 3px;
        display: block;
    }
    .my-account .box-info {
        background: #efefef;
    }
    .my-account .box-info .account-button {
        color: #191919;
        background: #bedede;
        text-decoration: none;
        padding: 5px;
        border-radius: 3px;
        display: inline-block;
    }
    .dashboard .box .box-title {
        background: none;
        border-bottom: 1px solid #d6d6d6;
    }
    .my-account-link {
        position: absolute;
        top: 10px;
        right: 10px;
        background: #bedede;
        color: #191919;
        padding: 5px;
        cursor: pointer;
        border-radius: 3px;
    }
    .customer-account-giftcard {
        position: relative;
        margin-top: 56px;
    }
    .my-account .fieldset {
        border: none;
        background: #efefef;
        margin: 0 0 20px 0;
        padding: 10px 20px;
    }
    .my-account .fieldset .legend {
        margin: 0;
        width: 100%;
        background: none;
        color: #191919;
        border: none;
        padding: 5px 0;
    }
    .my-account .limiter .selector {
        width: 45px !important;
    }
    .my-account .limiter .selector span {
        width: 45px !important;
        text-align: start;
    }
    .my-account .buttons-set {
        margin: 0;
        border-top: 1px solid #d6d6d6;
    }
    .back-link a {
        color: #64b0b0;
    }
    .buttons-set button.button {
        background: #008849;  
    }
    .buttons-set button.button span span {
        color: white !important;
        text-transform: capitalize;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    }
    .my-account .title-buttons .button {
        color: white;
        background: #bedede;
        text-transform: capitalize;
    }
    .my-account .title-buttons .button span span {
        color: #191919!important;
    }
    .box-account .col2-set .col-1, .box-account .col2-set .col-2 {
        width: 100%;
    }
    .customer-address-index .addresses-list .col-1, .customer-address-index .addresses-list .col-2 {
        width: 100%;
    }
    .addresses-list li.item {
        background: #efefef;
        border: none;
    }
    .addresses-list li.item .change-button {
        background: #bedede;
        color: #191919;
        text-decoration: none;
        border-radius: 3px;
        padding: 5px;
        display: inline-block;
    }

    .customer-account-giftcard button.button {
        background: #bedede;
        color: #191919;
        text-decoration: none;
        border-radius: 3px;
        padding: 5px;
        margin: 0;
        display: inline-block;
    }
    .customer-account-giftcard button.button span span {
        color: white !important;
    }
    .gift-card {
        padding: 0 10px;
    }
    .gift-card .sub-title {
        color: #7f7f7f;
    }
    .gift-card .form-group .selector {
        width: 60px !important;
        text-align: start;
    }
    .gift-card .form-group .selector span {
        width: 50px !important;
    }
    #giftvoucher_grid a {
        background: #bedede;
        color: #191919;
        text-decoration: none;
        border-radius: 3px;
        padding: 5px;
        display: inline-block;
    }
    .projects-list-wrapper {
        background: #efefef;
        margin-top: 10px;
    }
    .projects-list-wrapper .project-group .project-group-content .project-edit{
        background: #bedede;
        color: #191919;
        text-decoration: none;
        border-radius: 3px;
        display: inline-block;
        text-transform: capitalize;
    }
    .projects-list-wrapper .project-group .project-group-content .project-edit a {
        background: #bedede;
        border-radius: 3px;
        color: #191919;
        text-transform: capitalize;
    }
    .projects-list-wrapper .project-group .project-group-content .project-rename {
        background: #bedede;
        color: #191919;
        text-decoration: none;
        border-radius: 3px;
        display: inline-block;
        text-transform: capitalize;
    }
    .projects-list-wrapper .project-group .project-group-content .project-rename a {
        background: #bedede;
        color: #191919;
        border-radius: 3px;
        text-transform: capitalize;
    }
    .projects-list-wrapper .project-group .project-group-content .project-edit:hover {
        border-radius: 3px;
    }
    .projects-list-wrapper .project-group .project-group-content .project-rename:hover {
        border-radius: 3px;
        text-transform: capitalize;
    }
    .projects-list-wrapper .project-group .project-group-content .project-delete {
        background: #bedede;
        color: #191919;
        text-decoration: none;
        border-radius: 3px;
        display: inline-block;
        text-transform: capitalize;
    }
    .projects-list-wrapper .project-group .project-group-content .project-delete a {
        background: #bedede;
        color: #191919;
        border-radius: 3px;
        text-transform: capitalize;
    }
    .projects-list-wrapper .project-group .project-group-content .project-delete:hover {
        background: #bedede;
        color: #191919;
        text-decoration: none;
        border-radius: 3px;
        display: inline-block;
    }
    .edit-project-group .wishlisttitle {
        width: 75%;
    }
    .edit-project-group .edit-project-namebutton {
        margin-bottom: 5px;
        background: #008849;
        color: white;
        text-decoration: none;
        border-radius: 3px;
        text-transform: capitalize;
    }
    .edit-project-group .wishlist-links-grp {
        position: relative;
        top: 0;
        display: inline-block;
        box-sizing: border-box;
    }
    .edit-project-group .wishlist-links-grp a {
        display: inline-block;
        margin-bottom: 5px;
        background: #008849;
        color: white;
        text-decoration: none;
        border-radius: 3px;
        text-transform: capitalize;
    }
    .edit-project-group #mood-create-button, .projects-list-wrapper .add-wishlistgroup #addnewlistbutton {
        background: #008849;
        color: white;
        text-decoration: none;
        border-radius: 3px;
        text-transform: capitalize;
    }
    .edit-project-group .wishlist-links-grp .back-button {
        display: inline-block;
        margin-bottom: 5px;
        background: #bedede;
        color: #191919;
        text-decoration: none;
        border-radius: 3px;
        text-transform: capitalize;
    }
    .edit-project-group .product-button-bar.top {
        background: #efefef;
    }
    .edit-project-group #projects-list {
        background: #efefef;
    }
    .edit-project-group .product-button-bar .add-to-basketmulti {
        width: 100%;
        margin-bottom: 5px;
        background: #008849;
        color: white;
        text-decoration: none;
        border-radius: 3px;
        text-transform: capitalize;
    }
    .edit-project-group .product-button-bar .remove-all-products-button {
        width: 100%;
        background: red;
        color: white;
        text-decoration: none;
        border-radius: 3px;
        text-transform: capitalize;
    }
    .edit-project-group #projects-list li .product-content img {
        display: inline-block;
        margin-bottom: 5px;
        margin-right: 5px;
    }
    .edit-project-group #projects-list li .product-content .product-name {
        width: calc(70% - 30px);
    }
    .edit-project-group #projects-list li .product-content .instock,
    .edit-project-group #projects-list li .product-content .outstock {
        position: relative;
        display: block;
        float: right;
        top: 0;
        right: 0;
        width: calc(70% - 30px);
        text-align: right;
    }
    .edit-project-group #projects-list li .product-content .price-box {
        position: relative;
        width: calc(100% - 30px);
        display: inline-block;
        float: right;
        right: 0;
    }
    .edit-project-group #projects-list li .product-content .price-box .gbp-price-value {
        float: right;
    }
    .edit-project-group #projects-list li .product-content .price-box .metre-label {
        font-size: 11px;
        position: absolute;
        top: 26px;
    }
    .edit-project-group #projects-list li .product-content .product-qty {
        position: relative;
        display: inline-block;
        float: right;
        right: 0;
        bottom: 0;
        margin-bottom: 5px;
    }
    .edit-project-group #projects-list li .product-content .view-product-button {
        position: relative;
        bottom: 0;
        width: 100%;
        left: 0;
        background: #bedede;
        color: #191919;
        border-radius: 3px;
        text-transform: capitalize;
    }
    .edit-project-group #projects-list li .product-content .remove-product-button {
        position: relative;
        bottom: 0;
        left: 0;
        width: calc(100% - 30px);
        margin-top: 5px;
        background: #bedede;
        color: #191919;
        text-decoration: none;
        border-radius: 3px;
        text-transform: capitalize;
    }
    .edit-project-group .product-button-bar {
        background: #efefef;
    }
    .edit-project-group .share-group #share-url {
        border: none
    }
    .edit-project-group .share-group #share-url-button {
        background: #008849;
        color: white;
        text-decoration: none;
        border-radius: 3px ;
        border: 1px solid #008849;
    }
    .edit-project-group .mood-list-group {
        background: #efefef;
    }
    .edit-project-group .mood-list-group .mood-li .mood-li-content #mood-view-button {
        border-radius: 0 3px 3px 0;
        background: #bedede;
        color: #191919;
        text-transform: capitalize;
    }
    .edit-project-group .mood-list-group .mood-li .mood-li-content #mood-view-button a {
        border-radius: 0 3px 3px 0;
        background: #64b0b0;
        color: #191919;
        text-transform: capitalize;
    }
    .edit-project-group .mood-list-group .mood-li .mood-li-content .mood-rename-button a  {
        border-radius: 3px;
        background: #008849;
        text-transform: capitalize;
    }
    .edit-project-group .mood-list-group .mood-li .mood-li-content .mood-rename-button a:hover {
        border-radius: 3px;
    }
    .edit-project-group .mood-list-group .mood-li .mood-li-content .mood-delete-button {
        border-radius: 3px;
        background: red;
        text-transform: capitalize;
    }
    .wool-projects-index-mood .moodback {
        position: absolute;
        top: 10px;
        right: 90px;
    }
    .moodboard-wrapper .moodboard-area {
        max-width: 500px;
        max-height: 500px;
        width: 100%;
        border: 1px solid #d6d6d6;
    }
    .moodboard-wrapper .moodboard-toolbar {
        position: relative;
        width: 100%;
        background: #efefef;
    }
    .moodboard-wrapper .moodboard-toolbar .moodboard-selected-section button {
        line-height: 12px;
    }
    .moodboard-wrapper .moodboard-toolbar .moodboard-save-section {
        position: relative;
        left: unset;
    }
    .mood-namebutton {
        background: #008849;
        text-transform: capitalize;
        border-radius: 3px;
    }
    .wool-projects-index-mood .moodback a {
        background: #bedede;
        text-transform: capitalize;
        border-radius: 3px;
        color: #191919;
    }
    .moodboard-wrapper .moodboard-toolbar #save-moodboard {
        background: #008849;
        text-transform: capitalize;
        border-radius: 3px;
    }
    .moodboard-wrapper .moodboard-toolbar .moodboard-selected-section button {
        background: #bedede;
        text-transform: capitalize;
        border-radius: 3px;
    }
    .moodboard-wrapper .moodboard-toolbar .moodboard-background-section #clear-background, .moodboard-wrapper .moodboard-toolbar #clear-moodboard {
        background: red;
        text-transform: capitalize;
        border-radius: 3px;
    }
    .moodboard-wrapper .moodboard-toolbar .moodboard-undo-section ul li button {
        background: #bedede;
        text-transform: capitalize;
        border-radius: 3px;
    }
    .wishlist-wrapper #projects-list {
        background: #efefef;
    }
    .wishlist-wrapper  .product-button-bar {
        display: inline-block;
        background: #efefef;
    }
    .wishlist-wrapper  .product-button-bar .product-bar-button {
        width: 100%;
        text-transform: capitalize;
        background: #008849;
        border-radius: 3px 0 0 3px ;
    }
    .wishlist-wrapper  .product-button-bar #removeproduct {
        margin-top: 5px;
        background: red;
        border-radius: 0 3px 3px 0;
    }
    .wishlist-wrapper #projects-list li {
        width: 100%;
    }
    .wishlist-wrapper #projects-list li .product-content img {
        box-sizing: border-box;
    }
    .wishlist-wrapper #projects-list li .product-content .product-name {
        width: 50%;
        box-sizing: border-box;
        left: unset;
        right: 0;
        padding: 5px;
    }
    .wishlist-wrapper #projects-list li .product-content .product-check {
        bottom: 8px;
        right: 8px;
    }
    .wishlist-wrapper #projects-list li .product-content a {
        left: 50%;
        width: calc(50% - 30px);
        background: #bedede;
        border-radius: 3px;
        color: #191919;
    }

    .cms-page-view .main-container .main {
        width: 100%;
        
    }
    .cms-page-view .conversion_table {
        width: 100% !important;
        overflow: scroll;
        display: block;
        max-width: 450px;
    }

    .blog-index-list .main .col-left {
        display: block;
        top: 0;
    }
    .blogsidebar-toggle {
        background: #efefef;
    }
    .blogsidebar-toggle .blogsidebar-filter-button {
        background: #efefef;
        display: inline-block;
        margin: 5px;
        padding: 5px;
        font-weight: bold;
    }
    .blog-index-list .block-blog {
        width: 100%;
        display: none;
        background: #efefef;
    }
    .blog-index-list .block-blog .block-title strong {
        width: 100%;
    }
    .blog-index-list .block-blog .block-content ul {
        display: inline-block;
        width: 100%;
    }
    .blog-index-list .block-blog .block-content ul li {
        float: left;
        display: block;
        padding: 5px;
        margin: 0;
        box-sizing: border-box;
    }
    .blog-index-list .block-blog .block-content ul li a {
        background: #bedede;
        color: #191919;
        padding: 4px;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        box-sizing: border-box;
        display: block;
    }
    .blog-index-list .col-main .postTitle {
        border-top: 1px solid #d6d6d6;
        margin: 15px 10px 10px;
    }
    .blog-index-list .col-main .postTitle h2 {
        border-top: 1px solid #191919;
        margin: 0;
        font-weight: normal;
        padding: 10px 0 0;
    }
    .blog-index-list .col-main .aw-blog-read-more {
        background: #bedede;
        padding: 5px;
        text-align: center;
        color: #191919;
        font-weight: bold;
        text-decoration: none;
        margin-left: 15px;
        border-radius: 3px;
    }
    .blog-index-list .col-main .tags {
        display: inline-block;
    }
    .blog-index-list .col-main .tags li {
        float: left;
        display: block;
        padding: 5px;
        margin: 0;
        box-sizing: border-box;
    }
    .blog-index-list .col-main .tags li a {
        background: #bedede;
        color: #191919;
        padding: 4px;
        font-weight: bold;
        text-decoration: none;
        text-align: center;
        box-sizing: border-box;
        display: block;
        border-radius: 3px;
    }
    .blog-post-view .postContent p a strong img,
    .blog-post-view .postContent .header-image {
        width: 100%;
    }
    .blog-post-view .postContent table {
        width: 100% !important;
    }

    .item-group-container ul,
    .monthly-blog-section ul {
        text-align: center;
        display: inline-block;
        margin: 0;
        padding: 0;
    }
    .item-group-container li,
    .monthly-blog-section li {
        display:inline-block;
        box-sizing: border-box;
        width: 100%;
        padding: 10px 20px;
        margin: 0 !important;
        float: left;
    }
    .item-group-container li .product-image,
    .monthly-blog-section li .product-image{
        width: 100%;
    }
    .item-group-container li .product-info a,
    .monthly-blog-section li .product-info a {
        width: 100%;
        display: inline-block;
    }

    .freepatternblog-container .freepatternblog-header {
        width: 100%;
        display: inline-block;
    }
    .freepatternblog-container .product-info {
        width: 100%;
    }
    .freepatternblog-container .product-image {
        width: 100%;
    }
    .blog-header {
        width: 100%;
        text-align: center;
    }
    .blog-items-container {
        width: 100%;
    }
    .blog-items-container ul {
        margin: 0;
        padding: 0;
    }
    .blog-items-container ul li {
        display: inline-block;
        width: 100%;
        margin: 0;
    }
    .blog-items-container ul li .blog-item-text,
    .blog-items-container ul li .blog-item-img
    {
        width: 100%;
        float: left;
        padding: 5px;
        box-sizing: border-box;
    }
    .designer-image-group ul {
        width: 100%;
        display: inline-block;
        padding: 0;
    }
    .designer-image-group ul li {
        width: 33%;
        float: left;
        display: inline-block;
        padding: 5px;
        margin: 0;
        box-sizing: border-box;
    }
    .designer-image-group ul li span {
        width: 100%;
        display: block;
    }
    .designer-image-group ul li img {
        width: 100%;
    }
    .blog-post-view .question {
        margin: 10px ;
        font-size: 13px;
    }
    .blog-post-view .answer {
        font-size: 13px;
        padding: 5px;
    }
    .brand-anchor-list {
        background-color: #efefef;
        text-align: center;
    }
    .brand-anchor-list li {
        display:inline-block;
        padding: 5px;
    }
    .brand-anchor-list li a {
        color: black;
        text-decoration: none;
    }
    .brand-message {
        text-align: center;
        margin: 30px !important;
    }
    .brand-collection {
        margin: 30px 0;
        padding: 20px 0;
        border-bottom: 4px solid #d6d6d6;
    }
    .brand-collection .brandbannerimage {
        width: 100%;
        margin-bottom: 15px;
    }
    .brand-collection .brandheaderimage {
        width: 100%;
        margin-bottom: 15px;
    }
    .brand-collection li {
        display:inline-block;
        box-sizing: border-box;
        width: 100%;
        padding: 0 20px;
    }
    .brand-collection li .product-heading {
        font-weight: bold;
        font-size: 24px;
        text-align: center;
    }

    .brand-collection li .productimage {
        width: 100%;
    }
    .new-shades {
        text-align: center;
        margin: 10px 0;
    }
    .new-shades-thumbs {
        text-align: center;
    }
    .new-shades-thumbs a {
        margin: 2px;
        display: inline-block;
    }
    .account-login .content h2 {
        color: #191919;
        border-bottom: 1px solid #d6d6d6;
    }
    .customer-account-login .col-1, .customer-account-login .col-2 {
        width: 100%;
        margin-bottom: 10px;
    }
    .customer-account-login .content {
        min-height: unset;
        border: none;
        background: #efefef;
    }
    .customer-account-login .buttons-set {
        border: none;
        background: #efefef;
    }
    .customer-account-login .buttons-set button.button  {
        width: 100%;
        background: #008849;
        
    }
    .customer-account-login .buttons-set button.button span span {
        color: white !important;
    }
    .customer-account-login .buttons-set .f-left  {
        margin-bottom: 10px;
    }

    /* Home pages */
    .homepages h1 {
        text-align: center;
        width: 100%;
        font-size: 30px;
    }
    .homepages .homepages-title  {
        position: relative;
    }
    .homepages .homepages-title .image-container {
        overflow: hidden;
        width: 100%;
        height: 120px;
        position: relative;
    }
    .homepages .homepages-title .image-container img {
        position:absolute;
        width: 100%;
        top:0;
    }
    .homepages .homepages-title h1  {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 25px;
        font-weight: bold;
        text-shadow: 2px 2px 4px #000000;
    }
    .homepages .link-title  {
        font-size: 20px;
        text-align: center;
        margin: 10px;
    }
    .homepages .learnmorelink {
        text-decoration: none;
        font-size: 14px;
        font-style: italic;
        text-align: center;
        display: block;
        cursor: pointer;
    }
    .homepages .guidelink{
        text-align: center;
        display: block;
        text-decoration: none;
        font-style: italic;
        padding: 10px;
        font-size: 15px;
    }
    .homepages .intro-group {
        background: #efefef;
        text-align: center;
        padding: 5px 0;
        margin-bottom: 15px;
    }

    .homepages .intro-group .intro-text {
        font-size: 15px;
        margin: 10px;
    }
    .homepages .intro-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .homepages .intro-links.four-col {
        width: 80%;
        margin: auto;
    }
    .homepages .intro-links.sewing {
        max-width: 700px;
        width: 100%;
        margin: auto;
    }
    
    .homepages .intro-image-links {
        width: 50%;
        padding: 10px;
        box-sizing: border-box;
        text-align: center;
    }
    .homepages .intro-image-links .image-container {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 5px;
    }
    .homepages .intro-image-links .image-container img {
        width: 100%;
        height: 100%;
        transition: all ease-in-out 0.3s;
        transform: scale(1);
    }
    .homepages .intro-image-links:hover .image-container img {
        transform: scale(1.05);
    }
    .homepages .intro-image-links .image-container .text-background {
        position: absolute;
        z-index: 10;
        bottom: 0;
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
    }
    .homepages .intro-image-links .image-container .text-background span  {
        background: rgba(255, 255, 255, 0.7);
        padding: 5px 0;
        width: 100%;
        display: block;
        box-sizing: border-box;
        border-radius: 5px;
    }
    .homepages .intro-image-links:hover .image-container .text-background span {
        background: rgba(255, 255, 255, 0.9);
    }
    .homepages .intro-image-links .image-container .text-background span p {
        color: black;
        font-size: 12px;
        font-weight: bold;
        margin: 0;
    }
    .homepages .homepage-description {
        background: #efefef;
        text-align: center;
        padding: 5px 0;
    }
    .homepages .homepage-description .intro-text {
        font-size: 15px;
        margin: 10px;
    }

    .homepages .homepage-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .homepages .homepage-links .links-group {
        width: 33%;
        padding: 10px;
        box-sizing: border-box;
    }
    .homepages .homepage-links .links-group .image-container {
        width: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 5px;
        margin-bottom: 10px;
    }
    .homepages .homepage-links .links-group .image-container img {
        width: 100%;
    }

    .homepages .homepage-links .links-group .image-container .text-background {
        position: absolute;
        z-index: 10;
        bottom: 0;
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
    }
    .homepages .homepage-links .links-group .image-container .text-background span {
        background: rgba(255, 255, 255, 0.7);
        padding: 5px 0;
        width: 100%;
        display: block;
        box-sizing: border-box;
        border-radius: 5px;
    }

    .homepages .homepage-links .links-group .image-container .text-background span p {
        color: #191919;
        font-size: 12px;
        font-weight: bold;
        margin: 0;
        text-align: center;
    }
    .homepages .homepage-links .links-group p {
        text-align: center;
    }
    .homepages .homepage-links .links-group ul {
        text-align: center;
        font-weight: bold;
    }
    .homepages .homepage-links .links-group ul a {
        color: #50a0a0
    }
    .homepages .features {
        padding: 10px ;
    }
    .homepages .features article {
        display: inline-block;
    }
    .homepages .features .feature-image  {
        width: 100%;
        float: left;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .homepages .features .feature-image img {
        width: 100%;
        border-radius: 5px;
        display: block;
    }
    .homepages .features .feature-content {
        width: 100%;
        float: left;
        padding: 10px ;
        box-sizing: border-box;
        font-size: 13px;
    }
    .homepages .features .feature-content .title {
        color: #6f6f6f;
        font-size: 25px;
        font-weight: bold;
    }
    .homepages .features .feature-content p {
        font-size: 15px;
    }
    .homepages .features .feature-content a {
        background: #008849;
        color: white;
        text-decoration: none;
        padding: 10px;
        margin: 10px 0;
        display: block;
        width: 100%;
        text-align: center;
        transition: all ease-in-out 0.3s;
        box-sizing: border-box;
        border-radius: 5px;
    }
    .homepages .features .feature-content a:hover {
        width: 60%;
    }
    .homepages .brands-container {
        text-align: center;
        padding: 20px;
    }

    .homepages .brands-text {
        text-align: center;
        font-size: 21px;
        font-weight: bold;
        margin: 10px;
    }
    .homepages .brands-container .brands-links {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .homepages .brands-container .brands-links  a {
        padding: 10px ;
    }
    .homepages .brands-container .brands-links  a .image-container {
        overflow: hidden;
        border-radius: 10px;
        border: 2px dashed white;
        transition: all ease-in-out 0.3s;
    }
    
    .homepages .brands-container .brands-links  a .image-container img {
        width: 100%;
        transition: all ease-in-out 0.3s;
        transform: scale(1);
    }
    .homepages .brands-container .brands-links  a:hover .image-container img {
        transform: scale(1.05);
    }
    .homepages .brands-container .viewall {
        text-align: center;
        margin: auto;
        padding: 20px;
    }
    .homepages .brands-container .viewall a {
        background: #dedede;
        padding: 10px;
        text-decoration: none;
        color: #191919;
        border-radius: 5px;
    }
    .homepages .yarnweight-container,
    .homepages .needlesize-container {
        text-align: center;
        padding: 20px;
    }
    .homepages .yarnweight-text,
    .homepages .needlesize-text {
        text-align: center;
        font-size: 21px;
        font-weight: bold;
        margin: 10px;
    }
    .homepages .yarnweight-container .yarnweighthowtolink {
        font-style: italic;
        text-decoration: none;
        font-size: 14px;
    }
    .homepages .yarnweight-container .yarnweight-links,
    .homepages .needlesize-container .needlesize-links
     {
        display: grid;
        grid-template-columns: repeat(3, 1fr) ;
    }
    .homepages .yarnweight-container .yarnweight-links  a,
    .homepages .needlesize-container .needlesize-links a {
        padding: 10px ;
        text-decoration: none;
    }
    .homepages .yarnweight-container .yarnweight-links  a .image-container,
    .homepages .needlesize-container .needlesize-links a .image-container {
        overflow: hidden;
        border-radius: 5%;
        border: 2px dashed white;
        transition: all ease-in-out 0.3s;
    }
    .homepages .yarnweight-container .yarnweight-links  a .image-container img,
    .homepages .needlesize-container .needlesize-links a .image-container img {
        width: 100%;
        transition: all ease-in-out 0.3s;
        transform: scale(1);
    }
    .homepages .yarnweight-container .yarnweight-links  a:hover .image-container img,
    .homepages .needlesize-container .needlesize-links a:hover .image-container img {
        transform: scale(1.05);
    }
    .homepages .yarnweight-container .yarnweight-links  a .link-text,
    .homepages .needlesize-container .needlesize-links a .link-text {
        font-weight: bold;
        text-decoration: none;
        color: #393939;
        font-size: 13px;
    }
    .homepages .yarnweight-container .yarnweight-links  a .image-container {
        border-radius: 50%;
    }
    .homepages .yarncolour-container {
        text-align: center;
        padding: 20px;
        opacity: 0;
        transition: all ease-in-out 0.3s;
    }
    .homepages .yarncolour-container.show {
        opacity: 1;
    }
    .homepages .yarncolour-text {
        text-align: center;
        font-size: 21px;
        font-weight: bold;
        margin: 10px;
    }
    .homepages .yarncolour-container .yarncolour-links {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }
    .homepages .yarncolour-container .yarncolour-links  a {
        text-decoration: none;
    }
   
    .homepages .yarncolour-container .yarncolour-links  a .image-container img {
        width: 100%;
        transition: all ease-in-out 0.3s;
        transform: scale(1);
    }
    .homepages .yarncolour-container .yarncolour-links  a:hover .image-container img {
        transform: scale(1.05);
    }
    .homepages .yarncolour-container .yarncolour-links  a .link-text {
        font-weight: bold;
        text-decoration: none;
        color: #393939;
        font-size: 13px;
    }
    .homepages .instgram-container {
        text-align: center;
        margin: auto;
    }
    .homepages .instgram-container p {

        font-size: 30px;
    }
    .homepages .instgram-container a {

        font-weight: 400;
        text-decoration: none;
        font-size: 35px;
    }
    .homepages .type-group .type-text,
    .homepages .size-six-container .size-text {
        text-align: center;
        font-size: 21px;
        font-weight: bold;
        margin: 10px;
    }
    .homepages .type-group.two-column .type-links {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .homepages .type-group .type-image-links {
        padding: 10px;
    }
    .homepages .type-group .type-image-links .image-container {
        width: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 5px;
    }
    .homepages .type-group .type-image-links  .image-container img {
        width: 100%;
        transition: all ease-in-out 0.3s;
        transform: scale(1);
    }
    .homepages .type-group .type-image-links:hover .image-container img {
        transform: scale(1.05);
    }

    .homepages .size-six-container .size-links {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        padding: 10px;
    }
    .homepages .size-six-container .size-links  a {
        text-decoration: none;
    }
    .homepages .size-six-container .size-links  a .image-container img {
        width: 100%;
        transition: all ease-in-out 0.3s;
        transform: scale(1);
    }
    .homepages .size-six-container .size-links  a:hover .image-container img {
        transform: scale(1.05);
    }
    .homepages .size-six-container .size-links  a .link-text {
        font-size: 13px;
        font-weight: bold;
        text-decoration: none;
        color: #393939;
        text-align: center;
    }
    .homepage-instagram-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 10px;
    }
    .homepage-instagram-group  .instagram-post {
        padding: 5px;
    }
    .homepage-instagram-group  .instagram-post img {
        width: 100%;
    }
    .emptybasketmessage {
        top: 50%;
        text-align: center;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 15px;
    }
    .toptotal {
        display: inline-block;
        width: 100%;
    }
    .toptotal .spendmore {
        width: 100%;
        padding: 10px 0;
        text-align: center;
        box-sizing: border-box;
    }
    .toptotal .spendmore span {
        font-size: 16px;
    }
    .toptotal a {
        background: #efefef;
        text-decoration: none;
        color: #191919;
        display: block;
        box-sizing: border-box;
        padding: 10px;
    }
    .toptotal a strong {
        width: 100%;
        font-size: 16px;
        display: block;
    }
    .topbaskettotal {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        font-weight: bold;
        display: flex;
    }
    .topbaskettotal .grand-total-title {
        text-align: left;
        font-size: 16px;
        width: 50%;
        display: block;
    }
    .topbaskettotal .gbp-sub-total {
        text-align: right;
        font-size: 16px;
        width: 50%;
        display: block;
    }
    .basketitems {
        width: 100%;
        display: block;
        border-top: 1px solid #d6d6d6;
    }
    .basketitems .basketitem {
        width: 100%;
        position: relative;
        border-bottom: 1px solid #d6d6d6;
        padding: 10px;
        box-sizing: border-box;
        display: inline-block;
    }
    .basketitems .basketitem .product-image, .basketitems .basketitem img {
        float: left;
        width: 75px;
    }

    .basketitems .basketitem .product-image img {
        width: 100%;
        height: auto;
    }
    .basketitem .nameandoptions {
        padding-left: 10px;
        display: flex;
        flex-wrap: wrap;
    }
    .basketitems .basketitem .product-name {
        float: left;
        font-size: 12px;
        font-weight: bold;
        width: 75%;
    }
    .basketitems .basketitem .item-options {
        float: left;
        width: 75%;
        font-size: 11px;
    }
    .basketitems .basketitem .product-name a {
        color: #191919;
    }
    .basketitems .basketitem .qtypricegroup {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: stretch;
    }
    .basketitems .basketitem .qtypricegroup .qty {
        width: 33%;
        position: relative;
        display: flex;
    }
    .basketitems .basketitem .qtypricegroup .qty .basketchangeqty {
        height: 40px;
        line-height: 38px;
        width: 40px;
        text-align: center;
        background: #efefef;
        border: 1px solid #d6d6d6 ;
        box-sizing: border-box;
        font-size: 20px;
    }
    .basketitems .basketitem .qtypricegroup .qty .basketchangeqty.minus {
        border-radius: 3px 0 0 3px;
    }
    .basketitems .basketitem .qtypricegroup .qty .basketchangeqty.plus {
        border-radius: 0 3px 3px 0;
    }
    .basketitems .basketitem .qtypricegroup .qty input {
        height: 40px;
        width: 40px !important;
        box-sizing: border-box;
        text-align: center;
        background: white;
        border: 1px solid #d6d6d6;
        font-size: 20px;
        color: #191919;
    }
    .basketitems .basketitem .qtypricegroup .qty input::-webkit-outer-spin-button,
    .basketitems .basketitem .qtypricegroup .qty input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .basketitems .basketitem .qtypricegroup .qty input[type=number] {
        -moz-appearance: textfield;
        -webkit-border-radius: 0; 
    }
    .basketitems .basketitem .qtypricegroup .total-label {
        font-size: 13px;
    }
    .basketitems .basketitem .qtypricegroup .unitprice {
        width: 33%;
        padding-left: 5px;
        box-sizing: border-box;
    }
    .basketitems .basketitem .qtypricegroup .unitprice .cart-price {
        font-size: 16px;
        font-weight: bold;
        position: relative;
    }
    .basketitems .basketitem .qtypricegroup .unitprice .cart-price .fullunitprice {
        text-decoration-line: line-through;
        font-weight: normal;
        padding-right: 10px;
        color: #7f7f7f;
    }
    .basketitems .basketitem .qtypricegroup .subtotal {
        width: 33%;
        text-align: right;
        padding-right: 5px;
        box-sizing: border-box;
    }
    .basketitems .basketitem .qtypricegroup .subtotal .cart-price {
        font-size: 15px;
        font-weight: bold;
    }
    .basketitems .basketitem .qtypricegroup .subtotal .cart-price .fullrowprice {
        text-decoration-line: line-through;
        font-weight: normal;
        padding-right: 10px;
        color: #7f7f7f;
    }
    .basketitems .basketitem .selector, .basketitems .basketitem .selector span {
        width: 110px !important;
    }
    .basketitems .basketitem .btn-remove {
        position: absolute;
        background: white;
        width: 20px;
        height: 20px;
        top: 10px;
        right: 10px;
    }
    .basketitems .basketitem .btn-remove img {
        width: 100%;
        display: block;
    }
    .basketitems .basketitem .converted-price {
        font-weight: 400;
        font-style: italic;
        font-size: 11px;
    }
    .beforecart {
        margin-top: 48px;
        text-align: center;
        width: 100%;
    }
    .beforecart li {
        margin-bottom: 10px;
    }
    .beforecart li:nth-last-child(1) {
        margin-bottom: 0;
    }
    .checkout-types .checkoutlogos {
        width: 100%;
        max-width: 200px;
        padding: 10px 20px;
        display: inline-block;
    }
    button.button.btn-checkout {
        background: #018748;
        text-transform: inherit;
    }
    button.button.btn-checkout span span {
        color: white !important;
        font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    }

    .cart .updatebasket {
        padding: 5px;
    }
    .cart .updatebasket button {
        margin: auto;
        display: block;
        background: #018748;
        width: 50%;
    }
    .cart .updatebasket button span span  {
        color: white !important;
        text-transform: capitalize;
    }

    .cart .cart-collaterals .col2-set {
        width: 100%;
    }
    .cart-collaterals .col-1 {
        width: 100%;
        box-sizing: border-box;
    }
    .cart .organza {
        padding: 12px;
        margin-bottom: 20px;
        width: 100%;
        background: #efefef;
        box-sizing: border-box;
        font-size: 13px;
    }
    .cart .organza h2 {
        font-size: 14px;
    }
    .cart .discount h2 {
        font-size: 14px;
    }
    .cart #discount-coupon-form .discount {
        background: #efefef;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .cart #discount-coupon-form .discount .discount-form {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .cart #discount-coupon-form .discount .discount-form label {
        width: 100%;
        font-size: 13px;
    }
    .cart #discount-coupon-form .discount .discount-form .input-box {
        width: 50%;
        height: unset;
        margin: 0;
        padding: 5px;
        box-sizing: border-box;
    }
    .cart #discount-coupon-form .discount .discount-form .input-box .input-text  {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        float: unset;
        border: #d6d6d6 1px solid;
        border-radius: 3px;
    }
    .cart #discount-coupon-form .discount .discount-form .buttons-set {
        clear: unset;
        margin: 0;
        width: 50%;
        height: 40px;
        padding: 5px;
        box-sizing: border-box;
    }
    .cart #discount-coupon-form .discount .discount-form .buttons-set .button {
        width: 100%;
        height: 40px;
        margin: 0;
        padding: 5px;
        background: #008849;
        text-transform: capitalize;
        border-radius: 3px;
    }
    .cart .totals {
        width: 100%;
    }
    .cart .totals .discount-totals-group, .totals .totals-group {
        width: 100%;
        box-sizing: border-box;
        font-weight: bold;
        display: flex;
    }
    .cart .totals .discount-totals-group .discount-total-title {
        text-align: left;
        font-size: 16px;
        font-weight: 400;
        width: 50%;
        display: block;
    }
    .cart .totals .discount-totals-group .discount-total {
        text-align: right;
        font-size: 16px;
        font-weight: 400;
        width: 50%;
        display: block;
    }
    .totals .totals-group .grand-total-title {
        text-align: left;
        font-size: 16px;
        width: 100%;
        display: block;
    }
    .totals .totals-group .gbp-sub-total {
        text-align: right;
        font-size: 16px;
        width: 50%;
        display: block;
        color: #191919;
        padding: 0;
    }
    .cart .totals .checkout-types {
        text-align: center;
    }
    .checkout-types .btn-checkout {
        width: 200px;
    }
    .checkout-types .btn-checkout span {
        padding: 0;
    }
    .checkout-types .btn-checkout span span {
        padding: 0;
    }
    .checkout-types .continue-link {
        background: #bedede;
        text-decoration: none;
        color: #191919 !important;
        display: inline-block;
        padding: 5px;
        border-radius: 3px;
        text-align: center;
        width: 200px;
        font-size: 13px;
        box-sizing: border-box;
    }
    .updatingpopup {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .updatingpopup.hidden {
        display: none !important;
    }
    .updatingpopup .updatemask {
        background: black;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
        opacity: 0.5;
    }
    .updatingpopup .updatemessage {
        width: 50%;
        position: fixed;
        top: 50%;
        left: 50%;
        background: white;
        z-index: 10;
        text-align: center;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        padding: 10px;
        box-sizing: border-box;
    }
    .updatingpopup .updatemessage img {
        margin: auto;
    }
    #designerlistpage ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        padding: 5px;
        list-style: none;
    }
    #designerlistpage ul li {
        margin: 5px 0;
        padding: 5px 5px 15px 5px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-flow: column;
        border-bottom: 1px solid #bfbfbf !important;
    }
    #designerlistpage ul li a {
        text-decoration: none;
        display: contents;
    }
    #designerlistpage ul li a strong {
        display: block;
        width: 100%;
        font-size: 20px;
        color: #191919;
        text-align: center;
    }
    #designerlistpage ul li a img {
        width: 100%;
        display: block;
        box-sizing: border-box;
        margin: 15px 0;
        text-align: center;
        border-radius: 5px;
    }
    #designerlistpage ul li a .seebutton {
        width: 100%;
        display: block;
        padding: 5px;
        background: #bedede;
        box-sizing: border-box;
        border-radius: 5px;
        margin-top: auto;
    }
    #designerlistpage ul li a .seebutton span {
        color: #191919;
        font-size: 13px;
        font-weight: bold;
        text-align: center;
        display: block;
    }
    #mc_embed_signup #mc-embedded-subscribe.button {
        width: 96%;
        line-height: unset;
        background-color: #008849;
        margin: 0;
    }
/*}*/
@media only screen and (min-width: 420px) {
    .homepage-products .homepage-product img {
        
    }
    .homepage-products .homepage-product .product-title {
        
    }
    .homepages .brands-container .brands-links {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .homepages .yarnweight-container .yarnweight-links {
        grid-template-columns: repeat(4, 1fr);
    }
    .homepages .yarncolour-container .yarncolour-links {
        grid-template-columns: repeat(4, 1fr);
    }
    .herobanner {
        max-width: 800px;
        padding-bottom: 5px;
        text-align: center;
        display: block;
        margin: auto;
    }
}
@media only screen and (min-width: 480px) {
    .header .links li {
        padding: 0 6px 0 0;
    }
    .toolbar .limiter .selector, .toolbar .limiter .selector span {
        width: 46px !important;
    }
    .products-list li.item {
        width: 33%;
    }
    .products-list li.item.lastrow {
        border-bottom: none !important;
        padding: 0 5px 14px;
        margin: 7px 0;
    }
    .products-list .price-box .gbp-price .gbp-price-value,
    .products-list .price-box .fat-q-price .fat-q-price-value {
        font-size: 20px;
    }  
    .patterns-grid .pattern-item {
        width: 33.3%;
    }
    .toolbar .pages label {
        padding-right: 5px;
    }
    
    .product-view .product-name h1{
        font-size: 20px;
    }
    .product-view .product-img-box {
        width: 40%;
        max-width: 360px;
    }
    .product-view .product-info-table {
        width: 58%;
        max-width: 310px;;
    }
    .more-colours ul .fabric-li {
        width: 50% !important;
    }
    .products-grid li.item.clearance {
        width: 33%;
    }

    .changeyarnpopup .changeyarnlist .yarngroup {
        width: 33%;
    }

    .box-account .col2-set .col-1, .box-account .col2-set .col-2 {
        width: 50%;
        padding: 0 5px;
        box-sizing: border-box;
    }

    .edit-project-group #projects-list li .product-content .price-box {
        width: calc(70% - 30px);
    }

    .moodboard-wrapper {
        display: inline-block;
        width: 100%;
    }
    .moodboard-wrapper .moodboard-area {
        width: 70%;
        float: left;
    }
    .moodboard-wrapper .moodboard-toolbar {
        width: 30%;
        height: auto;
        float: left;
        display: inline-block;
    }

    .wishlist-wrapper  .product-button-bar .product-bar-button {
        width: 50%;
        float: left;
    }
    .wishlist-wrapper  .product-button-bar #removeproduct {
        margin: 0;
    }

    .item-group-container li,
    .monthly-blog-section li {
        width: 50%;
    }

    .blog-items-container ul li .blog-item-text,
    .blog-items-container ul li .blog-item-img
    {
        width: 50%;
    }
    .homepages .homepages-title h1  {
        font-size: 35px;
    }
    .homepages .intro-group .intro-text {
        margin: 20px;
    }
    .homepages .intro-links {
        
    }
    
    .homepages .intro-image-links .image-container p {
        font-size: 15px;
    }
    .homepages .instgram-container a {
        font-size: 40px;
    }
}
@media only screen and (min-device-width: 550px) {
    .changeyarnpopup .changeyarnlist .yarngroup {
        width: 25%;
    }
    .my-account .data-table {
        display: table;
    }

    .wishlist-wrapper #projects-list li {
        width: 100%;
    }
    .blog-items-container ul li .blog-item-text
    {
        width: 60%;
    }
    .blog-items-container ul li .blog-item-img
    {
        width: 40%;
    }
    .brand-collection li {
        width: 50%;
        float: left;
    }
    .homepage-products .homepage-product {
    }
    .homepage-products .homepage-product img {

    }
    .homepage-products .homepage-product .product-title {
        padding: 0 0 0 5px;
        font-size: 15px;
        line-height: 15px;
    }
    .homepage-products .homepage-product .product-price {
        font-size: 20px;
    }
    .homepages .intro-image-links {
        width: 33%;
    }
    .toptotal {
        margin-top: 48px;
    }
    .beforecart {
        display: none;
    }
}
@media only screen and (min-width: 640px) {
    
    .header {
        height: 55px;
    }
    .header-container {
        height: 55px;
    }
    
    .searchautocomplete .nav {
        width: 270px;
    }
    
    .salesbannerbackground {
        margin-top: 55px !important;
    }
   
    .selection-list-container {
        top: 55px;
    }
    .cms-home .main-container {
        margin-top: 55px !important;
    }
    .toolbar .limiter {
        left: 300px;
    }
    
    .col2-left-layout {

    }

    .inline-title {
        font-size: 14px;
    }
    .more-colours ul li, .more-needlesizes ul li, .more-relatedneedles ul li, .more-relatedproducts ul li, .more-thread-shades ul li, .more-colours ul li.circles {
        width: 20%;
    }
    .more-colours ul .fabric-li {
        width: 33.3% !important;
    }
    .more-colours ul li .colourcaption, .more-needlesizes ul li .needlesizecaption, .more-relatedneedles ul li .relatedneedlecaption, .more-relatedproducts ul li .relatedproductcaption, .more-thread-shades ul li .threadshadecaption {
        font-size: 8px;
    }
    .products-grid li.item.clearance {
        width: 25%;
    }
    .edit-project-group .product-button-bar .add-to-basketmulti,
    .edit-project-group .product-button-bar .remove-all-products-button {
        width: calc(50% - 30px);
    }
    .edit-project-group #projects-list li .product-content .view-product-button,
    .edit-project-group #projects-list li .product-content .remove-product-button
    {
        width: calc(50% - 40px);
    }

    .cms-page-view .main-container .main {
        margin-top: 55px;
    }
    .item-group-container li,
    .monthly-blog-section li {
        width: 33%;
        float: unset;
    }
    .brand-collection li {
        width: 33%;
        float: unset;
    }
    .customer-account-login .col-1, .customer-account-login .col-2 {
        width: 50%;
        padding: 5px;
        box-sizing: border-box;
    }
    .homepage-imagelinks .homepage-imagelink {
        width: 33%;
    }
    .homepage-products .homepage-product {
       
    }
    .homepage-products .homepage-product .product-title {
        font-size: 19px;
        line-height: 19px;
    }
    .homepage-products .homepage-product .product-price {
        font-size: 25px;
    }
    .homepages .intro-group {
        padding: 20px 80px;
    }
    .homepage-brands {
        grid-template-columns: repeat(4, 1fr);
    }
    .homepages .brands-container .brands-links {
        grid-template-columns: repeat(6, 1fr);
    }
    .homepages .yarncolour-container .yarncolour-links {
        grid-template-columns: repeat(6, 1fr);
    }
    .homepages .yarnweight-container .yarnweight-links,
    .homepages .needlesize-container .needlesize-links
     {
        grid-template-columns: repeat(5, 1fr) ;
    }
    .homepages .features .feature-image {
        width: 35%;
        float: left;
        padding: 0 40px;
        box-sizing: border-box;
    }
    .homepages .features .feature-content {
        width: 65%;
        float: left;
        padding: 20px 50px;
        box-sizing: border-box;
    }
    .homepages .features .feature-content a {
        width: 50%;
    }
    .homepage-instagram-group {
        grid-template-columns: repeat(4, 1fr);
    }
    .basketitems .basketitem .product-name {
        font-size: 14px;
    }
        
}
@media only screen and (min-width: 768px) {
    .homepage-category {
        width: 25%;
    }
    .header .links {
        right: 42px
    }
    .header .links li {
        font-size: 12px;
    }
    .header .links a:link {
        font-size: 12px;
    }
    #basketmessage a:link {
        font-size: 12px;
    }
    
    #basketmessage span {
        font-size: 12px;
    }
    #basketmessage .currency-price-cart {
        font-size: 11px;
    }
    
    #basketmessage .filledbasket .ball.three {
        left: 19px;
    }
    #basketmessage .filledbasket .ball.one {
        left: 2px;
    }
    .products-list .product-shop {
        width: calc(100% - 150px);
        margin-left: unset;
        display: inline-block;
        box-sizing: border-box;
        position: unset;
        padding: 0 10px;
    }
    .products-list .product-name,
    .products-list .product-name a {
        font-size: 13px;
        margin-bottom: 8px;
        height: unset;
        width: 60%;
    }
    .products-list .mobile-product-name a {
        font-size: 15px;
    }
    .products-list .product-shop .price-box {
        font-size: 33px;
        position: absolute;
        width: unset;
        right: 10px;
        margin: 5px 0 0;
    }
    .products-list .product-shop .price-box .gbp-price .metre-label {
        top: 20px;
    }
    
    .products-list .product-shop .price-box .fat-q-price {
        left: unset;
        right: 112px;
    }
    .products-list .product-shop .price-box .fat-q-price .fat-q-label {
        top: 30px;
    }

    .products-list .morecontainer {
        font-size: 11px;
        width: unset;
    }
    .products-list .desc {
        font-size: 13px;
    }
    .m-filter-item-list li {
        width: 33%;
    }

    .patterns-grid .pattern-item {
        width: 25%;
    }

    .products-list .price-box .gbp-price .gbp-price-value, .products-list .price-box .fat-q-price .fat-q-price-value {
        font-size: 24px;
    }

        /* footer*/
    .footer .footer_block {
        padding: 15px 20px 5px 43px;
    }
    .footer_block .links_block div {
        width: 33%;
    }
    .footer_block .links_block div ul li {
        display: block;
        float: unset;
        width: unset;
    }
    .footer_block #sagepaycardsaccepted {
        position: absolute;
        bottom: 25px;
        right: 20px;
    }
    .footer_block #socialmedia {
        position: absolute;
        right: 0;
        bottom: 65px;
        width: 375px;
    }
    

    .more-colours ul li, .more-needlesizes ul li, .more-relatedneedles ul li, .more-relatedproducts ul li, .more-thread-shades ul li {
        width: 20%;
        padding: 5px;
    }
    .breadcrumb {
        padding: 7px 5px;
    }
    .product-view .product-name {
        width: 100%;
        margin-top: 0;
        padding-left: 15px;
        padding-bottom: 5px;
    }
    .product-view .product-name h1 {
        font-size: 2em;
        margin: 10px 0 5px 0;
    }
    .product-view .add-to-list {
        position: relative;
        width: 134px;
        float: right;
        bottom: unset;
        top: unset;
    }
    .product-view .product-shop .add-to-box .add-to-list {
        bottom: unset;
        top: 18px;
    }
    .product-view .product-shop .add-to-box .add-to-list.fabric,
    .product-view .listnosigned.fabric {
        top: -15px;
    }
    .product-view .listnosigned, .product-view .add-to-list-button {
        top: 20px;

    }
    .col1-layout .product-view .product-shop {
        width: 240px !important;
    }
    .product-view .product-shop .colourdropdowncontainer,
    .product-view .product-shop .dyelotdropdowncontainer,
    .product-view .product-shop .diameterdropdowncontainer,
    .product-view .product-shop .feltdropdowncontainer,
    .product-view .product-shop .fabricqtydropdowncontainer {
        position: relative;
        width: 100%;
        top: unset;
        bottom: unset;
        padding: 5px;
    }
    .product-view .product-shop .price-box {
        font-size: 33px;
        position: relative;
    }
    .product-view .product-shop .price-box .sale-price {
        font-size: 33px;
        padding: 0;
        line-height: 36px;
        float: unset;
    }
    .product-view .product-shop .instockmessage, .product-view .product-shop .outofstockmessage {
        position: relative;
        top: unset;
        padding: 0 10px;
        width: 100%;
        max-width: 160px;
        float: right;
    }
    
    .product-view .product-shop .dyelotdropdowncontainer .dropdownlabel {
        display: flex;
        justify-content: space-between;
        padding: 0;
        padding-left: 10px;
    }
    .product-view .product-shop .dyelotdropdowncontainer .dropdownlabel .what-is-dye {
        
        color: #50a0a0;
    }
    .product-view .product-img-box {
        width: 25%;
        padding: 0;
    }
    .product-view .product-img-box span {
        display: block;
    }
    .image-thumb-swiper {
        display: block;
        overflow: hidden;
    }
    .product-view .product-info-table {
        display: block;
        min-height: 250px;
    }
    .product-view .product-shop .add-to-box .add-to-cart {
        margin-top: 12px;
    }
    .product-view .product-shop .add-to-box {
        margin: 0;
        float: unset;
        width: 100%;
    }
    .product-view .product-shop .email-alert {
        width: unset;
    }
    .product-view .product-shop .email-alert .email-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: end;
    }
    .product-view .product-shop .email-alert .email-form {
        width: 100%;
        display: block;
        padding: 5px 0;
    }
    .product-view .product-shop .email-alert .btn-cart span {
        padding: 0;
    }
    .product-tabs {
        display: block;
    }
    .product-tabs li {
        width: unset;
    }
    .product-tabs-content {
        padding: 0 15px;
    }
    
    .accordion-tab {
        display: none;
    }
    .more-colours ul li .colourcaption, .more-needlesizes ul li .needlesizecaption, .more-relatedneedles ul li .relatedneedlecaption, .more-relatedproducts ul li .relatedproductcaption, .more-thread-shades ul li .threadshadecaption {
        font-size: 11px;
        padding: 3px 6px;
        line-height: 16px;
    }
    #product_tabs_attributes_contents {
        display: none !important;
    }
    .changeyarnpopup .changeyarnlist .yarngroup {
        width: 20%;
    }

    .customer-account-index .main .col-left, .customer-account-edit .main .col-left, .customer-address-index .main .col-left, .customer-address-form .main .col-left,
    .sales-order-history .main .col-left, .downloadable-customer-products .main .col-left, .giftvoucher-index-index .main .col-left,
    .sales-order-view .main .col-left, .sales-order-invoice .main .col-left, .sales-order-shipment .main .col-left,
    .wool-projects-index-index .main .col-left, .wool-projects-index-edit .main .col-left, .wool-projects-index-mood .main .col-left {
        width: 25%;
        margin-top: 55px;
    }
    .block .block-title strong {
        width: 100%;
        box-sizing: border-box;
        height: 35px;
        border-bottom: 1px solid #d6d6d6;
        border-top: 1px solid #d6d6d6;
        border-right: none;
        border-left: none;
        padding: 10px 20px;
    }
    .customer-account-index .main .col-main, .customer-account-edit .main .col-main, .customer-address-index .main .col-main,
    .sales-order-history .main .col-main, .sales-order-view .main .col-main, .sales-order-invoice .main .col-main, .sales-order-shipment .main .col-main,
    .downloadable-customer-products .main .col-main, .giftvoucher-index-index .main .col-main, .wool-projects-index-index .main .col-main, .wool-projects-index-edit .main .col-main, .wool-projects-index-mood .main .col-main {
        width: 75%;
        margin-top: 55px;
    }
    .blog-index-list .main,
    .blog-post-view .main {
        margin-top: 55px;
    }
    .item-group-container ul {
        text-align: center;
    }
    .item-group-container li {
        display:inline-block;
        box-sizing: border-box;
        width: 33%;
        padding: 10px 20px;
        margin: 0 !important;
    }
    .item-group-container li .product-image {
        width: 100%;
    }
    .item-group-container li .product-info a {
        width: 100%;
        display: inline-block;
    }
    .freepatternblog-container .product-info {
        width: 50%;
        float: left;
    }
    .freepatternblog-container .product-image {
        width: 50%;
        float: left;
    }
    .homepage-link-text span div {
        font-size: 16px;
    }
    .homepages .intro-image-links {
        width: 25%;
    }
    .homepages .intro-image-links .image-container p {
        font-size: 30px;
    }
    .homepages .features {
        padding: 20px 50px;
    }
    
    .toptotal .spendmore {
        width: 55%;
        float: left;
    }
    .toptotal .topbaskettotal {
        width: 45%;
        float: left;
    }
    .basketitem .nameandoptions {
        min-height: 40px;
    }
    .basketitems .basketitem .product-image, .basketitems .basketitem img {
        width: 150px;
    }
    .basketitems .basketitem .qtypricegroup {
        float: right;
        width: 50%;
    }
    .basketitems .basketitem .btn-remove {
        width: 20px;
        height: 20px;
    }
    .cart .cart-collaterals .col2-set {
        width: 55%;
    }
    .cart .totals {
        width: 45%;
        padding: 0 15px 0 10px;
        box-sizing: border-box;
    }
    #designerlistpage ul li {
        width: 33%;
    }
}
@media only screen and (min-width: 900px) {
    #attic24message {
        display: block;
        right: 250px;
        bottom: 15px;
        width: 90px;
    }
    #attic24message img {
        width: 100%;
    }
    #giftvouchericon {
        display: block;
        width: 60px;
        bottom: 0;
    }
    #giftvouchericon img {
        width: 100%;
    }
    .product-view .product-name {
        width: 100%;
    }
    .more-colours ul li, .more-needlesizes ul li, .more-relatedneedles ul li, .more-relatedproducts ul li, .more-thread-shades ul li {
        width: 20%;
    }
    .homepage-products .homepage-product {

    }
    .homepage-products .homepage-product img {

    }
    .homepage-products .homepage-product .product-title {

    }
    .homepage-products .homepage-product .product-price {
       
    }
    .homepage-products .homepage-product .product-shades {
        
    }
    .homepage-brands {
        grid-template-columns: repeat(6, 1fr);
    }
    .homepages .brands-container {
        padding: 20px 75px;
    }
    .homepages .yarnweight-container {
        padding: 20px 75px;
    }
    .homepages .yarncolour-container {
        padding: 20px 75px;
    }
    .homepage-instagram-group {
        grid-template-columns: repeat(4, 1fr);
    }

    .homepages .intro-image-links {
        width: 20%;
    }
    .homepages .intro-links.four-col  .intro-image-links 
    {
        width: 25%;
    }

    .homepages .intro-links.sewing .intro-image-links {
        width: 25%;
    }
    .products-list .product-image.patternimage {
        width: 212px;
        height: 300px;
    }
    .homepages .homepage-description {
        padding: 20px 80px;
    }
    .homepages .homepage-links .links-group {
        width: 20%;
    }
    .homepages .homepage-links .links-group p {
        font-size: 13px;
    }
    .homepages .homepage-links .links-group ul a {
        font-size: 14px;
    }
}
@media only screen and (min-width: 1030px) {
    .page {
        
    }
    .header .links .accountlink {
        display: initial;
    }
    .header .links .mobileaccountlink {
        display: none;
    }
    #basketmessage #minicart-group {
        width: 400px;
        position: absolute;
        top: 32px;
    }
    #basketmessage:hover #minicart-group {
        display: block;
    }
    #mobilesearchtoggle {
        display: none;
    }
    .headersearchbar .searchautocomplete .nav-submit-button {
        padding: 0;
    }
    .headersearchbar .form-search {
        height: 34px;
    }
    .headersearchbar .form-search input.input-text {
        width: calc(100% - 30px);
        height: 34px;
    }
    .headersearchbar .form-search .button {
        padding: 7px 5px !important;
    }
    .header-container {
        position: relative;
        height: unset;
    }
    .mobile-nav-container {
        display: none;
    }
    .mobilemask.active {
        display: none;
    }
    .nav-container {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
    .nav-container ul, .nav-container li {
        display: inline-block;
    }
    .nav-container ul.clearer {
        outline: none;
    }
    .mobile-menu-button {
        display: none;
    }
    .mobile-layered-nav-options {
        display: none;
    }
    .header {
        padding: 0 0 10px 0;
        height: 88px;
        width: 1030px;
    }
    .header h2.logo {
        max-width: 186px;
        margin: 18px 0 2px 10px !important;
    }
    .header a.logo {
        max-width: 186px;
        margin: 18px 0 2px 10px !important;
    }
    .header a.logo img {
        max-width: unset;
    }
    .header .links {
        margin: 0 0 6px;
        position: relative;
        right: unset;
        top: unset;
    }
    .header .links li a img {
        position: relative;
        left: unset;
        transform: translateX(0);
    }
    
    .headersearchbar .searchautocomplete .nav .nav-input {
        line-height: 30px;
    }
    .headersearchbar .searchautocomplete .nav-submit-button .button {
        padding: 4px 5px !important;
    }
    
    #basketmessage img {
        left: -35px;
        top: 7px;
        width: 25px;
    }
    #basketmessage .filledbasket {
        left: -35px;
        top: 7px;
    }
    #basketmessage .mobilebaskettext {
        display: none;
    }
    
    #attic24message {
        width: 120px;
        bottom: 35px;
        right: 240px;
    }
    #giftvouchericon {
        width: unset;
        bottom: 5px;
    }
    #topmessages {
        display: inline-block;
        right: 55%;
        transform: translate(50%, 0);
    }
    #basketmessage {
        bottom: 10px;
        padding: 0;
    }
    #basketmessage .baskettextwrapper {
        display: inline-block;
        width: unset;
    }
    .headersearchbar {
        width: 350px;
        height: 34px;
        left: 45%;
        top: 60px;
        transform: translate(-50%, -50%);
        bottom: unset;
        display: block;
    }
    .headersearchbar .searchautocomplete .nav .nav-input input {
        font-size: 14px;
        line-height: 34px;
    }
    .headersearchbar .searchautocomplete .nav-submit-button .button img {
        width: 25px;
        height: 25px;
    }
    .block-currency, .block-title-curency {
        display: block;
    }
    .block-title-curency {
        padding-right: 25px;
    }
    .block-currency .block-content {
        display: block;
        background: none;
        padding: 0;
        position: absolute;
        top: 0;
        right: 5px;
    }
    #dropdown-curent-curency img {
        padding-top: 4px;
    }
    .all-curent-curency {
        background: none repeat scroll 0 0 #fff;
        border: 1px solid #000;
        height: auto;
        position: absolute;
        right: -4px;
        top: 15px;
        width: 200px;
        z-index: 999;
        padding-bottom: 9px;
    }
    .textlist-currency {
        display: block;
        padding: 9px;
        text-align: left;
        line-height: 1.2em;
    }
    #supported-currencies li {
        float: left;
        padding-bottom: 0px;
        padding-top: 0px;
        text-align: left;
        width: 100%;
        box-sizing: border-box;
        padding-left: 10px;
    }
    #supported-currencies a {
        padding: 0;
        text-decoration: none;
    }
    #supported-currencies img {
        margin-top: 4px;
        padding-right: 5px;
    }
    .main {
        max-width: 1030px; 
    }
    #check-gift-title {
        margin-top: 0;
    }
    .product-gift-voucher .col-main {
        margin-top: 0;
    }

    /* Homepage */
    .cms-home .main-container {
        margin-top: 0!important;
    }
    .homepage-category {
        width: 25%;
    }
    .homepage-craft-item .homepage-craft-title {
        font-size: 16px;
    }
    .homepage-category .homepage-category-title span {
        font-size: 13px;
    }
    .brand-text-container {
        margin: 0 45px;
    }

    .block-subscribe-inline {
        background: #99cccc;
        margin: 15px 0;
    }
    .block-subscribe-inline .block-content {
        background: #99cccc;
    }
    .block-subscribe-inline .button {
        background: #99cccc;
    }

    #hometopslider {
        border: none;
        border-radius: 0 0 5px 5px;
    }
    #hometopslider .swiper-button-next,
    #hometopslider .swiper-button-prev {
        opacity: 0;
    }
    #hometopslider:hover .swiper-button-next,
    #hometopslider:hover .swiper-button-prev {
        opacity: 0.5;
    }
    #hometopslider .swiper-button-next:hover,
    #hometopslider .swiper-button-prev:hover {
        opacity: 1;
    }
    .salesbannerbackground {
        margin-top: 0 !important;
    }
    .homepage-craft {
       
    }
    .homepage-craft-swiper {
        border: none;
    }
    
    .homepage-imagelinks .homepage-imagelink:hover .image-container .homepage-imagelink-background {
        transform: scale(1.05);
    }
    .homepage-imagelinks .homepage-imagelink:hover .image-container .homepage-imagelink-hover {
        bottom: 0;
        transform: scale(1.05);
    }

    .main-container.col1-layout {
        margin-top: 0;
    }

    .homepages .saleheading h2 {
        font-size: 25px;
    }
    .homepages .salelinks li a .linkbox {
        width: 50%
    }
    .homepages .salelinks li a .linkbox .text {
        font-size: 20px;
    }
    
    .catalogsearch-result-index .main-container {
        margin-top: 0;
    }
    /* list page */
    .col2-left-layout {
        margin-top: 0;
    }
    .main .col-left {
        width: 25%;
        position: relative;
        left: unset;
        top: 0;
        display: block !important;
    }
    .mobile-layerednav-toggle {
        display: none;
    }
    .layered-nav-mask {
        display: none;
    }
    
    .block-layered-nav {
        padding: 35px 0 0 0;
    }
    .block-layered-nav .block-content {
        padding-top: 0px;
    }
    .block-layered-nav .block-title {
        display: block;
        height: 0;
    }
    .block-layered-nav .expandable {
        height: 32px;
        line-height: 32px;
    }
    .block-layered-nav .expandable .expand-icon {
        top: -7px;
    }
    .block-layered-nav .expandable.expanded {
        border-bottom: 1px solid #bedede;
        background: #64b0b0;
    }
    .block-layered-nav .selectedfilterlabel {
        height: unset;
        line-height: unset;
    }
    .m-filter-item-list {
        padding: 5px 0px;
    }
    .m-filter-item-list li, 
    .m-filter-item-list .m-selected-ln-item {
        width: 100%;
        height: unset;
        float: unset;
        border: none;
        background: white;
        padding: 10px 5px;
    }
    .m-filter-item-list li label {
        justify-content: left;
    }
    .m-filter-item-list input[type=checkbox] {
        display: block;
    }
    .m-filter-item-list li label:hover input ~ .checkmark {
        background: #efefef;
    }
    .col2-left-layout .col-main {
        width: 75%;
    }
    .col2-left-layout .category-products {
        margin: 0;
    }
    #backtotopbtn {
        transform: translate(50%, 0);
    }
    .products-list li.item {
        padding: 0 5px 14px;
        margin: 7px 0;
    }
    .products-list li.item.lastrow2col {
        border-bottom: 1px solid #d6d6d6 !important;
        padding: 0 5px 14px;
        margin: 7px 0;
    }
    .products-list li.item.lastrow.lastrow2col {
        border-bottom: none!important;
    }
    .products-list .product-shop {
        width: 340px;
    }
    .toolbar {
        display: block;
        height: 35px;
        padding: 1px 5px 5px 5px;
    }
    .toolbar .pages label {
        
    }
    .toolbar .onepage {
        line-height: 31px;
    }
    .toolbar-bottom .pages {
        border: none;
    }
    .toolbar .sort-by {
        font-size: 11px;
        padding: 0 0 0 10px;
        height: 22px;
        width: unset;
        position: absolute;
        top: 6px;
        display: flex;
        align-items: center;
    }
    .toolbar .sort-by select {
        height: 22px;
        width: 100%;
    }
    .toolbar .sort-by .prettydropdown {
        width: 100px !important;
    }
    .toolbar .sort-by .prettydropdown ul li {
        width: 100px !important;
    }
    .toolbar .limiter {
        font-size: 11px;
        font-weight: unset;
        width: 60px;
        height: 30px;
        top: 0px;
        padding: 1px 0 0 0;
        display: flex;
        flex-direction: column;
    }
    .toolbar .limiter label {
        left: -27px;
        top: 4px;
        transform: unset;
    }
    .toolbar .limiter select {
        height: 22px;
        margin-top: 3px;
        margin-right: 0;
    }
    .toolbar .pages {
        padding-top: 0;
    }
    .toolbar .pages .changepagebutton {
        height: 22px;
        width: 22px;
        border: 1px solid #d6d6d6;
        margin: 4px 0 5px 0;
    }
    .toolbar .pages .changepagebutton .pagebutton.next::before {
        transform: translate(9px,-7px);
    }
    .toolbar .pages .changepagebutton .pagebutton.prev::before {
        transform: translate(2px,-7px);
    }
    #uniform-page-selector, #uniform-page-selector span {
        width: 70px !important;
    }
    .toolbar .pages .prettydropdown ul ,
    .toolbar .limiter .prettydropdown ul ,
    .toolbar .sort-by .prettydropdown ul  {
        max-height: 20px !important;
    }
    .toolbar .pages .prettydropdown ul li,
    .toolbar .limiter .prettydropdown ul li,
    .toolbar .sort-by .prettydropdown ul li {
        height: 20px !important;
        line-height: 18px !important;
    }
    .toolbar .prettydropdown .end {
        height: 20px ;
        width: 20px ;
    }
    .toolbar .prettydropdown .end:before {
        height: 4px;
        border: 4px solid transparent;
        border-top-color: #191919;
    }
    .toolbar .prettydropdown .end:after {
        height: 4px;
        border: 4px solid transparent;
        border-bottom-color: #191919;
    }
    .product-view .product-name {
        width: 775px;
    }
    .product-view .product-essential {
        position: relative;
    }
    .col1-layout .product-view .product-shop {
        width: 240px !important;
    }
    .product-view .product-shop .price-box {
        font-size: 33px;
    }
    .product-view .product-shop .downloadproductlink {
        width: 100%;
    }
    .product-view .product-img-box {
        width: 360px;
        padding: 0 10px;
        box-sizing: border-box;
        cursor: pointer;
    }
    
    .product-view .image-swiper .swiper-button-next, .product-view .image-swiper .swiper-button-prev {
        top: calc(50% - 35px);
        opacity: 0;
    }
    
    .product-view .product-img-box:hover .image-swiper .swiper-button-next,
    .product-view .product-img-box:hover .image-swiper .swiper-button-prev {
        opacity: 0.5;
    }
    .product-view .product-img-box:hover .image-swiper .swiper-button-disabled {
        opacity: 0;
    }
    .product-view .image-swiper .swiper-button-prev {
        left: 15px;
    }
    .product-view .image-swiper .swiper-button-next {
        right: 15px;
    }
    #lightbox {
        z-index: 20;
        cursor: auto;
        background-color: rgba(0, 0, 0, 0);
    }
    #lightbox-mask {
        background-color: rgba(0, 0, 0, 0.7);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .swiper-lightbox, .swiper-lightboxsingle {
        width: 100%;
        overflow: hidden;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        position: absolute;
    }
    .product-view .saleendbox {
        background: #f0607d;
        color: white;
        padding: 5px 27px;
        margin: 0px 17px 0 9px;
        box-sizing: border-box;
        border-radius: 3px;
        text-align: center;
        font-weight: bold;
        font-size: 11px;
        line-height: 15px;
        position: absolute;
        top: -37px;
    }

    .customer-account-index .main .col-left, .customer-account-edit .main .col-left, .customer-address-index .main .col-left, .customer-address-form .main .col-left,
    .sales-order-history .main .col-left, .downloadable-customer-products .main .col-left, .giftvoucher-index-index .main .col-left,
    .sales-order-view .main .col-left, .sales-order-invoice .main .col-left, .sales-order-shipment .main .col-left,
    .wool-projects-index-index .main .col-left, .wool-projects-index-edit .main .col-left, .wool-projects-index-mood .main .col-left {
        margin-top: 0;
    }
    .customer-account-index .main .col-main, .customer-account-edit .main .col-main, .customer-address-index .main .col-main,
    .sales-order-history .main .col-main, .sales-order-view .main .col-main, .sales-order-invoice .main .col-main, .sales-order-shipment .main .col-main,
    .downloadable-customer-products .main .col-main, .giftvoucher-index-index .main .col-main, .wool-projects-index-index .main .col-main, .wool-projects-index-edit .main .col-main, .wool-projects-index-mood .main .col-main {
        margin-top: 0;
    }

    .my-account {
        margin: 0 10px 0 20px;
        padding: 0;
    }

    /*account pages*/
    .block-account {
        display: block;
    }
    .mobile-account-links {
        display: none;
    }
    .my-account-link {
        display: none;
    }

    .cms-page-view .main-container .main,
    .blog-index-list .main,
    .blog-post-view .main
    {
        margin-top: 0;
    }

    .blogsidebar-toggle {
        display: none;
    }
    .blog-index-list .block-blog {
        display: block;
    }

    /*topmenu */
    #yarnbrandssubsection {
        width: 50%;
    }
    #yarnweightssubsection {
        width: 15%;
        
    }
    #yarncatssubsection {
        width: 20%;
    }
    #yarncolourssubsection {
        width: 15%;
    }
    #patternbrandsubsection {
        width: 35%;
    }
    #patterntypesubsection {
        width: 65%;
        margin-bottom: 10px;
    }
    #patterncraftsubsection {
        width: 15%;
    }
    #patternformatsubsection {
        width: 30%;
    }
    #patternpricesubsection {
        width: 15%;
    }
    #patternforsubsection {
        width: 75%;
    }
    #needlebrandsubsection {
        width: 31%;
    }
    #needlehooksubsection {
        width: 26%;
    }
    #needlematerialsubsection {
        width: 10%;
    }
    #needlepricesubsection {
        width: 10%;
    }
    #needlepinkboxsubsection {
        width: 20%;
    }
    #knittypesubsection {
        width: 60%;
    }
    #fabricbrandgroup {
        width: 28%;
    }
    #fabricthemegroup {
        width: 42%;
    }
    #fabriccoloursubsection {
        width: 13%;
    }
    #habsubsection {
        width: 45%;
    }
    #sewingthreadbox {
        width: 55%;
        margin: 0;
    }
    #zipbox {
        width: 45%;
    }
    #haberdasheryleftgroup {
        width: 55%;
        display: inline-block;
        padding: 0 0 0 15px;
        box-sizing: border-box;
    }

    .habmidgreenboxes{
        width: 100%;
        float: left;
        display: block;
        background: #d6ebeb;
    }

    #creativebox, #toymakebox, #bagmakebox {
        width: 33.3%;
        margin: 0;
        height: unset;
    }

    #facemask, #craftfelt {
        width: 50%;
        text-align: center;
    }

    #kpcthemesubsection {
        width: 65%;
    }
    #threadtypesubsection {
        width: 17%;
    }
    #fabrictypesubsection {
        width: 18%;
    }
    #kpcbrandsection {
        width: 65%;
    }
    .pinkneedlecraftboxes {
        width: 35%;
        display: block;
        box-sizing: border-box;
        float: left;
        padding-left: 15px;
        margin-bottom: 10px;
    }
    .pinkneedlecraftboxes .background {
        background: #ffeeff;
        display: inline-block;
    }
    .pinkneedlecraftboxes .needlesbox {
        width: 40%;
    }
    .pinkneedlecraftboxes .toolaccessories {
        width: 60%;
    }

    #kpctechniquesubsection {
        width: 65%
    }

    .blueneedlecraftboxes {
        width: 35%;
        padding-left: 15px;
        display: inline-block;
        box-sizing: border-box;
    }
    .blueneedlecraftboxes .subsection.bluebox {
        width: 100%;
        margin-bottom: 10px !important;
    }
    #buttontypesubsection {
        width: 12%;
    }
    #buttonbrandsubsection {
        width: 25%;
    }
    #buttonmaterialsubsection {
        width: 23%;
    }
    #buttonsizesubsection {
        width: 15%;
    }
    #buttoncoloursubsection {
        width: 25%;
    }
    #ribbontypesubsection {
        width: 20%;
    }
    #ribbonthemesubsection {
        width: 35%;
    }
    #ribbonwidthsubsection {
        width: 20%;
    }
    #ribboncoloursubsection {
        width: 25%;
    }

    #yarnbrandssubsection ul {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
    #patternbrandsubsection ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    #patterntypesubsection ul {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
    #patternformatsubsection ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    #patternforsubsection ul {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
    #needlebrandsubsection ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    #knittypesubsection ul {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
    #fabricbrandgroup ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    #fabricthemegroup ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    #habsubsection ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    #sewingthreadbox ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    #zipbox ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    #kpcthemesubsection ul {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
    #kpcbrandsection ul {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
    #kpctechniquesubsection ul {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }
    #buttonbrandsubsection ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    #buttonmaterialsubsection ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    #buttoncoloursubsection ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    #ribbonthemesubsection ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }
    #ribboncoloursubsection ul {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }



    .nav-container ul li .menu-block .subsection, .nav-container ul li:hover .menu-block .subsection {
        padding-left: 15px;
        box-sizing: border-box;
        margin: 0;
    }
    .nav-container ul li .menu-block .subsection ul li, .nav-container ul li:hover .menu-block .subsection ul li {
        width: 100%;
    }
    .nav-container .fabric-salebannergrp {
        width: 68%;
        margin: 10px 10px 0;
        padding: 5px;
    }

    .toptotal {
        margin: 0;
    }

    .form-list .field {
        width: 50%;
    }
    .customer-account-giftcard {
        margin-top: 0;
    }
    .page-title .link-print {
        margin-top: 0;
    }
    .add-to-cart .addtobasketbuttoncontainer .freedownloadbutton {
        margin-top: -13px;
    }
    .multiaddgroup .multiaddbuttons {
        width: 100%;
    }
    .multiaddtobasketbox,
    .multiaddtowishbox {
        min-height: 554px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        border-radius: 5px;
    }
    .multiaddtobasketbox .addmultilist .productli h2 {
        font-size: 16px;
    }
    .multiaddtobasketbox .addmultilist .productli .qtypricegroup {
        width: 50%;
    }
    .multiaddtobasketbox .addmultilist .productli .qtypricegroup .unitprice {
        font-size: 20px;
    }
    .multiaddtowishbox .createmultiwishlistgroup #createwishlisttext {
        width: 250px;
    }
    .multiaddtowishbox .createmultiwishlistgroup #createmultiwishlistbutton,
    .multiaddtowishbox .createmultiwishlistgroup #createmultiwishlistbutton:hover {
        border-radius: 0 5px 5px 0;
        width: unset;
        height: 33px;
        padding: 0 10px;
    }
    .multiple-selection-container {
        width: 350px;
    }
    .more-colours ul {
        padding: 2px;
    }
    .more-colours .more-colours-ul.circles {
        padding: 2px 9px;
    }
    .new-icon-image {
        width: 60px !important;
    }
    .mobile-viewbasketbuttons {
        display: none;
    }
    .lightboximagecontainer {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 950px;
    }
    .product-view .product-img-box .swiper-lightboxsingle img,
    .product-view .product-img-box .swiper-lightbox .swiper-slide img {
        width: auto;
        height: auto;
    }
    .more-colours .shadecardDisplaySelectGroup {
        top: -33px;
    }
    .catalog-product-view .wrapper {
        margin-top: 0;
    }
    .header-container .header-delay-message.active {
        display: block;
    }
}