button:focus{
    outline:none;
}
.material__section__title {
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: -0.3px;
    color: #191919; 
}
.finish__button {
  
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    padding:12px;
    background:none;
    border:1px solid transparent;
    color: #6f6f6f;
}
.finish__button:hover {
        color: #0659e8;
    }
.finish__button.primary {
        background-color: #266de8;
        color: #ffffff;
        text-transform:uppercase;
    }
.finish__button.primary:hover {
           background-color: #0659e8;
       }
.finish__button.secondary {
        border: solid 1px #e3e3e3;
        background-color: #ffffff;
        color: #6f6f6f;
        text-transform:uppercase;
       
    }
.finish__button.secondary:hover {
                color: #0659e8;
               border: solid 1px #595959; 
            }
.finish__button.fullwidth {
        width:100%;
    }
.finish__button.small {
        font-size: 10px;
        padding: 7px 30px; 
        line-height: 1.6;
        letter-spacing: normal;
      
    }
.finish__button.compact {
        padding: 12px 30px;
    }
.finish__button.back {
            position: relative;
            top: -10px;
            background:   url(./images/back.png) transparent no-repeat center;;
            border: none;
            text-indent: -9999px;
            overflow: hidden;
            width: 10px;
            margin-right: 10px;
    }
.finish__button.back:hover {
                background:   url(./images/back-hover.png) transparent no-repeat center;;
                
            }
i.remove {
    background-image: url(./images/delete-outline.png);
    width: 20px;
    height: 20px;
    display:inline-block;
    position: relative;
    top:4px;
    margin-right:10px;
}
i.remove-small {
    background-image: url(./images/remove-small.png);
    width: 10px;
    height: 12px;
    display:inline-block;
    position: relative;
    top:2px;
    margin-right:8px;
}
i.download {
    background-image: url(./images/download.png);
    width: 20px;
    height: 20px;
    display:inline-block;
    position: relative;
    top:4px;
    margin-right:10px;

}
i.download.small {
        width:10px;
        height:10px;
    }
i.confirmation {
    height: 60px;
    width: 60px;
    display:block; 
     background-image: url(./images/confirmation-icon.png);;
 }
.visible-tablet-down {
    display: block;
}
.visible-tablet-up {
    display: block;
}
@media only screen and (min-width : 960px){
    .visible-tablet-down {
        display: none;
    }
    }
@media only screen and (max-width : 959px){
    .visible-tablet-up {
        display: none;
    }
    }
.margin-top-10 {
    margin-top: 10px;
}
.margin-bottom-10 {
    margin-bottom: 10px;
}
* {
  @include box-sizing(border-box);
}
.container {
    max-width: 1166px;
    margin: 0 auto;

}
.container.with__background {
      background-color: white;;
    }
@media only screen and (min-width : 960px) and (max-width : 1199px){
.container {
        max-width: 940px

}
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.container .material__goes__well__with, .container .material__you__may__also__like {
        padding: 0 20px
    }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.container .material__goes__well__with, .container .material__you__may__also__like {
        padding: 0 20px
    }
    }
.surface-row {
  margin: 0 -10px 0 0;
}
.surface-row:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
[class*='col-'] {
  float: left;
  padding-right: 10px;
}
.grid [class*='col-']:last-of-type {
    padding-right: 0;
  }
.col-1-1 {
  width: 100%;
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
.col-mb-1-1 {
    width: 100%;
    padding: 0
}
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.col-tb-1-3 {
    width: 33.3%
}
    }
.col-1-8 {
  width: 12.5%;
}
.col-1-6 {
    width: 16.66666%;
}
/* Opt-in outside padding */
.row-pad {
  padding: 10px 0 10px 10px;
}
.row-pad [class*='col-']:last-of-type {
    padding-right: 10px;
  }
.material-card {
    background: white;
    width: 100%;
}
.notice-banner {
    height: 40px;
    width: 100%;
    padding: 10px 15px;
    border-radius: 3px;
    background-color: #266de8;
    color: white;
    font-family: "Helvetica Neue", "Helvetica W01", Helvetica, sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    position: relative;
    display: none;

}
@media only screen and (min-width : 280px) and (max-width : 767px){
.notice-banner {
        height: auto

}
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.notice-banner {
        height: auto

}
    }
@media only screen and (min-width : 960px) and (max-width : 1199px){
.notice-banner {
        height: auto

}
    }
.notice-banner .notice__content {
        padding-right: 40px;
    }
.notice-banner .notice__content p {
            color: white;
            font-family: "Helvetica Neue", "Helvetica W01", Helvetica, sans-serif;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            margin: 0;
        }
.notice-banner .notice__content p a {
                color: white;
                text-decoration: underline;
            }
.notice-banner .notice__content p a:hover, .notice-banner .notice__content p a:focus {
                  color: white;
                  text-decoration: none;
                }
.notice-banner .notice__close__button {
        background: transparent;
        border: none;
        width: 40px;
        height: 40px;
        position: absolute;
        right: 0;
        bottom:0;
        top: 0;
        padding:0;
    }
.notice-banner .notice__close__button img {
            vertical-align: bottom;
        }
.finish-header {
    max-width: 580px;
    margin: 40px auto 40px;
}
.finish-header h2 {
        font-family: "Helvetica Neue", "Helvetica W01", Helvetica, sans-serif;
        font-size: 52px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.08;
        letter-spacing: -1px;
        text-align: center;
        color: #191919;
        margin-bottom: 20px;
        margin-top: 0;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.finish-header h2 {
            font-size: 32px;
            line-height: 1.13;
            letter-spacing: -0.62px
    }
    }
.finish-header p {
        font-family: "Helvetica Neue", "Helvetica W01", Helvetica, sans-serif;
        font-size: 20px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.4;
        letter-spacing: -0.15px;
        text-align: center;
        color: #6f6f6f;
        padding: 0 10px;
    }
.explore-category-heading {
    margin: 30px 0 20px;
}
.explore-category-heading h3 {
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: -0.3px;
        color: #191919;
    }
.explore-view__all {
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    color: #266de8;
    margin-bottom: 20px;
    padding-right: 15px;
    background-image: url('./images/caret-right-blue.svg');
    background-repeat: no-repeat;
    background-position: center right;;

}
.explore-header .explore-label {
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #6f6f6f;
    }
.explore-header .explore-container .surface-row{
            display: none;
        }
.explore-header .explore-container .surface-row.active{
                width: 100%;
                display: block;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-around;
                align-items: center;
                align-content: center;
                text-align: center;
            }
.explore-header .explore-container .surface-row.active > div:not(.explore-show__more) {
                    display: flex;
                    flex-wrap: wrap;
                    margin: 0 -10px 0 0;
                }
.explore-header .explore-container .surface-row .col-1-6{
                margin-bottom: 10px;
            }
.explore-header .explore-container .surface-row .col-1-6:nth-child(n+7){
                    display: none;
                }
.explore-header .explore-container .surface-row .col-1-6.open{
                    display: block;
                }
@media only screen and (min-width : 960px) and (max-width : 1199px){
                    .explore-header .explore-container .surface-row .col-1-6:nth-child(n+5){
                        display: none;
                    }
                    .explore-header .explore-container .surface-row .col-1-6.open{
                         display: block;
                     }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
                    .explore-header .explore-container .surface-row .col-1-6:nth-child(n+4){
                        display: none;
                    }
                    .explore-header .explore-container .surface-row .col-1-6.open{
                         display: block;
                     }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
                    .explore-header .explore-container .surface-row .col-1-6:nth-child(n+5){
                        display: none;
                    }
                    .explore-header .explore-container .surface-row .col-1-6.open{
                        display: block;
                    }
    }
.explore-header .explore-show__more{
        display: inline-block;
    }
@media only screen and (max-width : 959px){
.explore-header .explore-show__more{
            display: none
    }
    }
.explore-header .explore-show__more-tablet{
            display: none;
        }
@media only screen and (min-width : 768px) and (max-width : 959px){
.explore-header .explore-show__more-tablet{
                display: inline-block
        }
    }
@media only screen and (max-width: 767px){
.explore-header .explore-show__more-tablet{
                display: none
        }
    }
.explore-header .explore-show__more-mobile{
            display: none;
        }
@media only screen and (max-width: 767px){
.explore-header .explore-show__more-mobile{
                display: inline-block
        }
    }
@media only screen and (max-width : 1200px) {
.explore-header .explore-show__more{
                display: none
    }
    }
.explore-header .explore-show__more.more-swatch-large{
                 display: inline-block;
             }
.explore-header .explore-show__more.more-swatch-large.focus-within {
                    border: solid 2px black;
                }
.explore-header .explore-show__more.more-swatch-small{
                 display: none;
            }
@media only screen and (max-width : 959px){
.explore-header .explore-show__more.more-swatch-small{
                display: inline-block
            }
    }
.explore-header .explore-show__more.more-swatch-mobile{
                 display: none;
            }
@media only screen and (max-width: 767px){
.explore-header .explore-show__more.more-swatch-mobile{
                display: inline-block
            }
    }
.explore-header .explore-show__more.more-swatch-disable{
                 display: none;
             }
.explore-show__more {
    text-align: center;
    padding: 20px;
}
.explore-show__more.explore-section__footer {

        border-bottom: 1px solid #e3e3e3;
        margin-bottom: 30px;

    }
.explore-show__more button {
        background: transparent;
        border: none;
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #266de8;
    }
.explore-show__more button:focus {
            outline: none;
        }
.explore-show__more button .more {
            display: inline-block;
            height: 10px;
            width: 10px;
            background-image: url('./images/plus.svg');
            margin-left: 5px;
        }
.explore-show__more button .less {
            display: inline-block;
            height: 10px;
            width: 10px;
            transform: rotate(90deg);
            background-image: url('./images/minus.svg');
            margin-left: 5px;

        }
.explore-show__more button:hover {
            color: #0659e8;
        }
.explore-category-selector__container h3 button {
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: -0.3px;
        color: #191919;
        padding: 0 20px 0 0;
        background-image: url(./images/down.svg);
        background-position: right center;
        background-repeat: no-repeat;
        background-color: transparent;
    }
.explore-category-selector__container h3 button:focus {
            outline: none;
            background-image: url(./images/down-hover.png);
        }
.explore-category-selector__container h3 button:hover {
            background-image: url(./images/down-hover.png);

        }
.explore-category-selector__container h3 {
        margin-bottom: 20px;
    }
.explore-category-selector__container .explore-category-selector__list__explore-list {
        display: flex;
        position: relative;
        margin: 0 auto 10px;
        text-transform: uppercase;
        justify-content: center;
        height: auto;
        list-style: none;
    }
@media only screen and (min-width: 280px) and (max-width: 576px){
.explore-category-selector__container .explore-category-selector__list__explore-list {
            overflow: auto;
            white-space: nowrap;
            justify-content: flex-start
    }
    }
.explore-category-selector__container .explore-category-selector__list__explore-list li{
            padding: 0;
            margin-right: 20px;
        }
.explore-category-selector__container .explore-category-selector__list__explore-list li a {
                padding: 0;
                font-size: 12px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: 4;
                letter-spacing: normal;
                text-align: center;
                text-decoration: none;
                color: #6f6f6f;
            }
.explore-category-selector__container .explore-category-selector__list__explore-list li a:hover, .explore-category-selector__container .explore-category-selector__list__explore-list li a.active {
                    color: #191919;
                    cursor: pointer;
                    border-bottom: 2px solid #191919;
                    padding-bottom: 10px;
                }
.explore-category-selector__container .explore-category-selector__list__explore-list li.active a{
                color: #191919;
                cursor: pointer;
                border-bottom: 2px solid #191919;
                padding-bottom: 10px;
            }
.explore-category-selector__container .explore-category-selector__list {
        margin-top: -10px;
    }
.explore-category-selector__container .explore-category-selector__list ul {
            list-style: none;
        }
.explore-category-selector__container .explore-category-selector__list button {

            display: block;
            padding: 8px 12px;
            background: transparent;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: #6f6f6f;
        }
.explore-category-selector__container .explore-category-selector__list button:focus {
                outline: none;
            }
.explore-category-selector__container .explore-category-selector__list button:hover, .explore-category-selector__container .explore-category-selector__list button.active {
                color: #0659e8;
            }
.explore-category-selector__container .explore-category-selector__list.visible {
            display: block;
            z-index: 1;
        }
button.more.more-swatch {
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    color: #266de8;
}
button.more.more-swatch:focus {
         outline: none;
     }
button.more.more-swatch .more {
        display: inline-block;
        height: 10px;
        width: 10px;
        background-image: url('./images/plus.svg');
        margin-left: 5px;
    }
button.more.more-swatch .less {
        display: inline-block;
        height: 10px;
        width: 10px;
        transform: rotate(90deg);
        background-image: url('./images/minus.svg');
        margin-left: 5px;

    }
button.more.more-swatch:hover {
         color: #0659e8;
     }
.finish-category__header {
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 41px;
    letter-spacing: -0.3px;
    color: #191919;
    margin: 20px 0 20px;
}
.search__filter__container .filter__buttons button:not([data-modal="sort_by"]):not(.filter__buttons_mobile) {
                display: none;
            }
.search__filter__container .surface-checkbox__container, .search__filter__container .surface-radio__container, .search__filter__container .filter-group-col {
        display: none;
    }
.search__filter__container .sort__popover .surface-radio__container {
            display: block;
        }
.search__filter__container .filter-group-col .section-subheader {
            margin-top: -10px;
        }
.search__filter__container .filter-group-col .section-subheader.combined-group-subheader {
                margin-top: 10px;
                display: none;
            }
.search__filter__container .filter-group-col.combined-group-col .column-count-2:not(:last-child) {
                    margin-bottom: 30px;
                }
@media only screen and (min-width : 280px) and (max-width : 767px){
.search__filter__container .filter-group-col.combined-group-col .column-count-2 {
                    -moz-column-count: 1;
                         column-count: 1
            }
    }
.card-category {
    background: white;
}
.card-category .card-hero {
        display: grid;
        grid-template-rows: 190px 60px;
        justify-items: center;
        align-items: center;
        background: #f6f6f6;
    }
.card-category .card-hero .image {
            position: relative;
            height: 100%;
            width: 100%;
        }
.card-category .card-hero .image img {
                max-height: 190px;
                -o-object-fit: cover;
                   object-fit: cover;
                width: 100%;
                height: 100%;
            }
.card-category .image img {
            max-height: 190px;
            width: auto;
        }
.card-category .caption {
        font-family: "Helvetica Neue", "Helvetica W01", Helvetica, sans-serif;
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #191919;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        padding: 0 20px;
        text-align: center;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.card-category .caption {
            padding: 0 10px
    }
    }
.card-category a:hover .caption{
            color: #0659e8;
            cursor: pointer;
        }
.palettes .material__card img{
            width: 100%;
        }
.material__card {
    font-family: "Helvetica Neue", "Helvetica W01", Helvetica, sans-serif;
    margin-bottom: 10px;
}
.material__card a:hover {
        color: #0659e8;
    }
.material__card .card__add_to_cart {
        background-color: #266de8;
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: normal;
        text-align: center;
        color: #ffffff;
        position:absolute;
        left: 0;
        right:0;
        bottom:0;
      
        display:none; 
        opacity: 0;
    }
.material__card .card__add_to_cart:hover {
            background-color: #0659e8;
        }
.material__card .card__add_to_cart button {
            background: transparent;
            border: none;
            text-transform: uppercase;
            padding: 12px;
            width:100%;
        }
.material__card:hover .card__add_to_cart {
         display:block;
         opacity: 1;
     }
.material__card:hover .card__color__details, .material__card:focus-within .card__color__details {
        display:block;
        opacity: 1;
    }
.material__card:hover .card__favorite, .material__card:focus-within .card__favorite {
        display: inline-block;
        opacity: 1;
    }
.material__card:hover .card__color__basic, .material__card:focus-within .card__color__basic {
        display: none;
        opacity: 0;
    }
.material__card:hover .card__brand .card__customize, .material__card:focus-within .card__brand .card__customize {
        display:inline;
        opacity: 1;
    }
.material__card .card__content {
        background-color: #ffffff;
        padding: 20px 0 5px 20px;
        display: grid;
        grid-template-rows: repeat(auto-fit, minmax(1em, 1fr));
        overflow: hidden;

    }
.material__card .card__content .card__name {
          align-self: center;
        }
.material__card .card__content .card__brand {
          align-self: center;
        }
.material__card .card__content .card__collection {
            align-self: center;
        }
.material__card .card__content .card__type {
            align-self: center;
            overflow: hidden;
            text-overflow: ellipsis;
            min-height: 2.5em;
        }
.material__card .card__content .card__swatches {

            height: 1.8em;
        }
.material__card .card__content .card__swatches .card__swatch__icons {

                width: 100%;
                height: 100%;

                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: flex-start;
                align-items: center;
                align-content: center;
            }
.material__card .card__content .card__swatches .card__swatch__icons .swatch-icon-btn {
                    box-sizing: content-box;
                    margin-right: 5px;
                    display: flex;
                    align-content: center;
                    justify-content: center;
                    align-items:center;
                    cursor: pointer;
                    height: 1.5em;
                    width: 1.5em;
                }
.material__card .card__content .card__swatches .card__swatch__icons .swatch-icon-btn.active {
                    border: 3px solid #0659e8;
                    border-radius: 60%;
                }
.material__card .card__content .card__swatches .card__swatch__icons .swatch-icon-img {
                    height: 1.25em;
                    width: 1.25em;
                    border-radius: 50%;
                }
.material__card .card__content .card__swatches .swatch-icon-more-btn {
                cursor: pointer;
            }
.material__card .card__content .card__swatches .swatch-icon-more-btn .more-icon, .material__card .card__content .card__swatches .card__colors span {
                font-size: 12px;
                font-weight: normal;
                font-stretch: normal;
                font-style: normal;
                line-height: 20px;
                letter-spacing: normal;
                color: #6f6f6f;
                font-family: "Helvetica Neue", "Helvetica W01", Helvetica, sans-serif;
            }
.material__card .card__content .card__swatches:focus-within .card__swatch__icons {
                    display: flex !important;
                }
.material__card .card__content .card__swatches:focus-within .card__colors {
                    display: none !important;
                }
.material__card .card__image {
        position: relative;
    }
.material__card .card__image > a {
            display: block;
        }
.material__card .card__image img {
            vertical-align: bottom;
            width: 100%;
            -o-object-fit: cover;
               object-fit: cover;
            max-height: 100%;
            height: auto;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
            .material__card .card__image img {
                width: 100%;
            }
    }
.material__card .card__new {
        border-radius: 3px;
        border: solid 1px rgba(25, 25, 25, 0.08);
        background-color: #ffffff;
        position: absolute;
        top: 10px;
        left: 10px;
        text-transform:uppercase;
        font-size: 11px;
        font-weight: bold;;
        font-stretch: normal;
        font-style: normal;
        line-height: 18px;
        text-align: center;
        letter-spacing: normal;
        color: #7a7a7a;
        padding-left: 0.2em;
        padding-right: 0.2em;

    }
.material__card .card__type {
       margin-top:5px;
        font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 20px;
  letter-spacing: normal;
  color: #6f6f6f;
    }
.material__card .card__brand {

        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: 0.15px;
        color: #6f6f6f;
        
    }
.material__card .card__brand .card__customize {
            text-transform: uppercase;
            opacity: 0;
            display:none;
            font-size: 10px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;

            letter-spacing: 0.13px;
            color: #7a7a7a;
        }
.material__card .card__collection {
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: 0.15px;
        color: #6f6f6f;

    }
.material__card .card__name {
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 20px;
        letter-spacing: normal;
        color: #191919;
        position: relative;
        display: flex;
        align-items: center;
    }
.material__card .card__name a {
            display:inline-block;
           
            margin-top: 5px;
        
        }
.material__card .card__name:hover .card__favorite, .material__card .card__name:focus .card__favorite {
                display: inline-block;
            }
.material__card .card__description {
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #6f6f6f;
        margin-top: 10px;
    }
.material__card .surface-link__button {
        margin-top:15px;
        display: block;
    }
.material__card .surface-link__button:hover {
            color: #0659e8;
        }
.material__card .card__color__container {
        height: 50px;
        padding: 20px 0 0;
    }
.material__card .card__color__basic {
        height: 30px;
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 2.5;
        letter-spacing: 0.15px;
        color: #6f6f6f;

    }
.material__card .card__favorite {
        padding:0;
        top:5px;
        height: 20px;
        width: 20px;
        display: none;
        opacity: 1;
        position: absolute;
        margin-left:10px;
        background:url('./images/save-outline.png') center no-repeat transparent;
        border:none;

    }
