:root {
  --chart-gap: clamp(8px, 0.8vw, 15px);
  --tile-aspect-lge-scrn: 1 / 1;
  --12-col-tile-aspect-med-scrn: 1 / 1;
  --12-col-tile-aspect-lge-scrn: 1 / 3;
  --tile-aspect-sml-scrn: 4 / 1;
  --col-4-lge-scrn: repeat(4, 1fr);
  --col-4-sml-scrn: 1fr;
  --col-6-lge-scrn: repeat(6, 1fr);
  --col-6-sml-scrn: 1fr;
  --col-9-lge-scrn: repeat(9, 1fr);
  --col-9-sml-scrn: 1fr;
  --col-12-med-scrn: repeat(6, 1fr);
  --col-12-lge-scrn: repeat(12, 1fr);
  --col-12-sml-scrn: 1fr;
  --border-radius: 5px;
  --colour-name-bg: hsla(0, 0%, 0%, 0.3);
  --colour-name-padding: clamp(5px, 0.3em, 8px);
  --colour-name-font-size: 9px;
  --colour-name-colour: hsl(0, 0%, 100%);
}

.colour-chart__pastel-set-container {
  display: grid;
  gap: var(--chart-gap);
  margin-bottom: clamp(50px, 5vh, 100px);
}

.colour-chart__pastel-set-container::before {
  position: absolute;
  top: -10px;
  margin-bottom: 1rem;
}

.leftside::before {
  content: "Left Side";
}

.rightside::before {
  content: "Right Side";
}

.colour-chart__side {
  margin-bottom: 0.5rem;
}

.colour-chart__col-4, .colour-chart__col-6, .colour-chart__col-9, .colour-chart__col-12 {
  grid-template-columns: var(--col-6-sml-scrn);
}

.colour-chart__colour-tile {
  position:relative;
  aspect-ratio: var(--tile-aspect-sml-scrn);
  border-radius: var(--border-radius);
}

.colour-chart__colour-tile::after {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--colour-name-colour);
  background-color: var(--colour-name-bg);
  padding: var(--colour-name-padding);
  font-size: var(--colour-name-font-size);
  line-height: 0.7rem;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

@media screen and (min-width: 600px) {
  .colour-chart__col-4 {
    grid-template-columns: var(--col-4-lge-scrn);
  }
  .colour-chart__col-6 {
    grid-template-columns: var(--col-6-lge-scrn);
  }
  .colour-chart__col-9 {
    grid-template-columns: var(--col-9-lge-scrn);
  }
  .colour-chart__col-12 {
    grid-template-columns: var(--col-12-lge-scrn);
  }
  .colour-chart__colour-tile {
    aspect-ratio: var(--tile-aspect-lge-scrn);
  }
  .colour-chart__col-12 > .colour-chart__colour-tile {
    aspect-ratio: var(--12-col-tile-aspect-lge-scrn);
  }
}

@media screen and (min-width: 600px) and (max-width: 1200px) {
  .colour-chart__col-12 {
    grid-template-columns: var(--col-12-med-scrn);
  }
  .colour-chart__col-12 > .colour-chart__colour-tile {
    aspect-ratio: var(--12-col-tile-aspect-med-scrn);
  }
}

/* What's In The Box */

.whatsin::before {
  content: "What's In The Box?";
}

/* Red */

.red-range::before {
  content: "Red 1-18";
}

.red1::after {
  content: "Red 1";
}

.red2::after {
  content: "Red 2";
}

.red3::after {
  content: "Red 3";
}

.red4::after {
  content: "Red 4";
}

.red5::after {
  content: "Red 5";
}

.red6::after {
  content: "Red 6";
}

.red7::after {
  content: "Red 7";
}

.red8::after {
  content: "Red 8";
}

.red9::after {
  content: "Red 9";
}

.red10::after {
  content: "Red 10";
}

.red11::after {
  content: "Red 11";
}

.red12::after {
  content: "Red 12";
}

.red13::after {
  content: "Red 13";
}

.red14::after {
  content: "Red 14";
}

.red15::after {
  content: "Red 15";
}

.red16::after {
  content: "Red 16";
}

.red17::after {
  content: "Red 17";
}

.red18::after {
  content: "Red 18";
}

.red1 {
  background-color: #BE3D40;
}

.red2 {
  background-color: #F05655;
}

.red3 {
  background-color: #FF876F;
}

.red4 {
  background-color: #FF946A;
}

.red5 {
  background-color: #FFB3A3;
}

.red6 {
  background-color: #F4C4B8;
}

.red7 {
  background-color: #B13441;
}

.red8 {
  background-color: #D4364B;
}

.red9 {
  background-color: #FD6C69;
}

.red10 {
  background-color: #FF8E8D;
}

.red11 {
  background-color: #F8BAB5;
}

.red12 {
  background-color: #F9D1CF;
}

.red13 {
  background-color: #763049;
}

.red14 {
  background-color: #763855;
}

.red15 {
  background-color: #AE598F;
}

.red16 {
  background-color: #DD90AF;
}

.red17 {
  background-color: #DCA1B5;
}

.red18 {
  background-color: #E0C6CF;
}

/* Red Earth  */

.re-range::before {
  content: "Red Earth 1-18";
}

.re1::after {
  content: "Red Earth 1";
}

.re2::after {
  content: "Red Earth 2";
}

.re3::after {
  content: "Red Earth 3";
}

.re4::after {
  content: "Red Earth 4";
}

.re5::after {
  content: "Red Earth 5";
}

.re6::after {
  content: "Red Earth 6";
}

.re7::after {
  content: "Red Earth 7";
}

.re8::after {
  content: "Red Earth 8";
}

.re9::after {
  content: "Red Earth 9";
}

.re10::after {
  content: "Red Earth 10";
}

