/** Shopify CDN: Minification failed

Line 564:29 Expected ")" to end URL token
Line 581:29 Expected ")" to end URL token

**/
:root {
    --column: ;
    --colorswatchwidth: ;
    --colorswatchwidthLandscape: 60px;
    --colorswatchwidthPortrait: 50px;
    --productTitleLength: ;
    --colorspritewidth: 4050;
    --colorspriteheight: 1200;
    --colorspriteimgdim: 150;
    --colorwareblue: #0087C7;
    --dsfont: "Cabin", "Font Awesome 6 Pro";
    --leftbgimage: ;
    --rightbgimage: ;
}

/* Variant swatch loading - hide entire area until images render, then fade in */
.part-variant .part-options { opacity: 0; transition: opacity 0.3s ease; }
.part-variant .part-options.swatches-loaded { opacity: 1; }

#cwDesignStudio {
    display: grid;
    grid-auto-rows: min-content;
    grid-auto-columns: min-content;
    align-content: stretch;
    grid-auto-flow: dense;
    grid-template-columns: auto min(30%, 430px);
    grid-template-rows: max(calc(70px + 0.5vw), 70px) calc(100vh - calc(max(calc(70px + 0.5vw), 70px) * 2)) auto;
}

#cwDesignStudio.brainstormMode {
    grid-template-rows: max(calc(70px + 0.5vw), 70px) calc((100vh - calc(max(calc(70px + 0.5vw), 70px) * 2)) * 0.8) calc((100vh - calc(max(calc(70px + 0.5vw), 70px) * 2)) * 0.2) auto;
}

@media screen and (max-aspect-ratio: 4.4/3) {
    #cwDesignStudio.isLimitedEdition {
        grid-template-rows: max(calc(70px + 0.5vw), 70px) auto auto;
    }
}

div#cwDesignStudio.isLimitedEdition {
    background: #000;
}

.hiddenFields {
    display: none;
}

.shopifyProductForm {
    display: none;
}

#Canvas3d,
#Canvas3d2 {
    display: none;
}

.kit-add-to-cart-form {
    grid-column: 1 / 3;
    display: none;
}

/*---START------------------------------- Studio -------------------------START---*/
.studio {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    width: 100%;
    height: 100%;
    place-self: center;
}



.dsHasNoParts .studio {
    grid-column: 1 / 3;
}

.studio>ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    max-width: 100%;
    max-height: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.studio>ul.scrollMode {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
}

.studio>ul::-webkit-scrollbar {
    display: none;
}

.studio>ul>li {
    max-width: 100%;
    max-height: 100%;
    flex: 0 0 auto;
    scroll-snap-align: start;
    align-self: center;
    list-style-type: none;
}