.material__card .card__favorite:hover {
            background:url('./images/save-outline-hover.png') center no-repeat transparent;
        }
.material__card .card__favorite:focus {
            outline:none;
        }
.material__card .card__color__details {
        height: 30px;
        display:none;
        opacity: 0;



    }
.material__card .card__color__details .card__color__swatch {
            padding: 3px;
            border: solid 2px transparent;
            height: 30px;
            width:30px;
            background:transparent;
            border-radius: 50%;
            display:inline-block;
        }
@media only screen and (min-width : 960px) and (max-width : 1199px){
.material__card .card__color__details .card__color__swatch {
                margin-left: -8px
        }
                .material__card .card__color__details .card__color__swatch:last-child{
                    display: none;

                }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.material__card .card__color__details .card__color__swatch {
                margin-left: -8px
        }
    }
.material__card .card__color__details .card__color__swatch.active, .material__card .card__color__details .card__color__swatch:hover {
                border-color: #266de8
               
            }
.material__card .card__color__details .card__color__swatch:focus {
               outline: none;
            }
.material__card .card__color__details .card__color__swatch img {
            display: inline-block;
            height: 20px;
            width:20px;
            border-radius: 50%
            }
.material__card .card__color__details span {
            font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 30px;
  letter-spacing: -1.5px;
            position: relative;
            left: 1px;
            top:-5px;
  color: #6f6f6f;
  display: inline-block;
        }
.cart-card .cart-card__content-text p {
            font-size: 12px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: 0.15px;
            color: #6f6f6f;
            margin:0;
        }
.cart-card .finish__button{
        margin-bottom:10px;
    }
.cart-card .cart-card__control-container {
        margin-top:20px;
        margin-bottom:30px;
    
    }
.cart-card__container .cart-card.cart-card__basic{
       background: transparent;
       padding: 0;
       border: 1px solid #e3e3e3;
       margin-bottom:40px;
    }
.cart-card__container .cart-card.cart-card__basic .cart-card__content {
           display: block;
           text-align: left;
       }
.cart-card__container .cart-card.cart-card__basic img {
            margin:0;
            width:175px;
            height: 175px;
        }
.cart-card__container .cart-card.cart-card__basic .cart-card__content-text {
            padding: 15px;
        }
.palette-card {
    border: solid 1px #e3e3e3;
      background-color: #ffffff;
    text-align: left;
    margin-bottom: 10px;
    display: block;
}
.palette-card img {
        width: 100%;
        height: auto;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
        .palette-card img {
            width: 100%;
        }
    }
.palette-card .palette-card__content-text {
            text-align: left;
            padding: 20px;

        
    }
.palette-card .palette-card__content-text p {
            font-size: 12px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: 0.15px;
            color: #6f6f6f;  
            margin:0;
           }
.palette-card .palette-card__content-text h4 {
            font-size: 14px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: #191919; 
            margin-top:5px;
            margin-bottom:0;
           }
.palette-modal__image__card {
    position: relative;
}
.palette-modal__image__card.slick-initialized .palette-modal__image__card-content.slick-slide {
                 display:flex;
                 padding-top:5px;
                 padding-left: 20px;
                 padding-right:20px;
            }
.palette-modal__image__card.slick-initialized .palette-modal__image__card-content.slick-slide img {
                    width: 66px;
                    height: 66px;
                    margin-right: 20px;
                }
.palette-modal__image__card.slick-initialized .palette-modal__image__card-content.slick-slide .palette-modal__image__card-content__text p {
                        font-size: 12px;
                        font-weight: bold;
                        font-stretch: normal;
                        font-style: normal;
                        line-height: 1.33;
                        letter-spacing: 0.15px;
                        color: #6f6f6f;
                        margin: 0 0 5px;
                    }
.palette-modal__image__card.slick-initialized .palette-modal__image__card-content.slick-slide .palette-modal__image__card-content__text ul {
                        list-style: none;
                        margin:5px 0 0;
                    }
.palette-modal__image__card.slick-initialized .palette-modal__image__card-content.slick-slide .palette-modal__image__card-content__text ul li {
                            font-size: 14px;
                            font-weight: normal;
                            font-stretch: normal;
                            font-style: normal;
                            line-height: 1.43;
                            letter-spacing: normal;
                            color: #6f6f6f;
                        }
.palette-modal__image__card.controls {
        position: relative;
        padding-left: 20px;
        padding-right: 20px;
    }
.palette-modal__image__card .control {
        width: 12px;
        height: 20px;
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
        background-color: transparent;
        margin-top: -5px;
        top: 50%;
    }
.palette-modal__image__card .control.previous {
            background-image: url('./images/left-arrow.svg');
            left: 10px;
            
        }
.palette-modal__image__card .control.next {
            background-image: url('./images/right-arrow.svg');
            right: 10px;
        }
.palette-modal__image__card .palette-modal__image__card-content {
        display:flex;
        padding-top:5px;
        padding-left: 20px;
        padding-right:20px;
    }
.palette-modal__image__card .palette-modal__image__card-content img {
            width: 66px;
            height: 66px;
            margin-right: 20px;
        }
.palette-modal__image__card .palette-modal__image__card-content .palette-modal__image__card-content__text p {
                font-size: 12px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.33;
                letter-spacing: 0.15px;
                color: #6f6f6f;
                margin: 0 0 5px;
            }
.palette-modal__image__card .palette-modal__image__card-content .palette-modal__image__card-content__text ul {
                list-style: none;
                margin:5px 0 0;
            }
.palette-modal__image__card .palette-modal__image__card-content .palette-modal__image__card-content__text ul li {
                    font-size: 14px;
                    font-weight: normal;
                    font-stretch: normal;
                    font-style: normal;
                    line-height: 1.43;
                    letter-spacing: normal;
                    color: #6f6f6f;
                }
.saved__card .card__name a {
            margin-top:0;
        }
.saved__card .card__description {
        margin-top:0;
    }
.container .material__detail__image__block .material__swatch__information_material{
    padding-top: 0;
    border-top: none;
}
button.saved__item-selectable {
    border: solid 2px #e3e3e3;
    padding:2px;
    background: #ffffff;

    text-align:left;
}
button.saved__item-selectable .card__brand {
        margin-bottom:8px;
    }
button.saved__item-selectable .card__name {
        margin-bottom:0;
    }
.card__type_finish,.card__brand_finish, .material__swatch__information_finish{
    display: none;
}
.card__type_finish.active,.card__brand_finish.active,.material__swatch__information_finish.active{
    display: inline-block;
     }
.material-tab__container-finish,
.material__name__detail_finish,
.material__name_finish,
.material__pdf{
    display: none;
}
.material-tab__container-finish.active,.material__name__detail_finish.active,.material__name_finish.active,.material__pdf.active{
        display: block;
    }
.button__add__to__cart {
    display: none;
}
.button__add__to__cart.active{
        display: block;
    }
.material__name_finish[open] .material__name__detail_finish {
         display: block;
     }
.upholstery-detail__preview{
    display: none;
}
.upholstery-detail__preview.active{
        display: block;
     }
.upholstery-detail__preview_repeat{
    display: none;
}
.upholstery-detail__preview_repeat.active{
        display: block;
     }
.featured-in-palette{
    display: none;
}
.featured-in-palette.active{
    display: block;
}
.material__goes__well__with{
    display: none;
}
.material__goes__well__with.active{
    display: block;
}
.finish__search, .surface-modal__search-wrapper {

    margin-top: 20px;
    margin-bottom: 10px;

}
.finish__search .finish__search__container, .finish__search .surface-modal__search-container, .surface-modal__search-wrapper .finish__search__container, .surface-modal__search-wrapper .surface-modal__search-container {

    background: white;
    border-radius: 3px;
    border: solid 1px #e3e3e3;
    height: 40px;
    position: relative;
}
.finish__search .finish__search__container input, .finish__search .surface-modal__search-container input, .surface-modal__search-wrapper .finish__search__container input, .surface-modal__search-wrapper .surface-modal__search-container input {
    height: 40px;
    border: none;
    background: none;
    margin:0;
    padding-left: 40px;

    color: #6f6f6f;


}
.finish__search .finish__search__container input:focus, .finish__search .surface-modal__search-container input:focus, .surface-modal__search-wrapper .finish__search__container input:focus, .surface-modal__search-wrapper .surface-modal__search-container input:focus {
     background:none;
}
.finish__search .finish__search__container input:focus::-moz-placeholder, .finish__search .surface-modal__search-container input:focus::-moz-placeholder, .surface-modal__search-wrapper .finish__search__container input:focus::-moz-placeholder, .surface-modal__search-wrapper .surface-modal__search-container input:focus::-moz-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
     color: #c2c2c2;
     opacity: 1; /* Firefox */
 }
.finish__search .finish__search__container input:focus:-ms-input-placeholder, .finish__search .surface-modal__search-container input:focus:-ms-input-placeholder, .surface-modal__search-wrapper .finish__search__container input:focus:-ms-input-placeholder, .surface-modal__search-wrapper .surface-modal__search-container input:focus:-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
     color: #c2c2c2;
     opacity: 1; /* Firefox */
 }
.finish__search .finish__search__container input:focus::placeholder, .finish__search .surface-modal__search-container input:focus::placeholder, .surface-modal__search-wrapper .finish__search__container input:focus::placeholder, .surface-modal__search-wrapper .surface-modal__search-container input:focus::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
     color: #c2c2c2;
     opacity: 1; /* Firefox */
 }
.finish__search .finish__search__container input:focus:-ms-input-placeholder, .finish__search .surface-modal__search-container input:focus:-ms-input-placeholder, .surface-modal__search-wrapper .finish__search__container input:focus:-ms-input-placeholder, .surface-modal__search-wrapper .surface-modal__search-container input:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
     color: #c2c2c2;
 }
.finish__search .finish__search__container input:focus::-ms-input-placeholder, .finish__search .surface-modal__search-container input:focus::-ms-input-placeholder, .surface-modal__search-wrapper .finish__search__container input:focus::-ms-input-placeholder, .surface-modal__search-wrapper .surface-modal__search-container input:focus::-ms-input-placeholder { /* Microsoft Edge */
     color: #c2c2c2;
 }
.finish__search .finish__search__container.name-field input, .finish__search .surface-modal__search-container.name-field input, .surface-modal__search-wrapper .finish__search__container.name-field input, .surface-modal__search-wrapper .surface-modal__search-container.name-field input {
     padding-left:0.5rem;
 }
.finish__search .finish__search__container button, .finish__search .surface-modal__search-container button, .surface-modal__search-wrapper .finish__search__container button, .surface-modal__search-wrapper .surface-modal__search-container button {
    position: absolute;
    left: 0;
    top:0;
    bottom:0;
    width: 40px;
    background: transparent url(./images/search.png) no-repeat center;
;
    border: none;
    text-indent: -9999px;
}
.finish__search .finish__search__container button:hover, .finish__search .surface-modal__search-container button:hover, .surface-modal__search-wrapper .finish__search__container button:hover, .surface-modal__search-wrapper .surface-modal__search-container button:hover {
     background: transparent url(./images/search-hover.png) no-repeat center;
 }
.finish__search .finish__search__container .search__results__panel, .finish__search .finish__search__container .search__results__panel-empty, .finish__search .surface-modal__search-container .search__results__panel, .finish__search .surface-modal__search-container .search__results__panel-empty, .surface-modal__search-wrapper .finish__search__container .search__results__panel, .surface-modal__search-wrapper .finish__search__container .search__results__panel-empty, .surface-modal__search-wrapper .surface-modal__search-container .search__results__panel, .surface-modal__search-wrapper .surface-modal__search-container .search__results__panel-empty {
    background: white;
    box-shadow: 0 1px 5px 1px rgba(25, 25, 25, 0.25);
    border-radius: 3px;
    position: relative;
    display:none;
    z-index: 999;
}
.finish__search .finish__search__container .search__results__panel.active, .finish__search .finish__search__container .search__results__panel-empty.active, .finish__search .surface-modal__search-container .search__results__panel.active, .finish__search .surface-modal__search-container .search__results__panel-empty.active, .surface-modal__search-wrapper .finish__search__container .search__results__panel.active, .surface-modal__search-wrapper .finish__search__container .search__results__panel-empty.active, .surface-modal__search-wrapper .surface-modal__search-container .search__results__panel.active, .surface-modal__search-wrapper .surface-modal__search-container .search__results__panel-empty.active {
     display:block;
 }
.finish__search .finish__search__container .search__results__panel, .finish__search .surface-modal__search-container .search__results__panel, .surface-modal__search-wrapper .finish__search__container .search__results__panel, .surface-modal__search-wrapper .surface-modal__search-container .search__results__panel {
        z-index: 2;
    }
.archive-palette .search__filter__container{
    margin-top: 10px;
}
.search__filter__container {
    margin-top:20px;
}
.search__filter__container .filter__buttons {

}
.search__filter__container .sort__mb_button {
    text-align: right;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
.search__filter__container .sort__mb_button {
        padding-right: 0
}
    }
.search__filter__container .sort__button {
    text-align: right;
    position:relative;
    float: right;

}
.search__filter__container .sort__button br {
        display: none;
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.search__filter__container .sort__button {
    text-align: left

}
    }
.search__filter__container .sort__button button {
    width: 284px;

}
@media only screen and (min-width : 768px) and (max-width : 959px){
.search__filter__container .sort__button button {
    width: 236px

}
    }
.search__filter__container .sort__button .sort__popover {
width: 284px;
position: absolute;
top:0;
display:none;
right:10px;
z-index:1;
border-radius: 3px;
box-shadow: 0 1px 5px 1px rgba(25, 25, 25, 0.2);
background-color: #ffffff;
text-align: left;
padding:15px;

}
@media only screen and (min-width : 768px) and (max-width : 959px){
.search__filter__container .sort__button .sort__popover {
        width: auto;
        left: 0

}
    }
@media only screen and (min-width : 768px){
.search__filter__container .sort__button .sort__popover.sort__popover__palettes {
    top: 6px;
    right: 3px
 }
    }
.search__filter__container .sort__button .sort__popover .surface-radio__container, .search__filter__container .sort__button .sort__popover .surface-checkbox__container {
    margin-bottom:15px;
}
.search__filter__container .sort__button .sort__popover .surface-radio__container label {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: 0.15px;
    color: #6f6f6f;
}
.search__filter__container .sort__button .sort__popover .surface-radio__container .finish-control[type='radio']:after {
    background:white;
    height:20px;
    width:20px;
}
/*}*/
.search__filter__container .sort__button .sort__popover .surface-radio__container .finish-control {
    opacity: 0;
}
/*    background:  url(./images/icon-check.png) white;*/
.search__filter__container .sort__button .sort__popover .surface-radio__container .finish-control-label {
    margin-left: 35px;
}
/*.finish-control[type='radio']:checked:after {*/
.search__filter__container .sort__button .sort__popover .surface-radio__container .finish-control-label .finish-control[type='radio']:checked + span:before {
    background:  url(./images/icon-check.png) white;
    position: absolute;
    background-color: #ffffff;
    content: '';
    display: inline-block;
    visibility: visible;
    height: 20px;
    width:20px;
    cursor: pointer;
    top: -2px;
    left: -1px;
}
.search__filter__container .filter__buttons button, .search__filter__container .sort__button button {
        border-radius: 3px;
        border: solid 1px #e3e3e3;
        background-color: #ffffff;
    }
.search__filter__container .filter__buttons button br, .search__filter__container .sort__button button br {
            display: none;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
.search__filter__container .filter__buttons button, .search__filter__container .sort__button button {
            width: 100%;
            padding: 12px 45px
    }
    }
.search__filter__container .filter__buttons button {
        padding: 12px 15px;
    }
.search__filter__container .sort__button button {
        padding: 12px 30px 12px 15px;
    }
.search__filter__container .filter__buttons button {
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: 0.15px;
    color: #6f6f6f;
}
.search__filter__container .filter__buttons button:focus {
        border: solid 2px #191919;
        color: #266de8;
    }
.search__filter__container .sort__button button {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: 0.15px;
    color: #6f6f6f;

    text-align: left;
    background-image: url('./images/down.svg');
    background-repeat: no-repeat;
    background-position:  95% center ;
}
.search__filter__container .sort__button button:focus {
        border: solid 2px #191919;
        color: #266de8;
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.search__filter__container .sort__button button {
    width: 100%
}
    }
.search-results__container  {
    margin:0;
    list-style:none;
    padding:15px 15px 0 15px;
}
.search-results__container#search-results-products {
        padding-top: 0;
    }
.search-results__container#search-results-products .search-item:not(.search-item__all-results) {
                padding-top: 15px;
                border-top: solid 1px #e3e3e3;
            }
.search-results__container#search-results-products .search-item a {
                font-weight: normal;
            }
.search-results__container .search-item  {
        padding-bottom:15px;
    }
.search-results__container .search-item.search-item__message {
             font-size: 12px;
             font-weight: normal;
             font-stretch: normal;
             font-style: normal;
             line-height: 1.33;
             letter-spacing: 0.15px;
             color: #6f6f6f;

        }
.search-results__container .search-item.search-item__label {
             font-size: 12px;
             font-weight: bold;
             font-stretch: normal;
             font-style: normal;
             line-height: 1.33;
             letter-spacing: 0.15px;
             color: #191919;
         }
.search-results__container .search-item span {
            font-size: 12px;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: 0.15px;
            color: #191919;
            display:flex;
            align-items: center;
        }
.search-results__container .search-item span.search-filter-product-count {
                border-radius: 3px;
                background-color: #6f6f6f;
                font-size: 11px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: 1;
                letter-spacing: normal;
                color: #ffffff;
                padding: 4px;
                margin-left: 9px;
            }
.search-results__container .search-item a {
            font-size: 12px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: 0.15px;
            color: #191919;
            display:flex;

        }
.search-results__container .search-item a:hover {
                 color: #0659e8;
            }
.search-results__container .search-item a:hover .text-content h5 {
                    color: #0659e8;

                }
.search-results__container .search-item a img {
                width: 40px;
                height: 40px;
            }
.search-results__container .search-item a .text-content {
                margin-left: 15px;
                display: flex;
                justify-content: center;
                flex-direction: column;
            }
.search-results__container .search-item a .text-content h5 {
                    font-size: 12px;
                    font-weight: bold;
                    font-stretch: normal;
                    font-style: normal;
                    line-height: 1.33;
                    letter-spacing: 0.15px;
                    color: #191919;
                    margin:0;
                }
.search-results__container .search-item a .text-content p {
                    margin:0;
                    font-size: 12px;
                    font-weight: normal;
                    font-stretch: normal;
                    font-style: normal;
                    line-height: 1.33;
                    letter-spacing: 0.15px;
                    height: 16px;
                    color: #6f6f6f;
                }
.search-results__container .search-item.search-item__all-results a {
                min-height:20px;
                line-height: 20px;
                padding-left: 55px;
                background: url('./images/search.png') no-repeat 10px center
            }
.search-results__search-term {
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: 0.15px;
    color: #6f6f6f;
    margin-top:16px;
    margin-bottom:0;
}
#surface-modal_filters .surface-checkbox__container label, #surface-modal_filters .surface-radio__container label, #surface-modal__sort_by .surface-checkbox__container label, #surface-modal__sort_by .surface-radio__container label {
            margin-bottom: 0;
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
        }
#surface-modal_filters .results_count, #surface-modal__sort_by .results_count {
        height: 100%;
    }
.filter-drawer {
    /* display:none; */
    background:#ffffff;
    border-radius: 3px;
    box-shadow: 0 1px 5px 1px rgba(25, 25, 25, 0.25);
    position: absolute;
    width:100%;
    margin-top:10px;
    padding: 20px;
    z-index: 999;
    display: none;
}
.filter-drawer.open {
        display:block;
    }
@media only screen and (max-width : 1200px) {
            .filter-drawer.open .filter-group-col {
                width: 100%;
            }
    }
.filter-drawer .surface-checkbox__container {
        margin-bottom: 20px;
    }
.filter-drawer .surface-checkbox__container input {
            margin-bottom: 0;
        }
.filter-drawer .surface-checkbox__container label {
            margin-bottom: 0;
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
        }
@media only screen and (max-width: 576px){
.filter-drawer .surface-checkbox__container {
            width: 100%
    }
    }
.filter-drawer__heading {
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: -0.3px;
    color: #191919;
    margin-bottom:20px;
}
.search__filter__container {
    position: relative;
}
.filter-drawer__footer {
    padding-top:20px;
}
.sort__button {
    text-align: right;
}
.sort__button:focus {
     outline: none;
 }