.re11::after {
  content: "Red Earth 11";
}

.re12::after {
  content: "Red Earth 12";
}

.re13::after {
  content: "Red Earth 13";
}

.re14::after {
  content: "Red Earth 14";
}

.re15::after {
  content: "Red Earth 15";
}

.re16::after {
  content: "Red Earth 16";
}

.re17::after {
  content: "Red Earth 17";
}

.re18::after {
  content: "Red Earth 18";
}

.re1 {
  background-color: #DDD2D0;
}

.re2 {
  background-color: #D3BBB9;
}

.re3 {
  background-color: #CFB4AE;
}

.re4 {
  background-color: #CFA2A0;
}

.re5 {
  background-color: #B06C69;
}

.re6 {
  background-color: #623838;
}

.re7 {
  background-color: #E2C9BD;
}

.re8 {
  background-color: #E0B6AA;
}

.re9 {
  background-color: #CD7860;
}

.re10 {
  background-color: #C17166;
}

.re11 {
  background-color: #9E4032;
}

.re12 {
  background-color: #7E4547;
}

.re13 {
  background-color: #E9E3DD;
}

.re14 {
  background-color: #D5AB99;
}

.re15 {
  background-color: #C59287;
}

.re16 {
  background-color: #C3796A;
}

.re17 {
  background-color: #8C4636;
}

.re18 {
  background-color: #72362E;
}

/* Brown Earth */

.be-range::before {
  content: "Brown Earth 1-36";
}

.be1::after {
  content: "Brown Earth 1";
}

.be2::after {
  content: "Brown Earth 2";
}

.be3::after {
  content: "Brown Earth 3";
}

.be4::after {
  content: "Brown Earth 4";
}

.be5::after {
  content: "Brown Earth 5";
}

.be6::after {
  content: "Brown Earth 6";
}

.be7::after {
  content: "Brown Earth 7";
}

.be8::after {
  content: "Brown Earth 8";
}

.be9::after {
  content: "Brown Earth 9";
}

.be10::after {
  content: "Brown Earth 10";
}

.be11::after {
  content: "Brown Earth 11";
}

.be12::after {
  content: "Brown Earth 12";
}

.be13::after {
  content: "Brown Earth 13";
}

.be14::after {
  content: "Brown Earth 14";
}

.be15::after {
  content: "Brown Earth 15";
}

.be16::after {
  content: "Brown Earth 16";
}

.be17::after {
  content: "Brown Earth 17";
}

.be18::after {
  content: "Brown Earth 18";
}

.be19::after {
  content: "Brown Earth 19";
}

.be20::after {
  content: "Brown Earth 20";
}

.be21::after {
  content: "Brown Earth 21";
}

.be22::after {
  content: "Brown Earth 22";
}

.be23::after {
  content: "Brown Earth 23";
}

.be24::after {
  content: "Brown Earth 24";
}

.be25::after {
  content: "Brown Earth 25";
}

.be26::after {
  content: "Brown Earth 26";
}

.be27::after {
  content: "Brown Earth 27";
}

.be28::after {
  content: "Brown Earth 28";
}

.be29::after {
  content: "Brown Earth 29";
}

.be30::after {
  content: "Brown Earth 30";
}

.be31::after {
  content: "Brown Earth 31";
}

.be32::after {
  content: "Brown Earth 32";
}

.be33::after {
  content: "Brown Earth 33";
}

.be34::after {
  content: "Brown Earth 34";
}

.be35::after {
  content: "Brown Earth 35";
}

.be36::after {
  content: "Brown Earth 36";
}

.be1 {
  background-color: #E4E4DC;
}

.be2 {
  background-color: #D3D3C9;
}

.be3 {
  background-color: #CCC0B1;
}

.be4 {
  background-color: #C6A98A;
}

.be5 {
  background-color: #77645B;
}

.be6 {
  background-color: #4D363A;
}

.be7 {
  background-color: #E9E1D4;
}

.be8 {
  background-color: #EACEB9;
}

.be9 {
  background-color: #F0C1A2;
}

.be10 {
  background-color: #E8B399;
}

.be11 {
  background-color: #D28868;
}

.be12 {
  background-color: #9E4E2D;
}

.be13 {
  background-color: #ECE7DE;
}

.be14 {
  background-color: #E2D2BF;
}

.be15 {
  background-color: #DBBCAA;
}

.be16 {
  background-color: #D09783;
}

.be17 {
  background-color: #A8715E;
}

.be18 {
  background-color: #784F42;
}

.be19 {
  background-color: #E0DFDB;
}

.be20 {
  background-color: #E2DBD7;
}

.be21 {
  background-color: #D7BDB8;
}

.be22 {
  background-color: #B89CA3;
}

.be23 {
  background-color: #B3848C;
}

.be24 {
  background-color: #744E5D;
}

.be25 {
  background-color: #F0E0CA;
}

.be26 {
  background-color: #EAD6B7;
}

.be27 {
  background-color: #DEC3A7;
}

.be28 {
  background-color: #C09276;
}

.be29 {
  background-color: #AF8A6B;
}

.be30 {
  background-color: #A56050;
}

.be31 {
  background-color: #EDE8E0;
}

.be32 {
  background-color: #E5DBC2;
}

.be33 {
  background-color: #C1B196;
}

.be34 {
  background-color: #A5A785;
}

.be35 {
  background-color: #8B816E;
}

.be36 {
  background-color: #574F41;
}

/* Natural Earth */

.ne-range::before {
  content: "Natural Earth 1-18";
}

.ne1::after {
  content: "Natural Earth 1";
}

.ne2::after {
  content: "Natural Earth 2";
}

.ne3::after {
  content: "Natural Earth 3";
}

.ne4::after {
  content: "Natural Earth 4";
}

.ne5::after {
  content: "Natural Earth 5";
}