.studio ul {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.studio li {
    width: 100%;
    height: 100%;
    position: relative;
}

.studio img,
.studio .dsPartMap svg {
    width: 100%;
    height: 100%;
    aspect-ratio: 5/3;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

.studio img {
    background-image: var(--leftbgimage), var(--rightbgimage);
    background-repeat: no-repeat;
    background-position: left top, right top;
    background-size: calc((100% - ((100vh - (max(70px + 0.5vw, 70px) * 2)) * (5/3))) / 2) 100%, calc((100% - ((100vh - (max(70px + 0.5vw, 70px) * 2)) * (5/3))) / 2) 100%;
}

.maxProductWidth1000 .studio img,
.maxProductWidth1000 .studio .dsPartMap svg {
    max-width: 1000px;
}

.studio .dsPartMap {
    pointer-events: none;
}

.studio .dsPartMap path {
    pointer-events: fill;
}


.studio .dsPartMap {
    position: absolute;
    inset: 0 0 0 0;
    width: 100%;
    height: 100%;
}

.dsPartMap path {
    display: block;
}

.dsPartMap path {
    fill: transparent;
    cursor: pointer;
}

.dsPartMap path:hover {
    fill: rgba(255, 255, 255, 0.2);
    stroke: rgba(0, 0, 0, 0.2);
}

.dsPartMap g:hover path {
    fill: rgba(255, 255, 255, 0.2);
    stroke: rgba(0, 0, 0, 0.2);
}

/*---END------------------------------- Studio -------------------------END---*/

/*---START----------------------------- Brainstorm -------------------------START---*/

.brainstorm {
    display: none;
}

#cwDesignStudio.brainstormMode .brainstorm {
    display: block;
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

.brainstorm ul {
    display: flex;
    flex-direction: row;
    width: 80%;
    margin: auto;
    align-items: center;
    height: 100%;
    column-gap: 5%;
    justify-content: center;
}

.brainstorm ul li {
    border: solid 1px #000;
    width: 18%;
    aspect-ratio: 5/3;
    cursor: pointer;
}

.brainstorm ul li img {
    width: 100%;
}

.brainstorm .addDesign {
    font-family: var(--dsfont);
    font-weight: 600;
    text-align: center;
    font-size: 3em;
    order: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: min(4em, 4vw);
}

.brainstorm ul li:last-child {
    border: solid 1px var(--colorwareblue);
}

/*---END------------------------------- Brainstorm -------------------------END---*/

/*---START------------------------------- Palette -------------------------START---*/

.palette {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    color: #F0F0F0;
    padding: 0 1.3em;
    margin: 0 0 1.3em 0;
    display: flex;
    flex-direction: column;
}

.brainstormMode .palette {
    grid-row: 2 / 4;
}

.palette h4 {
    background: #CCC;
    display: grid;
    grid-template-columns: calc(var(--colorswatchwidth)/2) auto 20%;
    grid-template-rows: calc(var(--colorswatchwidth)/3) calc(var(--colorswatchwidth)/3);
    padding: 0.4em 1.5em;
    grid-column-gap: 1em;
    align-items: center;
    color: #333;
    margin: 0;
}

.palette h4 .colorSwatch {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    transform: scale(0.5);
    justify-self: center;
}

.palette h4 .partName {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    align-self: center;
}

.palette h4 .colorName {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    align-self: center;
}

.palette h4 .productPartPrice {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    align-self: center;
    text-align: right;
}

.palette h4 .removePartText {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
    align-self: center;
    text-align: right;
    color: #CE3838;
}

.palette .h4 .productPartPrice,
.palette h4 .removePartText {
    display: none;
}

.palette .hasOffOption h4 .productPartPrice,
.palette .hasOffOption h4 .removePartText {
    display: inline;
}

.palette .hasOffOption.offOptionSelected h4 .removePartText {
    display: none;
}


.palette h5 {
    border-bottom: 1.25px solid #333;
    font-size: 1.6em;
    font-weight: 300;
    margin: 0 auto 8px auto;
    padding: 15px 0 1px 0px;
    position: relative;
    width: 46%;
    line-height: 1em;
    text-align: center;
    color: #333;
    text-transform: capitalize;
}

.palette .cat-text h5 {
    width: 60%;
}

.palette>ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: hidden;
    flex-direction: row;
    max-height: 100%;
    background: #AAAAAA;
    overflow-y: hidden;
    height: 100%;
    padding: 0;
    margin: 0;
    /*fixes spacing on gift cards*/
}

.palette>ul.scrollMode {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
}

.palette>ul::-webkit-scrollbar {
    display: none;
}

.palette>ul>li {
    width: 100%;
    max-width: 100%;
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
}

.dsHasOnePart .palette nav,
.dsHasOnePart .palette .part-variant h4,
.dsHasNoParts .palette {
    display: none;
}

.palette nav {
    display: flex;
    flex-direction: row;
    position: sticky;
    bottom: 0;
    z-index: 10;
}

.palette nav button {
    cursor: pointer;
    flex-grow: 1;
    text-align: center;
    color: var(--colorwareblue);
    background-color: #000;
    font-size: 20px;
    padding: 10px 0;
    border: none;
    font-weight: 300;
}

.palette nav .allParts {
    border-right: 3px solid var(--colorwareblue);
    border-left: 3px solid var(--colorwareblue);
}

.palette .part-options textarea,
.palette .part-options input {
    width: 100%;
    text-align: center;
    font-size: 1.1em;
    height: 4em;
    color: #000;
    line-height: 1.2em;
    font-family: var(--dsfont);
    font-weight: 600;
}

.palette .part-options .partSpecialNote {
    line-height: 1.2em;
    color: #AF0000;
    font-size: 1.2em;
    padding: 1.5em 3em 0;
    text-shadow: 0px 0px 2px rgb(255 255 255 / 40%);
}

.palette.onLastPart nav .nextPart {
    color: #000;
}

.allPartsMode .palette nav {
    display: none;
}

.allPartsMode .palette>ul {
    display: block;
    height: 100%;
    background: #CCC;
    overflow-y: scroll;
}

.allPartsMode .palette>ul::-webkit-scrollbar {
    display: none;
}

.allPartsMode .palette .part-options {
    display: none;
}

.allPartsMode .palette h4 {
    border-bottom: 2px solid #000;
}

.allPartsMode .palette h4:last-child {
    border-bottom: none;
}

.part-options {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;
}

.part-options::-webkit-scrollbar {
    display: none;
}


.part-options ul {
    padding-left: calc((100% - (var(--colorswatchwidth) * var(--column))) / 2);
    padding-right: calc((100% - (var(--colorswatchwidth) * var(--column))) / 2);
}

.colorSwatch:hover {
    transform: scale(1.10);
    z-index: 10;
    outline: 1.0px solid #333;
}

div.colorSwatch,
.colorSwatch {
    display: inline-block;
    overflow: hidden;
    height: 0;
    margin: 0;
    cursor: pointer;
    position: relative;
    line-height: 2em;
    padding-top: var(--colorswatchwidth);
    width: var(--colorswatchwidth);
    outline: 0.5px solid #333;
    transition-property: transform;
    transition-duration: 0.15s;
}

.variantSwatch {
    text-align: center;
    padding: 1em 0;
    font-size: 1.5em;
}

.variantSwatch img {
    width: 80%;
    height: auto;
    background: #FFF;
    margin: 0 auto 0.5em;
    cursor: pointer;
    display: block;
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
}

.variantSwatch.isGCPrice {
    width: 80%;
    background: #DEDEDE;
    cursor: pointer;
    margin: 2em auto;
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5) inset, 0 1px 1px rgba(255, 255, 255, 0.8) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
    color: #333;
    line-height: 1.1em;
    font-size: 1em;
    list-style: none;
}

.variantSwatch.isGCPrice:first-child {
    margin-top: 4em;
}

.variantSwatch.isGCPrice img {
    display: none;
}


.part-options ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    list-style: none;
}

.part-options .cat-text ul {
    flex-direction: column;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    row-gap: 5px;
    padding: 0;
}

.cat-text button {
    background-color: #CCCCCC;
    color: #CE3838;
    width: 60%;
    height: 100%;
    font-size: 1.3em;
    padding: 0.6em 0;
    margin: 0 auto;
    border: none;
    text-shadow: 0px 0px 1px rgb(255 255 255 / 30%);
    box-shadow: #333;
}

.colorSwatch:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100%;
    background-repeat: no-repeat;
    /*background-image: url(../images/color-samples/size-150/sprite.webp);*/
    background-image: url({{ 'sprite.webp' | asset_url }});

    background-size: calc(var(--colorspritewidth) * var(--colorswatchwidth) / var(--colorspriteimgdim)) calc(var(--colorspriteheight) * var(--colorswatchwidth) / var(--colorspriteimgdim));
}

.colorSwatch:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 100%;
    top: 100%;
    left: 100%;
    background-repeat: no-repeat;
    /*background-image: url(../images/color-samples/size-150-in/sprite.webp);*/
    background-image: url({{ 'sprite-in.webp' | asset_url }});
    background-size: calc(var(--colorspritewidth) * var(--colorswatchwidth) / var(--colorspriteimgdim)) calc(var(--colorspriteheight) * var(--colorswatchwidth) / var(--colorspriteimgdim));
}

.colorSwatch.isSelected:before {
    top: 100%;
    left: 100%;
}

.colorSwatch.isSelected:after {
    top: 0;
    left: 0;
}

.part-options p {
    text-align: center;
    padding: 0.25em;
}

.part-options section.cat-original {
    display: none;
}

.colorSwatch.isSelected {
    text-align: center;
    z-index: 2;
    color: #F0F0F0;
    line-height: 1.2em;
    font-size: 11px;
}