.sort__button button {
    width: 284px;
}
.filter__buttons button, .sort__button button {
    border-radius: 3px;
    border: solid 1px #e3e3e3;
    background-color: #ffffff;
    padding: 12px 15px;



}
.filter__buttons button.active, .sort__button button.active {
     border: 2px solid #0659e8;
 }
.filter__buttons button {
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: 0.15px;
    color: #6f6f6f;
    margin-right: 5px;
}
.sort__button button {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: 0.15px;
    color: #6f6f6f;
    width: 284px;
    text-align: left;
    background-image: url('./images/down.svg');
    background-repeat: no-repeat;
    background-position:  95% center ;
}
.surface-modal__search-wrapper {
    margin-top: 0;
    margin-bottom: 0;
}
.search__filter__container .filter__buttons button:hover{
    color: #0659e8;
}
.search__filter__container .sort__button button:hover{
    background-image: url('./images/down-hover.png')!important;
}
.search__filter__container .filter__buttons button.active{
    color: black;
}
.filter-drawer__footer{
    display: flex;
}
.surface-modal__container .surface-modal__heading{
    display: flex;
    justify-content: center;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
.surface-modal__container .surface-modal__heading{
    justify-content: left
}
    }
#surface-modal_filters .surface-modal__block .surface-modal__content .section-header{
    font-size: 24px;
}
.sort__popover .surface-radio__container:hover label{
    color: #0659e8!important;
}
.filter-drawer_tab{
    display: flex;
    border-bottom: 1px solid gray;
    padding-bottom: 15px;
    margin-bottom: 20px;
    margin-right: 10px;
}
.filter-drawer_tab-item{
    margin-right: 20px;
    font-size: 12px;
    font-weight: bold;
    position: relative;
    cursor: pointer;
    color: #6f6f6f;
}
.filter-drawer_tab-item.active{
     color: black;
}
.filter-drawer_tab-item.active:before{
     position: absolute;
     content: '';
     width: 100%;
     bottom: -15px;
     height: 2px;
     background: black;
 }
@media only screen and (min-width : 280px) and (max-width : 767px){
#main-nav{
            display: none
    }
    }
.filter-drawer_tab-content{
    display: none;
}
.filter-drawer_tab-content.active{
     display: block;
 }
.capacity-button-container{
    flex-wrap: wrap;
    max-width: 420px;
    display: none;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
.capacity-button-container{
    max-width: 340px
}
    }
.capacity-button-container.active{
     display: flex;
 }
.capacity-button{
    width: 60px;
    height: 40px;
    font-size: 12px;
    color: black;
    background: white;
    font-weight: bold;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    margin-right: 10px;
    margin-bottom: 10px;
}
.capacity-button.active{
     border: 2px solid #266de8;
 }
.capacity-button:hover{
     border: 2px solid #266de8;
 }
.column-count-2 {
    -moz-column-count: 2;
         column-count: 2;
}
.column-count-2 {
    -moz-column-count: 2;
         column-count: 2;
}
.sfl-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.filter-group-col .search__results__panel.active {
            position: absolute;
            left: 0;
            right: 0;
        }
.filter-group-col .search__results__panel .search-item {
            cursor: pointer;
        }
.filter-group-col #chosen_products {
        display: flex;
        flex-wrap: wrap;
        margin: 0 0 0 -10px;
    }
.filter-group-col #chosen_products .search-item-span {
            display: block;
            padding: 10px 34px 10px 10px;
            margin: 15px 0 0 10px;
            border-radius: 3px;
            cursor: pointer;
            background-color: #cdcdcd;
            position: relative;
            text-transform: uppercase;
            font-size: 14px;
            font-weight: bold;
            color: #6f6f6f;
        }
.filter-group-col #chosen_products .search-item-span b {
                font-weight: inherit;
                font-size: inherit;
            }
.filter-group-col #chosen_products .search-item-span:after {
                content: "";
                right: 10px;
                top: 0;
                bottom: 0;
                cursor: pointer;
                width: 14px;
                background-image: url(./images/secondary.png);
                background-size: contain;
                background-position: center;
                background-repeat: no-repeat;
                position: absolute;
            }
.filter-group-col #chosen_products .search-item-span .search-filter-product-count {
                display: none;
            }
.upper__wrap {
    background: white;
    margin-top: -2.25rem;

    padding-top: 20px;
    border-bottom: 1px solid #e3e3e3;
    padding-left: 20px;
    padding-right: 20px;
}
.collapse__panel {
    background: white;
    padding: 20px;
    margin-bottom: 10px;
}
.collapse__panel .collapse__content {
        margin-top: 24px;
    }
.collapsible .collapse__header:hover .material__section__title {
                color: #0659e8;
            }
.collapsible .collapse__indicator {
        display: inline-block;
        height: 10px;
        width: 10px;
        background-image: url('./images/up-arrow.png');
        background-repeat: no-repeat;
        background-position: center;
        margin-left: 5px;
    }
.collapsible.collapsed .collapse__content {
        display: none;
    }
.collapsible.collapsed .collapse__indicator {
        background-image: url('./images/down.svg');
    }
.collapsible.collapsed details[open] .collapse__indicator {
            background-image: url('./images/up-arrow.png');
        }
.material-tab__footer .collapse__header {
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: 0.15px;
        color: #6f6f6f;
    }
.material-tab__footer p {
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: 0.15px;
        color: #6f6f6f;
        margin-top: 8px;
    }
.mateial__detail__preview button {
        padding: 0;
        background: transparent;
    }
.mateial__detail__preview button:focus {
            border: solid 2px #191919;
        }
.material__detail__image__block {
    margin-top: 20px;
}
/*border-top: 1px solid #e3e3e3;*/
.material__detail__image__block table tr th {
            width: 188px;
        }
.material__detail__image__block .controls {
        margin-bottom: 20px;
    }
.material__detail__image__block .controls button {
            font-size: 12px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: normal;
            color: #6f6f6f;
            background: transparent;
            text-transform: uppercase;
            padding: 4px 10px;
            border-left: 1px solid #e3e3e3;
        }
.material__detail__image__block .controls button.active {
                color: #191919;
            }
.material__detail__image__block .controls button:hover {
                color: #0659e8;
            }
.material__detail__image__block .controls button:first-of-type {
                margin-left: -10px;
                border: none;
            }
.material__detail__image__block .controls button:focus {
                border: solid 2px #191919;
                color: #266de8;
            }
.material__detail__image__block .material__detail__swatches {
        margin-top: 20px;
        margin-bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        max-height: 180px;
        overflow: hidden;
    }
.material__detail__image__block .material__detail__swatches.open {
            max-height: none;
            overflow: visible;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
.material__detail__image__block .material__detail__swatches {
            width: 100%;
            max-width: 320px
    }
    }
.material__detail__image__block .material__detail__swatches .material__swatch {
            height: 48px;
            width: 48px;
            border: solid 2px transparent;
            border-radius: 50%;
            display: inline-block;
            padding: 2px;
            margin-right: 12px;
            margin-bottom: 12px;
            background: transparent;
        }
@media only screen and (min-width : 768px) and (max-width : 959px){
.material__detail__image__block .material__detail__swatches .material__swatch {
                margin-right: 8px
        }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.material__detail__image__block .material__detail__swatches .material__swatch {
                margin-right:10px
        }
                .material__detail__image__block .material__detail__swatches .material__swatch:nth-child(5n){
                    margin-right: 0;
                 }
    }
.material__detail__image__block .material__detail__swatches .material__swatch img {
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
.material__detail__image__block .material__detail__swatches .material__swatch:focus {
                border: solid 2px #93b6f4;
                color: #191919;
                border-radius: 50%;
            }
.material__detail__image__block .material__detail__swatches .material__swatch.active, .material__detail__image__block .material__detail__swatches .material__swatch:hover {
                border-color: #266de8;
            }
.material__detail__image__block .more-swatch {
        background: transparent;
        border: none;
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #266de8;
        margin: 0 auto;
        width: 100%;
    }
.material__detail__image__block .more-swatch:focus {
            border: solid 2px #191919;
        }
.material__detail__image__block .more-swatch:hover {
            color: #0659e8;
        }
@media only screen and (max-width : 1200px) {
.material__detail__image__block .more-swatch {
            display: none
    }
    }
.material__detail__image__block .more-swatch.more-swatch-large{
             display: block;
        }
.material__detail__image__block .more-swatch.more-swatch-small{
            display: none;
        }
@media only screen and (max-width : 959px){
.material__detail__image__block .more-swatch.more-swatch-small{
                display: block
        }
    }
.material__detail__image__block .more-swatch.more-swatch-mobile{
            display: none;
        }
@media only screen and (max-width: 767px){
.material__detail__image__block .more-swatch.more-swatch-mobile{
                display: block
        }
    }
.material__detail__image__block .more-swatch.more-swatch-disable{
             display: none;
        }
.material__detail__image__block .material__swatch__information {
        margin-top: 20px;
        margin-bottom: 20px;
    }
@media only screen and (min-width : 1200px) {
.material__detail__image__block .material__swatch__information {
            margin-right: 60px
    }
    }
.material__detail__image__block .material__swatch__information h5 {
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: 0.15px;
            color: #6f6f6f;
        }
.material__image__title__content .collapsible {
        margin-bottom: 20px;

    }
.material__image__title__content .material__brand {
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #6f6f6f;
    }
.material__image__title__content .material__brand span {
            font-size: 14px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: #6f6f6f;
        }
.material__image__title__content .material__title {
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: -0.3px;
        color: #191919;
    }
.material__image__title__content .material__title .card__favorite{
            top:0px;
            left: -3px;
        }
.material__image__title__content .material__name {
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #6f6f6f;
        margin-top: 13px;
        max-width: -webkit-fit-content;
        max-width: -moz-fit-content;
        max-width: fit-content;
        cursor: pointer;
    }
.material__image__title__content .cart__row {

    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.material__image__title__content .w-1{
            position: fixed;
            bottom: 0;
            width: 100%;
            left: 0;
            padding: 10px;
            background: white;
            z-index: 99
    }
            .material__image__title__content .w-1 .button__add__to__cart{
                margin-top: 0;
            }
    }
.material__image__title__content .button__add__to__cart {
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: normal;
        text-align: center;
        color: #ffffff;
        text-transform: uppercase;
        padding: 12px;
        background-color: #266de8;
        width: 100%;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.material__image__title__content .button__add__to__cart {
            margin-top: 20px
    }
    }
.material__image__title__content .button__add__to__cart:hover {
            background-color: #0659e8;
        }
.material__image__title__content .button__add__to__cart:focus {
            border: solid 2px #191919;
        }
.material__image__title__content .material__features {
        list-style: none;
        margin-left: 10px;
        margin-top: 0;
        padding: 0;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.material__image__title__content .material__features {
            margin-top: 0;
            margin-left: 0
    }
    }
.material__image__title__content .material__features li {
            font-size: 12px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: 0.15px;
            color: #191919;
        }
.material__image__title__content .material__features li img {
                margin-right: 10px;
                vertical-align: middle;
            }
.material__image__title__content .material__features li span {
                display: inline-block;
                margin-bottom: 5px;
            }
.material__image__title__content .material__tab .material__tab__controls {
            list-style: none;
            margin: 0;
            padding: 0;

        }
.material__image__title__content .material__tab .material__tab__controls li {
                display: inline-block;
                width: 32.33333%;
                padding: 5px 5px 0;
                margin: 0;
            }
.material__image__title__content .material__tab .material__tab__controls li:first-of-type {
                    padding-left: 0;
                }
.material__image__title__content .material__tab .material__tab__controls li:last-of-type {
                    padding-right: 0;
                }
.material__image__title__content .material__tab .material__tab__controls button {
                padding: 0;
                font-size: 12px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: 4;
                letter-spacing: normal;
                text-align: center;
                color: #6f6f6f;
                width: 100%;
                background: transparent;
                text-transform: uppercase;

            }
.material__image__title__content .material__tab .material__tab__controls button.active, .material__image__title__content .material__tab .material__tab__controls button:hover {
                    color: #191919;
                    border-bottom: 2px solid #191919;
                }
/*margin-top: -1px;*/
.material__image__title__content .material-tab__item table th, .material__image__title__content .material-tab__item table td {
                border-top: 1px solid #e3e3e3;
            }
.material__image__title__content .material-tab__item table th {
                font-size: 12px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.33;
                letter-spacing: 0.15px;
                color: #6f6f6f;
                text-transform: none;
            }
.material__image__title__content .material-tab__item table td {
                font-size: 12px;
                font-weight: normal;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.33;
                letter-spacing: 0.15px;
                color: #6f6f6f;
            }
.material__section__title {
    font-size: 24px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: -0.3px;
    color: #191919;
    margin-top: 30px;
    margin-bottom: 20px;
}
.collapse__panel .collapse__header {

        background-repeat: no-repeat;
        background-position: center right;
        background-image: url('./images/collapse.png');
    }
.collapse__panel .collapse__header:hover {
            cursor: pointer;
            background-image: url('./images/collapse-hover.png');
        }
.collapse__panel.collapsed .collapse__header {
            background-image: url('./images/expand.png');
        }
.collapse__panel.collapsed .collapse__header:hover {
                cursor: pointer;
                background-image: url('./images/expand-hover.png');
            }
.collapse__panel .material__section__title {
        margin: 0;
    }
.finish__control {
    margin-left: 5px;
    margin-right: 5px;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: normal;
    text-align: center;
    padding: 12px;
    background: none;
    border: 1px solid transparent;
    color: #6f6f6f;
}
.finish__control:hover {
        color: #0659e8;
    }
.finish__control.primary {
        background-color: #266de8;
        color: #ffffff;
        text-transform: uppercase;

    }
.finish__control.secondary {
        border: solid 1px #e3e3e3;
        background-color: #ffffff;
        color: #6f6f6f;
        text-transform: uppercase;

    }
.finish__control.ACT__button {
    padding: 0;
    position: relative;
    top: 3px;
    margin-left: 0;
}
.finish__control.ACT__button:hover svg path:last-child {
                fill: #266de8;
            }
.finish__control.ACT__button:focus svg path:last-child {
                fill: #266de8;
            }
.availability__list {
    margin: 0;
    list-style: none;
    width: 100%;
    padding-bottom: 40px;
    -moz-column-count: 4;
         column-count: 4;
}
.availability__list a {
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: 0.15px;
        color: #6f6f6f;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.availability__list {
        -moz-column-count: 1;
             column-count: 1
}
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.availability__list {
        -moz-column-count: 3;
             column-count: 3
}
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.col-1-2:first-child .column-text {
            margin-bottom: 10px;
            margin-top: 20px
    }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.col-1-2:last-child .column-text {
            margin-bottom: 20px;
            margin-top: 10px
    }
    }
.column-text {
    font-size: 12px;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: 0.15px;
    color: #6f6f6f;
    margin-top: 30px;
    margin-bottom: 30px;
}
.column-text.right {
        text-align: right;;
    }
.documents__list {
    margin: 0;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
.documents__list_margin{
            margin-top:0px
     }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.documents__list {
        margin-top:20px
}
    }
.documents__list dt {
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: normal;
        color: #191919;
        text-transform: uppercase;
        margin-bottom: 20px;
    }
.documents__list dd a {
            font-size: 12px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 20px;
            letter-spacing: 0.15px;
            color: #191919;
            padding-left: 30px;
            background-image: url('./images/download.svg');
            background-repeat: no-repeat;
            background-position: center left;
            margin-bottom: 20px;
        }
.documents__list dd a:hover {
                color: #0659e8;
                background-image: url('./images/download-hover.svg');
            }
.material__name__detail {
    list-style: none;
    margin: 10px 0 0;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    color: #6f6f6f;

}
.material__name__detail strong {
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #6f6f6f;
        padding-right: 4px;
    }
.material__view__on__product .material__section__title {
        text-align: center;
        margin-bottom: 0;
    }
.material__view__on__product .material-tab__header {
        border-bottom: 1px solid #e3e3e3;
    }
.material__disclaimers .collapse__content .surface-row {
            display: flex;
            flex-wrap: wrap;
        }
.material__disclaimers .collapse__content .surface-row p {
                font-size: 14px;
                font-weight: normal;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.43;
                letter-spacing: normal;
                color: #6f6f6f;

                width: 33%;
                padding-right: 10px;
                margin-bottom: .9375rem;
            }
@media only screen and (min-width : 280px) and (max-width : 767px){
.material__disclaimers .collapse__content .surface-row p {
                    width: 100%
            }
    }
.material__you__may__also__like {
    margin-bottom: 30px;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
.material__you__may__also__like {
        padding: 0 20px
}
    }
.material-tab__content__container #steelcase_configurator_root #configuratorContainer .wrapper:last-of-type {
    padding-bottom: 0;;
}
.material-tab__content__container #steelcase_configurator_root #configuratorContainer .wrapper:first-of-type {
    border: none;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
.material__section__title-featured{
        padding: 0 20px
}
    }
@media only screen and (min-width : 1200px) {
        .surface-row-featured .col-1-1 .material__card,.featured .col-1-1 .material__card{
            display: flex;
        }
                    .surface-row-featured .col-1-1 .material__card .card__image,.featured .col-1-1 .material__card .card__image{
                        width: 50%;
                    }
                    .surface-row-featured .col-1-1 .material__card .card__content,.featured .col-1-1 .material__card .card__content{
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        padding-left: 60px;
                    }
                                .surface-row-featured .col-1-1 .material__card .card__content .card__name a,.featured .col-1-1 .material__card .card__content .card__name a{
                                    font-size: 24px;
                                }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.surface-row-featured, .featured {
    padding: 0 20px
}
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.documents__block .col-1-3{
            width: 100%
    }
    }
.container .material__you__may__also__like{
    display: none;
}
.container .material__you__may__also__like.active{
        display: block;
     }
.material-tab__footer details summary {
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: 0.15px;
    color: #6f6f6f;
    cursor: pointer;
}
.material-tab__footer details .collapse__indicator {
    background-image: url('./images/down.svg');
}
.material-tab__footer details[open] .collapse__indicator {
    background-image: url('./images/up-arrow.svg');
}
.card__image_family{
    display: none;
}
.card__image_family.active{
    display: block;
}
.empty-references{
    display: none;
}
.empty-references.active{
    display: block;
}
.material__view__on__product{
    display: none;
}
.material__view__on__product.active{
    display: block;
}
.availability__list{
    display: none;
}
.availability__list.show, .availability__list.active{
    display: block;
}
.single-finish #page{
    position: inherit;
}
.material-tab__header {
    border-bottom: 1px solid #e3e3e3;
}
.material-tab__header button:focus {
            border: solid 2px #191919;
            color: #266de8;
        }
.documents-assets .button-head-accordion, .material__disclaimers .button-head-accordion {
        background: none;
    }
.documents-assets .button-head-accordion:focus, .material__disclaimers .button-head-accordion:focus {
            border: solid 2px #191919;
        }
.documents-assets .material__section__title {
    text-align: left;
}
/*NEW*/
.material__swatch__information_finish_origin-brand {
                display: none;

                font-size: 12px;
                font-weight: normal;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.33;
                letter-spacing: 0.15px;
                color: #6f6f6f;
            }
.material__swatch__information_finish_origin-brand.active {
                    display: block;
                }
.material__swatch__information_finish_origin-brand div:first-child {
                        margin-bottom: 5px;
                    }
.separator {
    height: 1px;
    background-color: #e3e3e3;
    margin-bottom: 60px;
}
.palette-tags h3 {
        margin-top: 30px;
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: -0.3px;
        color: #191919;
    }
.palette-tags ul {
        margin: 20px 0 0;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }
.palette-tags ul li {
            display: block;
            margin-right: 10px;
            margin-bottom: 5px;
            padding: 12px 14px;
            border-radius: 3px;

            border: solid 1px #e3e3e3;
            background-color: #ffffff;
            font-size: 12px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: 0.15px;
            color: #6f6f6f;
        }
.palette-tags .more-tags{
        cursor: pointer;
    }
.finish-header {

}
.fade__container p {
        margin: 0;
    }
.palette-detail-col-left {
    width: 774px;
}
.palette-detail-col-left .finish__button fullwidth {
        margin-top: 10px;
    }
.palette-detail-col-right {
    padding-right: 0;
    padding-left: 89px;
    min-height: 384px;
}
@media only screen and (min-width : 1200px) {
.palette-detail-col-right {
        /*max-height: 1486px;*/
        overflow: auto;
        overflow-x: hidden;
        overflow-y: auto
}
    }