.ne6::after {
  content: "Natural Earth 6";
}

.ne7::after {
  content: "Natural Earth 7";
}

.ne8::after {
  content: "Natural Earth 8";
}

.ne9::after {
  content: "Natural Earth 9";
}

.ne10::after {
  content: "Natural Earth 10";
}

.ne11::after {
  content: "Natural Earth 11";
}

.ne12::after {
  content: "Natural Earth 12";
}

.ne13::after {
  content: "Natural Earth 13";
}

.ne14::after {
  content: "Natural Earth 14";
}

.ne15::after {
  content: "Natural Earth 15";
}

.ne16::after {
  content: "Natural Earth 16";
}

.ne17::after {
  content: "Natural Earth 17";
}

.ne18::after {
  content: "Natural Earth 18";
}

.ne1 {
  background-color: #582E1D;
}

.ne2 {
  background-color: #4A3127;
}

.ne3 {
  background-color: #7F5641;
}

.ne4 {
  background-color: #B8885F;
}

.ne5 {
  background-color: #BE8A55;
}

.ne6 {
  background-color: #B98663;
}

.ne7 {
  background-color: #2D1F1C;
}

.ne8 {
  background-color: #5A4434;
}

.ne9 {
  background-color: #7C6559;
}

.ne10 {
  background-color: #836857;
}

.ne11 {
  background-color: #936659;
}

.ne12 {
  background-color: #9D7767;
}

.ne13 {
  background-color: #C39265;
}

.ne14 {
  background-color: #B89171;
}

.ne15 {
  background-color: #BAA39A;
}

.ne16 {
  background-color: #B2A19F;
}

.ne17 {
  background-color: #B7ACAB;
}

.ne18 {
  background-color: #CABBB7;
}

/* Orange */

.o-range::before {
  content: "Orange 1-6";
}

.o1::after {
  content: "Orange 1";
}

.o2::after {
  content: "Orange 2";
}

.o3::after {
  content: "Orange 3";
}

.o4::after {
  content: "Orange 4";
}

.o5::after {
  content: "Orange 5";
}

.o6::after {
  content: "Orange 6";
}

.o1 {
  background-color: #f85700;
}

.o2 {
  background-color: #f88800;
}

.o3 {
  background-color: #ffa31b;
}

.o4 {
  background-color: #ffab00;
}

.o5 {
  background-color: #eec478;
}

.o6 {
  background-color: #f1c48b;
}

/* Yellow */

.y-range::before {
  content: "Yellow 1-18";
}

.y1::after {
  content: "Yellow 1";
}

.y2::after {
  content: "Yellow 2";
}

.y3::after {
  content: "Yellow 3";
}

.y4::after {
  content: "Yellow 4";
}

.y5::after {
  content: "Yellow 5";
}

.y6::after {
  content: "Yellow 6";
}

.y7::after {
  content: "Yellow 7";
}

.y8::after {
  content: "Yellow 8";
}

.y9::after {
  content: "Yellow 9";
}

.y10::after {
  content: "Yellow 10";
}

.y11::after {
  content: "Yellow 11";
}

.y12::after {
  content: "Yellow 12";
}

.y13::after {
  content: "Yellow 13";
}

.y14::after {
  content: "Yellow 14";
}

.y15::after {
  content: "Yellow 15";
}

.y16::after {
  content: "Yellow 16";
}

.y17::after {
  content: "Yellow 17";
}

.y18::after {
  content: "Yellow 18";
}

.y1 {
  background-color: #D08403;
}

.y2 {
  background-color: #EBB62E;
}

.y3 {
  background-color: #c8a617;
}

.y4 {
  background-color: #F1E6AB;
}

.y5 {
  background-color: #EDE6BF;
}

.y6 {
  background-color: #ECEFDE;
}

.y7 {
  background-color: #FFA932;
}

.y8 {
  background-color: #FFBA38;
}

.y9 {
  background-color: #FFD200;
}

.y10 {
  background-color: #FDE58E;
}

.y11 {
  background-color: #F3EAB4;
}

.y12 {
  background-color: #EDEDD4;
}

.y13 {
  background-color: #F29D40;
}

.y14 {
  background-color: #F2AF71;
}

.y15 {
  background-color: #F5B86A;
}

.y16 {
  background-color: #EFCA88;
}

.y17 {
  background-color: #ECCFA2;
}

.y18 {
  background-color: #EBE0CB;
}

/* Green */

.grn-range::before {
  content: "Green 1-36";
}

.grn1::after {
  content: "Green 1";
}

.grn2::after {
  content: "Green 2";
}

.grn3::after {
  content: "Green 3";
}

.grn4::after {
  content: "Green 4";
}

.grn5::after {
  content: "Green 5";
}

.grn6::after {
  content: "Green 6";
}

.grn7::after {
  content: "Green 7";
}

.grn8::after {
  content: "Green 8";
}

.grn9::after {
  content: "Green 9";
}

.grn10::after {
  content: "Green 10";
}

.grn11::after {
  content: "Green 11";
}

.grn12::after {
  content: "Green 12";
}

.grn13::after {
  content: "Green 13";
}

.grn14::after {
  content: "Green 14";
}

.grn15::after {
  content: "Green 15";
}

.grn16::after {
  content: "Green 16";
}

.grn17::after {
  content: "Green 17";
}

.grn18::after {
  content: "Green 18";
}

.grn19::after {
  content: "Green 19";
}

.grn20::after {
  content: "Green 20";
}

.grn21::after {
  content: "Green 21";
}

.grn22::after {
  content: "Green 22";
}

.grn23::after {
  content: "Green 23";
}

.grn24::after {
  content: "Green 24";
}

.grn25::after {
  content: "Green 25";
}

.grn26::after {
  content: "Green 26";
}

.grn27::after {
  content: "Green 27";
}

