.column-xs-12 {width: 100%;}
.column-xs-6 {width: 50%;}
.column-xs-12, .column-xs-6 {float: left;}
.column-sm-4, .column-sm-8, .column-md-6, .column-lg-5, .column-lg-7, .column-xs-12 {min-height: 1px; padding-right: 15px;padding-left: 15px;}

@media (min-width: 768px) {
    .column-sm-8 {width: 66.66666667%;}
    .column-sm-4, .column-sm-8 {float: left;}
    .column-sm-4 {width: 33.33333333%;}
}

@media (min-width: 992px) {
    .column-md-6 {width: 50%;}
    .column-md-6 {float: left;}
    .column-sm-4 {width: 33.33333333%;}
}

@media (min-width: 1200px) {
    .column-lg-7 {width: 58.33333333%;}
    .column-lg-5 {width: 41.66666667%;}
    .column-lg-7, .column-lg-5 {float: left;}
}

#color-comparison img {max-width: none;}

.img-comp-container {position: relative;height: auto;padding:0px;}

.img-comp-responsive {
    height: 0;
    width: 100%;
    padding-bottom: 100%;
}

.img-comp-img {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.img-comp-img img {
    display: block;
    vertical-align: middle;
}

.img-comp-overlay {
    width: 50%;
}
.img-comp-slider {
    position: absolute;
    z-index: 9;
    cursor: ew-resize;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
.finish-swatches {list-style:none;white-space:nowrap;overflow-y:hidden;overflow-x:auto;padding-left:0px;padding-bottom:8px;min-height:150px;}
.finish-swatches::-webkit-scrollbar{height:10px;background:0 0}
.finish-swatches::-webkit-scrollbar-thumb{background:#ccc;border-radius:20px}
.finish-swatches::-webkit-scrollbar-thumb:hover {background-color: #9a9999;cursor: pointer;}
.finish-swatches li {display:inline-block;width:90px;text-align:center;white-space:normal;vertical-align:top;line-height:initial;font-size:14px;border:1px solid transparent;margin:0 2px;}
.finish-swatches li img {height:auto;width:100%;}
.finish-swatches .active, .finish-swatches li:hover {border:1px solid #DDD;font-weight:bold;color:#000;background:#DDD;}
.finish-swatches.swatches-texture-01 .active, .finish-swatches.swatches-texture-01 li:hover, .finish-swatches.swatches-01 .active, .finish-swatches.swatches-01 li:hover {color:#FFF;background:#1c1c1c;}
.swatch-name {background:#DDD;color:#000;padding:8px;}
.swatch-name:has(> .swatch-name-1) {background:#1c1c1c;color:#FFF;}
.swatch-texture-1, .swatch-texture-2 {font-weight: bold;}
.swatches-01 {margin-bottom: 45px;}