* { box-sizing:border-box;margin:0;padding:0} *:focus {outline: none;}
* {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Inter', -apple-system-font,BlinkMacSystemFont,"Helvetica Neue",Arial, sans-serif;
  font-weight: 400;
  font-size: 15px;
  min-width: 370px;
  color:#535353;
}
input, textarea {
  padding: 15px 15px;border:1px solid #ddd;border-radius:3px;font-size: 16px;color:#555;
  border-radius: 0; background: #fff;
}

a {color:#111;text-decoration: none;}
h2 {font-weight:600}

footer {padding: 50px 30px;font-size:13px;}
footer .fx-menu {border-top:1px solid #eee;padding-top:30px;display: flex}
footer .fx-menu .plhd {flex-grow: 1}
footer .site-navigator {display: flex;padding-bottom:10px}
footer .site-navigator a {flex-grow: 1;padding:10px;text-align: center;border:3px solid #f2f2f0}
footer .site-navigator .spt {width:10px}

header {padding: 20px 30px;border-bottom: 1px solid #e5e5e5}
header  .h-cnt {display: flex;}
header  .h-cnt .logo {font-size: 30px;font-weight: 600;display: flex}
header  .h-cnt .logo img {width:62px;height:auto}
header  .h-cnt .logo a {display: block;margin-left:15px;padding: 12px 0;color:#535353}
header  .h-cnt .navigator{flex-grow: 1;}
header  .h-cnt .navigator .menu {display: flex;justify-content:flex-end;}
header  .h-cnt .navigator .menu a {margin-left:20px;padding:15px 10px;padding-top:20px;font-weight: 600;font-size: 16px}

header.hm-hd .h-cnt{justify-content: center;}


.pagenation {display: flex;flex-wrap:wrap;justify-content: center;padding:20px 20px}
.pagenation .dot {text-align: center;margin-right: 5px;padding: 10px 10px;margin-top:5px}
.pagenation .pagelink {max-width:80px;cursor:pointer;flex-grow: 1;text-align: center;margin-top:5px;margin-right: 5px;padding: 10px 10px;border:2px solid #f3f3f0;color:#555;}
.pagenation .pagelink.current {flex-grow: 1;text-align: center;margin-top:5px;margin-right: 5px;padding: 10px 10px;border:2px solid #f3f3f0;background:#f3f3f0;}


.primary-color{color:#1d99b7}
.font-17{font-size: 17px} .font-20{font-size: 20px}
.font-light {font-weight: 300} .font-reg {font-weight: 400} .font-sbold {font-weight: 600}
.uppercase {text-transform: uppercase;} .capitalize {text-transform: capitalize;}
.underline {text-decoration: underline;}
.loose-lh {line-height: 1.8}

.flex {display: flex} .flex-wrap {flex-wrap: wrap} .flex-grow{flex-grow: 1}

.text-center {text-align: center;} .text-right{text-align: right}

.pl-30{padding-left:30px} .pl-50{padding-left:50px} .pl-80{padding-left:80px}
.py-30{padding-top:30px;padding-bottom:30px} .py-50{padding-top:50px;padding-bottom:50px}
.mt-5 {margin-top: 5px} .mt-10 {margin-top: 10px} .mt-20 {margin-top: 20px} .mt-25 {margin-top: 25px} .mt-50 {margin-top: 50px}

.width-20{width:20px} .width-30{width:30px}
.width-5p{width:5%}

.pscontainer-md {max-width: 1000px; margin: auto;padding: 0 30px}
.pscontainer-lg {max-width: 1500px; margin: auto;padding: 0 30px}
.color-group-banner {padding:50px 50px;background: #f8f8f6}
@media screen and (max-width: 1040px) {
  .color-group-banner {padding:50px 30px}
}
.subheader .header-menu {display: flex;max-width: 1200px; margin: auto;}
.subheader .header-menu a {flex-grow: 1;padding: 12px;font-weight: 400}
.subheader.color-jeader {background: #f8f8f6}

@media screen and (max-width: 700px) {
  .subheader .header-menu {flex-wrap: wrap}
}


.contact-form .form-field {margin-top: 20px;display: flex;flex-wrap:wrap;width: 100%}
.contact-form .form-field label {min-width:200px}
.contact-form .form-field input {flex-grow: 1}
.contact-form .form-field textarea {resize: vertical;flex-grow: 1}
.contact-form .form-field #err-message {width:100%}
.contact-form .form-field button {padding:10px 25px}

.hp-menu {display: flex}
.hp-menu a {background: #f5f5f3;width:48%;margin:1%;padding:30px;text-align:center;font-size:25px}

.color-search-rows {width: 100%;}
.color-search-rows .color-search{display: flex;font-size:30px;margin-top:15px}
.color-search-rows .color-search input {flex-grow: 1;padding:25px;font-size:30px;min-width:100px}
.color-search-rows .color-search span {padding:25px 20px}
.color-search-rows .color-search span.color-type {min-width:100px}
.color-search-rows .color-search button {padding-left:25px;padding-right:25px;margin-left:10px;font-size:20px;border:1px solid #f5f5f3;background: #f5f5f3;color:#555}

@media screen and (max-width: 820px) {
  .color-search-rows .color-search{font-size:20px;}
  .color-search-rows .color-search input {flex-grow: 1;padding:15px;font-size:20px;min-width:100px}
  .color-search-rows .color-search span {padding:15px 15px}
  .color-search-rows .color-search span.color-type {min-width:60px}
  .color-search-rows .color-search button {padding-left:25px;padding-right:25px;margin-left:10px;font-size:17px;border:1px solid #f5f5f3;background: #f5f5f3;color:#555}
}

@media screen and (max-width: 620px) {
  .hp-menu {flex-wrap: wrap;}
  .hp-menu a {width:100%;margin:1%;font-size:20px}

  .color-search-rows .color-search{font-size:17px;}
  .color-search-rows .color-search input {flex-grow: 1;padding:12px;font-size:17px;min-width:70px}
  .color-search-rows .color-search span {padding:12px 7px}
  .color-search-rows .color-search span.color-type {min-width:60px}
  .color-search-rows .color-search button {padding-left:20px;padding-right:20px;margin-left:10px;font-size:15px;}
}

@media screen and (max-width: 480px) {
  .color-search-rows .color-search{font-size:15px;}
  .color-search-rows .color-search input {flex-grow: 1;padding:10px;font-size:15px;min-width:50px}
  .color-search-rows .color-search span {padding:10px 5px}
  .color-search-rows .color-search span.color-type {min-width:40px}
  .color-search-rows .color-search button {padding-left:15px;padding-right:15px;margin-left:10px;font-size:14px;}
}

.ctn-label {display: flex}
.ctn-label .ctn-label-inner {position: relative;}
.ctn-label .underline {width: 100%;padding:5px;position: absolute;bottom:-3px;z-index: -1}

.single-color-banner {padding: 50px 30px;margin-top: 30px}
.single-color-txt-banner {display: flex}
.single-color-txt-banner .text-preview {width: 49.5%;font-size:18px;font-weight: 800;text-align: center;padding:20px 10px}

.color-banner-component{display: flex;position: relative;}
.color-banner-component .color-comp{position: relative;width: 33.3%;min-width: 33.3%;color:white;font-weight: 600;padding:10px 0;text-align: center;}

.intro-color-wheel {line-height: 1.5}
.intro-color-wheel p {margin-top:10px}

.color-list{display: flex;flex-wrap: wrap;background: #f8f8f6;justify-content: center;padding-top:30px;padding-left:20px;padding-bottom: 10px;border-radius: 5px}
.color-list .color-brick {flex-wrap: 1;position: relative;min-width:110px;height:80px;border-radius: 3px;margin-right: 15px;margin-bottom: 15px}
.color-list .color-brick .color-name {color:#fff;font-weight: 800;position: relative;left:15px;top:50px;text-transform: uppercase;}

.color-list-lg {display: flex;flex-wrap: wrap;}
.color-list-lg .color-brick {width: 50%;position: relative;height:100px;margin-bottom:10px}
.color-list-lg .color-brick:nth-child(odd) {border-right:6px solid #fff}
.color-list-lg .color-brick:nth-child(even) {border-left:6px solid #fff}
.color-list-lg .color-brick .color-name{font-size: 17px;font-weight: 600;position: relative;left:15px;top:65px;text-transform: capitalize;}
.color-list-lg .color-brick .color-code{font-weight: 400;position: relative;left:15px;top:22px;text-transform: uppercase;}

@media screen and (max-width: 550px) {
  .color-list-lg .color-brick {width: 100%;}
  .color-list-lg .color-brick:nth-child(odd) {border-right:none}
  .color-list-lg .color-brick:nth-child(even) {border-left:none}
}

.colorbar-item {width: 50%;padding:0 10px;margin-bottom: 20px}
.colorbar {height:26px;width: 100%;border-radius: 4px}

.kv-block-table {display: flex;border-left:1px solid #ddd;border-top:1px solid #ddd}
.kv-block-table .kv-block{width:25%;flex-grow: 1;padding:10px;border-right:1px solid #ddd;border-bottom: 1px solid #ddd}
.kv-block-table .kv-block .key {font-size: 13px;text-transform: uppercase;color:#777}
.kv-block-table .kv-block .val {margin-top:5px;font-weight: 600;font-size: 16px}

@media screen and (max-width: 600px) {
  .kv-block-table {flex-wrap: wrap}
  .kv-block-table .kv-block{width:50%;min-width: 50%}
}

.color-conversion-table {border-left:1px solid #ddd;border-right:1px solid #ddd;border-top:1px solid #ddd}
.color-conversion-table .table-row{display: flex;border-bottom: 1px solid #ddd}
.color-conversion-table .table-row .table-row-name, .table-row-val {padding:10px 15px}
.color-conversion-table .table-row .table-row-name {min-width: 180px; background: #f8f8f6}
.color-conversion-table .table-row .table-row-val {font-family: monospace, monospace;}

@media screen and (max-width: 500px) {
  .color-conversion-table .table-row .table-row-name {min-width: 120px;}
}

.flex-color-blocks {display: flex}
.flex-color-blocks .color-block {flex-grow: 1;padding:15px;text-align: center;}

@media screen and (max-width: 1000px) {
  .flex-color-blocks{flex-wrap: wrap}
}

.vt-color-blocks-ctn {display: flex;}
.vt-color-blocks-ctn .vt-color-block-outer {width:30%;}
.vt-color-blocks-ctn .vt-color-block{display: flex;flex-direction: column;border-radius: 5px;overflow: hidden;}
.vt-color-blocks-ctn .vt-color-block .vt-color-block-item{padding:20px 20px;text-align: center;}

@media screen and (max-width: 700px) {
  .vt-color-blocks-ctn {flex-wrap: wrap;}
  .vt-color-blocks-ctn .vt-color-block-outer {width:45%;margin-bottom: 20px}
  .vt-color-blocks-ctn .vt-color-block .vt-color-block-item{padding:20px 10px;}
}

@media screen and (max-width: 550px) {
  .vt-color-blocks-ctn .vt-color-block-outer {width:100%;margin-bottom: 20px}
  .vt-color-blocks-ctn .vt-color-block-outer .width-5p{width:0}
}

.color-wheel-ctn {margin:30px 0}
.colorwheel {
  position: relative;
  background: conic-gradient(
    hsl(0, 100%, 50%),
    hsl(45, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(135, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(225, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(315, 100%, 50%),
    hsl(360, 100%, 50%)
  );
  border-radius: 50%;
  width: 300px;
  height: 300px;
  margin:auto
}

.colorwheel:after {
  content: '';
  position: absolute;
  top: 40px;
  left: 40px;
  border-radius: 50%;
  width:210px;
  height: 210px;
  background: white;
  border: 5px solid #fff;
  background: conic-gradient(
    hsl(0, 100%, 50%) 0% 2.78%,
    hsl(15, 100%, 50%) 2.78% 5.56%,
    hsl(30, 100%, 50%) 5.56% 11.11%,
    hsl(45, 100%, 50%) 11.11% 13.89%,
    hsl(55, 100%, 50%) 13.89% 16.67%,
    hsl(70, 100%, 50%) 16.67% 22.22%,
    hsl(110, 100%, 50%) 22.22% 38.89%,
    hsl(155, 100%, 50%) 38.89% 46.94%,
    hsl(185, 100%, 50%) 46.94% 55.56%,
    hsl(210, 100%, 50%) 55.56% 61.11%,
    hsl(230, 100%, 50%) 61.11% 66.67%,
    hsl(260, 100%, 50%) 66.67% 77.78%,
    hsl(300, 100%, 50%) 77.78% 88.89%,
    hsl(325, 100%, 50%) 88.89% 91.67%,
    hsl(338, 100%, 50%) 91.67% 95.83%,
    hsl(350, 100%, 50%) 95.83% 98.33%,
    hsl(0, 100%, 50%) 98.33% 99.99%
  );
}

.colorwheel.red-inner-wheel:after {
  background: conic-gradient(
    hsl(0, 100%, 50%) 0% 2.78%,
    #fff 2.78% 98.33%,
    hsl(0, 100%, 50%) 98.33% 99.99%
  );
}

.colorwheel.red-orange-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 2.78%,
    hsl(15, 100%, 50%) 2.78% 5.56%,
    #fff 5.56% 100%
  );
}

.colorwheel.orange-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 5.56%,
    hsl(30, 100%, 50%) 5.56% 11.11%,
    #fff 11.11% 100%
  );
}

.colorwheel.orange-yellow-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 11.11%,
    hsl(45, 100%, 50%) 11.11% 13.89%,
    #fff 13.89% 100%
  );
}

.colorwheel.yellow-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 13.89%,
    hsl(55, 100%, 50%) 13.89% 16.67%,
    #fff 16.67% 100%
  );
}

.colorwheel.yellow-green-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 16.67%,
    hsl(70, 100%, 50%) 16.67% 22.22%,
    #fff 22.22% 100%
  );
}

.colorwheel.green-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 22.22%,
    hsl(110, 100%, 50%) 22.22% 38.89%,
    #fff 38.89% 100%
  );
}

.colorwheel.green-cyan-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 38.89%,
    hsl(155, 100%, 50%) 38.89% 46.94%,
    #fff 46.94% 100%
  );
}

.colorwheel.cyan-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 46.94%,
    hsl(185, 100%, 50%) 46.94% 55.56%,
    #fff 55.56% 100%
  );
}

.colorwheel.cyan-blue-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 55.56%,
    hsl(210, 100%, 50%) 55.56% 61.11%,
    #fff 61.11% 100%
  );
}

.colorwheel.blue-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 61.11%,
    hsl(230, 100%, 50%) 61.11% 66.67%,
    #fff 66.67% 100%
  );
}

.colorwheel.blue-purple-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 66.67%,
    hsl(260, 100%, 50%) 66.67% 77.78%,
    #fff 77.78% 100%
  );
}

.colorwheel.purple-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 77.78%,
    hsl(300, 100%, 50%) 77.78% 88.89%,
    #fff 88.89% 100%
  );
}

.colorwheel.purple-pink-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 88.89%,
    hsl(325, 100%, 50%) 88.89% 91.67%,
    #fff 91.67% 100%
  );
}