.grn28::after {
  content: "Green 28";
}

.grn29::after {
  content: "Green 29";
}

.grn30::after {
  content: "Green 30";
}

.grn31::after {
  content: "Green 31";
}

.grn32::after {
  content: "Green 32";
}

.grn33::after {
  content: "Green 33";
}

.grn34::after {
  content: "Green 34";
}

.grn35::after {
  content: "Green 35";
}

.grn36::after {
  content: "Green 36";
}

.grn1 {
  background-color: #175F54;
}

.grn2 {
  background-color: #1E836A;
}

.grn3 {
  background-color: #73A690;
}

.grn4 {
  background-color: #A6C1A2;
}

.grn5 {
  background-color: #BCD4C1;
}

.grn6 {
  background-color: #D9E6D4;
}

.grn7 {
  background-color: #0E8A61;
}

.grn8 {
  background-color: #39945F;
}

.grn9 {
  background-color: #7EBC9D;
}

.grn10 {
  background-color: #89b864;
}

.grn11 {
  background-color: #C7DFA7;
}

.grn12 {
  background-color: #CDDB9B;
}

.grn13 {
  background-color: #416456;
}

.grn14 {
  background-color: #4F6F3F;
}

.grn15 {
  background-color: #919C22;
}

.grn16 {
  background-color: #90B180;
}

.grn17 {
  background-color: #CACD88;
}

.grn18 {
  background-color: #E2DDBF;
}

.grn19 {
  background-color: #007C70;
}

.grn20 {
  background-color: #2E9D83;
}

.grn21 {
  background-color: #67BAAA;
}

.grn22 {
  background-color: #A8D5C3;
}

.grn23 {
  background-color: #B5D9D3;
}

.grn24 {
  background-color: #CFE0D8;
}

.grn25 {
  background-color: #3C925E;
}

.grn26 {
  background-color: #65B24D;
}

.grn27 {
  background-color: #84CB69;
}

.grn28 {
  background-color: #A4CF67;
}

.grn29 {
  background-color: #C2D953;
}

.grn30 {
  background-color: #C6D57E;
}

.grn31 {
  background-color: #4D7D39;
}

.grn32 {
  background-color: #6AA148;
}

.grn33 {
  background-color: #9ABD30;
}

.grn34 {
  background-color: #D5DB5C;
}

.grn35 {
  background-color: #E0E292;
}

.grn36 {
  background-color: #E7E7C2;
}

/* Yellow Green Earth */

.yge-range::before {
  content: "Yellow Green Earth 1-18";
}

.yge1::after {
  content: "Yellow Green Earth 1";
}

.yge2::after {
  content: "Yellow Green Earth 2";
}

.yge3::after {
  content: "Yellow Green Earth 3";
}

.yge4::after {
  content: "Yellow Green Earth 4";
}

.yge5::after {
  content: "Yellow Green Earth 5";
}

.yge6::after {
  content: "Yellow Green Earth 6";
}

.yge7::after {
  content: "Yellow Green Earth 7";
}

.yge8::after {
  content: "Yellow Green Earth 8";
}

.yge9::after {
  content: "Yellow Green Earth 9";
}

.yge10::after {
  content: "Yellow Green Earth 10";
}

.yge11::after {
  content: "Yellow Green Earth 11";
}

.yge12::after {
  content: "Yellow Green Earth 12";
}

.yge13::after {
  content: "Yellow Green Earth 13";
}

.yge14::after {
  content: "Yellow Green Earth 14";
}

.yge15::after {
  content: "Yellow Green Earth 15";
}

.yge16::after {
  content: "Yellow Green Earth 16";
}

.yge17::after {
  content: "Yellow Green Earth 17";
}

.yge18::after {
  content: "Yellow Green Earth 18";
}

.yge1 {
  background-color: #c7ced0;
}

.yge2 {
  background-color: #afc0bc;
}

.yge3 {
  background-color: #b0bcaf;
}

.yge4 {
  background-color: #8ca49a;
}

.yge5 {
  background-color: #7fa395;
}

.yge6 {
  background-color: #4e736a;
}

.yge7 {
  background-color: #e9daa3;
}

.yge8 {
  background-color: #ddce89;
}

.yge9 {
  background-color: #a9a84d;
}

.yge10 {
  background-color: #9f9600;
}

.yge11 {
  background-color: #b28c2b;
}

.yge12 {
  background-color: #a97833;
}

.yge13 {
  background-color: #e0d0ba;
}

.yge14 {
  background-color: #d7cfaf;
}

.yge15 {
  background-color: #d1c59d;
}

.yge16 {
  background-color: #b19e76;
}

.yge17 {
  background-color: #837049;
}

.yge18 {
  background-color: #3e4e32;
}

/* Blue Green Earth */

.bge-range::before {
  content: "Blue Green Earth 1-18";
}

.bge1::after {
  content: "Blue Green Earth 1";
}

.bge2::after {
  content: "Blue Green Earth 2";
}

.bge3::after {
  content: "Blue Green Earth 3";
}

.bge4::after {
  content: "Blue Green Earth 4";
}

.bge5::after {
  content: "Blue Green Earth 5";
}

.bge6::after {
  content: "Blue Green Earth 6";
}

.bge7::after {
  content: "Blue Green Earth 7";
}

.bge8::after {
  content: "Blue Green Earth 8";
}

.bge9::after {
  content: "Blue Green Earth 9";
}

.bge10::after {
  content: "Blue Green Earth 10";
}

.bge11::after {
  content: "Blue Green Earth 11";
}

.bge12::after {
  content: "Blue Green Earth 12";
}

.bge13::after {
  content: "Blue Green Earth 13";
}

.bge14::after {
  content: "Blue Green Earth 14";
}

.bge15::after {
  content: "Blue Green Earth 15";
}