.colorSwatch.isSelected:before {
    z-index: -2;
}

.variantSwatch.isSelected {
    color: var(--colorwareblue);
}

.variantSwatch.isSelected img {
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.5) inset;
}

.symbolList {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
}

.symbolList li {
    font-family: var(--dsfont);
    font-size: 35px;
    color: #000;
    flex-basis: 40px;
    text-align: center;
    cursor: pointer;
}

.disableEngraving .mustPaintMessage {
    display: flex;
}

.allowEngraving .mustPaintMessage {
    display: none;
}

.mustPaintMessage {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(170, 170, 170, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.3em;
    font-size: 0.8em;
}

.mustPaintMessage .message-content {
    background: #D5D5D5;
    color: #333333;
    padding: 6% 5%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 0.6em;
    width: 75%;
    text-align: center;
    font-size: 1.4em;
}

.mustPaintMessage p {
    text-align: center;
    vertical-align: center;
    margin-bottom: 1.4em;
}

.mustPaintMessage button {
    background: #000000;
    color: var(--colorwareblue);
    padding: 0.75em 1.5em;
    border: none;
    cursor: pointer;
    display: block;
    margin: 0 auto;
    font-size: 1.15em;
    font-weight: 700;
}

.engraving-policy-message {
    margin: 2em;
    color: #333;
    font-size: 0.9em;
}

.engraving-policy-message a:link,
.engraving-policy-message a:visited {
    color: var(--colorwareblue);
    text-decoration: none;
}

.engraving-policy-message a:hover,
.engraving-policy-message a:active {
    color: #00ABFA;
    text-decoration: none;
}

/*---END------------------------------- Palette -------------------------END---*/

/*---START------------------------------- Title -------------------------START---*/
.title {
    padding: 1em;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: min(calc((40vw - 4.5rem) / 6), 15px);
    margin: 0;
}

.dsHasNoParts .title {
    grid-column: 1 / 3;
}

.isLimitedEdition .title h3 {
    color: #CCC;
}

.title h3 {
    white-space: nowrap;
    text-align: center;
    margin: 0;
    text-shadow: 0.05em 0.05em 0.25em rgb(0 0 0 / 20%);
    text-underline-offset: 5px;
    text-decoration-skip-ink: none;
    font-weight: 300;
    font-size: min(36px, 4vw);
}

/*---END------------------------------- Title -------------------------END---*/

/*---START------------------------------- Buy -------------------------START---*/
.buy {
    padding: 1em;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: row;
    font-size: min(calc((40vw - 4.5rem) / 6), 15px);
    align-items: center;
    position: relative;
}

.buy button {
    background-color: var(--colorwareblue);
    color: #F5F5F5;
    width: 50%;
    height: 100%;
    margin: 0 auto;
    border: none;
    position: relative;
    cursor: pointer;
}

.buy button p {
    font-size: 0.75em;
    margin: 0;
}

.buy button.CheckoutClicked {
    background-color: #AAA;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

.buy .inventorySoldOutWarning {
    position: absolute;
    background: rgba(50, 50, 50, 1);
    color: #DC0000;
    display: flex;
    flex-direction: row;
    font-size: min(calc((40vw - 4.5rem) / 6), 21px);
    align-items: center;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    justify-content: center;
    cursor: auto;
    text-shadow: 0px 0px 2px rgb(255 255 255 / 30%);
}

.buy .salePrice {
    position: absolute;
    padding: 5% 3% 5% 5%;
    transform: rotate(10deg);
    white-space: nowrap;
    font-size: 0.8em;
    left: 69%;
}

.buy .salePrice svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transform: scaleX(1.2);
}

.buy .salePrice svg .cls-2 {
    fill: #DC143C;
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.5));
}