.palette-detail-col-right::-webkit-scrollbar-track, .surface-modal__scrollable::-webkit-scrollbar-track {
    border: none;
    padding: 2px 0;
    background-color: transparent;
}
.palette-detail-col-right::-webkit-scrollbar, .surface-modal__scrollable::-webkit-scrollbar {
    width: 8px;
}
.palette-detail-col-right::-webkit-scrollbar-thumb, .surface-modal__scrollable::-webkit-scrollbar-thumb {
    border-radius: 4px;
    /*box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
    background-color: #6f6f6f;
    border: none;
}
.palette-gallery .surface-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
.palette-gallery .surface-row .col-1-1 {
            position: relative;
        }
.palette-gallery .surface-row .col-1-1:hover .more {
                    //background-color: white;
                    box-shadow: 0 0 6px rgb(0 0 0 / 9%);
                    opacity: .5;
                }
.palette-gallery .surface-row .col-1-1:hover .more span {
                        background: #cdcdcd;
                    }
.palette-gallery .surface-row .col-1-1 .more {
                position: absolute;
                bottom: 10px;
                right: 20px;
                border-radius: 50%;
                height: 36px;
                width: 36px;
                opacity: .7;
                background-color: #6f6f6f;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px 10px;
                background-image: url('./images/modal-icon.svg');
                background-position: center;
                background-repeat: no-repeat;
            }
.palette-gallery .surface-row .col-1-1 .more span {
                    height: 5px;
                    width: 5px;
                    display: inline-block;
                    background: white;
                }
@media only screen and (min-width : 768px) and (max-width : 959px){
.palette-gallery .surface-row .col-1-1 .more {
                    right: 10px
            }
    }
.palette-gallery .surface-row .col-1-1.column-2 {
                 padding-right: 5px;
            }
@media only screen and (min-width : 280px) and (max-width : 767px){
.palette-gallery .surface-row .col-1-1.column-2 {
                    padding-right: 0
            }
    }
.palette-gallery .surface-row .col-1-1.column-3 {
                 padding-left: 5px;
            }
@media only screen and (min-width : 280px) and (max-width : 767px){
.palette-gallery .surface-row .col-1-1.column-3 {
                    padding-left: 0
            }
    }
.palette-gallery .surface-row .col-1-1 button {
                padding: 0;
            }
.palette-gallery .surface-row .col-1-1 button img {
                    vertical-align: bottom;
                }
.palette-gallery .surface-row .col-1-1 button:focus {
                    border: solid 2px #191919;
                }
.palette-gallery .surface-row .col-1-1 button:focus ~.more {
                        background: white;
                        box-shadow: 0 0 6px rgb(0 0 0 / 9%);
                    }
.palette-gallery .surface-row .col-1-1 button:focus ~.more span {
                            background: #cdcdcd;
                        }
.palettes-details-featured-materials {
    display: none;
}
.palettes-details-featured-materials-container .featured-materials-surface-row {
        width: 100%;
    }
.palettes-details-featured-materials-container .featured-materials-surface-row.surface-row {
            margin: 0;
         }
.palettes-details-featured-materials-container .featured-materials-surface-row .material__card {
            display: none;
        }
.palettes-details-featured-materials-container .featured-materials-surface-row .material__card:nth-child(-n+4) {
                display: block;
            }
@media only screen and (min-width : 960px){
.palettes-details-featured-materials-container .featured-materials-surface-row .col-1-4 {
                width: 100%
        }
    }
@media only screen and (max-width : 959px){
.palettes-details-featured-materials-container .featured-materials-surface-row {
            width: 100%
    }
    }
.palettes-details-featured-materials-container .card_add_all_to_cart {

        width: 100%;
        height: 2.8em;
        background-color: #266de8;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
.palettes-details-featured-materials-container .card_add_all_to_cart .button_add_all_to_cart {
            font-size: 12px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            letter-spacing: normal;
            text-align: center;
            color: #ffffff;
            text-transform: uppercase;
            background: transparent;
        }
.palettes-details-featured-materials-container .card_add_all_to_cart:hover {
            background-color: #0659e8;
        }
.palette-detail-main-wrapper .surface-row .col-1-1 {
        width: 50%;
        margin-bottom: 10px;

    }
.palette-detail-main-wrapper .surface-row .col-1-1:nth-child(3n+1) {
            width: 100%;
        }
.palette-detail-main-wrapper .surface-row .col-1-1.column-2 button, .palette-detail-main-wrapper .surface-row .col-1-1.column-3 button {
                height: 100%;
                width: 100%;
            }
.palette-detail-main-wrapper .surface-row .col-1-1.column-2 button img, .palette-detail-main-wrapper .surface-row .col-1-1.column-3 button img {
                    -o-object-fit: cover;
                       object-fit: cover;
                    height: 100%;
                    width: 100%;
                    max-height: 251px;
                }
@media only screen and (min-width : 280px) and (max-width : 767px){
.palette-detail-main-wrapper .surface-row .col-1-1.column-2 button img, .palette-detail-main-wrapper .surface-row .col-1-1.column-3 button img {
                        max-height: unset
                }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
        .palette-detail-main-wrapper .surface-row .col-1-1 {
            width: 100%;
        }
        .palette-detail-main-wrapper .finish-header {
            margin-bottom: 10px;
        }

        .palette-detail-main-wrapper .separator-up {
            margin-top: 30px;
        }

        .palette-detail-main-wrapper [class*='col-'] {
            padding-right: 0;
            width: 100%;
        }

        .palette-detail-main-wrapper .palette-detail-col-left {
            width: 100%;
        }

            .palette-detail-main-wrapper .palette-detail-col-left .col-1-2:first-child {
                margin-bottom: 10px;
            }
            .palette-detail-main-wrapper .surface-row button {
                width: 100%;
            }

                .palette-detail-main-wrapper .surface-row button img {
                    width: 100%;
                }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
        .palette-detail-main-wrapper .container > .surface-row {
            margin-right: 0;

        }

        .palette-detail-main-wrapper .finish-header {
            margin-bottom: 0;
        }

        .palette-detail-main-wrapper .separator-up {
            margin-top: 20px;
        }

        .palette-detail-main-wrapper .surface-row .col-1-1 {
            padding-right: 0;
        }
            .palette-detail-main-wrapper .palette-gallery .surface-row {
                margin-right: 0;
            }


                .palette-detail-main-wrapper .palette-gallery .surface-row .col-1-2 {

                    width: calc((100% - 10px) / 2);
                }
                    .palette-detail-main-wrapper .palette-gallery .surface-row .col-1-2:first-child {
                        margin-right: 10px;
                    }


                .palette-detail-main-wrapper .palette-gallery .surface-row button {
                    width: 100%;
                }

                    .palette-detail-main-wrapper .palette-gallery .surface-row button img {
                        width: 100%;
                    }

        .palette-detail-main-wrapper .palettes-details-featured-materials-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
                /*width: 32.5%;*/

                .palette-detail-main-wrapper .palettes-details-featured-materials-container .surface-row .col-1-1 {
                    padding-right: 0;
                }

            .palette-detail-main-wrapper .palettes-details-featured-materials-container .surface-row:nth-child(3n) {
                margin-right: 0;
            }

        .palette-detail-main-wrapper .featured-materials-surface-row {
            /*width: 33%;*/
        }
    }
@media only screen and (min-width : 960px){
            .palette-detail-main-wrapper .palette-detail__main {
                 position: relative;
            }
                .palette-detail-main-wrapper .palette-detail__main [class*='palette-detail-col-'] {
                    position: -webkit-sticky;
                    position: sticky;
                    top: 0;
                }
    }
@media only screen and (max-width : 959px){
        .palette-detail-main-wrapper .container {
            padding: 0 20px;
        }

        .palette-detail-main-wrapper .separator {
            margin-bottom: 30px;
        }


        .palette-detail-main-wrapper .palette-detail-col-left {
            width: 100%;
            padding-right: 0;
        }

            .palette-detail-main-wrapper .palette-detail-col-left [class*='col-'] {
                padding-right: 0;
            }

        .palette-detail-main-wrapper .palette-detail-col-right {
            padding-left: 0;
            width: 100%;
        }

        .palette-detail-main-wrapper h3 {
            font-size: 24px;
        }

        .palette-detail-main-wrapper .finish__button {
            margin-top: 20px;
        }

        .palette-detail-main-wrapper .palettes-details-featured-materials {
            display: block;
            margin: 20px 0;
        }
    }
@media only screen and (min-width : 960px) and (max-width : 1199px){
        .palette-detail-main-wrapper .container {
            max-width: 100%;
            padding: 0 10px;
        }

        .palette-detail-main-wrapper .palette-detail__main {
            margin-right: 0;
        }

            .palette-detail-main-wrapper .palette-detail__main .palette-detail-col-left {
                width: 66.66%;
            }

        .palette-detail-main-wrapper .row {
            max-width: 100%;
            display: flex;
            justify-content: space-between;
        }

            .palette-detail-main-wrapper .row .col-1-3 {
                padding-right: 0;
                margin-right: 10px;
            }

                .palette-detail-main-wrapper .row .col-1-3:nth-child(3n) {
                    margin-right: 0;
                }
    }
.text {

    display: block;
}
.show-more {

    text-align: center;
    cursor: pointer;
}
.show-more-height {
    height: 84px;
    overflow: hidden;
}
.material__card .card__image .card__image-scale{
    bottom: 10px;
    left: 10px;
    border-radius: 3px;
    width: 190px;
    height: 30px;
    background: white;
    display: flex;
    align-items: center;
    position: absolute;
}
.material__card .card__image .card__image-scale .scale{
        background-image: url(./images/scaling.png);
        background-position: bottom;
        height: 15px;
        margin: 0 10px;
        width: 104px;
    }
.material__card .card__image .card__image-scale .scale-text{
        font-size: 12px;
        color: #6f6f6f;
        margin-bottom: 0;
    }
.featured-in-image__tab-container .col-1-3.finishes_archive {
         padding-bottom:10px;
         }
@media only screen and (min-width : 280px) and (max-width : 767px){
.featured-in-image__tab-container .col-1-3.finishes_archive {
                width: 100%
         }
    }
.hotspot-wrapper {
    margin-bottom: 12px;
}
.hotspot-wrapper .slider-for img.hero-img {
            -o-object-fit: contain;
               object-fit: contain;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
            .hotspot-wrapper .slider-for .slick-slide.hero-slide {
                height: auto !important;
                max-height: 200px;
                display: flex !important;

            }

                .hotspot-wrapper .slider-for .slick-slide.hero-slide img.hero-img {
                    width: 100% !important;
                    height: auto !important;
                }
    }
.com__horizontal__list .image {
        position: relative;
        aspect-ratio: 7 / 5;
    }
.com__horizontal__list .image img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
.com__horizontal__list {
        display:none
}
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.com__horizontal__list {
        width: 100%;
        overflow-x: auto;
        display: flex
}

        .com__horizontal__list .col-1-4 {
            min-width: 33%;
        }
    }
@media only screen and (max-width : 959px){
.com__horizontal__list [class*='col-'] {
            padding-right: 0;
            padding-left: 10px
    }
            .com__horizontal__list [class*='col-']:last-child {
            padding-right: 10px;
             }
    }
.com__vertical__list {
    margin-top: 40px;
}
.com__vertical__list .image {
        position: relative;
        aspect-ratio: 9 / 4;
    }
.com__vertical__list .image img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
        }
.com__vertical__list .surface-row {
        background: white;
        padding: 20px;
        margin-bottom: 10px;
        margin: 0 0 10px 0;
    }
.com__vertical__list .surface-row:last-child {
            margin: 0;
         }
@media only screen and (min-width : 280px) and (max-width : 767px){
.com__vertical__list .surface-row {
            padding: 0
    }
            .com__vertical__list .surface-row .col-1-2 {
                width: 100%;
                padding-bottom: 20px;
                padding-right: 0;
                padding-left: 0;
            }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.com__vertical__list .surface-row {
            padding: 0
    }
            .com__vertical__list .surface-row .col-1-2 {
                width: 100%;
                padding-bottom: 20px;
                padding-right: 0;
            }
    }
.com__vertical__list > .row:last-of-type {
        margin-bottom: 0px;
    }
.com__vertical__list .com__title {
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: -0.3px;
        color: #191919;
        margin-bottom: 15px;
    }
.com__vertical__list .com__title:hover a {
            color: #0659e8;
        }
.com__vertical__list .com__content {
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: 0.15px;
        color: #6f6f6f;

    }
.com__vertical__list .com__launch__button {
        background-color: #6f6f6f;
        padding: 9px 20px;
        text-transform: uppercase;
        font-size: 10px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.2;
        letter-spacing: normal;
        color: #ffffff;
    }
.com__vertical__list .com__launch__button:hover {
            background-color: #0659e8;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
.com__vertical__list .surface-row image{
            margin: 0 0
    }
    }
.com__launchWrap {
        display: flex;
    }
.com__launchWrap, .com__title, .com__content {
        padding: 0 20px;
    }
#com-page .caption {
        height: 3em;
        display: flex;
        align-items: center;
        padding-bottom: 0.9em;
    }
#com-page .image img {
        transform: translate3d(0,0,1px);
    }
.mb-visible {
    display: none;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
    .mb-hidden {
      display: none;
      visibility: hidden;
    }

    .mb-visible {
      display: block;
    }
    }
.font-weight-bold {
    font-weight: bold;
}
.site-header {
    padding: 0 20px;
}
.site-content {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}
/*@mixin tablet-up {
    .site-header__inner {
        max-width: 940px !important;
    }

    .ph-wrap {
        max-width: 940px !important;
        padding: 0 !important;
    }

    #user-nav nav {
        max-width: 940px !important;
        padding: 0 !important;
    }

    #user-nav  {
        padding: 0 20px;
    }
}

@mixin desktopsmall-up {
    .site-header__inner {
        max-width: 1166px !important;
        padding: 0 !important;
    }

    .ph-wrap {
        max-width: 1166px !important;
        padding: 0 !important;
    }

    #user-nav nav {
        max-width: 1166px !important;
    }
}*/
#fl-pagination {
  padding: 1em;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  clear: both;
}
#fl-pagination span {
    font-size: 1em;
    font-family: "Helvetica Neue", "Helvetica W01", Helvetica, sans-serif;
    color: #6f6f6f;
    width: 3em;
    height: 3em;
    border-radius: 2em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    text-align: center;
  }
#fl-pagination span.active {
      background: #e3e3e3;
    }
#fl-pagination span.empty-space {
      height: 100%;
    }
#fl-pagination span button {
      background: transparent;
      width: 100%;
      height: 100%;
    }
#fl-pagination span button:focus {
        border: solid 2px #93b6f4;
        color: #191919;
        border-radius: 50%;
      }
@media only screen and (max-width : 959px){
    #fl-pagination span {
      font-size:0.8em;
    }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
    div#page{
        padding-top: 45px;
    }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
    div#page{
        padding-top: 45px;
    }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
ul.submenu.visible{
        visibility: visible;
        position: static;
        display: block

}
    }
.surface-submenu {
    outline: none;
    width: 100%;
    max-width: 1166px;
    margin: 0 auto;
    position: relative;
    height: 56px;
}
@media only screen and (max-width : 959px){
.surface-submenu {
        max-height: 36px;
        transition: all 0.3s;
        height: auto;
        min-height: 36px;
        margin: 0
}

        .surface-submenu.visible {
            max-height: unset;
            transition: all 0.3s;
        }

            .surface-submenu.visible ul {

            }

            .surface-submenu.visible li {
                display: block;
                padding: 0.5em 0;
            }

            .surface-submenu.visible li:last-of-type {
                padding-bottom: 2em;
            }

            .surface-submenu.visible h1 {
                 background-image: url('./images/up-arrow.svg');
            }

        .surface-submenu h1 {
            font-size: 16px;
            line-height: 1.5;
            letter-spacing: -0.25px;
            padding: 6px 15px 6px 0;
            background-image: url('./images/down.svg');
            background-position: right center;
            background-repeat: no-repeat;
            background-color: transparent;
        }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.surface-submenu {
        min-height: 36px;
        max-height: 36px;
        transition: all 0.3s;
        height: auto;
        margin: 0
}
        .surface-submenu.visible {
             max-height: unset;
             transition: all 0.3s;
        }
            .surface-submenu.visible ul {
                visibility: visible;
                position: static;

                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .surface-submenu.visible li {
                display: block;
                flex-basis: 48%;
            }
            .surface-submenu.visible h1 {
                background-image: url(./images/up-arrow.svg);
            }

        .surface-submenu h1 {
            font-size: 16px;
            line-height: 1.5;
            letter-spacing: -0.25px;
            padding: 6px 15px 6px 0;
            background-image: url(./images/down.svg);
            background-position: right center;
            background-repeat: no-repeat;
            background-color: transparent;
        }
    }
@media only screen and (min-width : 960px) and (max-width : 1199px){
.surface-submenu {
        /*min-height: 36px;*/
        /*max-height: 36px;*/
        transition: all 0.3s;
        height: auto;
        margin: 0
}
        .surface-submenu.visible {
             max-height: unset;
             transition: all 0.3s;


         }

        .surface-submenu h1 {
            font-size: 16px;
            line-height: 1.5;
            letter-spacing: -0.25px;
            padding: 6px 15px 6px 0;
            background-image: url(./images/down.svg);
            background-position: right center;
            background-repeat: no-repeat;
            background-color: transparent;
        }
            .surface-submenu.visible ul {
                visibility: visible;
                position: static;

                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }

            .surface-submenu.visible li {
                display: inline-block;
                flex-basis: 48%;
            }
            .surface-submenu.visible h1 {
                background-image: url(./images/up-arrow.svg);
            }
    }
.surface-submenu .surface-controls {
        float: right;
        padding-top: 10px;
    }
.surface-submenu ul {
        display: inline-block;
        list-style: none;
        margin: 0;
        right: 0;
        bottom: 0;
        position: absolute;

    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.surface-submenu ul {
            visibility: hidden;

    }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.surface-submenu ul {
            visibility: hidden;

    }
    }
@media only screen and (min-width : 960px) and (max-width : 1199px){
.surface-submenu ul {
            visibility: hidden;

    }
    }
.surface-submenu li {
        display: inline-block;
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #6f6f6f;
        padding-left: 15px;
        padding-right: 15px;
    }
.surface-submenu li a {
            padding: 16px 0;
            display: inline-block;
            padding-bottom: 14px;
            border-bottom: 2px solid transparent;
            -webkit-font-smoothing: antialiased;
            transition: color 150ms ease-in, background-color 50ms ease-in, border-color 50ms ease-in;
        }
@media only screen and (min-width : 960px) and (max-width : 1199px){
.surface-submenu li a {
                padding: 16px 0
        }
    }
.surface-submenu li.active a, .surface-submenu li:hover a {
            color: #191919;
            border-bottom: 2px solid #191919;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
.surface-submenu li:hover a {
                color: #6f6f6f;
                //border-color: #fff
        }
    }
.surface-submenu h1 {
        margin: 0;
    }
@media only screen and (min-width : 1200px) {
.surface-submenu h1 {
            top: 50%;
            transform: translate(0, -50%)
    }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.surface-submenu h1 {
            position: -webkit-sticky !important;
            position: sticky !important;
            top: 0;
            background-color: white;
            transform: unset;
            z-index: 100
    }
    }
@media only screen and (min-width : 1200px) {
.surface-submenu {
        display: flex;
        justify-content: space-between;
        height: auto
}
        .surface-submenu h1 {
            white-space: nowrap;
            position: static !important;
            transform: unset;
            margin: auto 0;
        }
        .surface-submenu ul {
            position: static;
        }
        .surface-submenu .submenu__heading .submenu__as_link{
            display: block;
        }
        .surface-submenu .submenu__heading .submenu__as_text{
            display: none;
        }
    }
@media only screen and (max-width : 1200px) {
        .surface-submenu .submenu__heading .submenu__as_link{
            display: none;
        }
        .surface-submenu .submenu__heading .submenu__as_text{
            display: block;
        }
    }
.surface-submenu .submenu__heading a{
        color: black !important;
    }
.submenu .current-menu-item a{
        color: #191919;
        border-bottom: 2px solid #191919;
    }
#search-submenu {
    display: block;
    text-align: center;
    height: auto;
}
#search-submenu .right-shadow {
        box-shadow: inset -23px 0px 15px -7px #fff;
        width: 10%;
        height: 100%;
        position: absolute;
        z-index: 100;
        right: 0;
        display: none;
    }
#search-submenu .left-shadow {
        box-shadow: inset 23px 0px 15px -7px #fff;
        width: 10%;
        height: 100%;
        position: absolute;
        z-index: 100;
        left: 0;
        display: none;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