.bge16::after {
  content: "Blue Green Earth 16";
}

.bge17::after {
  content: "Blue Green Earth 17";
}

.bge18::after {
  content: "Blue Green Earth 18";
}

.bge1 {
  background-color: #c9dfde;
}

.bge2 {
  background-color: #aed0d2;
}

.bge3 {
  background-color: #91bcbc;
}

.bge4 {
  background-color: #74a9a5;
}

.bge5 {
  background-color: #457c7f;
}

.bge6 {
  background-color: #004f58;
}

.bge7 {
  background-color: #9fc5bc;
}

.bge8 {
  background-color: #9cc5b8;
}

.bge9 {
  background-color: #88c1b1;
}

.bge10 {
  background-color: #519ea8;
}

.bge11 {
  background-color: #207878;
}

.bge12 {
  background-color: #005251;
}

.bge13 {
  background-color: #dbdac3;
}

.bge14 {
  background-color: #bdc4a7;
}

.bge15 {
  background-color: #acb090;
}

.bge16 {
  background-color: #90a390;
}

.bge17 {
  background-color: #596354;
}

.bge18 {
  background-color: #37676d;
}

/* Blue Green */

.bg-range::before {
  content: "Blue Green 1-18";
}

.bg1::after {
  content: "Blue Green 1";
}

.bg2::after {
  content: "Blue Green 2";
}

.bg3::after {
  content: "Blue Green 3";
}

.bg4::after {
  content: "Blue Green 4";
}

.bg5::after {
  content: "Blue Green 5";
}

.bg6::after {
  content: "Blue Green 6";
}

.bg7::after {
  content: "Blue Green 7";
}

.bg8::after {
  content: "Blue Green 8";
}

.bg9::after {
  content: "Blue Green 9";
}

.bg10::after {
  content: "Blue Green 10";
}

.bg11::after {
  content: "Blue Green 11";
}

.bg12::after {
  content: "Blue Green 12";
}

.bg13::after {
  content: "Blue Green 13";
}

.bg13spk::after {
  content: "Sparkly Blue Green 13";
}

.bg14::after {
  content: "Blue Green 14";
}

.bg15::after {
  content: "Blue Green 15";
}

.bg16::after {
  content: "Blue Green 16";
}

.bg17::after {
  content: "Blue Green 17";
}

.bg18::after {
  content: "Blue Green 18";
}

.bg1 {
  background-color: #00566e;
}

.bg2 {
  background-color: #0075af;
}

.bg3 {
  background-color: #42a3d4;
}

.bg4 {
  background-color: #9fccde;
}

.bg5 {
  background-color: #b2d3e3;
}

.bg6 {
  background-color: #d3e3e7;
}

.bg7 {
  background-color: #0081a6;
}

.bg8 {
  background-color: #008ca9;
}

.bg9 {
  background-color: #21b2d3;
}

.bg10 {
  background-color: #8bd5e3;
}

.bg11 {
  background-color: #b6dfe7;
}

.bg12 {
  background-color: #c7dce6;
}

.bg13, .bg13spk {
  background-color: #007c8a;
}

.bg14 {
  background-color: #008d98;
}

.bg15 {
  background-color: #36a8b8;
}

.bg16 {
  background-color: #81ccd3;
}

.bg17 {
  background-color: #b2d9d4;
}

.bg18 {
  background-color: #c7ded6;
}

/* Ocean Blue */

.ob-range::before {
  content: "Ocean Blue 1-12";
}

.ob1::after {
  content: "Ocean Blue 1";
}

.ob2::after {
  content: "Ocean Blue 2";
}

.ob3::after {
  content: "Ocean Blue 3";
}

.ob4::after {
  content: "Ocean Blue 4";
}

.ob5::after {
  content: "Ocean Blue 5";
}

.ob6::after {
  content: "Ocean Blue 6";
}

.ob7::after {
  content: "Ocean Blue 7";
}

.ob8::after {
  content: "Ocean Blue 8";
}

.ob9::after {
  content: "Ocean Blue 9";
}

.ob10::after {
  content: "Ocean Blue 10";
}

.ob11::after {
  content: "Ocean Blue 11";
}

.ob12::after {
  content: "Ocean Blue 12";
}

.ob1 {
  background-color: #a9dac1;
}

.ob2 {
  background-color: #87c7b3;
}

.ob3 {
  background-color: #90b4ba;
}

.ob4 {
  background-color: #64a2ac;
}

.ob5 {
  background-color: #3e8499;
}

.ob6 {
  background-color: #346a81;
}

.ob7 {
  background-color: #46cdc9;
}

.ob8 {
  background-color: #82A7BE;
}

.ob9 {
  background-color: #65ADC5;
}

.ob10 {
  background-color: #619DC0;
}

.ob11 {
  background-color: #0086ba;
}

.ob12 {
  background-color: #00658c;
}

/* Blue Violet */

.bv-range::before {
  content: "Blue Violet 1-18";
}

.bv1::after {
  content: "Blue Violet 1";
}

.bv2::after {
  content: "Blue Violet 2";
}

.bv3::after {
  content: "Blue Violet 3";
}

.bv4::after {
  content: "Blue Violet 4";
}

.bv5::after {
  content: "Blue Violet 5";
}

.bv6::after {
  content: "Blue Violet 6";
}

.bv7::after {
  content: "Blue Violet 7";
}

.bv8::after {
  content: "Blue Violet 8";
}

.bv9::after {
  content: "Blue Violet 9";
}

.bv10::after {
  content: "Blue Violet 10";
}

.bv11::after {
  content: "Blue Violet 11";
}

.bv12::after {
  content: "Blue Violet 12";
}

.bv13::after {
  content: "Blue Violet 13";
}

.bv14::after {
  content: "Blue Violet 14";
}

.bv15::after {
  content: "Blue Violet 15";
}

