.hero-palette-container {
    position: absolute;
      width: 384px;
      height: 500px;
      /* background: pink; */
      right: -300px;
      top: 1000px;
      border: 2px dashed rgb(85 85 85 / 35%);
      border-style: dashed;
      /* border-spacing: 500px; */
      border-radius: 20px;
      position:absolute;
      text-align:left;
      border:none;
  
  }
  .hero-palette-container:before{
    content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -4px;
      border: 2px dashed rgb(255 255 255 / 50%);
      border-style: dashed;
      /* border-spacing: 500px; */
      border-radius: 20px;
      /*background-image: url(_assets/css/pantoneIcon-1.png);
      background-size: 120px 120px;
      background-position: center center;
      background-repeat: no-repeat;
      /* fill-opacity: 0.1; */
      opacity: 0.35;
    border:none;
  }
  
  .palette-card {
      /*width:140px;
      height:190px;*/
      width:120px;
      height:170px;
      height:unset;
      background:#fff;
      border-radius:10px;
      padding:6px;
      float:left;
/*      -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20);
  -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20);
  box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.20);*/
  user-select: none;
  cursor: grab;
  position:absolute;
  box-shadow: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 0%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -2px 0px inset;
  }
  .palette-card:active {
    cursor:grabbing;
  }
  .palette-card .swatch {
      position:relative;
      width:100%;
      /*height:128px;*/
      height:108px;
      background:red;
      border-radius:3px;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
  
  }
  
  .palette-card .palette-color-label {
      position:relative;
      width:100%;
      display:inline-block;
  padding-left:2px;
  overflow:hidden;
  }
  
  .palette-card .palette-color-label p{
      margin:0px;
  }
  
  .palette-card .palette-color-label .palette-color-name{
  /*
  font-family: 'Dongle', sans-serif;
  font-family: 'Raleway', sans-serif;
  font-family: 'Roboto Condensed', sans-serif;
  font-family: 'Rubik', sans-serif;
  font-family: 'Titillium Web', sans-serif;
  font-family: 'Ubuntu', sans-serif;
  */
  font-family: 'Raleway', sans-serif;
      /*font-size: 16px;*/
      font-size: 14px;
      margin-top: 2px;
      margin-bottom: 0px;
      font-weight: 500;
      letter-spacing: .25px;
      font-family: 'fontsub1' !important;
      white-space: nowrap;
  }
  .palette-card .palette-color-label .palette-color-hex{
  /*
  font-family: 'Dongle', sans-serif;
  font-family: 'Raleway', sans-serif;
  font-family: 'Roboto Condensed', sans-serif;
  font-family: 'Rubik', sans-serif;
  font-family: 'Titillium Web', sans-serif;
  font-family: 'Ubuntu', sans-serif;
  */
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size:15px;
  letter-spacing: .3px;
  font-family: 'fontsub3' !important;
  margin:0px;
  margin-top:-2px;
  }
  
  .palette-card .swatch-text{
  /*
  font-family: 'Dongle', sans-serif;
  font-family: 'Raleway', sans-serif;
  font-family: 'Roboto Condensed', sans-serif;
  font-family: 'Rubik', sans-serif;
  font-family: 'Titillium Web', sans-serif;
  font-family: 'Ubuntu', sans-serif;
  */
  font-family: 'Raleway', sans-serif;
      font-size: 20px;
      margin-top: 2px;
      margin-bottom: 0px;
      font-weight: 300;
      letter-spacing: 1.25;
      /* font-family: 'fontsub1' !important; */
      color: #fff;
      display: inline-block;
      bottom: 0px;
      text-transform: uppercase;
      padding: 3px 5px;
      line-height: 26px;
      position: absolute;
  }
  


  .palette-card.swatch-large {width: 150px;height: 170px;height:unset;}
  .palette-card.swatch-large .swatch{height:138px;}
  .palette-card.swatch-large .swatch-text{
    font-family: 'Raleway', sans-serif;
      font-size: 14px;
      margin-top: 2px;
      margin-bottom: 0px;
      font-weight: 300;
      letter-spacing: 1.25;
      /* font-family: 'fontsub1' !important; */
      color: #fff;
      display: inline-block;
      bottom: 0px;
      text-transform: uppercase;
      padding: 2px 5px;
      line-height: 20px;
      position: absolute;
  }
  .swatch-large .palette-color-label {transform:scale(1);padding-left:0px;margin-left:4px;}




  
  .palette-card.swatch-small {width: 120px;height: 170px;height:unset;}
  .palette-card.swatch-small .swatch{height:110px;}
  .palette-card.swatch-small .swatch-text{
    font-family: 'Raleway', sans-serif;
      font-size: 14px;
      margin-top: 2px;
      margin-bottom: 0px;
      font-weight: 300;
      letter-spacing: 1.25;
      /* font-family: 'fontsub1' !important; */
      color: #fff;
      display: inline-block;
      bottom: 0px;
      text-transform: uppercase;
      padding: 2px 5px;
      line-height: 20px;
      position: absolute;
  }
  .swatch-small .palette-color-label {transform:scale(0.9);padding-left:0px;margin-left:-4px;}
  .swatch-small .swatch-group{margin-bottom:6px;}
  .swatch-small .swatch-group:last-of-type{margin-bottom:0px;}
  
  .palette-card .pos{
    font-family: 'Raleway', sans-serif;
      font-size: 14px;
      margin-top: 2px;
      margin-bottom: 0px;
      font-weight: 300;
      letter-spacing: 1.25;
      /* font-family: 'fontsub1' !important; */
      color: #fff;
      position:absolute;
      top:15px;left:15px;
      opacity:0;
      pointer-events: none;
  }