#search-submenu {
        max-height: unset;
        text-align: left;
        padding: 0;
        height: auto
}

        #search-submenu::-webkit-scrollbar {
            display: none;
        }

        #search-submenu:hover {
            max-height: unset;
        }

            #search-submenu:hover li {
                display: inline-block;
            }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
#search-submenu {
        height: auto;
        max-height: unset
}

        #search-submenu:hover {
            max-height: unset;
        }

            #search-submenu:hover li {
                display: inline-block;
            }
    }
#search-submenu ul {
        display: block;
        position: relative;
        margin: 0 auto;
        text-transform: uppercase;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
#search-submenu ul {
            overflow: auto;
            white-space: nowrap;
            visibility: visible
    }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
#search-submenu ul {
            visibility: visible
    }
    }
#search-submenu ul li {
            margin-right: 20px;
            padding: 0;
            opacity: 0.8;
            cursor: pointer;
        }
#search-submenu ul li:last-of-type .surface_search_menu_item {
                margin-right: 0;
            }
#search-submenu ul li .surface_search_menu_item {
                transition: 200ms;
                padding: 0;
                font-size: 12px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: 4;
                letter-spacing: normal;
                text-align: center;
                text-decoration: none;
            }
#search-submenu ul li.active {
                color: #191919;
                border-bottom: 2px solid #191919;
                opacity: 1;
            }
#search-submenu ul li:hover {
                opacity: 1;
            }
.sticky-wrapper {
    position: -webkit-sticky;
    position: sticky;
    top: 2.8125rem;
    z-index: 11;
}
@media (min-width: 960px) {
    .sticky-wrapper {
        top: 0;
    }
}
.submenu .current-menu-parent a {
 color: #191919;
 border-bottom: 2px solid #191919;
}
/*NEW STYLES*/
@media only screen and (max-width: 767px){
        body.submenu-visible {
            overflow: hidden;
        }
            body.submenu-visible .page-heading {
                height: calc(100vh - 45px);
                display: block;
                overflow-y: scroll;
            }
                body.admin-bar.submenu-visible .page-heading {
                    height: calc(100vh - 91px);
                    display: block;
                    overflow-y: scroll;
                }
    }
.visibility-hidden {
    visibility: hidden;
}
.material-tab__container .material-tab__item {
        display:none;
    }
.material-tab__container .material-tab__item.active {
            display:block;
            position: relative;

        }
.material-tab__container .material-tab__item.active.material-tab__item-material {
                 display:flex;
                flex-wrap: wrap;
                height: -webkit-fit-content;
                height: -moz-fit-content;
                height: fit-content;
            }
.material-tab__container table tr th {
        text-transform:none;
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: 0.15px;
        color: #6f6f6f;
    }
.material-tab__container table tr td img {
                    max-width: 16px;
                    max-height: 16px;
                    margin-right: 10px;
                }
.material-tab__container .material-tab__header {
        text-align:center;
    }
.material-tab__container .material-tab__header button {
            background: transparent;
            font-size: 12px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: normal;
            color: #6f6f6f;
            text-transform:uppercase;
            /*border-bottom: 1px solid transparent; */
            padding: 14px 10px;
            color: #6f6f6f;
            text-align: center;
        }
.material-tab__container .material-tab__header button.active, .material-tab__container .material-tab__header button:hover {
                border-bottom: 2px solid #191919;
                color: #191919;  
            }
.material-tab__container .material-tab__header.material-tab__fill {
            display:flex;
            width:100%;
            flex-direction: row;
         
            justify-content: space-evenly;
            text-align: center;
        }
.material-tab__container .material-tab__header.material-tab__fill button {
              
               flex:1;
               text-align: center;
            }
.slick-slider .material-tab__item.slick-slide{
            display: flex;
            flex-wrap: wrap;
        }
.slick-slider .material-tab__item.slick-slide .featured{
                width: 32%;
                margin-right: 10px;
            }
.slick-slider .material-tab__item.slick-slide .featured .col-1-3{
                    width: 100%;
                }
.material-tab-link-item {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.67;
    letter-spacing: normal;
    border-bottom: 1px solid #878787;
    font-family: "Helvetica Neue", "Helvetica W01", Helvetica, sans-serif;
}
@media only screen and (min-width : 768px) and (max-width : 959px){
body.admin-bar .surface-modal__container {
            top: 28px
    }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
body.admin-bar .surface-modal__container {
            top: 46px
    }
    }
.surface-modal__container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: rgba(25, 25, 25, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;

}
.surface-modal__container.open .filters__mobile {
                 display: none;
             }
@media only screen and (max-width: 767px){
.surface-modal__container.open .filters__mobile {
                    display: block
             }
    }
.surface-modal__container .surface-modal__content {
        display: flex;
        flex-direction: column;

        align-items: stretch;
        height: 100%;
    }
.surface-modal__container .surface-modal__block {
        border-radius: 3px;
        box-shadow: 0 1px 5px 1px rgba(25, 25, 25, 0.25);
        background-color: #ffffff;
        max-width: 70%;
        position: relative;

        max-height: 80%;
        overflow-y: auto;
        overflow-x: hidden;

    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.surface-modal__container .surface-modal__block {
            max-width: 100%;
            max-height: 100%;
            width: 100vw;
            height: 100vh

    }
    }
.surface-modal__container.surface-modal__dialog-box .surface-modal__heading {
            border: none;
        }
.surface-modal__container.surface-modal__dialog-box .surface-modal__footer {
            border: none;
        }
.surface-modal__container .surface-modal__no-header {
        padding-top: 20px;
    }
.surface-modal__container .surface-modal__text-content {
        padding-left: 20px;
        padding-right: 20px;
    }
.surface-modal__container .surface-modal__text-content p {
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: #6f6f6f;
        }
.surface-modal__container .surface-modal__text-content h3 {
            margin: 20px 0;
        }
.surface-modal__container .surface-modal__text-content .surface-modal-header .section-header {
                margin-bottom: 5px;
            }
.surface-modal__container .surface-modal__text-content .surface-modal__section {
            border-bottom: 1px solid #e3e3e3;

            padding-bottom: 20px;

        }
.surface-modal__container .surface-modal__text-content .surface-modal__section:last-of-type {
                /*border: none;*/
            }
.surface-modal__container .surface-modal__close {
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 20px;
        height: 20px;
        width: 20px;
        text-indent: -999px;
        overflow: hidden;
        background-color: transparent;
        background-image: url(./images/secondary.png);
        background-repeat: no-repeat;
        z-index: 999;
    }
.surface-modal__container .surface-modal__close:focus {
            box-shadow: 0 0 0 2px rgba(38, 109, 232, 0.5);
        }
.surface-modal__container .surface-modal__footer {
        padding: 15px;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        height: 80px;
        border-top: 1px solid #e3e3e3;

    }
.surface-modal__container .surface-modal__control-wrapper {
        flex: 1;
        display: block;
    }
.surface-modal__container .surface-modal__control-wrapper:first-of-type {
            padding-right: 10px;
        }
.surface-modal__container .surface-modal__control-wrapper .surface-modal__control {
            width: 100%;

        }
.surface-modal__container .surface-modal__scrollable {
        overflow: auto;
        max-height: 100%;

        /* @mixin mobile {
            &::-webkit-scrollbar {
                display: none;
            }
        } */
    }
.surface-modal__container .surface-modal__control {
        margin-left: 5px;
        margin-right: 5px;
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: normal;
        text-align: center;
        padding: 12px;
        background: none;
        border: 1px solid transparent;
        color: #6f6f6f;
    }
.surface-modal__container .surface-modal__control:hover {
            color: #0659e8;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
.surface-modal__container .surface-modal__control {
            flex-basis: 35%
    }
    }
.surface-modal__container .surface-modal__control.primary {
            background-color: #266de8;
            color: #ffffff;
            text-transform: uppercase;

        }
@media only screen and (min-width : 280px) and (max-width : 767px){
.surface-modal__container .surface-modal__control.primary {
                flex-basis: 65%

        }
    }
.surface-modal__container .surface-modal__control.secondary {
            border: solid 1px #e3e3e3;
            background-color: #ffffff;
            color: #6f6f6f;
            text-transform: uppercase;

        }
.surface-modal__container .surface-modal__heading {
        border-bottom: 1px solid #e3e3e3;
        padding: 20px;
        margin-bottom: 0;
        font-size: 18px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.11;
        letter-spacing: normal;
        color: #191919;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.surface-modal__container .surface-modal__heading {
            font-size: 24px;
            line-height: 0.83
    }
            .surface-modal__container .surface-modal__heading_act{
                font-size: 18px;
             }
    }
.surface-modal__container .surface-modal__heading_left{
             justify-content: left;
         }
@media only screen and (max-width: 767px){
.surface-modal__container .surface-modal__heading {
            display: none
    }
    }
.surface-modal__container .surface-modal__heading.mobile {
            display: none;
          }
@media only screen and (max-width: 767px){
.surface-modal__container .surface-modal__heading.mobile {
                display: block
          }
    }
.surface-modal__container.project-modal .surface-modal__heading {
        border: none;
    }
.surface-modal__container .surface-modal__table {
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 0;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.surface-modal__container .surface-modal__table {
            margin-top: 2em
    }
    }
.surface-modal__container .surface-modal__table th {
            font-size: 14px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            text-align: center;
            color: var(--black);
        }
.surface-modal__container .surface-modal__table td {
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: var(--dark-grey-1);
        }
.surface-modal__container .surface-modal__table tr td, .surface-modal__container .surface-modal__table tr th {
            border-top: 1px solid #e3e3e3;
            padding-top: 20px;
            padding-bottom: 20px;
        }
.surface-modal__container .surface-modal__table th {
            padding-right: 20px;
        }
.surface-modal__container .surface-modal__table dl {
            margin: 0;
        }
.surface-modal__container .surface-modal__table dt {
            font-size: 14px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: #191919;
        }
.surface-modal__container .surface-modal__table dd {

            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: #6f6f6f;
            margin-bottom: 0;
        }
.surface-modal__container .surface-modal__table tr:first-of-type td, .surface-modal__container .surface-modal__table tr:first-of-type th {
            border-top: none;
        }
/* Controls */
.results_count {
    border-radius: 3px;
    background-color: #6f6f6f;
    font-size: 11px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    color: #ffffff;
    padding: 4px;
    margin-left: 9px;
}
.filter__buttons button .results_count {
            display: none;
        }
/* Specific sizes */
#surface-modal__cart-sucessfully-added .cart-subtotal {
        display: flex;
        line-height: 20px;
        margin-top: 21px;
    }
#surface-modal__cart-sucessfully-added .cart-subtotal__price {
        text-align: right;
        font-size: 14px;
        flex: 1;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #6f6f6f;
    }
#surface-modal__cart-sucessfully-added .cart-card__control-container {
        margin-bottom: 0;
        margin-top: 0;
    }
#surface-modal__cart-sucessfully-added .cart-card__control-container .finish__button {
            margin-bottom: 0;
            padding-left: 0;
        }
#surface-modal__cart-sucessfully-added .cart-buttons {
        display: flex;
    }
#surface-modal__cart-sucessfully-added .cart-buttons button {
            width: 50%;
            margin-right: 10px;
        }
#surface-modal__cart-sucessfully-added .cart-buttons button:last-of-type {
                margin-right: 0;
            }
.surface-modal__cart-modal .surface-modal__block {
    width: 800px;

}
/* height: 346px; */
.surface-modal__cart-modal .surface-modal__block .surface-modal__content {
        margin-left: 40px;
        margin-right: 40px;

    }
.surface-modal__cart-modal .surface-modal__block h4 {
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #191919;
        margin-top: 6px;
        margin-bottom: 3px;
    }
.surface-modal__cart-modal .surface-modal__block .surface-modal__heading {
        padding-left: 0;
        border-bottom: none;
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: -0.3px;
        color: #191919;
        margin-top: 40px;
        padding-top: 0;
    }
.surface-modal__cart-modal .surface-modal__block .surface-modal__heading.secondary {
            margin-top: 20px;;
        }
.surface-modal__cart-modal .surface-modal__block h3 {
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: normal;
        color:#191919;
        /* text-transform:uppercase; */
        margin-bottom: 6px;
    }
.surface-modal__cart-modal .surface-modal__block .cart-card__cut {
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: normal;
        color: #191919;
        text-transform: uppercase;
    }
.surface-modal__cart-modal .surface-modal__block .cart-card__remove {
        padding: 0;
    }
.surface-modal__cart-modal .surface-modal__block .finish__button.text {
        text-align: left;;
    }
.surface-modal__cart-modal .surface-modal__block .cart-info p {
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: 0.15px;
            color: #6f6f6f;
        }
#surface-modal__delete-project .surface-modal__block {
    width: 400px;
}
#surface-modal__confirmation .surface-modal__block {
    width: 400px;
    text-align: center;
}
#surface-modal__confirmation .surface-modal__block .suface-modal__icon {
        margin: 40px auto 20px;
    }
#surface-modal_filters .surface-modal__block {
    width: 740px;
    height: 800px;

}
#surface-modal_filters .surface-modal__block .section-header {
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: var(--black);
    }
#surface-modal__uphostery .surface-modal__block {
    height: 778px;
    width: 939px;
    padding: 40px;
    max-width: 100%;


}
#surface-modal__uphostery .surface-modal__block .material__detail__image__block {
        margin: 0;
    }
#surface-modal__uphostery .surface-modal__block .image_col {
        width: 388px;
        padding-right: 40px;
    }
#surface-modal__uphostery .surface-modal__block .material__swatch {
        margin-right: 6px;
    }
#surface-modal__uphostery .surface-modal__block .finish__button.compact {
        margin-bottom: 20px;
        margin-right: 10px;;
    }
#surface-modal__image .surface-modal__block {
    height: 480px;
    width: 480px;
    padding: 40px;
}
#surface-modal__image .surface-modal__block .surface-modal__close {
        right: 10px;
        top: 10px;
        cursor: pointer;
    }
#surface-modal__remove-items .surface-modal__block {
    width: 400px;
}
#surface-modal__confirmation .surface-modal__block {
    width: 400px;
    height: 264px;
}
#surface-modal__confirmation .surface-modal__block .surface-modal__content {
        display: flex;
        align-items: center;
        justify-content: center;
    }
#surface-modal__confirmation .surface-modal__block .surface-modal__content h1 {
            margin-top: 20px;
            font-size: 24px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: -0.3px;
            text-align: center;
            color: #191919;
            max-width: 230px;
            margin-bottom: 0;
        }
#surface-modal__new-project .surface-modal__block {
    width: 400px;
}
#surface-modal__new-project .surface-modal__block .surface-modal__heading {
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: -0.3px;
        color: var(--black);
    }
#surface-modal__new-project .surface-modal__block .search-label {
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: normal;
        color: #191919;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
#surface-modal__new-project .surface-modal__block input {
        padding: 0.5rem;
    }
#surface-modal__new-project .surface-modal__block .surface-modal__search-wrapper {
        border-bottom: none;
    }
#surface-modal__setting .surface-modal__block {
    width: 952px;
    height: 425px;
    padding: 40px;
}
#surface-modal__video .surface-modal__block {
    width: 834px;
    height: 504px;
    padding: 40px;
}
#surface-modal__video .surface-modal__block .surface-modal__close {
        right: 10px;
        top: 10px;
        cursor: pointer;
    }
#surface-modal__image-gallery .surface-modal__block {
    width: 952px;
    height: 611px;
}
#surface-modal__image-gallery .surface-modal__block .surface-modal__content {
        padding: 40px 40px 0 40px;;
        height: auto;
    }
#surface-modal__image-gallery .surface-modal__block .surface-modal__footer {
        padding: 20px 40px;
        align-items: flex-end;
        justify-content: flex-end;
        border-top: none;
    }
#surface-modal__image-gallery .surface-modal__block .surface-modal__footer .surface-modal__control {
            padding-left: 41px;
            padding-right: 42px;
        }
#surface-modal__image-gallery .surface-modal__block .surface-modal__footer .surface-modal__control:last-of-type {
                margin-right: 0;
            }
#surface-modal__image-gallery .surface-modal__block .surface-modal__close {
        top: 10px;
        right: 10px;
        cursor: pointer;
    }
#surface-modal__save-to-project #surface-modal__save-to-project__project-list, #surface-modal__save-to-project #surface-modal__save-to-project__project-list__controls {
        display: none;
    }
#surface-modal__save-to-project #surface-modal__save-to-project__project-list.active, #surface-modal__save-to-project #surface-modal__save-to-project__project-list__controls.active {
            display: block;
        }
#surface-modal__save-to-project #surface-modal__save-to-project__new-project__controls, #surface-modal__save-to-project #surface-modal__save-to-project__new-project {
        display: none;
    }
#surface-modal__save-to-project #surface-modal__save-to-project__new-project__controls.active, #surface-modal__save-to-project #surface-modal__save-to-project__new-project.active {
            display: flex;
        }
#surface-modal__save-to-project .surface-modal__project-scrollable__container {
        height: 100%;
    }
#surface-modal__save-to-project #surface-modal__save-to-project__new-project {
        height: 100%;
    }
#surface-modal__save-to-project #surface-modal__save-to-project__new-project .surface-modal__text-content {
            margin-left: 0px;
            margin-right: 20px;
            padding: 0;
            height: 100%;
            border-bottom: 1px solid #e3e3e3;
        }
#surface-modal__save-to-project #surface-modal__save-to-project__new-project .surface-modal__text-content .surface-modal__search-wrapper {
                border: none;
            }
#surface-modal__save-to-project .surface-modal__project-scrollable__container {
        height: 100%;
    }
#surface-modal__save-to-project .search-label {
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: normal;
        color: #191919;
        text-transform: uppercase;
        margin-bottom: 10px;
    }
#surface-modal__save-to-project .surface-modal__project-image__column {
        padding-right: 0;
    }
#surface-modal__save-to-project .surface-modal__heading {
        border: none;
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: -0.3px;
        color: #191919;
    }
#surface-modal__save-to-project .surface-modal__block {
        width: 860px;
        height: 553px;
    }
#surface-modal__save-to-project .surface-modal__scrollable {
        max-height: 342px;
        border-bottom: 1px solid #e3e3e3;

    }
#surface-modal__save-to-project .surface-modal__project-preview {
        padding-left: 20px;
        padding-right: 0px;
        height: auto;
    }
#surface-modal__save-to-project .surface-modal__project-scrollable__container {
        padding-left: 50px;
        padding-right: 30px;
    }
#surface-modal__save-to-project .surface-modal__project-footer {
        padding-top: 20px;
    }
#surface-modal__save-to-project .surface-modal__project-footer .surface-modal__control.fullwidth {
            width: 100%;
        }
#surface-modal__save-to-project .surface-modal__project-footer h4 {
            font-size: 12px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: 0.15px;
            color: #6f6f6f;
        }
#surface-modal__save-to-project .surface-modal__project-footer h3 {
            font-size: 14px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: #191919;
        }
#surface-modal__save-to-project .surface-modal__project-footer .surface-modal__project-preview_text {
            display: flex;
            justify-content: center;
            flex-direction: column;
            padding-left: 20px;
        }
#surface-modal__save-to-project .surface-modal__project-footer .surface-modal__project-preview_text h4 {
                margin-bottom: 5px;
            }
#surface-modal__save-to-project .surface-modal__project-footer .surface-modal__project-preview_text h3 {
                margin-top: 0;
            }
#surface-modal__save-to-project .surface-modal__scrollable-footer {
        padding-left: 40px;
        padding-right: 30px;


    }
#surface-modal__save-to-project .surface-modal__scrollable-footer button:last-of-type {
            margin-right: 0;
        }
#surface-modal__save-to-project__new-project__controls {
    display: flex;
    padding-left: 5px;
}
#surface-modal__save-to-project__new-project__controls button {
        flex: 1;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.surface-modal__container .surface-modal__text-content p.text-grade{
        font-size: 12px
}
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.surface-modal__section .section-header{
        font-size: 14px
}
    }
.surface-modal__project-section {

    border-bottom: 1px solid #e3e3e3;
    /* margin-bottom: 16px; */
}
.surface-modal__project-section h5 {
        margin-top: 16px;
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: normal;
        color: #191919;
        text-transform: uppercase;
        margin-bottom: 16px;
    }
.surface-modal__project-card {
    display: flex;
    cursor: pointer;
    width: 100%;
    background: transparent;
    text-align: left;
    padding-left: 0;
    flex-direction: row;
    margin-bottom: 20px;


}
.surface-modal__project-card .surface-modal__project-card__image {
        width: 100px;
        margin-right: 20px;
    }