.buy .salePrice svg .cls-1 {
    fill: url(#SVGID_1_) #D2D2D2;
}

/*---END------------------------------- Buy -------------------------END---*/

/*---START------------------------------- Details -------------------------START---*/
.details {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    display: grid;
    grid-template-columns: auto min(700px, 50%);
    justify-items: center;
    align-items: center;
    justify-content: center;
    margin: 5vh 0;
}

.brainstormMode .details {
    grid-row: 4 / 5;
}

.details a:link,
.details a:visited {
    color: var(--colorwareblue);
    text-decoration: none;
}

.details a:hover,
.details a:active {
    color: #00ABFA;
    text-decoration: none;
}

.details img {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    width: 70%;
    height: auto;
    aspect-ratio: 8/7;
}

.details div {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

.details div p {
    text-indent: 1.5em;
    padding: 0.5em;
    color: #808080;
    line-height: 1.4em;
}

.details ul {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    background-color: #F5F6F7;
    padding: 10px 10px 10px 33px;
    text-indent: -23px;
}

.details ul li {
    padding: 5px 0 3px 5px;
    list-style: disc inside;
    color: #808080;
}

.details ul li.cwDSpdListSubItem {
    padding: 5px 0 3px 25px;
    list-style: none;
}

.isLimitedEdition .details div p {
    color: #AAAAAA;
}

.isLimitedEdition .details ul {
    background-color: #2D2D2D;
}

.isLimitedEdition .details ul li {
    color: #AAA;
}

/*---END------------------------------- Details -------------------------END---*/

/*---START------------------------------- Gallery -------------------------START---*/
.gallery {
    grid-column: 1 / 3;
    max-width: 2000px;
    width: 95%;
    margin: 0 auto;
}

.gallery>ul {
    position: relative;
    width: auto;
    min-height: 36px;
    padding: 3px 0;
    list-style: none;
}

.gallery>ul>li {
    display: block;
    white-space: normal;
    width: 100%;
    margin: 10px 0 30px 0;
    background: #000;
    list-style: none;
}

.gallery>ul>li>img {
    width: 100%;
    height: auto;
}

.gallery .mediaLoadDesign img {
    width: 5vw;
    height: 5vw;
    margin: 0 0 0 2px;
    max-width: 20px;
    max-height: 20px;
    display: block;
}

.gallery .galleryDetails {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #CCC;
    padding: 0.5em 1em;
    list-style: none;
    margin: 0;
    font-size: 0.8em;
    line-height: 1.2em;
}

.gallery .galleryDetails li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gallery .galleryDetails .mediaLoadDesign {
    visibility: hidden;
}

.gallery .galleryDetails .mediaShare {
    visibility: hidden;
}

.gallery .galleryDetails li p {
    margin: 0;
    padding: 0;
}

.gallery .mediaShare span {
    display: none;
}

.gallery .mediaShare img {
    width: auto;
    height: auto;
}

.gallery .video-container {
    position: relative;
    padding-bottom: 52.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.gallery .video-container iframe,
.gallery .video-container object,
.gallery .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*---END------------------------------- Gallery -------------------------END---*/

/*---START------------------------------- Mobile -------------------------START---*/
@media screen and (orientation: portrait) {

    #cwDesignStudio {
        grid-template-columns: 50% 50%;
        grid-template-rows: auto 60vw calc(100vh - max(calc(180px + 0.5vw), 180px) - 60vw) auto auto;
        grid-template-rows: auto 60vw calc(calc(var(--vh, 1vh) * 100) - max(calc(90px + 0.5vw), 90px) - 60vw) auto auto;
    }

    #cwDesignStudio.brainstormMode {
        grid-template-rows: auto calc(60vw * 0.8) calc(60vw * 0.2) calc(calc(var(--vh, 1vh) * 100) - max(calc(90px + 0.5vw), 90px) - 60vw) auto auto;
    }

    #cwDesignStudio.allPartsMode {
        grid-template-rows: auto 60vw auto auto auto;
    }

    #cwDesignStudio.dsHasNoParts {
        grid-template-rows: auto 60vw 5vw auto auto;
    }

    .variantSwatch.isGCPrice {
        width: 40%;
        margin-top: 0;
    }

    .variantSwatch.isGCPrice:first-child {
        margin-top: 0;
    }

    .cat-variant {
        margin-top: 2em;
    }

    .studio {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }

    .palette {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
        padding: 0;
        display: flex;
        flex-direction: column-reverse;
    }

    .variantSwatch {
        width: 50%;
    }

    .buy {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        padding: 0;
    }

    .title {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        display: inline-grid;
        align-items: center;
    }

    .title h3 {
        font-size: calc(24px - (var(--productTitleLength) * 0.35 * 1px));
    }

    .dsHasNoParts .title {
        grid-column: 1 / 2;
    }

    .buy button {
        width: 100%;
        padding: 0.75em 0;
    }

    .buy .salePrice {
        right: 5%;
        top: 53%;
        font-size: 0.6em;
    }

    .details {
        grid-column: 1 / 3;
        grid-row: 4 / 5;
    }

    .details img {
        grid-column: 1 / 3;
        grid-row: 1 / 2;
    }

    .details div {
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }

    .details ul {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }

    .details div p {
        text-indent: 1.4em;
        padding: 1em;
        line-height: 1.4em;
        font-size: 1.4em;
    }

    .details ul li {
        font-size: 1.4em;
    }

    .gallery {
        grid-column: 1 / 3;
        grid-row: 5 / 6;
    }

    #cwDesignStudio.brainstormMode .brainstorm {
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }

    #cwDesignStudio.brainstormMode .palette {
        grid-row: 4 / 5;
    }

    #cwDesignStudio.brainstormMode .details {
        grid-row: 5 / 6;
    }

    #cwDesignStudio.brainstormMode .gallery {
        grid-column: 1 / 3;
        grid-row: 6 / 7;
    }

}

/*---END------------------------------- Mobile -------------------------END---*/

/*---START------------------------------- Colors -------------------------START---*/