.colorwheel.pink-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 91.67%,
    hsl(338, 100%, 50%) 91.67% 95.83%,
    #fff 95.83% 100%
  );
}

.colorwheel.pink-red-inner-wheel:after {
  background: conic-gradient(
    #fff 0% 95.83%,
    hsl(350, 100%, 50%) 95.83% 98.33%,
    #fff 98.33% 100%
  );
}

@media screen and (max-width: 960px) {
  .color-range-ctn.flex {flex-wrap:wrap}
  .color-range-ctn.flex .pl-80 {padding-left: 0;padding-top:80px}
  .color-range-left-clr-whl {text-align: center;width: 100%}
  .color-wheel-ctn {margin:30px auto}
}

.color-palette-list {display: flex;flex-wrap: wrap;}
.color-palette-list .colorpalette {margin:1.5%;display: flex;width:22%;height:70px;border-radius: 5px;overflow: hidden;}
.color-palette-list .colorpalette .color{flex-grow: 1}

@media screen and (max-width: 1120px) {
  .color-palette-list .colorpalette {margin:1.5%;width:30.3%;height:70px;border-radius: 10px;}
}

@media screen and (max-width: 830px) {
  .color-palette-list .colorpalette {margin:1.5%;width:47%;height:80px;border-radius: 10px;}
}