.surface-modal__project-card .surface-modal__project-card__text {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
.surface-modal__project-card .surface-modal__project-card__text .surface-modal__project-card__time {
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: #6f6f6f;
        }
.suface-modal__icon {
    width: 60px;
    height: 60px;
    -o-object-fit: contain;
       object-fit: contain;
}
.surface-link__button {
    font-size: 14px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    color: #266de8;
    background: transparent;
    margin-top: 20px;
}
.surface-link__button:hover {
        color: #0659e8;
    }
.surface-caret {
    width: 10px;
    height: 10px;
    -o-object-fit: contain;
       object-fit: contain;
    background-image: url(./images/brand.png);;
    display: inline-block;

}
.surface-modal__search-wrapper {
    padding-bottom: 20px;
    border-bottom: 1px solid #e3e3e3;

}
.surface-modal__search-container {
    position: relative;
    border-radius: 3px;
    border: solid 1px #e3e3e3;
    background-color: #ffffff;

}
.surface-modal__search-container .surface-modal__search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        margin-top: -10px;
        z-index: 9;
        cursor: pointer;
    }
.surface-modal__search-container input[type="text"] {
        border: none;
        background: transparent;
        margin: 0;
        padding-left: 40px;
        z-index: 10;
        position: relative;
    }
.surface-modal__search-container input[type="text"]:focus {
            background: transparent;
            background: none;
        }
.surface-modal__search-container input[type="text"]:focus::-moz-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                color: #c2c2c2;
                opacity: 1; /* Firefox */
            }
.surface-modal__search-container input[type="text"]:focus:-ms-input-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                color: #c2c2c2;
                opacity: 1; /* Firefox */
            }
.surface-modal__search-container input[type="text"]:focus::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
                color: #c2c2c2;
                opacity: 1; /* Firefox */
            }
.surface-modal__search-container input[type="text"]:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
                color: #c2c2c2;
            }
.surface-modal__search-container input[type="text"]:focus::-ms-input-placeholder { /* Microsoft Edge */
                color: #c2c2c2;
            }
/* Setting modal */
#surface-modal__palette .slick-track .material-control__slide {
            border: none;
        }
#surface-modal__palette .slick-track .material-control__slide.selected {
                border: none;
            }
#surface-modal__palette .slick-track .material-control__slide img {
                padding: 2px;
            }
#surface-modal__palette .slick-track .material-control__slide:focus {
                box-shadow: 0 0 0 2px rgb(38 109 232 / 50%);
            }
#surface-modal__palette .slick-track .material-control__slide.slick-current img {
                    border: 2px solid #266de8 !important;
                }
#surface-modal__palette .slider-nav {
        padding: 0 60px;

    }
#surface-modal__palette .slider-nav .slick-arrow {
            position: absolute !important;
            top: 50% !important;
            transform: translateY(-50%);
        }
#surface-modal__palette .slider-nav .slick-arrow.previous {
                left: 2px;
            }
#surface-modal__palette .slider-nav .slick-arrow.next {
                right: 0;
            }
.material-tab__content__container .material-tab__item.slick-slide {
            display: none;
        }
.material-tab__content__container .material-tab__item.slick-active.active{
            display: flex!important;
            left: 0!important;
        }
.surface-modal__carousel-wrapper .surface-modal__carousel-menu .surface-modal__carousel-control {
            width: 20%;
            display: inline-block;
            padding: 4px;
            border: solid 2px transparent;
            margin-right: 10px;


        }
.surface-modal__carousel-wrapper .surface-modal__carousel-menu .surface-modal__carousel-control img {
                vertical-align: bottom;

            }
.surface-modal__setting-content h4 {
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #6f6f6f;
    }
.surface-modal__setting-content h1 {
        font-size: 24px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: -0.3px;
        color: #1e1e1e;
    }
.surface-modal__setting-content .customize {

        text-transform: uppercase;
        font-size: 10px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        letter-spacing: 0.13px;
        color: #7a7a7a;
    }
.surface-modal__setting-content .collapsible .collapse__header {
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: 0.15px;
            color: #6f6f6f;
        }
.surface-modal__setting-content .collapsible .collapse__content p {
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: 0.15px;
            color: #6f6f6f;
        }
.cart-card__content {
    display: flex;
    flex-direction: row;
}
.cart-card__content img {
        height: 125px;
        width: 125px;
        margin-right: 20px;
    }
.cart-card__content .cart-card__content-text ul {
            list-style: none;
            margin: 0;
        }
.cart-card__content .cart-card__content-text ul li {
                font-size: 12px;
                font-weight: normal;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.33;
                letter-spacing: 0.15px;
                color: #6f6f6f;
                padding-top: 3px;
                padding-bottom: 3px;
            }
#surface-modal__palette {
    display: none;
}
#surface-modal__palette.visible {
        display: flex;
    }
#surface-modal__palette .surface-modal__block {
    width: 952px;
    max-width: 100%;
    height: 80%;
    position: relative;
}
#surface-modal__palette .surface-modal__block .surface-modal__close {
        top: 10px;
        right: 10px;
        cursor: pointer;
    }
#surface-modal__palette .surface-modal__block .surface-modal__content {
        position: absolute;
        top: 40px;;
        left: 40px;;
        bottom: 40px;
        right: 16px;
        height: auto;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
#surface-modal__palette .surface-modal__block .surface-modal__content {
            left: 0;
            right: 0;
            bottom: 40px
    }
    }
#surface-modal__palette .surface-modal__block .slick-track {
        display: flex !important;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
#surface-modal__palette .surface-modal__block {
        height: 100%
}
        #surface-modal__palette .surface-modal__block .palette-modal__content-wrapper {
            padding: 0 20px;
        }

        #surface-modal__palette .surface-modal__block .surface-modal__separator {
            margin-bottom: 10px;
        }
    }
#surface-modal__palette .surface-modal__block .surface-modal__scrollable {
        /* margin-bottom: 20px; */
        overflow: hidden;
        overflow-y: auto;
    }
@media only screen and (min-width : 768px){
#surface-modal__palette .surface-modal__block .surface-modal__scrollable {
            padding-right: 24px
    }
    }
#surface-modal__palette .surface-modal__block .finish__controls-col {
        text-align: right;;
        margin-top: 17px;

    }
@media only screen and (min-width : 768px) and (max-width : 959px){
#surface-modal__palette .surface-modal__block .finish__controls-col {
            width: 25%;
            padding-right: 0;
            text-align: left

    }

            #surface-modal__palette .surface-modal__block .finish__controls-col button {
                width: 167px;
            }

                #surface-modal__palette .surface-modal__block .finish__controls-col button:first-child {
                    margin-bottom: 10px;
                }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
#surface-modal__palette .surface-modal__block .finish__controls-col {
            margin-top: 0;
            margin-bottom: 10px;
            padding: 0 10px !important;
            justify-content: space-around !important

    }
    }
#surface-modal__palette .surface-modal__block .finish__controls-col .finish__button {

            padding: 0 30px;
            height: 40px;
            line-height: 40px;

        }
@media only screen and (min-width : 280px) and (max-width : 767px){
#surface-modal__palette .surface-modal__block .finish__controls-col .finish__button {
                width: 145px;
                /*line-height: 1.33;*/
                padding: 0 10px

        }
    }
#surface-modal__palette .surface-modal__block .finish__controls-col i.download.small{
            width: 20px;
            height: 20px;
            background-image: url('./images/download-white.png');

        }
@media only screen and (min-width : 768px) and (max-width : 959px){
        #surface-modal__palette .surface-modal__block .surface-row {
            margin-right: 0;
        }

        #surface-modal__palette .surface-modal__block .col-1-3-sm {
            width: 75%;
        }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
        #surface-modal__palette .surface-modal__block .col-1-1-xs {
            width: 100%;
            padding-right: 0;

        }

        #surface-modal__palette .surface-modal__block .flex-centered-row {
            display: flex;
            justify-content: center;
            align-items: center;
        }
            #surface-modal__palette .surface-modal__block .flex-centered-row.slider-navigation {
                display: block;
                padding-right: 60px;
            }
    }
#surface-modal__palette .surface-modal__block .material-control__slide {
        background: transparent;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
#surface-modal__palette .surface-modal__block .material-control__slide {
            margin-top: 0
    }
    }
#surface-modal__palette .surface-modal__block .material-control__slide.previous, #surface-modal__palette .surface-modal__block .material-control__slide.next {
            height: 40px;
            width: 40px;
            text-indent: -9999px;
            overflow: hidden;
            position: relative;
            top: -10px;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
#surface-modal__palette .surface-modal__block .material-control__slide.previous, #surface-modal__palette .surface-modal__block .material-control__slide.next {
                top: 0
        }
    }
#surface-modal__palette .surface-modal__block .material-control__slide.previous {
            margin-right: 20px;
            background-image: url('./images/left-arrow-large.png');
            border-radius: 50%;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
#surface-modal__palette .surface-modal__block .material-control__slide.previous {
                margin-right: 6px
        }
    }
#surface-modal__palette .surface-modal__block .material-control__slide.previous:hover{
                 background-image: url('./images/left-arrow-hover.png');
            }
#surface-modal__palette .surface-modal__block .material-control__slide.previous:focus {
                box-shadow: 0 0 0 2px rgba(38, 109, 232, 0.5);
            }
#surface-modal__palette .surface-modal__block .material-control__slide.next {
            margin-left: 20px;
            background-image: url('./images/right-arrow-large.png');
            border-radius: 50%;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
#surface-modal__palette .surface-modal__block .material-control__slide.next {
                margin-left: 6px
        }
    }
#surface-modal__palette .surface-modal__block .material-control__slide.next:hover{
                 background-image: url('./images/right-arrow-hover.png');
            }
#surface-modal__palette .surface-modal__block .material-control__slide.next:focus {
                box-shadow: 0 0 0 2px rgba(38, 109, 232, 0.5);
            }
#surface-modal__palette .surface-modal__block .material-control__slide.image {
            padding: 2px;
            margin: 2px;
            border: solid 2px transparent;
        }
#surface-modal__palette .surface-modal__block .material-control__slide.image img {
                vertical-align: bottom;
            }
@media only screen and (min-width : 280px) and (max-width : 767px){
#surface-modal__palette .surface-modal__block .material-control__slide.image {
                width: 54px
        }
    }
#surface-modal__palette .surface-modal__block .hotspot-wrapper {
        position: relative;

    }
#surface-modal__palette .surface-modal__block .hotspot-wrapper .surface-modal__close {
            top: 20px;
            right: 20px;
            cursor: pointer;
        }
#surface-modal__palette .surface-modal__block .hotspot-wrapper .hotspot-container {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
#surface-modal__palette .surface-modal__block .hotspot-wrapper .hotspot-pointer {
            width: 12px;
            height: 12px;
            border: solid 2px #ffffff;
            background-color: #266de8;
            position: absolute;
            border-radius: 6px;
            cursor: pointer;
            visibility: hidden;
        }
#surface-modal__palette .surface-modal__block .hotspot-wrapper .hotspot-pointer.visible {
                 visibility: visible;
                 z-index: 99;
            }
#surface-modal__palette .surface-modal__block .hotspot-wrapper .hotspot-pointer:hover > div {
                display: block;
            }
#surface-modal__palette .surface-modal__block .hotspot-wrapper .hotspot-card {
            position: absolute;
            margin-left: 20px;
            width: 280px;
            height: 155px;
            box-shadow: 0 1px 5px 1px rgba(25, 25, 25, 0.25);
            background-color: #ffffff;
            left: 40.5%;
            top: 10.2%;
            visibility: hidden;

        }
#surface-modal__palette .surface-modal__block .hotspot-wrapper .hotspot-card.visible {
                visibility: visible;
                z-index: 99;
            }
@media only screen and (min-width : 280px) and (max-width : 767px){
#surface-modal__palette .surface-modal__block .hotspot-wrapper .hotspot-card {
                margin-left: 0;
                left: 20px;
                right: 20px;
                top: 35%;
                width: auto

        }
    }
#surface-modal__palette .surface-modal__block .hotspot-wrapper .hotspot-card .hotspot-card__arrow {
                position: absolute;
                top: 50%;
                margin-top: -10px;
                left: -10px;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-right: 10px solid #ffffff;
                width: 0;
                height: 0;
                z-index: 90;
                -webkit-filter: drop-shadow(0 -2px 2px #AAA);
            }
@media only screen and (min-width : 280px) and (max-width : 767px){
#surface-modal__palette .surface-modal__block .hotspot-wrapper .hotspot-card .hotspot-card__arrow {
                    top: -5px;
                    transform: rotate(90deg);
                    left: 39%
            }
    }
#surface-modal__palette .surface-modal__block .hotspot-wrapper .hotspot-card .hotspot-card__container {
                background: #ffffff;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 92;
            }
#surface-modal__palette .surface-modal__block .hotspot-wrapper .hotspot-card .material-tab__header {
                margin-bottom: 10px;
            }
#surface-modal__palette .surface-modal__block .material__card {
        text-align: left;
        border: 1px solid #e3e3e3;
        height: 100%;
    }
#surface-modal__palette .surface-modal__block .featured-in-image__tab-container {
        text-align: center;
        margin-top: 24px;
    }
#surface-modal__palette .surface-modal__block .featured-in-image__tab-container .material-tab__header {
            text-align: center;
            padding-top: 0;
        }
#surface-modal__palette .surface-modal__block .material-tab__header {
        border-bottom: 1px solid #e3e3e3;
        margin-bottom: 40px;
        text-align: left;
        padding: 20px 20px 0;

    }
#surface-modal__palette .surface-modal__block .material-tab__header button {
            padding: 0 0 15px;
            margin-right: 20px;
        }
#surface-modal__palette .surface-modal__block .material-tab__header button:last-of-type {
                margin-right: 0;
            }
/* Used to spoof interactivity with the cart modals */
#surface-modal__cart-sucessfully-added, #surface-modal__cart-related-product, #surface-modal__cart-choose-your-cut {
    display: none;
}
#surface-modal__cart-sucessfully-added.visible, #surface-modal__cart-related-product.visible, #surface-modal__cart-choose-your-cut.visible {
        display: flex;
    }
.icon.icon-info-sign {
    color: #fff;
    background: #6f6f6f;
    border: 1px solid #6f6f6f;
    border-radius: 50%;
    font-size: 11px;
    margin-left: 5px;
    position: relative;
    bottom: 1px;
}
.filter__buttons button.active{
    color: black;
    border: 2px solid #266de8;
}
.filter-drawer__footer{
    display: flex;
}
.palette-modal__content-wrapper .featured-in-image__tab-container{
        padding-bottom: 30px;
    }
.surface-checkbox__container label, .surface-radio__container label{
    color: #6f6f6f;
}
.saved-drawer_confirmation-close{
    display: flex;
    justify-content: flex-end;
}
#surface-modal_filters{
    display: none;
}
#surface-modal_filters.open{
        display: flex;
         }
#surface-modal_filters.open .surface-modal__text-content {
                display: flex;
                flex-direction: column;
            }
#surface-modal_filters.open .filters__mobile.surface-modal__text-content {
                     display: none;
                 }
@media only screen and (max-width: 767px){
#surface-modal_filters.open .filters__mobile.surface-modal__text-content {
                            display: flex
                 }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
        #surface-modal_filters .col-1-2 {
            width: 100%;
        }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
#mobile-nav-bar.mobile-hide ,.page-heading.mobile-hide{
    display: none
}
    }
.palette-modal__content-wrapper .featured-in-image__tab-container[data-imageid] {
            display: none;
         }
.palette-modal__content-wrapper .featured-in-image__tab-container[data-imageid].visible {
                display: block;
             }
.finish-control~label:before {
    background-image: url(./images/controls.png);
    position: relative;
    background-color: #ffffff;
    content: '';
    display: inline-block;
    visibility: visible;
    height: 21px;
    width: 20px;
    min-width: 20px;
    cursor: pointer;
    top: 0;
    left: -5px;
  }
.finish-control~label:after {
    content: "";
    position: relative;
  }
.finish-control[type='radio'] ~ label:before {
    background-position: 97.72727272727273% 95.65217391304348%;
}
.finish-control[type='radio'] ~ label:hover:before {
    background-position: 50% 95.65217391304348%;
}
.finish-control[type='radio']:checked ~ label:before {
    background-position: 2.272727272727273% 95.65217391304348%;
}
.finish-control[type='checkbox'] ~ label:before {
    background-position: 97.72727272727273% 4.3478260869565215%;
}
.finish-control[type='checkbox'] ~ label:hover:before {
    background-position: 50% 4.3478260869565215%
}
.finish-control[type='checkbox']:checked ~ label:before {
    background-position: 2.272727272727273% 4.3478260869565215%;
}
.surface-radio__container,  .surface-checkbox__container{
  min-height: 20px;
  position: relative;
  margin-bottom:20px;
}
.surface-radio__container input, .surface-checkbox__container input {
    position: absolute;
    left:0;
    top:2px;
    visibility: hidden;
  }
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
#finish-library__drawer-controls {
    position: fixed;
    top: 30%;
    right: -1px;
    max-width: 62px;
    z-index: 99999;

}
#finish-library__drawer-controls #finish-library_drawer_control-container {
        text-align: center;
        display: none;


    }
#finish-library__drawer-controls.expanded {
        background: white;
        height:100%;
         width: 61px;
         position: absolute;
         top: 0;

    }
#finish-library__drawer-controls.expanded #finish-library_drawer_control-container {
            display: block;
            position: fixed;
            top: 278px;
            border: none;
        }
@media only screen and (min-width : 960px) and (max-width : 1199px){
#finish-library__drawer-controls.expanded #finish-library_drawer_control-container {
                top:258px
        }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
#finish-library__drawer-controls.expanded #finish-library_drawer_control-container {
                top:228px
        }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
#finish-library__drawer-controls.expanded #finish-library_drawer_control-container {
                top:188px
        }
    }
#finish-library__drawer-controls.expanded #finish-library__drawer-control {
            top: 230px;
            margin-left: 5px;
            position: fixed;
            width: 48px;
            border-radius: 24px;
            background-image: url(./images/top-arrow-close.png);
            background-position: 20px center;

        }
@media only screen and (min-width : 960px) and (max-width : 1199px){
#finish-library__drawer-controls.expanded #finish-library__drawer-control {
                    top:210px

        }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
#finish-library__drawer-controls.expanded #finish-library__drawer-control {
                    top:170px

        }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
#finish-library__drawer-controls.expanded #finish-library__drawer-control {
                    top:140px

        }
    }
#finish-library__drawer-controls.expanded #finish-library__drawer-control:hover {
                background-image: url(./images/top-arrow-close.png);
                background-position: 20px center;

            }
#finish-library__drawer-controls #finish-library__drawer-control {
        background: url(./images/top-arrow.png) white no-repeat 10px center;
        text-indent: -999px;
        overflow: hidden;
        height: 48px;
        border-radius: 24px 0 0 24px;
        border: solid 1px #e3e3e3;
        width: 60px;
        margin-right: -30px;
        margin-bottom: 10px;


    }
#finish-library__drawer-controls #finish-library__drawer-control:focus {
            outline: none;
        }
#finish-library__drawer-controls #finish-library__drawer-control:hover {
            background: url(./images/top-arrow-hover.png) white no-repeat 10px center;

        }
#finish-library__drawer-controls .drawer-control__village, #finish-library__drawer-controls .drawer-control__saved {
        display: none;
        padding: 44px 10px 10px 10px;
        text-align: center;
        margin: 0;
        display: block;
        width: 100%;
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: 0.15px;
        text-align: center;
        color: #6f6f6f;
        height: 60px;
        width: 60px;
    }
#finish-library__drawer-controls .drawer-control__village:hover, #finish-library__drawer-controls .drawer-control__saved:hover {
            color: #0659e8;

        }
#finish-library__drawer-controls .drawer-control__village {
        background: url(./images/village.png) transparent no-repeat 20px center;

    }
#finish-library__drawer-controls .drawer-control__village:hover {
            background: url(./images/village-hover.png) transparent no-repeat 20px center;

        }
#finish-library__drawer-controls .drawer-control__saved {
        background: url(./images/save-fill.png) transparent no-repeat 20px center;
    }
#finish-library__drawer-controls .drawer-control__saved:hover {
            background: url(./images/save-hover.png) transparent no-repeat 20px center;;

        }
#finish_library-village_drawer_container {
    width: 400px;
    /* height: 712px; */
    border: solid 1px #e3e3e3;
    background-color: #ffffff;
    position: fixed;
    top: 210px;
    right: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 0;
    display: none;
}
#finish_library-village_drawer_container.active {
        display: block;
        opacity: 1;

    }