/*   START Retro   */
.colorSwatch.colorretro-dark-gray:after,
.colorSwatch.colorretro-dark-gray:before {
    background-position: calc(-15 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorretro-light-gray:after,
.colorSwatch.colorretro-light-gray:before {
    background-position: calc(-14 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

/*   END Retro   */
/*   START Hi-Vis   */
.colorSwatch.colorblaze-orange-gloss:after,
.colorSwatch.colorblaze-orange-gloss:before {
    background-position: calc(-24 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorblaze-orange-matte:after,
.colorSwatch.colorblaze-orange-matte:before {
    background-position: calc(-23 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorblaze-orange-satin:after,
.colorSwatch.colorblaze-orange-satin:before {
    background-position: calc(-23 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.coloracid-gloss:after,
.colorSwatch.coloracid-gloss:before {
    background-position: calc(-14 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.coloracid-matte:after,
.colorSwatch.coloracid-matte:before {
    background-position: calc(-13 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.coloracid-satin:after,
.colorSwatch.coloracid-satin:before {
    background-position: calc(-13 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

/*   END Hi-Vis   */
/*   START Blended   */
.colorSwatch.colorglaze-gloss:after,
.colorSwatch.colorglaze-gloss:before {
    background-position: calc(-21 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorglaze-matte:after,
.colorSwatch.colorglaze-matte:before {
    background-position: calc(-20 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorglaze-satin:after,
.colorSwatch.colorglaze-satin:before {
    background-position: calc(-19 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorjava-gloss:after,
.colorSwatch.colorjava-gloss:before {
    background-position: calc(-24 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorjava-matte:after,
.colorSwatch.colorjava-matte:before {
    background-position: calc(-23 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorjava-satin:after,
.colorSwatch.colorjava-satin:before {
    background-position: calc(-22 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colortoasty-gloss:after,
.colorSwatch.colortoasty-gloss:before {
    background-position: calc(-0 * var(--colorswatchwidth)) calc(-7 * var(--colorswatchwidth));
}

.colorSwatch.colortoasty-matte:after,
.colorSwatch.colortoasty-matte:before {
    background-position: calc(-26 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colortoasty-satin:after,
.colorSwatch.colortoasty-satin:before {
    background-position: calc(-25 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

/*   END Blended   */
/*   START Granite   */
.colorSwatch.coloralaskan-frost-granite:after,
.colorSwatch.coloralaskan-frost-granite:before {
    background-position: calc(-11 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorimperial-granite:after,
.colorSwatch.colorimperial-granite:before {
    background-position: calc(-24 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colormoon-dust-granite:after,
.colorSwatch.colormoon-dust-granite:before {
    background-position: calc(-6 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorolympus-granite:after,
.colorSwatch.colorolympus-granite:before {
    background-position: calc(0 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

/*   END Granite   */
/*   START Illusion   */
.colorSwatch.coloraurora-gloss:after,
.colorSwatch.coloraurora-gloss:before {
    background-position: calc(-8 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.coloraurora-matte:after,
.colorSwatch.coloraurora-matte:before {
    background-position: calc(-7 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.coloraurora-satin:after,
.colorSwatch.coloraurora-satin:before {
    background-position: calc(-7 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorsunset-gloss:after,
.colorSwatch.colorsunset-gloss:before {
    background-position: calc(-21 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorsunset-matte:after,
.colorSwatch.colorsunset-matte:before {
    background-position: calc(-20 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorsunset-satin:after,
.colorSwatch.colorsunset-satin:before {
    background-position: calc(-20 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colortwilight-gloss:after,
.colorSwatch.colortwilight-gloss:before {
    background-position: calc(-10 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colortwilight-matte:after,
.colorSwatch.colortwilight-matte:before {
    background-position: calc(-9 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colortwilight-satin:after,
.colorSwatch.colortwilight-satin:before {
    background-position: calc(-9 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

/*   END Illusion   */
/*   START Solid   */
.colorSwatch.colorcranberry-gloss:after,
.colorSwatch.colorcranberry-gloss:before {
    background-position: calc(-10 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorcranberry-matte:after,
.colorSwatch.colorcranberry-matte:before {
    background-position: calc(-9 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorcranberry-satin:after,
.colorSwatch.colorcranberry-satin:before {
    background-position: calc(-9 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorformula-gloss:after,
.colorSwatch.colorformula-gloss:before {
    background-position: calc(-16 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorformula-matte:after,
.colorSwatch.colorformula-matte:before {
    background-position: calc(-14 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorformula-satin:after,
.colorSwatch.colorformula-satin:before {
    background-position: calc(-14 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorcrush-gloss:after,
.colorSwatch.colorcrush-gloss:before {
    background-position: calc(-6 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorcrush-matte:after,
.colorSwatch.colorcrush-matte:before {
    background-position: calc(-5 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorcrush-satin:after,
.colorSwatch.colorcrush-satin:before {
    background-position: calc(-5 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorcaution-gloss:after,
.colorSwatch.colorcaution-gloss:before {
    background-position: calc(-3 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorcaution-matte:after,
.colorSwatch.colorcaution-matte:before {
    background-position: calc(-2 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorcaution-satin:after,
.colorSwatch.colorcaution-satin:before {
    background-position: calc(-2 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorbilliard-gloss:after,
.colorSwatch.colorbilliard-gloss:before {
    background-position: calc(-6 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorbilliard-matte:after,
.colorSwatch.colorbilliard-matte:before {
    background-position: calc(-5 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorbilliard-satin:after,
.colorSwatch.colorbilliard-satin:before {
    background-position: calc(-5 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorclover-gloss:after,
.colorSwatch.colorclover-gloss:before {
    background-position: calc(-22 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorclover-matte:after,
.colorSwatch.colorclover-matte:before {
    background-position: calc(-21 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorclover-satin:after,
.colorSwatch.colorclover-satin:before {
    background-position: calc(-21 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorcaribbean-gloss:after,
.colorSwatch.colorcaribbean-gloss:before {
    background-position: calc(-7 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorcaribbean-matte:after,
.colorSwatch.colorcaribbean-matte:before {
    background-position: calc(-6 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorcaribbean-satin:after,
.colorSwatch.colorcaribbean-satin:before {
    background-position: calc(-6 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorparadise-gloss:after,
.colorSwatch.colorparadise-gloss:before {
    background-position: calc(-26 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorparadise-matte:after,
.colorSwatch.colorparadise-matte:before {
    background-position: calc(-25 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorparadise-satin:after,
.colorSwatch.colorparadise-satin:before {
    background-position: calc(-25 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorabyss-gloss:after,
.colorSwatch.colorabyss-gloss:before {
    background-position: calc(-17 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorabyss-matte:after,
.colorSwatch.colorabyss-matte:before {
    background-position: calc(-16 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorabyss-satin:after,
.colorSwatch.colorabyss-satin:before {
    background-position: calc(-16 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorsky-gloss:after,
.colorSwatch.colorsky-gloss:before {
    background-position: calc(-9 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorsky-matte:after,
.colorSwatch.colorsky-matte:before {
    background-position: calc(-8 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorsky-satin:after,
.colorSwatch.colorsky-satin:before {
    background-position: calc(-8 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorconcord-gloss:after,
.colorSwatch.colorconcord-gloss:before {
    background-position: calc(-19 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorconcord-matte:after,
.colorSwatch.colorconcord-matte:before {
    background-position: calc(-18 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorconcord-satin:after,
.colorSwatch.colorconcord-satin:before {
    background-position: calc(-18 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorflirt-gloss:after,
.colorSwatch.colorflirt-gloss:before {
    background-position: calc(-21 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorflirt-matte:after,
.colorSwatch.colorflirt-matte:before {
    background-position: calc(-20 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorflirt-satin:after,
.colorSwatch.colorflirt-satin:before {
    background-position: calc(-20 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorcotton-candy-gloss:after,
.colorSwatch.colorcotton-candy-gloss:before {
    background-position: calc(-13 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorcotton-candy-matte:after,
.colorSwatch.colorcotton-candy-matte:before {
    background-position: calc(-12 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorcotton-candy-satin:after,
.colorSwatch.colorcotton-candy-satin:before {
    background-position: calc(-12 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorsmoke-white-gloss:after,
.colorSwatch.colorsmoke-white-gloss:before {
    background-position: calc(-5 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorsmoke-white-matte:after,
.colorSwatch.colorsmoke-white-matte:before {
    background-position: calc(-3 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorsmoke-white-satin:after,
.colorSwatch.colorsmoke-white-satin:before {
    background-position: calc(-3 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorfossil-gloss:after,
.colorSwatch.colorfossil-gloss:before {
    background-position: calc(-12 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorfossil-matte:after,
.colorSwatch.colorfossil-matte:before {
    background-position: calc(-11 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorfossil-satin:after,
.colorSwatch.colorfossil-satin:before {
    background-position: calc(-11 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorjet-black-gloss:after,
.colorSwatch.colorjet-black-gloss:before {
    background-position: calc(-19 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorjet-black-matte:after,
.colorSwatch.colorjet-black-matte:before {
    background-position: calc(-17 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorjet-black-satin:after,
.colorSwatch.colorjet-black-satin:before {
    background-position: calc(-17 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

/*   END Solid   */
/*   START Metallic   */
.colorSwatch.colorcandy-apple-gloss:after,
.colorSwatch.colorcandy-apple-gloss:before {
    background-position: calc(-14 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorcandy-apple-matte:after,
.colorSwatch.colorcandy-apple-matte:before {
    background-position: calc(-13 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorcandy-apple-satin:after,
.colorSwatch.colorcandy-apple-satin:before {
    background-position: calc(-13 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorzest-gloss:after,
.colorSwatch.colorzest-gloss:before {
    background-position: calc(-2 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorzest-matte:after,
.colorSwatch.colorzest-matte:before {
    background-position: calc(-1 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorzest-satin:after,
.colorSwatch.colorzest-satin:before {
    background-position: calc(-1 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorgoldrush-gloss:after,
.colorSwatch.colorgoldrush-gloss:before {
    background-position: calc(-4 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorgoldrush-matte:after,
.colorSwatch.colorgoldrush-matte:before {
    background-position: calc(-3 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorgoldrush-satin:after,
.colorSwatch.colorgoldrush-satin:before {
    background-position: calc(-3 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorstar-dust-gloss:after,
.colorSwatch.colorstar-dust-gloss:before {
    background-position: calc(-1 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorstar-dust-matte:after,
.colorSwatch.colorstar-dust-matte:before {
    background-position: calc(-0 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorstar-dust-satin:after,
.colorSwatch.colorstar-dust-satin:before {
    background-position: calc(-0 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colormint-gloss:after,
.colorSwatch.colormint-gloss:before {
    background-position: calc(-9 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colormint-matte:after,
.colorSwatch.colormint-matte:before {
    background-position: calc(-8 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colormint-satin:after,
.colorSwatch.colormint-satin:before {
    background-position: calc(-8 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colormidnight-gloss:after,
.colorSwatch.colormidnight-gloss:before {
    background-position: calc(-12 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colormidnight-matte:after,
.colorSwatch.colormidnight-matte:before {
    background-position: calc(-11 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colormidnight-satin:after,
.colorSwatch.colormidnight-satin:before {
    background-position: calc(-11 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colortechno-gloss:after,
.colorSwatch.colortechno-gloss:before {
    background-position: calc(-17 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colortechno-matte:after,
.colorSwatch.colortechno-matte:before {
    background-position: calc(-15 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colortechno-satin:after,
.colorSwatch.colortechno-satin:before {
    background-position: calc(-15 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorindulge-gloss:after,
.colorSwatch.colorindulge-gloss:before {
    background-position: calc(-23 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorindulge-matte:after,
.colorSwatch.colorindulge-matte:before {
    background-position: calc(-22 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorindulge-satin:after,
.colorSwatch.colorindulge-satin:before {
    background-position: calc(-22 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorblush-gloss:after,
.colorSwatch.colorblush-gloss:before {
    background-position: calc(-18 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorblush-matte:after,
.colorSwatch.colorblush-matte:before {
    background-position: calc(-17 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorblush-satin:after,
.colorSwatch.colorblush-satin:before {
    background-position: calc(-17 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorglamour-gloss:after,
.colorSwatch.colorglamour-gloss:before {
    background-position: calc(-7 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorglamour-matte:after,
.colorSwatch.colorglamour-matte:before {
    background-position: calc(-6 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorglamour-satin:after,
.colorSwatch.colorglamour-satin:before {
    background-position: calc(-6 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colormystique-gloss:after,
.colorSwatch.colormystique-gloss:before {
    background-position: calc(-4 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colormystique-matte:after,
.colorSwatch.colormystique-matte:before {
    background-position: calc(-3 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colormystique-satin:after,
.colorSwatch.colormystique-satin:before {
    background-position: calc(-3 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorcosmic-gloss:after,
.colorSwatch.colorcosmic-gloss:before {
    background-position: calc(-16 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorcosmic-matte:after,
.colorSwatch.colorcosmic-matte:before {
    background-position: calc(-15 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorcosmic-satin:after,
.colorSwatch.colorcosmic-satin:before {
    background-position: calc(-15 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colordiamond-gloss:after,
.colorSwatch.colordiamond-gloss:before {
    background-position: calc(-0 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colordiamond-matte:after,
.colorSwatch.colordiamond-matte:before {
    background-position: calc(-26 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colordiamond-satin:after,
.colorSwatch.colordiamond-satin:before {
    background-position: calc(-26 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorsteel-gloss:after,
.colorSwatch.colorsteel-gloss:before {
    background-position: calc(-24 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorsteel-matte:after,
.colorSwatch.colorsteel-matte:before {
    background-position: calc(-23 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorsteel-satin:after,
.colorSwatch.colorsteel-satin:before {
    background-position: calc(-23 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorgraphite-gloss:after,
.colorSwatch.colorgraphite-gloss:before {
    background-position: calc(-1 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorgraphite-matte:after,
.colorSwatch.colorgraphite-matte:before {
    background-position: calc(-0 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorgraphite-satin:after,
.colorSwatch.colorgraphite-satin:before {
    background-position: calc(-0 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorcarbon-black-gloss:after,
.colorSwatch.colorcarbon-black-gloss:before {
    background-position: calc(-10 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorcarbon-black-matte:after,
.colorSwatch.colorcarbon-black-matte:before {
    background-position: calc(-9 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorcarbon-black-satin:after,
.colorSwatch.colorcarbon-black-satin:before {
    background-position: calc(-9 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

/*   END Metallic   */
/*   START SpecialColors */
.colorwhite-text {
    background-color: #FFFFFF;
}

.borderwhite-text {
    border-color: #FFFFFF;
}

.textColorwhite-text {
    color: #FFFFFF;
}

.colorblack-text {
    background-color: #000000;
}

.borderblack-text {
    border-color: #000000;
}

.textColorblack-text {
    color: #000000;
}

.colortriple-black {
    background-color: #070707;
}

.bordertriple-black {
    border-color: #070707;
}

.textColortriple-black {
    color: #070707;
}

.colorsoapstone {
    background-color: #f3ece0;
}

.bordersoapstone {
    border-color: #f3ece0;
}

.textColorsoapstone {
    color: #f3ece0;
}

.colorsandstone {
    background-color: #cfc8c6;
}

.bordersandstone {
    border-color: #cfc8c6;
}

.textColorsandstone {
    color: #cfc8c6;
}

.colorwhite-smoke {
    background-color: #cec9c0;
}

.borderwhite-smoke {
    border-color: #cec9c0;
}

.textColorwhite-smoke {
    color: #cec9c0;
}

.colorsilver {
    background-color: #f2f2f2;
}

.bordersilver {
    border-color: #f2f2f2;
}

.textColorsilver {
    color: #f2f2f2;
}

.colorplatinum-silver {
    background-color: #f2f2f2;
}

.borderplatinum-silver {
    border-color: #f2f2f2;
}

.textColorplatinum-silver {
    color: #f2f2f2;
}

.colorstarlight {
    background-color: #e9e2d5;
}

.borderstarlight {
    border-color: #e9e2d5;
}

.textColorstarlight {
    color: #e9e2d5;
}

.colorspace-gray {
    background-color: #434343;
}

.borderspace-gray {
    border-color: #434343;
}

.textColorspace-gray {
    color: #434343;
}

.colormidnight {
    background-color: #22262c;
}

.bordermidnight {
    border-color: #22262c;
}

.textColormidnight {
    color: #22262c;
}

.colorsky-blue {
    background-color: #446588;
}

.bordersky-blue {
    border-color: #446588;
}

.textColorsky-blue {
    color: #446588;
}

.colorblue {
    background-color: #63727c;
}

.borderblue {
    border-color: #63727c;
}

.textColorblue {
    color: #63727c;
}

.colorgreen {
    background-color: #e4f6e9;
}

.bordergreen {
    border-color: #e4f6e9;
}

.textColorgreen {
    color: #e4f6e9;
}

.colororange {
    background-color: #ffc19f;
}

.borderorange {
    border-color: #ffc19f;
}

.textColororange {
    color: #ffc19f;
}

.colorpink {
    background-color: #ff7b7a;
}

.borderpink {
    border-color: #ff7b7a;
}

.textColorpink {
    color: #ff7b7a;
}

.colorpurple {
    background-color: #dcd7e1;
}

.borderpurple {
    border-color: #dcd7e1;
}

.textColorpurple {
    color: #dcd7e1;
}


.colorSwatch.colorblack-text:after,
.colorSwatch.colorblack-text:before {
    background-position: calc(-0 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorwhite-text:after,
.colorSwatch.colorwhite-text:before {
    background-position: calc(-4 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorblack:after,
.colorSwatch.colorblack:before {
    background-position: calc(-25 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorwhite:after,
.colorSwatch.colorwhite:before {
    background-position: calc(-4 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colornone:after,
.colorSwatch.colornone:before {
    background-position: calc(-1 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorno-skin:after,
.colorSwatch.colorno-skin:before {
    background-position: calc(-1 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

/*   END SpecialColors   */
/*   START skins */
.colorSwatch.colorblue-sting:after,
.colorSwatch.colorblue-sting:before {
    background-position: calc(-20 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorblack-sting:after,
.colorSwatch.colorblack-sting:before {
    background-position: calc(-1 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorstatic:after,
.colorSwatch.colorstatic:before {
    background-position: calc(-25 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorranger:after,
.colorSwatch.colorranger:before {
    background-position: calc(-19 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorsafari:after,
.colorSwatch.colorsafari:before {
    background-position: calc(-13 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorblur:after,
.colorSwatch.colorblur:before {
    background-position: calc(-19 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorcloak:after,
.colorSwatch.colorcloak:before {
    background-position: calc(-23 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorhive:after,
.colorSwatch.colorhive:before {
    background-position: calc(-25 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colortracer:after,
.colorSwatch.colortracer:before {
    background-position: calc(-12 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colormarble-stone:after,
.colorSwatch.colormarble-stone:before {
    background-position: calc(-15 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorwhite-marble-stone:after,
.colorSwatch.colorwhite-marble-stone:before {
    background-position: calc(-5 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colordark-slate-stone:after,
.colorSwatch.colordark-slate-stone:before {
    background-position: calc(-2 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorforged-carbon:after,
.colorSwatch.colorforged-carbon:before {
    background-position: calc(-18 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorblack-carbon-fiber:after,
.colorSwatch.colorblack-carbon-fiber:before {
    background-position: calc(-3 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorwhite-carbon-fiber:after,
.colorSwatch.colorwhite-carbon-fiber:before {
    background-position: calc(-7 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorplatinum-carbon-fiber:after,
.colorSwatch.colorplatinum-carbon-fiber:before {
    background-position: calc(-22 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorsilver-metal:after,
.colorSwatch.colorsilver-metal:before {
    background-position: calc(-10 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorblue-metal:after,
.colorSwatch.colorblue-metal:before {
    background-position: calc(-21 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colormosaic-metal:after,
.colorSwatch.colormosaic-metal:before {
    background-position: calc(-5 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colortamo-wood:after,
.colorSwatch.colortamo-wood:before {
    background-position: calc(-19 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorash-wood:after,
.colorSwatch.colorash-wood:before {
    background-position: calc(-10 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorblack-wood:after,
.colorSwatch.colorblack-wood:before {
    background-position: calc(-26 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorburn:after,
.colorSwatch.colorburn:before {
    background-position: calc(-15 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colordark-brown-leather:after,
.colorSwatch.colordark-brown-leather:before {
    background-position: calc(-3 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorblack-leather:after,
.colorSwatch.colorblack-leather:before {
    background-position: calc(-2 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorwhite-leather:after,
.colorSwatch.colorwhite-leather:before {
    background-position: calc(-6 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorred-leather:after,
.colorSwatch.colorred-leather:before {
    background-position: calc(-17 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colordisco-gloss:after,
.colorSwatch.colordisco-gloss:before {
    background-position: calc(-24 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colormermaid-gloss:after,
.colorSwatch.colormermaid-gloss:before {
    background-position: calc(-14 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorpixie-gloss:after,
.colorSwatch.colorpixie-gloss:before {
    background-position: calc(-23 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorprom-gloss:after,
.colorSwatch.colorprom-gloss:before {
    background-position: calc(-20 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorcarbon-black-gloss.gloss:after,
.colorSwatch.colorcarbon-black-gloss.gloss:before {
    background-position: calc(-11 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorjet-black-gloss.gloss:after,
.colorSwatch.colorjet-black-gloss.gloss:before {
    background-position: calc(-20 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorgalaxy-gloss:after,
.colorSwatch.colorgalaxy-gloss:before {
    background-position: calc(-9 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorsmoke-white-gloss.gloss:after,
.colorSwatch.colorsmoke-white-gloss.gloss:before {
    background-position: calc(-6 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colordiamond-gloss.gloss:after,
.colorSwatch.colordiamond-gloss.gloss:before {
    background-position: calc(-1 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colormidnight-gloss.gloss:after,
.colorSwatch.colormidnight-gloss.gloss:before {
    background-position: calc(-13 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorformula-gloss.gloss:after,
.colorSwatch.colorformula-gloss.gloss:before {
    background-position: calc(-17 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorscorch-gloss:after,
.colorSwatch.colorscorch-gloss:before {
    background-position: calc(-12 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorflirt-gloss.gloss:after,
.colorSwatch.colorflirt-gloss.gloss:before {
    background-position: calc(-22 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorcrush-gloss.gloss:after,
.colorSwatch.colorcrush-gloss.gloss:before {
    background-position: calc(-7 * var(--colorswatchwidth)) calc(-4 * var(--colorswatchwidth));
}

.colorSwatch.colorcaution-gloss.gloss:after,
.colorSwatch.colorcaution-gloss.gloss:before {
    background-position: calc(-4 * var(--colorswatchwidth)) calc(-5 * var(--colorswatchwidth));
}

.colorSwatch.colorprince-gloss:after,
.colorSwatch.colorprince-gloss:before {
    background-position: calc(-21 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorrazzle-gloss:after,
.colorSwatch.colorrazzle-gloss:before {
    background-position: calc(-18 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorjet-black-matte.matte:after,
.colorSwatch.colorjet-black-matte.matte:before {
    background-position: calc(-18 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorsmoke-white-matte.matte:after,
.colorSwatch.colorsmoke-white-matte.matte:before {
    background-position: calc(-4 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorabyss-matte.matte:after,
.colorSwatch.colorabyss-matte.matte:before {
    background-position: calc(-18 * var(--colorswatchwidth)) calc(-6 * var(--colorswatchwidth));
}

.colorSwatch.colorformula-matte.matte:after,
.colorSwatch.colorformula-matte.matte:before {
    background-position: calc(-15 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colortechno-matte.matte:after,
.colorSwatch.colortechno-matte.matte:before {
    background-position: calc(-16 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorgalaxy-matte:after,
.colorSwatch.colorgalaxy-matte:before {
    background-position: calc(-8 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colortitanium-matte:after,
.colorSwatch.colortitanium-matte:before {
    background-position: calc(-13 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colortank-matte:after,
.colorSwatch.colortank-matte:before {
    background-position: calc(-18 * var(--colorswatchwidth)) calc(-0 * var(--colorswatchwidth));
}

.colorSwatch.colorscorch-matte:after,
.colorSwatch.colorscorch-matte:before {
    background-position: calc(-11 * var(--colorswatchwidth)) calc(-1 * var(--colorswatchwidth));
}

.colorSwatch.colorsoapstone:after,
.colorSwatch.colorsoapstone:before {
    background-size: 0 0;
}

.colorSwatch.colortriple-black:after,
.colorSwatch.colortriple-black:before {
    background-size: 0 0;
}

.colorSwatch.colororiginal:after,
.colorSwatch.colororiginal:before {
    background-size: 0 0;
}

.colorSwatch.colorsandstone:after,
.colorSwatch.colorsandstone:before {
    background-size: 0 0;
}

.colorSwatch.colorwhite-smoke:after,
.colorSwatch.colorwhite-smoke:before {
    background-size: 0 0;
}

.colorSwatch.colorblue-dusk:after,
.colorSwatch.colorblue-dusk:before {
    background-size: 0 0;
}

.colorSwatch.colormatte-black:after,
.colorSwatch.colormatte-black:before {
    background-position: calc(-18 * var(--colorswatchwidth)) calc(-2 * var(--colorswatchwidth));
}

.colorSwatch.colorstatement-red:after,
.colorSwatch.colorstatement-red:before {
    background-position: calc(-14 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorchampagne-gold:after,
.colorSwatch.colorchampagne-gold:before {
    background-position: calc(-3 * var(--colorswatchwidth)) calc(-3 * var(--colorswatchwidth));
}

.colorSwatch.colorsilver:after,
.colorSwatch.colorsilver:before {
    background-size: 0 0;
}

.colorSwatch.colorplatinum-silver:after,
.colorSwatch.colorplatinum-silver:before {
    background-size: 0 0;
}

.colorSwatch.colorstarlight:after,
.colorSwatch.colorstarlight:before {
    background-size: 0 0;
}

.colorSwatch.colorspace-gray:after,
.colorSwatch.colorspace-gray:before {
    background-size: 0 0;
}

.colorSwatch.colormidnight:after,
.colorSwatch.colormidnight:before {
    background-size: 0 0;
}

.colorSwatch.colorsky-blue:after,
.colorSwatch.colorsky-blue:before {
    background-size: 0 0;
}

.colorSwatch.colorblue:after,
.colorSwatch.colorblue:before {
    background-size: 0 0;
}

.colorSwatch.colorgreen:after,
.colorSwatch.colorgreen:before {
    background-size: 0 0;
}

.colorSwatch.colororange:after,
.colorSwatch.colororange:before {
    background-size: 0 0;
}

.colorSwatch.colorpink:after,
.colorSwatch.colorpink:before {
    background-size: 0 0;
}

.colorSwatch.colorpurple:after,
.colorSwatch.colorpurple:before {
    background-size: 0 0;
}


/*   END skins   */
/*---END------------------------------- Colors -------------------------END---*/