.bv16::after {
  content: "Blue Violet 16";
}

.bv17::after {
  content: "Blue Violet 17";
}

.bv18::after {
  content: "Blue Violet 18";
}

.bv1 {
  background-color: #dbe2e8;
}

.bv2 {
  background-color: #cfdae8;
}

.bv3 {
  background-color: #c3cae1;
}

.bv4 {
  background-color: #8faada;
}

.bv5 {
  background-color: #6771af;
}

.bv6 {
  background-color: #384b7e;
}

.bv7 {
  background-color: #deebef;
}

.bv8 {
  background-color: #c2d8e6;
}

.bv9 {
  background-color: #b6daf0;
}

.bv10 {
  background-color: #85b8e6;
}

.bv11 {
  background-color: #5a9ae2;
}

.bv12 {
  background-color: #007ddf;
}

.bv13 {
  background-color: #cbdee4;
}

.bv14 {
  background-color: #bbd7e3;
}

.bv15 {
  background-color: #7d9bb9;
}

.bv16 {
  background-color: #6b89b0;
}

.bv17 {
  background-color: #106797;
}

.bv18 {
  background-color: #004b79;
}

/* Grey */

.grey-range::before {
  content: "Grey 1-36";
}

.grey1::after {
  content: "Grey 1";
}

.grey2::after {
  content: "Grey 2";
}

.grey3::after {
  content: "Grey 3";
}

.grey4::after {
  content: "Grey 4";
}

.grey5::after {
  content: "Grey 5";
}

.grey6::after {
  content: "Grey 6";
}

.grey7::after {
  content: "Grey 7";
}

.grey8::after {
  content: "Grey 8";
}

.grey9::after {
  content: "Grey 9";
}

.grey10::after {
  content: "Grey 10";
}

.grey10spk::after {
  content: "Sparkly Grey 10";
}

.grey11::after {
  content: "Grey 11";
}

.grey12::after {
  content: "Grey 12";
}

.grey13::after {
  content: "Grey 13";
}

.grey14::after {
  content: "Grey 14";
}

.grey15::after {
  content: "Grey 15";
}

.grey16::after {
  content: "Grey 16";
}

.grey17::after {
  content: "Grey 17";
}

.grey18::after {
  content: "Grey 18";
}

.grey19::after {
  content: "Grey 19";
}

.grey20::after {
  content: "Grey 20";
}

.grey21::after {
  content: "Grey 21";
}

.grey22::after {
  content: "Grey 22";
}

.grey23::after {
  content: "Grey 23";
}

.grey24::after {
  content: "Grey 24";
}

.grey25::after {
  content: "Grey 25";
}

.grey26::after {
  content: "Grey 26";
}

.grey27::after {
  content: "Grey 27";
}

.grey28::after {
  content: "Grey 28";
}

.grey28spk::after {
  content: "Sparkly Grey 28";
}

.grey29::after {
  content: "Grey 29";
}

.grey30::after {
  content: "Grey 30";
}

.grey31::after {
  content: "Grey 31";
}

.grey32::after {
  content: "Grey 32";
}

.grey33::after {
  content: "Grey 33";
}

.grey34::after {
  content: "Grey 34";
}

.grey35::after {
  content: "Grey 35";
}

.grey36::after {
  content: "Grey 36";
}

.grey1 {
  background-color: #4f5c68;
}

.grey2 {
  background-color: #789397;
}

.grey3 {
  background-color: #97b2b0;
}

.grey4 {
  background-color: #aebfbb;
}

.grey5 {
  background-color: #b1c6c5;
}

.grey6 {
  background-color: #cdcfca;
}

.grey7 {
  background-color: #4a597e;
}

.grey8 {
  background-color: #889eb6;
}

.grey9 {
  background-color: #a4bdce;
}

.grey10, .grey10spk {
  background-color: #b1c4d0;
}

.grey11 {
  background-color: #c2d2d8;
}

.grey12 {
  background-color: #d4dcdc;
}

.grey13 {
  background-color: #282624;
}

.grey14 {
  background-color: #41555c;
}

.grey15 {
  background-color: #8ea2aa;
}

.grey16 {
  background-color: #b2bcc1;
}

.grey17 {
  background-color: #cad0d3;
}

.grey18 {
  background-color: #d6dbdd;
}

.grey19 {
  background-color: #87633c;
}

.grey20 {
  background-color: #a4764b;
}

.grey21 {
  background-color: #bb9a70;
}

.grey22 {
  background-color: #c8b595;
}

.grey23 {
  background-color: #cfbfaa;
}

.grey24 {
  background-color: #ddd4c2;
}

.grey25 {
  background-color: #d7d4c7;
}

.grey26 {
  background-color: #e4e4dc;
}

.grey27 {
  background-color: #e3e0d3;
}

.grey28, .grey28spk {
  background-color: #f0f0f0;
}

.grey29 {
  background-color: #d0d4cb;
}

.grey30 {
  background-color: #c5d2cf;
}

.grey31 {
  background-color: #b1cacc;
}

.grey32 {
  background-color: #8db7be;
}

.grey33 {
  background-color: #81a8b7;
}

.grey34 {
  background-color: #547c90;
}

.grey35 {
  background-color: #425b6b;
}

.grey36 {
  background-color: #1e2428;
}

/* Additional Range */

.add-range::before {
  content: "Additional 1-54";
}

.add1::after {
  content: "Additional 1";
}

.add2::after {
  content: "Additional 2";
}

.add3::after {
  content: "Additional 3";
}

.add4::after {
  content: "Additional 4";
}

.add5::after {
  content: "Additional 5";
}

.add6::after {
  content: "Additional 6";
}

.add7::after {
  content: "Additional 7";
}

.add8::after {
  content: "Additional 8";
}