#finish_library-village_drawer_container.active .drawer-panel.active .drawer-container {
                display: flex;
                opacity: 1;
            }
#finish_library-village_drawer_container.active .drawer-panel .drawer-container {
                display: none;
                opacity: 0;
            }
#finish_library-village_drawer_container .drawer-control__delete {
        font-size: 14px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 25px;
        letter-spacing: normal;
        color: #6f6f6f;
        background: transparent;
        position: relative;
        top: -5px;
    }
#finish_library-village_drawer_container .drawer-container {
        display: none;
        opacity: 0;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;


    }
#finish_library-village_drawer_container .drawer-control {

        border: none;
    }
#finish_library-village_drawer_container .drawer-control:focus {
            border: none;
            outline: none;
        }
#finish_library-village_drawer_container .drawer-control.primary {
            background-color: #266de8;
            border: solid 1px #266de8;
        }
#finish_library-village_drawer_container .drawer-control.secondary {
            border: solid 1px #e3e3e3;
            background: white;
        }
#finish_library-village_drawer_container .drawer-control__close {
        background: transparent;
        border: none;
        padding-right: 0;
        padding-left: 0;
        margin-left: 15px;
    }
#finish_library-village_drawer_container .surface-modal__project-card:hover h4 {
                color: #0659e8;
            }
#finish_library-village_drawer_container .surface-modal__project-section:last-of-type {
            border-bottom: none;
        }
#finish_library-village_drawer_container .surface-modal__project-card__text h4 {
            margin-top: 10px;
            margin-bottom: 5px;
            font-size: 14px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: #191919;
        }
#finish_library-village_drawer_container .surface-modal__project-card__text .results_count {
            margin-left: 5px;
        }
#finish_library-village_drawer_container .surface-modal__project-card__text .surface-modal__project-card__time {
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: #6f6f6f;
        }
#finish_library-village_drawer_container h1 .drawer-control__back {
        background: url(./images/back.png) transparent no-repeat center;;
        border: none;
        text-indent: -9999px;
        overflow: hidden;
        width: 10px;
        margin-right: 10px;
    }
#finish_library-village_drawer_container h1 .drawer-control__back:hover {
            background: url(./images/back-hover.png) transparent no-repeat center;;

        }
#finish_library-village_drawer_container .drawer-edit__controls {
        display: none;
    }
#finish_library-village_drawer_container .drawer-edit__controls.drawer-edit__empty-selection {
            width: 100%;
            margin-left: 20px;
            margin-right: 20px;
        }
#finish_library-village_drawer_container .drawer-edit__controls .finish__control.primary {
            width: 100%;
            display: block;
            margin: 0;
        }
#finish_library-village_drawer_container .drawer-edit__controls.active {
            display: block;
        }
#finish_library-village_drawer_container .drawer-edit__controls.active.drawer-edit__item-selected {
                display: flex;
                padding-left: 15px;
                padding-right: 15px;
                width: 100%;
            }
#finish_library-village_drawer_container .drawer-edit__controls.active.drawer-edit__item-selected .finish__control {
                    flex: 1;
                }
#finish_library-village_drawer_container .drawer-edit__selectable-item {
        border: solid 2px #e3e3e3;
    }
#finish_library-village_drawer_container .drawer-edit__selectable-item:focus {
            outline: none;
        }
#finish_library-village_drawer_container .drawer-edit__selectable-item.selected {

            border: solid 2px #266de8;
        }
#finish_library-village_drawer_container #saved-drawer .drawer-heading {
        /* height: 131px; */
        padding-bottom: 0;
    }
#finish_library-village_drawer_container #saved-drawer .drawer-heading .surface-modal__search-container.name input {
                padding-left: 0.5rem;
            }
#finish_library-village_drawer_container #village-drawer .drawer-heading {
        padding-bottom: 0;

    }
#finish_library-village_drawer_container .drawer-heading {
        /* height: 132px; */
        padding: 20px 20px 0 20px;
    }
#finish_library-village_drawer_container .drawer-heading .drawer-top {
            display: flex;
            flex-direction: row;
            align-items: center;


        }
#finish_library-village_drawer_container .drawer-heading .drawer-top h1 {
                flex: 1;
                font-size: 24px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.33;
                letter-spacing: -0.3px;
                color: #191919;

                margin-bottom: 0px;
            }
#finish_library-village_drawer_container .drawer-heading .surface-modal__search-wrapper {
            margin-top: 12px;
        }
#finish_library-village_drawer_container .name-field input {
            padding-left: 0.5rem;
        }
#finish_library-village_drawer_container .drawer-footer {
        border-top: 1px solid #e3e3e3;
        display: flex;
        align-items: center;
        background: white;
        height: 81px;
    }
#finish_library-village_drawer_container .drawer-footer .finish__control {
            width: 100%;
            margin-left: 20px;
            margin-right: 20px;
        }
#finish_library-village_drawer_container .drawer-content {
        flex: 1;
        min-height: 0;
    }
#finish_library-village_drawer_container .surface-modal__scrollable {
        height: 100%;
        overflow: auto;

        max-height: 100%;
        flex-grow: 1;
        min-height: 0;
        /* position: absolute; */

        padding: 0 20px 20px 20px;

    }
#finish_library-village_drawer_container .surface-modal__scrollable .surface-row {
            padding-bottom: 20px;
        }
#finish_library-village_drawer_container .surface-modal__scrollable .surface-row button {
                padding: 2px;
                background: transparent;
            }
#finish_library-village_drawer_container .surface-modal__scrollable .surface-row button img {
                    vertical-align: bottom;
                }
#finish-library_drawer_control-container {
    border-radius: 3px;
    border: solid 1px #e3e3e3;
    background-color: #ffffff;
}
#finish-library_drawer_control-container button {
        display: block;
        background: transparent;

    }
/* Villagge related */
#drawer-village__listing {

}
#drawer-village__videos .drawer-content .surface-modal__scrollable .surface-modal__scrollable-content {
    border-top: 1px solid #e3e3e3;
    padding-top: 20px;
}
.drawer-village__resource-item {

    background: transparent;

    border-bottom: 1px solid #e3e3e3;
    width: 100%;
    text-align: left;
    padding-top: 16px;
    padding-bottom: 16px;
}
.drawer-village__resource-item.with-indicator {
        background-image: url(./images/caret-right.png);
        background-repeat: no-repeat;
        background-position: center right;
    }
.drawer-village__resource-item.with-indicator:hover {
            background-image: url(./images/caret-right-hover.png);
        }
.drawer-village__resource-item:hover h3, .drawer-village__resource-item:hover .collapse__header {
        color: #0659e8;
    }
.drawer-village__resource-item:first-of-type {
        border-top: 1px solid #e3e3e3;
        margin-top: 10px;
    }
.drawer-village__resource-item h3 {
        margin: 0;
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: normal;
        color: #191919;
        text-transform: uppercase;
    }
.drawer-village__resource-item .count {
        display: inline-block;
        border-radius: 3px;
        background-color: #6f6f6f;
        text-align: center;
        height: 16px;
        width: 16px;

        font-size: 11px;
        line-height: 16px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        letter-spacing: normal;
        color: #ffffff;
    }
.drawer-village__resource-item .resource {
        display: block;
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: 0.15px;
        color: #191919;

        margin-bottom: 10px;
    }
.drawer-village__resource-item .resource:hover {
            color: #0659e8;
        }
.drawer-village__resource-item .collapse__content {
        padding-top: 20px;
        padding-bottom: 10px;
    }
.drawer-village__resource-item .collapse__header {
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: normal;
        color: #191919;
        text-transform: uppercase;
    }
.drawer-content .empty {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.drawer-content .empty h5 {
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #6f6f6f;
    }
#drawer-saved__confirmation .drawer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
#drawer-saved__confirmation .drawer-content h1 {
            font-size: 24px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.33;
            letter-spacing: -0.3px;
            text-align: center;
            color: #191919;
            max-width: 227px;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
#drawer-saved__confirmation .drawer-content h1 {
                margin-top: 20px
        }
    }
#drawer-saved__confirmation .drawer-content i.confirmation {
            height: 60px;
            width: 60px;
            display: block;
            background-image: url(./images/confirmation-icon.png);;
        }
#drawer-saved__confirmation .drawer-content .drawer-control__view-project {
            font-size: 14px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            padding-right: 20px;
            color: #266de8;
            background: transparent;
            background-image: url('./images/caret-right.png');
            background-repeat: no-repeat;
            background-position: center right;;


        }
.drawer-panel.active .drawer-fullscreen{
    margin-right: 15px;
}
.drawer-fullscreen{
    background-image: url('./images/fullscreen.png');
    background-repeat: no-repeat;
    background-position: center right;
    width: 20px;
    height: 20px;
    margin-right: 0px;
    display: inline-block;
}
.drawer-fullscreen img{
        display: none;
    }
.drawer-fullscreen:hover{
         background-image: url('./images/fullscreen-hover.png');
     }
.drawer-control__edit{
    background-color: transparent;
    background-image: url('./images/edit.png');
    background-repeat: no-repeat;
    background-position: center right;
    width: 20px;
    height: 20px;
    margin-right: 15px;
    display: inline-block;
    position: relative;
    top: -1px;
}
.drawer-control__edit img{
        display: none;
    }
.drawer-control__edit:hover{
     background-image: url('./images/edit-hover.png');
 }
#finish_library-village_drawer_container .drawer-control__close{
    background-image: url('./images/secondary.png');
    background-repeat: no-repeat;
    background-position: center right;
    width: 20px;
    height: 20px;
    background-color: transparent;
    margin-left: 0;
}
#finish_library-village_drawer_container .drawer-control__close:hover{
     background-image: url('./images/brand-hover.png');
 }
/*saved drawer*/
#drawer-saved__landing .drawer-fullscreen:hover img{

    }
@media only screen and (min-width : 280px) and (max-width : 767px){
            #drawer-saved__landing .drawer-controls .drawer-control__close {
                display: none;
            }
    }
#drawer-saved__landing .drawer-heading--mobile {
        display: none;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
#drawer-saved__landing .drawer-heading--mobile {
            display: flex;
            justify-content: flex-end;
            height: 50px;
            padding: 10px 20px;
            border-bottom: 1px solid #cdcdcd
    }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
#finish_library-village_drawer_container.saved-drawer {
        width: 100%;
        top: 0;
        z-index: 1000
}
    }
.filter-drawer.open{
    display: block;
    background: white;
}
.drawer-control__close img{
    display: none;
}
.sfl-filter-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
.sfl-filter-grid {
        grid-template-columns: 1fr
}
    }
.saved__images button {
        padding: 0;
    }
.saved__images img {
        vertical-align: bottom;
    }
.project__name label {
        font-size: 12px;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.33;
        letter-spacing: normal;
        color: #191919;
        text-transform: uppercase;;
    }
.project__name .finish__search__container input {
        padding-left: 0.5rem;
    }
.surface-controls .selection {
        display: none;
    }
.surface-controls div .finish__button {
        width: 99px;
        margin-right: 10px;
    }
.surface-controls div .finish__button.primary {
            margin-right: 0;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
        .submenu-saved .surface-submenu {
            max-height: initial;
            height: 57px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .submenu-saved .surface-submenu h1 {
                margin: 0;
            }

            .submenu-saved .surface-submenu .surface-controls {
                padding: 0;
            }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
        .submenu-saved .surface-submenu {
            max-height: initial;
            height: 57px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

            .submenu-saved .surface-submenu h1 {
                margin: 0;
            }

            .submenu-saved .surface-submenu .surface-controls {
                padding: 0;
            }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.saved-page.site-content {
        padding: 0 20px
}
            .saved-page.site-content .surface-row .col-1-3 {
                width: 100%;
            }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.saved-page.site-content {
        padding: 20px
}
            .saved-page.site-content .surface-row .col-1-3 {
                width: 50%;
            }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
#surface-modal__confirmation .surface-modal__block {
        width: 100%;
        height: 100%
}
    }
.edit-project .surface-submenu, .project-detail .surface-submenu {
        max-height: initial;
        height: auto;

    }
.edit-project .surface-submenu h1, .project-detail .surface-submenu h1 {
            margin: 10px 0 0;
        }
.edit-project .surface-submenu .finish__button.back, .project-detail .surface-submenu .finish__button.back {
                top: 0
            }
@media only screen and (min-width : 280px) and (max-width : 767px){

            .edit-project .surface-submenu h1, .project-detail .surface-submenu h1 {
                margin: 0;
            }

            .edit-project .surface-submenu .surface-controls, .project-detail .surface-submenu .surface-controls {
                padding: 0;
            }

            .edit-project .surface-submenu .finish__button, .project-detail .surface-submenu .finish__button {
                width: auto;
                padding: 7px 15px;
            }

                .edit-project .surface-submenu .finish__button.back, .project-detail .surface-submenu .finish__button.back {
                    top: 0
                }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
            .edit-project .surface-submenu .surface-controls, .project-detail .surface-submenu .surface-controls {
                padding: 0;
            }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){

        .edit-project .container, .project-detail .container {
            padding: 0 20px;
        }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){

        .edit-project .container, .project-detail .container {
            padding: 20px;
        }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.project-detail .surface-submenu .surface-controls {
            padding: 10px
    }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.project-detail .surface-submenu .surface-controls {
            padding: 10px
    }
    }
@media only screen and (min-width : 768px){
.material__detail__image__block .surface-row {
            display: flex
    }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
            .material__detail__image__block .surface-row .col-1-2 {
                width: 100%;
                margin: 0;
                padding: 0;
            }
    }
@media only screen and (min-width : 1200px) {

            .material__detail__image__block .surface-row .pr-0 {
                padding-right: 0 !important;
            }
    }
@media only screen and (min-width : 960px) and (max-width : 1199px){

            .material__detail__image__block .surface-row .pr-0 {
                padding-right: 0;
                width: 434px;
            }
                .material__detail__image__block .surface-row .pr-0 .mateial__detail__preview{
                    padding-right: 0;
                }
                .material__detail__image__block .surface-row .pr-0 .card__image{
                    width: 100%;
                }
                    .material__detail__image__block .surface-row .pr-0 .card__image img{
                        height: 434px;
                    }
            .material__detail__image__block .surface-row .pr-1{
                margin-left: 40px;
            }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){

            .material__detail__image__block .surface-row .pr-0 {
                width: 405px;
                padding-right: 0;
            }
                .material__detail__image__block .surface-row .pr-0 .card__image{
                    width: 100%;
                }
                    .material__detail__image__block .surface-row .pr-0 .card__image img{
                        height: 405px;
                    }
            .material__detail__image__block .surface-row .pr-1 {
                width: auto;
                margin-left: 25px;
            }
    }
@media only screen and (min-width : 960px) and (max-width : 1199px){
.material__detail__image__block .surface-row .mateial__detail__preview {
                padding-right: 30px
        }
    }
@media only screen and (min-width : 1200px) {

                .material__detail__image__block .surface-row .mateial__detail__preview .upholstery-detail__preview {
                    width: 528px;
                    height: 528px;
                }
    }
@media only screen and (min-width : 960px) and (max-width : 1199px){
.material__detail__image__block .surface-row .material__image__title__content .surface-row.cart__row .col-1-3 {
                        width: 50%
                }
    }
@media only screen and (min-width : 960px) and (max-width : 1199px){
.material__detail__image__block .surface-row .material__image__title__content .surface-row.cart__row .col-2-3 {
                        width: 50%
                }
    }
.material__detail__image__block .tablet-display {
        display: none;
    }
.material__detail__image__block .material-tab__header button {
            outline: none;
        }
.material__detail__image__block .material__swatch__information {
        border-top: 1px solid #e9e9e9;
        padding-top: 16px;
    }
.material__detail__image__block .material-tab__item table tr:last-child th, .material__detail__image__block .material-tab__item table tr:last-child td {

                        border-bottom: 1px solid #e9e9e9;
                    }
@media only screen and (min-width : 768px) and (max-width : 959px){

            .material__detail__image__block .material-tab__container.tablet-display {
                display: block;
            }
            .material__detail__image__block .cart__row .col-1-3, .material__detail__image__block .cart__row .col-2-3 {
                width: 100%;
                max-width: 236px;
            }

            .material__detail__image__block .cart__row .col-2-3 {
                margin-top: 20px;
            }
            .material__detail__image__block .material-tab__item th {
                border-top: 1px solid #e9e9e9;
                width: 236px;
            }

            .material__detail__image__block .material-tab__item th, .material__detail__image__block .material-tab__item td {
                border-bottom: 1px solid #e9e9e9;


            }
        .material__detail__image__block .mateial__detail__preview button{
            max-width: 405px;
        }
    }
.material__view__on__product .col-1-2.col-mb-1-1 .column-text {
                text-align: right;
            }
@media only screen and (min-width : 280px) and (max-width : 767px){
.material__view__on__product .col-1-2.col-mb-1-1 .column-text {
                    text-align: left
            }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
        .material__view__on__product #steelcase_configurator_root #configuratorContainer .wrapper:first-of-type {
            padding: 0;
        }
            .material__view__on__product #steelcase_configurator_root #configuratorContainer .col-xl-8.col-lg-7.col-sm-12 {
                padding: 0;
            }

                .material__view__on__product #steelcase_configurator_root #configuratorContainer .col-xl-8.col-lg-7.col-sm-12 .productPreview {
                    height: auto;
                }

                    .material__view__on__product #steelcase_configurator_root #configuratorContainer .col-xl-8.col-lg-7.col-sm-12 .productPreview .img-wrap {
                        height: auto;
                    }

            .material__view__on__product #steelcase_configurator_root #configuratorContainer .col-xl-4.col-lg-5.col-sm-12 {
                padding: 0;
            }

                .material__view__on__product #steelcase_configurator_root #configuratorContainer .col-xl-4.col-lg-5.col-sm-12:before {
                    content: '';
                    border-top: 1px solid #cdcdcd;
                    width: calc(100% + 40px);
                    height: 1px;
                    position: absolute;
                    left: -20px;
                }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
        .material__view__on__product #steelcase_configurator_root #configuratorContainer .widget.colorPicker .colors .color{
            margin-right: 24px;
        }
    }
@media only screen and (min-width : 960px) and (max-width : 1199px){
        .material__view__on__product #steelcase_configurator_root .container{
            max-width: initial;
        }
        .material__view__on__product #steelcase_configurator_root #configuratorContainer .row {
            flex-wrap: nowrap;
            justify-content: space-between;
        }
            .material__view__on__product #steelcase_configurator_root #configuratorContainer .row .col-sm-12{
                max-width: 48%;
            }
    }
.upper__wrap {
    border-bottom: none;
}
details summary {
        font-size: 14px;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.43;
        letter-spacing: normal;
        color: #6f6f6f;
        margin-top: 13px;
        max-width: -webkit-fit-content;
        max-width: -moz-fit-content;
        max-width: fit-content;
        cursor: pointer;
    }
details summary::-webkit-details-marker {
            display: none;
         }
details summary .collapse__indicator {
            background-image: url('./images/down.svg');
        }
details[open] summary .collapse__indicator {
                background-image: url('./images/up-arrow.svg');
            }
.collapsible .empty-references {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.43;
    letter-spacing: normal;
    color: #6f6f6f;
    margin-top: 13px;
    max-width: -webkit-fit-content;
    max-width: -moz-fit-content;
    max-width: fit-content;
}
.footer-logo a .logo-rest, .footer-branding .menu-item a .logo-rest {
    z-index: 0 !important;
}
.margin-top-10 {
    margin-top: 10px;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
    .surface-row {
        margin: 0;
    }

        .surface-row .col-1-4 {
            width: 100%;
            padding: 0;
        }
            .search__filter__container .filter__buttons button {
                padding-left: 0;
                padding-right: 0;
            }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){

        .surface-row .col-1-4 {
            width: 33%;
        }
    }
#content .material__detail__image__block .hs-container {
      display: none;

    }
#content .material__detail__image__block .hs-container.active {
        display: block;
      }
#content .material__detail__image__block .hs-container.active .hs-tab {
          display: block;
        }
#content .material__detail__image__block .hs-container .material-tab__container .material-tab__item {
        display: block;
      }