@media screen and (max-width: 580px) {
  .color-palette-list .colorpalette {margin:2% 0;width:100%;height:75px;border-radius: 10px;}
}

.fw-color-palette {width: 100%;display: flex;border-radius: 10px;overflow: hidden;}
.fw-color-palette .color-block {flex-grow: 1;height:120px;}
.palette-color-desc {display: flex;padding-top:25px}
.palette-color-desc .palette-color{flex-grow: 1;text-align: center;}
.palette-color-desc .palette-color .hex {color:#888;text-transform: uppercase;display:flex;justify-content: center;}
.palette-color-desc .palette-color .hex .icon {width:15px;height:15px;margin-right:10px;border-radius: 8px}
.palette-color-desc .palette-color .rgb{font-size:12px;margin-top:10px;color:#555}
.palette-color-desc .palette-color .hsl{display: inline-block;font-size:12px;margin-top:5px;color:#555}
@media screen and (max-width: 720px) {
  .palette-color-desc {flex-wrap: wrap}
  .palette-color-desc .palette-color{width:50%;margin-bottom:30px}
}

.palettes-seletcor {display: flex;flex-wrap:wrap;justify-content: center;padding:0 20px;padding-bottom:20px}
.palettes-seletcor a {border:1px solid #ddd;border-radius: 15px;padding:3px 15px;margin:5px}
.palettes-seletcor a .dot {width:10px;height:10px;border-radius: 8px;display: inline-block;margin-right:6px}

.doc-page {padding:50px 30px;line-height:1.5}
.doc-page h2 {margin-top:15px}
.doc-page p {margin-top:5px;margin-bottom:10px}
.doc-page ul{padding-left:15px}