.add9::after {
  content: "Additional 9";
}

.add10::after {
  content: "Additional 10";
}

.add11::after {
  content: "Additional 11";
}

.add12::after {
  content: "Additional 12";
}

.add13::after {
  content: "Additional 13";
}

.add14::after {
  content: "Additional 14";
}

.add15::after {
  content: "Additional 15";
}

.add16::after {
  content: "Additional 16";
}

.add17::after {
  content: "Additional 17";
}

.add18::after {
  content: "Additional 18";
}

.add19::after {
  content: "Additional 19";
}

.add20::after {
  content: "Additional 20";
}

.add21::after {
  content: "Additional 21";
}

.add22::after {
  content: "Additional 22";
}

.add23::after {
  content: "Additional 23";
}

.add24::after {
  content: "Additional 24";
}

.add25::after {
  content: "Additional 25";
}

.add26::after {
  content: "Additional 26";
}

.add27::after {
  content: "Additional 27";
}

.add28::after {
  content: "Additional 28";
}

.add29::after {
  content: "Additional 29";
}

.add30::after {
  content: "Additional 30";
}

.add31::after {
  content: "Additional 31";
}

.add32::after {
  content: "Additional 32";
}

.add33::after {
  content: "Additional 33";
}

.add34::after {
  content: "Additional 34";
}

.add35::after {
  content: "Additional 35";
}

.add36::after {
  content: "Additional 36";
}

.add37::after {
  content: "Additional 37";
}

.add38::after {
  content: "Additional 38";
}

.add39::after {
  content: "Additional 39";
}

.add40::after {
  content: "Additional 40";
}

.add41::after {
  content: "Additional 41";
}

.add42::after {
  content: "Additional 42";
}

.add43::after {
  content: "Additional 43";
}

.add44::after {
  content: "Additional 44";
}

.add45::after {
  content: "Additional 45";
}

.add46::after {
  content: "Additional 46";
}

.add47::after {
  content: "Additional 47";
}

.add48::after {
  content: "Additional 48";
}

.add49::after {
  content: "Additional 49";
}

.add50::after {
  content: "Additional 50";
}

.add50spk::after {
  content: "Sparkly Additional 50";
}

.add51::after {
  content: "Additional 51";
}

.add52::after {
  content: "Additional 52";
}

.add53::after {
  content: "Additional 53";
}

.add54::after {
  content: "Additional 54";
}

.add1 {
  background-color: #cddfe9;
}

.add2 {
  background-color: #bfdae2;
}

.add3 {
  background-color: #cadede;
}

.add4 {
  background-color: #c8cbdb;
}

.add5 {
  background-color: #d3ccd2;
}

.add6 {
  background-color: #c2adb8;
}

.add7 {
  background-color: #eae5d6;
}

.add8 {
  background-color: #ecdfbd;
}

.add9 {
  background-color: #eec842;
}

.add10 {
  background-color: #e6de84;
}

.add11 {
  background-color: #ffe44c;
}

.add12 {
  background-color: #ffd700;
}

.add13 {
  background-color: #ff9707;
}

.add14 {
  background-color: #fe4d30;
}

.add15 {
  background-color: #dd2431;
}

.add16 {
  background-color: #f6663a;
}

.add17 {
  background-color: #e8735f;
}

.add18 {
  background-color: #d47774;
}

.add19 {
  background-color: #e0dbd8;
}

.add20 {
  background-color: #cfc8c5;
}

.add21 {
  background-color: #cec0bd;
}

.add22 {
  background-color: #bba39f;
}

.add23 {
  background-color: #8e7573;
}

.add24 {
  background-color: #594544;
}

.add25 {
  background-color: #d2d1ce;
}

.add26 {
  background-color: #c3c3c5;
}

.add27 {
  background-color: #a28e8e;
}

.add28 {
  background-color: #7d5f6d;
}

.add29 {
  background-color: #4c4b6d;
}

.add30 {
  background-color: #2e4a80;
}

.add31 {
  background-color: #d2d7e0;
}

.add32 {
  background-color: #d1d6df;
}

.add33 {
  background-color: #bfc5d2;
}

.add34 {
  background-color: #a2a4bb;
}

.add35 {
  background-color: #867796;
}

.add36 {
  background-color: #544465;
}

.add37 {
  background-color: #454842;
}

.add38 {
  background-color: #54504b;
}

.add39 {
  background-color: #8d8783;
}

.add40 {
  background-color: #b5aea9;
}

.add41 {
  background-color: #cfcdc9;
}

.add42 {
  background-color: #e0e0de;
}

.add43 {
  background-color: #1d4a47;
}

.add44 {
  background-color: #4d6a66;
}

.add45 {
  background-color: #809892;
}

.add46 {
  background-color: #aab9b1;
}

.add47 {
  background-color: #c8d2cb;
}

.add48 {
  background-color: #d6dede;
}

.add49 {
  background-color: #1a384b;
}

.add50, .add50spk {
  background-color: #214a6c;
}

.add51 {
  background-color: #3e7895;
}

.add52 {
  background-color: #79a7c1;
}

.add53 {
  background-color: #b5cdd8;
}

.add54 {
  background-color: #d3e1e9;
}

.add55 {
  background-color: #bb8a97;
}

.add56 {
  background-color: #a18ca3;
}

.add57 {
  background-color: #827791;
}

.add58 {
  background-color: #706687;
}

.add59 {
  background-color: #b1a8c3;
}

.add60 {
  background-color: #868eb1;
}

.add61 {
  background-color: #87a1cd;
}

.add62 {
  background-color: #66a8db;
}

/* Portrait */

.p-range::before {
  content: "Portrait 1-12";
}

.p1::after {
  content: "Portrait 1";
}

.p2::after {
  content: "Portrait 2";
}

.p3::after {
  content: "Portrait 3";
}

