.cp-color{border:1px solid #ccc;border-radius:.25rem;color:#000;margin-bottom:2rem;padding:2px}.cp-color .swatch{border-radius:.25rem;padding:25% 50%}.cp-color p{font-size:.85rem;margin:0}.cp-color p:first-of-type{padding-top:.5rem}.cp-color p.cp-color-cmyk,.cp-color p.cp-color-hex,.cp-color p.cp-color-name,.cp-color p.cp-color-rgb{line-height:2}.cp-color .cp-color-name{font-weight:700}.cp-colors.hide-hex .cp-color-hex{display:none}.cp-colors.hide-rgb .cp-color-rgb{display:none}.cp-colors.hide-cmyk .cp-color-cmyk{display:none}.cp-palette.is-style-stylized-card .cp-color{border:0;border-radius:0;box-shadow:2px 2px 4px #ccc;padding:0}.cp-palette.is-style-stylized-card .cp-color p{font-family:sans-serif;font-size:1.1rem;padding:0 1.5rem}.cp-palette.is-style-stylized-card .cp-color .swatch{border-radius:0;padding:40% 50%}.cp-palette.is-style-stylized-card .cp-color .cp-color-name{font-size:1.4rem;padding-top:1rem}.cp-palette.is-style-stylized-card .cp-color .cp-color-hex{border-bottom:1px solid #ccc;line-height:1;padding-bottom:2rem}.cp-palette.is-style-stylized-card .cp-color .cp-color-rgb{line-height:1.2;padding-top:1.5rem}.cp-palette.is-style-stylized-card .cp-color .cp-color-cmyk{padding-bottom:1rem}.cp-palette.is-style-circle .cp-color{border:0;border-radius:0;padding:0}.cp-palette.is-style-circle .cp-color .swatch{border-radius:50%;padding:50% 50%}.cp-palette.is-style-circle .cp-color p{font-family:sans-serif;font-size:1.1rem;text-align:center}.cp-palette.is-style-circle .cp-color .cp-color-name{font-size:1.4rem;padding-top:1rem}.cp-palette{max-width:100%;width:100%}@media screen and (min-width:640px){.cp-colors{display:grid;grid-column-gap:2rem;grid-template-columns:repeat(2,1fr)}}@media screen and (min-width:960px){.cp-colors{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width:1200px){.cp-colors{grid-template-columns:repeat(4,1fr)}}.cp-palette.is-style-circle .cp-colors{display:grid;grid-column-gap:4rem;grid-template-columns:repeat(2,1fr)}@media screen and (min-width:640px){.cp-palette.is-style-circle .cp-colors{grid-column-gap:6rem;grid-template-columns:repeat(4,1fr)}}@media screen and (min-width:960px){.cp-palette.is-style-circle .cp-colors{grid-template-columns:repeat(4,1fr)}}@media screen and (min-width:1200px){.cp-palette.is-style-circle .cp-colors{grid-template-columns:repeat(6,1fr)}}.cp-palette-search{margin-bottom:1rem}.cp-palette-search fieldset{border:0}.cp-palette-search-label{display:block;margin-bottom:.25rem}.cp-palette-search-input{margin-right:.5rem;min-width:25vw;padding:.25rem}.cp-palette-search-submit{cursor:pointer;padding:.25rem 1rem}