#content .material__detail__image__block .hs-container .material__view__on__product.active .material-tab__item {
          display: block;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
        .footer-nav .menu-item {
            border-bottom: 1px solid #cdcdcd;
        }
                .footer-nav .menu-item:hover .sub-menu{
                    display: block;
                }
                    .footer-nav .menu-item:hover .sub-menu li{
                        margin-left: 10px;
                    }
                    .footer-nav .menu-item:hover .sub-menu a{
                        display: block;
                    }
            .footer-nav .menu-item a {
                display: inline-block;
                padding-right: 0;
                border: none;
            }
                .social-links .footer-nav > li:nth-last-child(2) a:before {
                    content: "\00BB";
                }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
        .footer-nav .menu-item {
            border-bottom: 1px solid #cdcdcd;
        }
                .footer-nav .menu-item:hover .sub-menu{
                    display: block;
                }
                    .footer-nav .menu-item:hover .sub-menu li{
                        margin-left: 10px;
                    }

                    .footer-nav .menu-item:hover .sub-menu a{
                        display: block;
                    }
            .footer-nav .menu-item a {
                display: inline-block;
                padding-right: 0;
                border: none;
            }
                .social-links .footer-nav > li:nth-last-child(2) a:before {
                    content: "\00BB";
                }
    }
.page-header--pdp.page-heading {
    padding: 0 20px !important;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
        .landing.container {
            padding: 0 20px;
        }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
        .landing.container {
            padding: 0 20px;
        }
    }
.landing .finish-header {
        margin-top: 50px;
        margin-bottom: 50px;
    }
@media only screen and (min-width : 960px) and (max-width : 1199px){
.landing .finish-header {
            margin-bottom: 50px
    }
    }
.landing .palettes {
        position: relative;
        overflow: hidden;
    }
.landing .palettes--collapsed {
            display: none;
            padding: 20px;
            background-color: #f6f6f6;
        }
.landing .palettes--collapsed:before{
                content: '';
                position: absolute;
                height: 1px;
                background: #e3e3e3;
                width: 100%;
                bottom: 0;
                left: 0;
            }
.landing .palettes--collapsed button {
                text-align: center;
                background: transparent;
                border: none;
                font-size: 14px;
                font-weight: bold;
                font-stretch: normal;
                font-style: normal;
                line-height: 1.43;
                letter-spacing: normal;
                color: #266de8;
                width: 100%;
            }
.landing .palettes--collapsed button:focus {
                    outline: none;
                }
.landing .palettes--collapsed button .more {
                    display: inline-block;
                    height: 10px;
                    width: 10px;
                    background-image: url('./images/plus.svg');

                }
.landing .palettes--collapsed button .less {
                    display: inline-block;
                    height: 10px;
                    width: 10px;
                    transform: rotate(90deg);
                    background-image: url('./images/minus.svg');

                }
.landing .palettes--collapsed button:hover {
                    color: #0659e8;
                }
@media only screen and (min-width : 280px) and (max-width : 767px){
.landing .palettes--collapsed {
                box-shadow: 0 0 72px 100px #ffffff;
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 1
        }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.landing .palettes--collapsed {
                width: 100%;
                position: absolute;
                bottom: 0;
                z-index: 1
        }
    }
.landing .palettes .cards-wrapper {
            display: flex;
            flex-wrap: wrap;
        }
.landing .palettes .cards-wrapper.grid {
                /*display: grid;
                grid-template-columns: repeat(auto-fit, minmax(50%, 1fr));

                @mixin mobile {
                    display: flex;
                }

                &:last-of-type {
                    grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));

                    @mixin tablet {
                        grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
                    }
                    @mixin mobile {
                        display: flex;
                    }

                }*/
                display: flex;
                align-items: stretch;
                flex-wrap: wrap;
                justify-content: flex-start;
            }
.landing .palettes .cards-wrapper [class*='col-'] {
                width: calc(25% - 10px);
                float: unset;
                margin-right: 10px;
                margin-bottom: 10px;
                background-color: white;
                padding-right: 0;
            }
.landing .palettes .cards-wrapper [class*='col-']:last-of-type {
                    margin-right: 10px;
                }
@media only screen and (min-width : 280px) and (max-width : 767px){
.landing .palettes .cards-wrapper [class*='col-']:last-of-type {
                        margin-right: 0
                }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.landing .palettes .cards-wrapper [class*='col-'] {
                    width: calc(33.33% - 10px)
            }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.landing .palettes .cards-wrapper [class*='col-'] {
                    width: 100%;
                    margin-right: 0
            }
    }
.landing .palettes .cards-wrapper [class*='col-'] .material__card {
                    display: flex;
                    flex-direction: column;
                    background-color: white;
                    width: 100%;
                    margin: 0;
                }
.landing .palettes .cards-wrapper [class*='col-'] .material__card .card__content {
                            width: 100%;
                            padding: 20px;
                        }
.landing .palettes .cards-wrapper [class*='col-'] .material__card .card__image {
                            flex-grow: 1;
                        }
.landing .palettes .cards-wrapper [class*='col-'] .material__card .card__image a {
                                height: 100%;
                            }
.landing .palettes .cards-wrapper [class*='col-'] .material__card .card__image a img {
                                    height: 100%;
                                    aspect-ratio: 4 / 3;
                                }
@media only screen and (min-width : 280px) and (max-width : 767px){
.landing .palettes .cards-wrapper [class*='col-'] .material__card .card__image a img {
                                        aspect-ratio: 140 / 79
                                }
    }
.landing .palettes .cards-wrapper .col-1-2 {
                width: calc(50% - 10px);
            }
@media only screen and (min-width : 280px) and (max-width : 767px){
.landing .palettes .cards-wrapper .col-1-2 {
                    width: 100%;
                    margin-right: 0
            }
    }
@media only screen and (min-width : 768px){
.landing .palettes .cards-wrapper .col-1-2 .material__card .card__image a img {
                                        aspect-ratio: 578 / 325
                                }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
            .landing .palettes .surface-row {
                position: relative;
                margin: 0;
            }

            .landing .palettes .col-1-2, .landing .palettes .col-1-4 {
                width: 100%;
                padding: 0;
                display: block;
            }

                .landing .palettes .col-1-2 img, .landing .palettes .col-1-4 img {
                    width: 100%;
                }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
            .landing .palettes .surface-row {
                position: relative;
                margin: 0;
            }

            .landing .palettes .col-1-4 {
                //width: 32%;
                //padding: 0; //display: block;
            }

                .landing .palettes .col-1-4 img {
                    width: 100%;
                }
    }
.explore-container .col-1-6 {
        padding: 0;
        padding-right: 10px;
    }
.explore-container .col-1-6.open1, .explore-container .col-1-6.open2, .explore-container .col-1-6.open3, .explore-container .col-1-6.open4{
        display: block!important;
    }
.explore-container .surface-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        margin: 0;
    }
@media only screen and (min-width : 768px){
.explore-container .surface-row {

            margin: 0 -10px 0 0
    }
    }
.explore-container .surface-row:after {
         position: absolute;
        }
@media only screen and (min-width : 280px) and (max-width : 767px){
        .explore-container .col-1-6 {
            width: 50%;
        }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
        .explore-container .col-1-6 {
            width: 33.333%;
        }
    }
@media only screen and (min-width : 960px) and (max-width : 1199px){
        .explore-container .col-1-6 {
            width: 25%;
        }
    }
.featured {
    position: relative;
    overflow: hidden;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
.featured {
        margin: 0;
        padding: 0
}
        .featured .col-1-4 {
            width: 100%;
            padding: 0;
            display: block;
        }

            .featured .col-1-4 img {
                width: 100%;
            }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.featured {
        margin: 0;
        padding: 0
}
        .featured .col-1-4 {
            //width: 32%;
        }

            .featured .col-1-4 img {
                width: 100%;
            }
    }
.featured--collapsed {
        display: none;
        padding: 20px;
        background-color: #ffffff;
    }
.featured--collapsed button {
            text-align: center;
            background: transparent;
            border: none;
            font-size: 14px;
            font-weight: bold;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: #266de8;
            width: 100%;
        }
.featured--collapsed button:focus {
                outline: none;
            }
.featured--collapsed button .more {
                display: inline-block;
                height: 10px;
                width: 10px;
                background-image: url('./images/plus.svg');

            }
.featured--collapsed button .less {
                display: inline-block;
                height: 10px;
                width: 10px;
                transform: rotate(90deg);
                background-image: url('./images/minus.svg');

            }
.featured--collapsed button:hover {
                color: #0659e8;
            }
@media only screen and (min-width : 280px) and (max-width : 767px){
.featured--collapsed {
            display: block;
            box-shadow: 0 0 90px 40px #ffffff;
            width: 100%;
            position: absolute;
            bottom: 0;
            z-index: 1
    }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.featured--collapsed {
            width: 100%;
            position: absolute;
            bottom: 0;
            z-index: 1
    }
    }
.up-page{
    position: fixed;
    width: 40px;
    height: 40px;
    bottom: 10px;
    right: 10px;
    z-index: 99999999;
    cursor: pointer;
    border: solid 1px #e3e3e3;
    border-radius: 50%;
    background-color: white;
    background-image: url('./images/top-arrow-up.png');
    background-position: center;
    background-repeat: no-repeat;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
.up-page.material{
        bottom: 60px
     }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.featured-in-mobile{
        width: 100%;
        padding-right: 0
}
    }
#search-submenu {
    height: auto;
}
@media only screen and (min-width : 280px) and (max-width : 767px){
#search-submenu ul {
            visibility: visible
    }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
#search-submenu ul {
            visibility: visible
    }
    }
@media only screen and (min-width : 960px) and (max-width : 1199px){
#search-submenu ul {
            visibility: visible
    }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
        .search-results.container {
            padding: 0 20px;
        }

        .search-results #search-submenu {
            height: auto;
        }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
        .search-results.container {
            padding: 0 20px;
        }

        .search-results #search-submenu {
            height: auto;
        }
    }
.search-results .explore-show__more {
        padding-top: 10px;
        display: block;
    }
.search-results .search__filter__container .filter__buttons br {
                display: none;
            }
.search-results .search__filter__container .filter__buttons button {
                 display: none;
            }
.search-results .search__filter__container .sort__button button {
                display: none;
            }
#sfl-shortcode-section br {
        display: none;
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
        .archive-finish-cat.container {
            padding: 0 20px;
        }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
        .archive-finish-cat.container {
            padding: 0 20px;
        }
    }
.surface-row.finish_archive{
    display: flex;
    flex-wrap: wrap;
}
@media only screen and (min-width : 768px) and (max-width : 959px){
.surface-row.finish_archive{
        margin: 0 -20px 0 0
}
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
.featured .surface-row.finish_archive {
        margin: 0 -10px 0 0
}
    }
.col-1-4.finishes_archive{
    margin-bottom: 10px;
}
.col-1-4.finishes_archive .material__card{
    height: 100%;
    margin-bottom: 0;
    background: white;
}
.archive-palette .finish-category__header .surface-row {
            display: flex;
            justify-content: flex-end;
        }
.archive-palette .finish-category__header .surface-row:after {
                content: none;
            }
@media only screen and (min-width : 280px) and (max-width : 767px){
.archive-palette .finish-category__header .surface-row .sort__button_palette.col-1-3 {
                        padding-right: 0;
                        width: 100%
                }
                        .archive-palette .finish-category__header .surface-row .sort__button_palette.col-1-3 button {
                            padding: 12px 15px;
                            background-position: 98% center;
                        }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.archive-palette .finish-category__header .surface-row .sort__button_palette.sort__button{
                        width: 100%;
                        margin-right: 0;
                        margin-bottom: 20px
                }
                        .archive-palette .finish-category__header .surface-row .sort__button_palette.sort__button button{
                            padding: 12px 15px;
                            background-position: 98% center;
                        }
    }
@media only screen and (min-width : 280px) and (max-width : 767px){
.archive-palette .finish-category__header .surface-row .sort__button_palette.sort__button .sort__popover {
                            width: 100%;
                            top: 50px;
                            right: 0
                    }
    }
.archive-palette #palettes-archive {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }
.archive-palette #palettes-archive .col-1-3 {
            padding-bottom: 10px;
            display: flex;
        }
@media only screen and (min-width : 768px) and (max-width : 959px){
.archive-palette #palettes-archive .col-1-3 {
                width: 50%
        }
    }
.archive-palette #palettes-archive .col-1-3 .material__card {
                margin-bottom: 0;
                background: white;
            }
.archive-palette #palettes-archive .col-1-3 .material__card .card__image a img {
                                aspect-ratio: 16 / 9;
                            }
.archive-palette #palettes-archive .col-1-3 .material__card .card__content {
                        padding: 20px;
                    }
.archive-palette #palettes-archive .col-1-3 .material__card .card__description{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -moz-box;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        line-clamp: 2;
                        box-orient: vertical;
                    }
@media only screen and (min-width : 280px) and (max-width : 767px){
        .archive-palette.container {
            padding: 0 20px;
        }
            .archive-palette .finish-category__header .filter__buttons button {
                width: 140px;
            }
    }
@media only screen and (min-width : 768px) and (max-width : 959px){
        .archive-palette.container {
            padding: 0 20px;
        }
    }
/*!* Slider *!*/
/*.slick-slider*/
/*{*/
/*    position: relative;*/
/*    display: block;*/
/*    box-sizing: border-box;*/
/*    -webkit-user-select: none;*/
/*       -moz-user-select: none;*/
/*        -ms-user-select: none;*/
/*            user-select: none;*/
/*    -webkit-touch-callout: none;*/
/*    -khtml-user-select: none;*/
/*    -ms-touch-action: pan-y;*/
/*        touch-action: pan-y;*/
/*    -webkit-tap-highlight-color: transparent;*/
/*}*/
/*.slick-list*/
/*{*/
/*    position: relative;*/
/*    display: block;*/
/*    overflow: hidden;*/
/*    margin: 0;*/
/*    padding: 0;*/
/*}*/
/*.slick-list:focus*/
/*{*/
/*    outline: none;*/
/*}*/
/*.slick-list.dragging*/
/*{*/
/*    cursor: pointer;*/
/*    cursor: hand;*/
/*}*/
/*.slick-slider .slick-track,*/
/*.slick-slider .slick-list*/
/*{*/
/*    -webkit-transform: translate3d(0, 0, 0);*/
/*       -moz-transform: translate3d(0, 0, 0);*/
/*        -ms-transform: translate3d(0, 0, 0);*/
/*         -o-transform: translate3d(0, 0, 0);*/
/*            transform: translate3d(0, 0, 0);*/
/*}*/
/*.slick-track*/
/*{*/
/*    position: relative;*/
/*    top: 0;*/
/*    left: 0;*/
/*    display: block;*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*}*/
/*.slick-track:before,*/
/*.slick-track:after*/
/*{*/
/*    display: table;*/
/*    content: '';*/
/*}*/
/*.slick-track:after*/
/*{*/
/*    clear: both;*/
/*}*/
/*.slick-loading .slick-track*/
/*{*/
/*    visibility: hidden;*/
/*}*/
/*.slick-slide*/
/*{*/
/*    display: none;*/
/*    float: left;*/
/*    height: 100%;*/
/*    min-height: 1px;*/
/*}*/
/*[dir='rtl'] .slick-slide*/
/*{*/
/*    float: right;*/
/*}*/
/*.slick-slide img*/
/*{*/
/*    display: block;*/
/*}*/
/*.slick-slide.slick-loading img*/
/*{*/
/*    display: none;*/
/*}*/
/*.slick-slide.dragging img*/
/*{*/
/*    pointer-events: none;*/
/*}*/
/*.slick-initialized .slick-slide*/
/*{*/
/*    display: block;*/
/*}*/
/*.slick-loading .slick-slide*/
/*{*/
/*    visibility: hidden;*/
/*}*/
/*.slick-vertical .slick-slide*/
/*{*/
/*    display: block;*/
/*    height: auto;*/
/*    border: 1px solid transparent;*/
/*}*/
/*.slick-arrow.slick-hidden {*/
/*    display: none;*/
/*}*/
/*@charset 'UTF-8';*/
/*!* Slider *!*/
/*.slick-loading .slick-list*/
/*{*/
/*    background: #fff url('./ajax-loader.gif') center center no-repeat;*/
/*}*/
/*!* Icons *!*/
/*@font-face*/
/*{*/
/*    font-family: 'slick';*/
/*    font-weight: normal;*/
/*    font-style: normal;*/
/*    src: url('./fonts/slick.eot');*/
/*    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');*/
/*}*/
/*!* Arrows *!*/
/*.slick-prev,*/
/*.slick-next*/
/*{*/
/*    font-size: 0;*/
/*    line-height: 0;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    display: block;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    padding: 0;*/
/*    -webkit-transform: translate(0, -50%);*/
/*    -ms-transform: translate(0, -50%);*/
/*    transform: translate(0, -50%);*/
/*    cursor: pointer;*/
/*    color: transparent;*/
/*    border: none;*/
/*    outline: none;*/
/*    background: transparent;*/
/*}*/
/*.slick-prev:hover,*/
/*.slick-prev:focus,*/
/*.slick-next:hover,*/
/*.slick-next:focus*/
/*{*/
/*    color: transparent;*/
/*    outline: none;*/
/*    background: transparent;*/
/*}*/
/*.slick-prev:hover:before,*/
/*.slick-prev:focus:before,*/
/*.slick-next:hover:before,*/
/*.slick-next:focus:before*/
/*{*/
/*    opacity: 1;*/
/*}*/
/*.slick-prev.slick-disabled:before,*/
/*.slick-next.slick-disabled:before*/
/*{*/
/*    opacity: .25;*/
/*}*/
/*.slick-prev:before,*/
/*.slick-next:before*/
/*{*/
/*    font-family: 'slick';*/
/*    font-size: 20px;*/
/*    line-height: 1;*/
/*    opacity: .75;*/
/*    color: white;*/
/*    -webkit-font-smoothing: antialiased;*/
/*    -moz-osx-font-smoothing: grayscale;*/
/*}*/
/*.slick-prev*/
/*{*/
/*    left: -25px;*/
/*}*/
/*[dir='rtl'] .slick-prev*/
/*{*/
/*    right: -25px;*/
/*    left: auto;*/
/*}*/
/*.slick-prev:before*/
/*{*/
/*    content: '←';*/
/*}*/
/*[dir='rtl'] .slick-prev:before*/
/*{*/
/*    content: '→';*/
/*}*/
/*.slick-next*/
/*{*/
/*    right: -25px;*/
/*}*/
/*[dir='rtl'] .slick-next*/
/*{*/
/*    right: auto;*/
/*    left: -25px;*/
/*}*/
/*.slick-next:before*/
/*{*/
/*    content: '→';*/
/*}*/
/*[dir='rtl'] .slick-next:before*/
/*{*/
/*    content: '←';*/
/*}*/
/*!* Dots *!*/
/*.slick-dotted.slick-slider*/
/*{*/
/*    margin-bottom: 30px;*/
/*}*/
/*.slick-dots*/
/*{*/
/*    position: absolute;*/
/*    bottom: -25px;*/
/*    display: block;*/
/*    width: 100%;*/
/*    padding: 0;*/
/*    margin: 0;*/
/*    list-style: none;*/
/*    text-align: center;*/
/*}*/
/*.slick-dots li*/
/*{*/
/*    position: relative;*/
/*    display: inline-block;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    margin: 0 5px;*/
/*    padding: 0;*/
/*    cursor: pointer;*/
/*}*/
/*.slick-dots li button*/
/*{*/
/*    font-size: 0;*/
/*    line-height: 0;*/
/*    display: block;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    padding: 5px;*/
/*    cursor: pointer;*/
/*    color: transparent;*/
/*    border: 0;*/
/*    outline: none;*/
/*    background: transparent;*/
/*}*/
/*.slick-dots li button:hover,*/
/*.slick-dots li button:focus*/
/*{*/
/*    outline: none;*/
/*}*/
/*.slick-dots li button:hover:before,*/
/*.slick-dots li button:focus:before*/
/*{*/
/*    opacity: 1;*/
/*}*/
/*.slick-dots li button:before*/
/*{*/
/*    font-family: 'slick';*/
/*    font-size: 6px;*/
/*    line-height: 20px;*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    content: '•';*/
/*    text-align: center;*/
/*    opacity: .25;*/
/*    color: black;*/
/*    -webkit-font-smoothing: antialiased;*/
/*    -moz-osx-font-smoothing: grayscale;*/
/*}*/
/*.slick-dots li.slick-active button:before*/
/*{*/
/*    opacity: .75;*/
/*    color: black;*/
/*}*/
.sfl-overlay {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: black;
  opacity: 0.3;
  z-index: 999;

}
.sfl-overlay .sfl-overlay_inner {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  }
.sfl-overlay .sfl-overlay_content {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }
.sfl-overlay .sfl-spinner {
    width: 75px;
    height: 75px;
    display: inline-block;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.05);
    border-top-color: #fff;
    -webkit-animation: spin 1s infinite linear;
            animation: spin 1s infinite linear;
    border-radius: 100%;
    border-style: solid;
  }
@-webkit-keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}