.p4::after {
  content: "Portrait 4";
}

.p5::after {
  content: "Portrait 5";
}

.p6::after {
  content: "Portrait 6";
}

.p7::after {
  content: "Portrait 7";
}

.p8::after {
  content: "Portrait 8";
}

.p9::after {
  content: "Portrait 9";
}

.p10::after {
  content: "Portrait 10";
}

.p11::after {
  content: "Portrait 11";
}

.p12::after {
  content: "Portrait 12";
}

.p1 {
  background-color: #e4b9a4;
}

.p2 {
  background-color: #f0c19d;
}

.p3 {
  background-color: #edb19f;
}

.p4 {
  background-color: #f5c39c;
}

.p5 {
  background-color: #e8cbc1;
}

.p6 {
  background-color: #c25161;
}

.p7 {
  background-color: #da4554;
}

.p8 {
  background-color: #7f2f37;
}

.p9 {
  background-color: #8d435f;
}

.p10 {
  background-color: #c1a1b5;
}

.p11 {
  background-color: #D3C2CA;
}

.p12 {
  background-color: #dfb7ad;
}

/* Light */

.l-range::before {
  content: "Light 1-18";
}

.l1::after {
  content: "Light 1";
}

.l2::after {
  content: "Light 2";
}

.l3::after {
  content: "Light 3";
}

.l4::after {
  content: "Light 4";
}

.l5::after {
  content: "Light 5";
}

.l6::after {
  content: "Light 6";
}

.l7::after {
  content: "Light 7";
}

.l8::after {
  content: "Light 8";
}

.l9::after {
  content: "Light 9";
}

.l10::after {
  content: "Light 10";
}

.l11::after {
  content: "Light 11";
}

.l12::after {
  content: "Light 12";
}

.l13::after {
  content: "Light 13";
}

.l14::after {
  content: "Light 14";
}

.l15::after {
  content: "Light 15";
}

.l16::after {
  content: "Light 16";
}

.l17::after {
  content: "Light 17";
}

.l18::after {
  content: "Light 18";
}

.l1 {
  background-color: #f0f0f0;
}

.l2 {
  background-color: #ede8d9;
}

.l3 {
  background-color: #e2dfc9;
}

.l4 {
  background-color: #e5ddd0;
}

.l5 {
  background-color: #e4d3c8;
}

.l6 {
  background-color: #e6d3d3;
}

.l7 {
  background-color: #e6d8d9;
}

.l8 {
  background-color: #dcd4d6;
}

.l9 {
  background-color: #dad5d6;
}

.l10 {
  background-color: #dbdadf;
}

.l11 {
  background-color: #d9d7e1;
}

.l12 {
  background-color: #d9e0e6;
}

.l13 {
  background-color: #d2d7e1;
}

.l14 {
  background-color: #d3dee8;
}

.l15 {
  background-color: #c0d4d7;
}

.l16 {
  background-color: #d8e4e8;
}

.l17 {
  background-color: #cddbdc;
}

.l18 {
  background-color: #cedcdb;
}

/* Dark */

.d-range::before {
  content: "Dark 1-24";
}

.d1::after {
  content: "Dark 1";
}

.d2::after {
  content: "Dark 2";
}

.d3::after {
  content: "Dark 3";
}

.d4::after {
  content: "Dark 4";
}

.d5::after {
  content: "Dark 5";
}

.d6::after {
  content: "Dark 6";
}

.d7::after {
  content: "Dark 7";
}

.d8::after {
  content: "Dark 8";
}

.d9::after {
  content: "Dark 9";
}

.d10::after {
  content: "Dark 10";
}

.d11::after {
  content: "Dark 11";
}

.d12::after {
  content: "Dark 12";
}

.d13::after {
  content: "Dark 13";
}

.d14::after {
  content: "Dark 14";
}

.d15::after {
  content: "Dark 15";
}

.d16::after {
  content: "Dark 16";
}

.d17::after {
  content: "Dark 17";
}

.d18::after {
  content: "Dark 18";
}

.d19::after {
  content: "Dark 19";
}

.d20::after {
  content: "Dark 20";
}

.d21::after {
  content: "Dark 21";
}

.d22::after {
  content: "Dark 22";
}

.d23::after {
  content: "Dark 23";
}

.d24::after {
  content: "Dark 24";
}

.d1 {
  background-color: #6a2b27;
}

.d2 {
  background-color: #552c32;
}

.d3 {
  background-color: #4b312d;
}

.d4 {
  background-color: #54372d;
}

.d5 {
  background-color: #353430;
}

.d6 {
  background-color: #4a533a;
}

.d7 {
  background-color: #1e4542;
}

.d8 {
  background-color: #0e4742;
}

.d9 {
  background-color: #225c4b;
}

.d10 {
  background-color: #347059;
}

.d11 {
  background-color: #3d6637;
}

.d12 {
  background-color: #4f6134;
}

.d13 {
  background-color: #31538b;
}

.d14 {
  background-color: #4d5370;
}

.d15 {
  background-color: #24474d;
}

.d16 {
  background-color: #304552;
}

.d17 {
  background-color: #2d4762;
}

.d18 {
  background-color: #14344e;
}

.d19 {
  background-color: #3c2a41;
}

.d20 {
  background-color: #412e3c;
}

.d21 {
  background-color: #2a2a2c;
}

.d22 {
  background-color: #131d2b;
}

.d23 {
  background-color: #001d2f;
}

.d24 {
  background-color: #001c37;
}

/* Carbon Black */

.cb-range::before {
  content: "Carbon Black 1 & 2";
}

.cb1::after {
  content: "Carbon Black 1";
}

.cb2::after {
  content: "Carbon Black 2";
}

.cb1 {
  background-color: #1b1c26;
}

.cb2 {
  background-color: #1e1e2b;
}