/*
Theme Name: Color-Name (2024)
Author: Manish Sharma
Author URI: http://www.color-name.com/
Description: Theme developed by Keshav Naidu.
Version: 3.0
Tags: Clean, White, Open
Text Domain: www.color-name.com
*/


* {
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0; padding: 0;
	text-decoration-line: none;
}

::selection {
  color: #fff;
  background: #1B1B8C;
}
html {scroll-behavior: smooth;}
body {
	font-size: 13px;
	letter-spacing: 0.5px;
	color: #444;
	line-height: 140%;
	font-weight: normal;
	background-color: #fff;
	transition: background 0.2s;
	font-family: Arial, Verdana;
}
*, body {
	font-family: 'Jost', sans-serif, Arial, Verdana;
}

p {line-height: 180%; font-size: 13px; font-weight: 300; margin: 0 0 30px 0; padding: 0; font-weight: normal;}
a {color: #000; text-decoration: none;}
a: hover; {color: #888; text-decoration: none;}
p a {text-decoration: underline; color: #000;}
p a:hover {text-decoration: underline; color: #000;}

h1, h2, h3, h4, h5, h6 {
	color: #000;
	margin: 0 0 15px 0;
	padding: 0;
	/*font-weight: bold;*/
	font-weight: 600;
	line-height: 155%;
}
h1 {font-size: 52px; line-height: 110%; margin-bottom: 0; text-transform: capitalize;}
h2 {font-size: 24px;}
h3 {font-size: 18px;}
h4 {font-size: 16px;}
h5 {font-size: 15px;}

hr {background: none; border:  none; border-bottom: 1px solid #ddd; margin:  0; padding:  0;}
table {border-collapse: collapse; width: 100%;}
table td, table th {border: 1px solid #ddd; padding: 5px 10px;}
table th {background-color: #eee;}

.cn-button, .cn-input, .cn-textarea, .cn-select {
	font-family: 'Jost', sans-serif, Arial, Verdana;
	display: inline-block;
	font-size: 13px;
	padding: 0px 20px;
	border-radius: 10px;
	height: 50px;
	line-height: 48px;
	border:	1px solid #ccc;
	outline: none;
	background-color: #fff;
	-webkit-appearance: none;
	 -moz-appearance:	 none;
	 appearance: none;
}
.cn-textarea {min-height: 90px;}
.cn-input:focus, .cn-textarea:focus {
	border-color: #aaa;
}
.cn-button {
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	color: #fff;
	border-color: #1B1B8C;
	background-color: #1B1B8C;
	overflow: hidden;
}
.cn-button:hover {
	background-color: #0a2d9e;
	border-color: #0a2d9e;
}
.cn-button:focus, .cn-button:active {
/*	transform: scale(0.98);*/
}

.cn-button2 {color: #1B1B8C; background-color: transparent; border-color: #1B1B8C;}
.cn-button2:hover {color: #fff; background-color: #1B1B8C;}
.cn-select {
	width: 100%;
	padding-right: 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: calc(100% - 8px) 13px;
}
.cn-button:disabled,
button:disabled,
button[disabled]{
  opacity: 0.5;
  cursor: no-drop;
}
.cn-range {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  width: 100%;
  cursor: pointer;
  outline: none;
  /*  slider progress trick  */
  overflow: hidden;
  border-radius: 16px;
  background-color: #ddd;
}


/* Thumb: webkit */
.cn-range::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  height: 20px;
  width: 20px;
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #1B1B8C;
  /*  slider progress trick  */
  box-shadow: -407px 0 0 400px #1B1B8C;
}


/*:root {
  --cn-radio: rebeccapurple;
}*/

.cn-radio {
	display: inline-grid;
	grid-template-columns: 20px auto;
	grid-gap: 10px;
}

.cn-radio input[type="radio"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  margin: 0;
  width: 20px; height: 20px;
  border-radius: 4px;
  border: 2px solid #333;
  transform: translateY(-0.075em);
	display: grid;
  place-content: center;

}
.cn-radio input[type="radio"]::before {
	content: "";
	border-radius: 2px;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  border: 4px solid #1B1B8C;
}
.cn-radio input[type="radio"]:checked::before {
	transform: scale(1);
}


.centered {
	max-width: 1080px;
	margin: 0 auto;
	padding-left: 30px;
	padding-right: 30px;
}
.centered-small {
	max-width: 800px;
	margin: 0 auto;
	padding-left: 30px;
	padding-right: 30px;
}
.space-top-xl {padding-top: 60px;}
.space-top-l {padding-top: 50px;}
.space-top-m {padding-top: 30px;}
.space-top-s {padding-top: 20px;}
.space-bottom-xl {padding-bottom: 60px;}
.space-bottom-l {padding-bottom: 50px;}
.space-bottom-m {padding-bottom: 30px;}
.space-bottom-s {padding-bottom: 20px;}
.align-center {text-align: center;}
.align-left {text-align: left;}
.align-right {text-align: right;}
.position-relative {position: relative;}
.no-scroll {overflow-y: hidden;}
.no-margin {margin-bottom: 0;}
.cn-hide {display: none;}
.cn-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
}
.cn-grid-col-1 {grid-template-columns: 1fr;}
.cn-grid-col-2 {grid-template-columns: 1fr 1fr;}
.cn-grid-col-3 {grid-template-columns: 1fr 1fr 1fr;}
.cn-grid-col-4 {grid-template-columns: 1fr 1fr 1fr 1fr;}

.cn-grid-gap-20 {grid-gap: 20px;}
.cn-grid-gap-30 {grid-gap: 30px;}
.cn-grid-gap-40 {grid-gap: 40px;}

.cn-icon {
/*	color: #000;*/
	display: inline-block;
	width: 24px;
	height: 24px;
	overflow: hidden;
}
.inicon {vertical-align:middle; font-size: 20px;}
.blue {color: #1B1B8C;}
.underline {text-decoration: underline;}
.cn-logo {
	display: inline-grid;
	grid-template-columns: 26px 1fr;
	grid-gap: 10px;
}

.cn-logo .logo-text {
	font-size: 22px;
	text-transform: lowercase;
	display: inline-block;
	line-height: 24px;
}
.cn-logo svg {
	display: inline-block;
	width: 26px;
	height: auto;
}

.color-brand {fill: #1b1b8c;}
.color-black {fill: #000;}
.color-white {fill: #fff;}

.header {
	padding: 26px 0;
}
.header-home {
	background-color: #E8EAF9;
	padding: 34px 0;
	border-top: 4px solid #000;
	height: 98px;
}
.header-sub {
	height: 78px;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	/*position: sticky;
	top: 0;
	z-index: 1000;*/
}
.header .header-inside {
	max-width: calc(100% - 00px);
	display: grid;
	grid-template-columns: auto 1fr auto 1fr auto auto auto;
	grid-gap: 20px;

}
.extraspace {display: inline-block; width: 28px;}
.nav {}
.nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.nav ul li {display: inline-block; margin: 0; padding: 0;}
.nav ul li a {
	font-size: 14px;
	color: #1B1B8C;
	display: inline-block;
	padding: 5px 10px;
	text-decoration: none;
}
.nav > ul > li a:hover {
	color: #000;
	text-decoration: none;
	text-decoration: underline;
}
.mobile-nav ul li {display: block;}
.mobile-nav ul li a {display: block; margin-bottom: 5px;}

.new-inmenu a {}
.new-inmenu a:after {
	content: 'NEW';
	height: 12px;
	line-height: 12px;
	margin-left: 4px;
	color: #fff;
	font-size: 8px;
	padding: 0px 2px;
	border-radius: 3px;
	background-color: #ef5976;
	display: inline-block;
}

.nav-icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	text-align: center;
	line-height: 48px;
	cursor: pointer;
	margin-top: -2px;
}
.nav-icon:hover {background-color: rgba(0,0,0,0.080); }
.nav-icon:active {color: #000; background-color: rgba(0,0,0,0.129); transform: scale(0.900);}

.nopro {
	border: 1px solid #ff7575;
	position: relative;
	line-height: 43px;
}
.nopro:after {
	font-size: 12px;
	content: '+';
	display: inline-block;
	text-align: center;
	width: 10px;
	height: 10px;
	line-height: 9px;
	border-radius: 50%;
	color: #fff;
	background-color: #ff7575;
	position: absolute;
	top: -4px;
	right: -4px;

}
.yespro {border-color: #65d772}
.yespro:after {background-color: #65d772;}


.getpro {
	color: #fff;
	background-color: #ff7575;
	border-radius: 8px;
	line-height: 30px;
}


.hero {
	min-height: 60vh;
	padding: 30px 0;
	padding-top: 0;
	background-color: #E8EAF9;
	display: flex;
/*	justify-content: center;*/
	align-items: center;
}
.hero h1 {
	font-size: 3.8vw;
	width: 100%;
	display: block;
	margin: 0;
}
.hero h1 span {display: block;}
.hero p {margin: 10px 0; font-size: 14px;}
.hero .hex-rgb-info {font-size: 16px;}
.hero-inside {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 80px;
	width: 100%;
}
.hero-column1 {
	display: flex;
	align-items: center;
}
.hero-column1 > div {width: 100%;}
.hero-column2 {
	background: url(images/main-content-bg.svg) no-repeat center center;
	padding: 40px;
}
.home-hero-bg {background-image: url(images/main-content-bg-home.svg);}

.hero-column2 figure {
	height: 200px;
	aspect-ratio: 1 / 1;
	background-color: #1B1B8C;
	border-radius: 14px;
	margin: 0 auto;
	padding:0;
	text-align: center;
	position: relative;
}
.hero-column2 .source_link {
	color: #fff;
	font-size: 14px;
	display: inline-block;
	width: 30px; height: 30px;
	text-align: center;
	line-height: 31px;
	border-radius: 50%;
	background-color: rgba(0,0,0,0.4);
	position: absolute;
	right: 10px;
	bottom: 10px;
	opacity: 0;
	transition: all ease 0.2s;
	transform: scale(0.040);
	z-index: 30;
}
.hero-column2 figure:hover .source_link {
	opacity: 1;
	transform: scale(1);
}
.hero-column2 .source_link:hover {background-color: rgba(0,0,0,0.8);}

.hero-column2 figure img {
	width: 100%;
	height: auto;
	margin-top: -30px;
	transition: all ease 0.3s;
	border-radius: 14px;
}
.hero-column2 figure:hover img {
	transform: scale(1.040);
}
.hero-column2 figure svg {
	display: block;
	max-width: 100%;
	transform: scale(0.7);
	transition: all ease-out 0.1s;
	opacity: 0.8;
}
.hero-column2 figure svg:hover {
	opacity: 1;
	transform: scale(0.8);
}
.hero-column2 figure svg:active {
	transform: scale(0.78);
}
.hero-column2 figure p {
	font-size: 12px;
	color: #1B1B8C;
	width: 100%;
	position: absolute;
	display: block;
	text-align: center;
	left: 0;
	margin: 0; padding: 0;
}
.hero-column2 figure .p1 {top: 14px;}
.hero-column2 figure .p2 {bottom: 14px;}

.hero-buttons {
	max-width: 400px;
	margin-top: 30px; display: block;
}
.hero-buttons .button,
.hero-buttons .simplefavorite-button
 {
	display: block;
	color: #000;
	border: 1px solid #000;
	text-align: center;
	height: 50px;
	line-height: 48px;
	border-radius: 12px;
	opacity: 0.8;
	outline: none;
	background-color: transparent;

}
/*.hero-buttons .simplefavorite-button.active {background-color: pink;}*/

.hero-buttons .button:hover {
	opacity: 1;
}
.hero-buttons .button:active, .hero-buttons .simplefavorite-button:active {
	transform: scale(0.97);
}
.hero-buttons .simplefavorite-button.active .cn-icon {
	color: #ff4268;
	transform: scale(1.1);
}

/* Search form */
.color-picker-wrapper {
    max-width: 380px;
    margin: 0;
    margin: 14px 0;
    margin-top: 26px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 5px;
    padding: 0;
}


.color-picker-wrapper button, .img-button {
	color: #000;
    display: inline-block;
    padding: 0;
    background: transparent;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
}
.color-picker-wrapper button .cn-icon {color: #000; font-size: 20px; line-height: 29px;}
.color-picker-wrapper button:hover, .img-button:hover {opacity: 0.8; background-color: rgba(0,0,0,0.040)}
.color-picker-wrapper button:active, .img-button:active {opacity: 0.8; transform: scale(0.92); background-color: rgba(0,0,0,0.080)}
.color-picker-wrapper .color-input {
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px;
    outline: none;
    padding: 0 40px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.4);
/*    padding-left: 10px;*/
	background: rgba(255,255,255,0.3);

}
.color-picker-wrapper .color-input:focus {
	border-color: rgba(0,0,0,0.8);
	background-color: #fff;
}
.input-text-wrapper {
    position: relative;
    width: 100%;
    padding: 0;
    padding: 0px;
}
.input-text-wrapper .color-input {
    display: block;
    width: 100%;

}
.input-text-wrapper .mic-button {
    position: absolute;
    top: 8px;
    left: 4px;
    text-align: center;
/*    display: none;*/
}

.input-text-wrapper .submit-button {
    position: absolute;
    top: 8px;
    right: 4px;
    text-align: center;
}
.input-text-wrapper .submit-button .cn-icon {line-height: 30px;}

.img-button {
	position: absolute;
    top: 8px;
    left: 36px;
    text-align: center;
	line-height: 33px;
}

.color-picker {
    width: 50px;
    height: 50px;
    border: none;
    padding: 0px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    border: 0px solid rgba(0,0,0,0.4);
}

.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker::-webkit-color-swatch {
    border: none;
    border-radius: 10px;
}
.dropper-icon {
	pointer-events: none;
    position: absolute;
    top: 14px;
    left: 14px;
    color: #000;
    opacity: 0.7;
}
.color-picker:active,
.dropper-icon:active
 {transform: scale(0.94);}

/* Foreground */
.fg-color-blue .logo-text,
.fg-color-blue .header .cn-icon
 {color: #1B1B8C;}

.fg-color-black .logo-text,
.fg-color-black .header .cn-icon,
.fg-color-black .nav a,
.fg-color-black .hero h1
 {color: #000;}
 .fg-color-black .login-button-header {background-color: #000;}

 .fg-color-black .logo-icon
 {fill: #000;}

 .fg-color-blue .logo-icon 
  {fill: #1B1B8C;}

.fg-color-blue .color-picker-wrapper .color-input
 {
	border-color: #1B1B8C;
}

.hero-subpage {display: block;}
.hero-subpage p {font-size: 16px; margin: 0; margin-top: 10px; text-align: center;}

.bcn ol {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
.bcn ol li {
	color: #999;
	font-size: 11px;
	display: inline-block;
	text-transform: uppercase;
}
.bcn ol li a {color: #666; display: inline-block; padding: 2px 2px;}
.bcn ol li a:after {
	content: ' /';
	display: inline-block;
	margin-left: 4px;
    margin-right: 1px;
}
.bcn ol li a:hover {text-decoration: underline;}
.promo {
	color: #D7E2FF;
	display: block;
	width: 100%;
	background-color: #1B1B8C;
	margin: 0;
	padding: 4px 20px;
	text-align: center;
	position: absolute;
	top: 0;
}
.promo p {margin: 0;}
.promo a {color: yellow;}
.promo a:hover {color: #fff;}

.home-text {
	font-size: 16px;
	width: 70%;
	margin: 0 auto;
}

.featured {
	border: 1px solid #ddd;
	border-radius: 14px;
	padding: 30px 20px;
}

.featured ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1px;
	margin: 0; padding: 0px;
	background-color: #ddd;
}
.featured-tools ul {
	grid-template-columns: repeat(3, 1fr);
}
.featured ul li {
	text-align: center;
	list-style: none;
	margin: 0;
	padding: 10px 18px;
	background-color: #fff;
}
.featured-tools ul li {padding: 20px; text-align: left;}
.featured ul li a {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 10px;
	margin: 0 auto;
}
.featured ul li h2 {font-size: 16px; margin: 0; font-weight: 400;}
.featured ul li p {margin: 0; color: #666;}
.featured-title {
	padding-top: 6px;
	text-align: left;
}
.featured ul li .circle {
	color: #fff;
	display: inline-block;
	font-size: 40px;
	width: 60px;
	height: 60px;
	line-height: 58px;
	border-radius: 50%;
	text-align: center;
	transition: all ease 0.2s;
	border: 1px solid transparent;
}
.featured ul li a:hover .circle {
border-color: #000;
}

/* Drop down */

.dd-trigger {cursor: pointer;}
.login-button-header {
	color: #fff;
	background-color: #1B1B8C;
	display: inline-block;
	height: 32px;
	line-height: 32px;
	padding: 0 12px;
	border-radius: 10px;
	text-align: center;
}

.dd-parent {display: inline-block; position: relative;}
.dd-box {visibility: hidden; opacity: 0; transform: scale(0.90); transition: all 0.1s;}
.dd-open .dd-box {visibility: visible; opacity: 1; transform: scale(1,1); }
.ar-r:before, .ar-l:before,
.visualizer-nav-buttons.active:before
 {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 10px;
  top: -8px;
  background-color: transparent;
/*  transform: rotate(45deg);*/
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='10' height='8' overflow='visible'%3E%3Cpath fill='%23fff' d='M5 2.2 1.3 8h7.4z'/%3E%3Cpath fill='%23eee' d='M5 0 0 8H1.3L5 2.2 8.7 8H10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
}
.dd-open .icon {color: #FF6C6C;}
.dd-style {
	background-color: #fff;
	position: absolute;
	z-index: 300;
	border-radius: 10px;
	top: 40px;
	right: 0px;
	width: 220px;
	padding: 30px;
	border: 1px solid rgba(0, 0, 0, 0.10);
	box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.020);
}

.user {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 14px;
}
.menu-user-info {
	display: grid;
	grid-template-columns: 30px 1fr;
	grid-gap: 8px;
	padding: 5px;
	overflow: hidden;
}
.menu-user-info img {display: block; width: 30px; height: 30px; border-radius: 10px; border: 1px solid #ddd;}
.menu-user-info h5 {padding-top: 4px; white-space: nowrap;}
.user .cn-button,
.user .cn-input
 {
	width: 100%;
	display: block;
}
.nodesktop {display: none!important;}




/* Above fold Ends */


.color-posts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 44px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.color-posts li svg {
	display: block;
	width: 100%;
	height: auto;
/*	border-radius: 14px;*/
}
.color-posts li img {
	width: auto; /* Desired width */
    height: 300px; /* Desired height */
    overflow: hidden; /* Hide overflow */
    display: block;
    align-items: center;
    justify-content: center;
}

.color-posts li {
	border-radius: 14px;
	overflow: hidden;
	text-align: center;
	border: 1px solid #ddd;
	padding: 0px;
}
.color-posts li:hover {border-color: #aaa;}
.color-posts li h3,
.color-posts li h2,
.color-posts li h4 {
	font-size: 14px;
	padding: 0;
	margin: 0;
}
.color-posts li h3 a,
.color-posts li h2 a,
.color-posts li h4 a {
	display: block;
	padding: 14px 8px;
	background-color: #fff;
}

.showcase {
	min-height: 60vh;
	padding: 20px 0;
	background-color: #E8EAF9;
	display: flex;
	align-items: center;
}
.showcase-inside {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 60px;
}
.showcase-inside img {display: block; width: 100%; height: auto; margin-top: 20px;}
.showcase-inside h2 {font-size: 36px; font-weight: 600;}
.showcase-inside p {margin: 0 0 30px 0;}
.showcase-inside ul {
	list-style: none;
	margin: 0 0 30px 0;
	padding: 0;
}
.showcase-inside ul li {color: #1B1B8C; font-size: 15px; font-weight: 600; margin-bottom: 10px;}


.popular-hexcode ul {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 10px;
	margin: 0; padding: 0;
	line-height: 0%;
}
.popular-hexcode ul li {
	margin: 0;
	padding: 0;
	font-size: 14px;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.1);
	transition: all ease 0.2s;
}
.popular-hexcode ul li svg {display: block; width: 100%; height: auto; transition: all ease 0.2s;}


.cn-blog-posts {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 60px;
	margin: 0; padding: 0;
}
.cn-blog-posts li {
	border: 1px solid #ddd;
	border-radius: 14px;
	overflow: hidden;
}
.cn-blog-posts li img {
	display: block; width: 100%; height: auto;
	background: #eee url(images/loading.svg) no-repeat center center;
}
.cn-blog-posts li h3 {
	font-size: 14px;
	padding: 10px 20px;
	text-align: center;
	margin: 0;
}

.footer {
	background-color: #222;
}
.footer-inside {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 20px;
}
.footer p {color: #ddd; margin: 0;}
.footer .cn-logo {margin-bottom: 20px;}
.footer .logo-icon {fill: #fff;}
.footer .cn-logo .logo-text {color: #fff;}
.footer h4 {color: #fff;}
.footer ul {list-style: none;}
.footer ul li {margin: 18px 0;}
.footer ul li a {color: #ddd; padding: 5px 0;}
.footer ul li a:hover, .footer p a {color: #fff; text-decoration: underline;}
.newitem:after {
	content: 'NEW';
	color: #fff;
	background-color: #FF8225;
	font-size: 10px;
	margin-left: 6px;
	display: inline-block;
	padding: 0px 3px;
	border-radius: 3px;

}

.socials {
  margin: 20px 0;
  display: inline-grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
}
.socials a {display: inline-block; line-height: 8px; width: 30px; height: 30px; border: 1px solid #333; border-radius: 6px; text-align: center;}
.socials a:hover {border-color: #aaa;}
.sicon {
	text-indent: -999px;
  display: inline-block;
  width: 20px; height: 20px;
  line-height: 0px;
  background-repeat: no-repeat;
  background-position: center center;
}
.fbk {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.6' height='14.1' style='overflow:visible;enable-background:new 0 0 7.6 14.1' xml:space='preserve'%3E%3Cpath d='M7.3 0H5.5C3.4 0 2.1 1.4 2.1 3.5v1.6H.3c-.2 0-.3.1-.3.2v2.3c0 .2.1.4.3.4h1.8v5.8c0 .2.1.3.3.3h2.4c.2 0 .3-.1.3-.3V8h2.1c.2 0 .3-.1.3-.3V5.4c0-.1 0-.1-.1-.2 0-.1-.1-.1-.2-.1H5.1V3.7c0-.7.2-1 1-1h1.2c.2 0 .3-.1.3-.3V.3c0-.2-.1-.3-.3-.3z' style='fill:%23eee'/%3E%3C/svg%3E");}
.twr {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.1' height='11.4' style='overflow:visible;enable-background:new 0 0 14.1 11.4' xml:space='preserve'%3E%3Cpath d='M4.4 11.4c5.3 0 8.2-4.4 8.2-8.2v-.4c.6-.4 1.1-.9 1.4-1.5-.5.2-1.1.4-1.7.5.6-.4 1.1-.9 1.3-1.6-.6.3-1.2.6-1.8.7-.5-.5-1.2-.9-2.1-.9-1.5 0-2.8 1.3-2.8 2.9 0 .2 0 .4.1.7-2.4-.1-4.5-1.3-6-3C.7 1 .6 1.5.6 2c0 1 .5 1.9 1.3 2.4-.5 0-.9-.2-1.3-.4 0 1.4 1 2.6 2.3 2.8-.3.2-.5.2-.8.2-.2 0-.3 0-.5-.1.4 1.1 1.4 2 2.7 2-1 .8-2.2 1.2-3.6 1.2H0c1.3.9 2.8 1.3 4.4 1.3' style='fill:%23eee'/%3E%3C/svg%3E");}
.ins {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.1' height='14.1' style='overflow:visible;enable-background:new 0 0 14.1 14.1' xml:space='preserve'%3E%3Cstyle%3E.st0%7Bfill:%23eee%7D%3C/style%3E%3Cpath class='st0' d='M10.2 0H3.9C1.7 0 0 1.7 0 3.9v6.3c0 2.1 1.7 3.9 3.9 3.9h6.3c2.1 0 3.9-1.7 3.9-3.9V3.9c0-2.2-1.8-3.9-3.9-3.9zm2.6 10.2c0 1.5-1.2 2.6-2.6 2.6H3.9c-1.5 0-2.6-1.2-2.6-2.6V3.9c0-1.5 1.2-2.6 2.6-2.6h6.3c1.5 0 2.6 1.2 2.6 2.6v6.3z'/%3E%3Cpath class='st0' d='M7 3.4C5 3.4 3.4 5 3.4 7S5 10.6 7 10.6 10.6 9 10.6 7C10.7 5 9 3.4 7 3.4zm0 6c-1.3 0-2.3-1-2.3-2.4 0-1.3 1.1-2.4 2.4-2.4 1.3 0 2.4 1.1 2.4 2.4C9.4 8.4 8.4 9.4 7 9.4zM10.8 2.4c-.2 0-.5.1-.6.3-.2.1-.3.3-.3.6 0 .2.1.5.3.6.2.2.4.3.6.3.2 0 .5-.1.6-.3.2-.2.3-.4.3-.6 0-.2-.1-.5-.3-.6-.1-.3-.3-.3-.6-.3z'/%3E%3C/svg%3E");}
.pin {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.4' height='14.1' style='overflow:visible;enable-background:new 0 0 11.4 14.1' xml:space='preserve'%3E%3Cpath d='M5.9 0C2.1 0 0 2.5 0 5.2 0 6.4.7 8 1.8 8.5c.2.1.3 0 .3-.1s.2-.7.2-1c0-.1 0-.2-.1-.2-.3-.5-.6-1.3-.6-2 0-1.9 1.5-3.7 4-3.7 2.2 0 3.7 1.4 3.7 3.5 0 2.3-1.2 3.9-2.8 3.9-.9 0-1.5-.7-1.3-1.5.3-1.1.8-2.2.8-2.9 0-.7-.4-1.2-1.1-1.2-.9 0-1.6.9-1.6 2.1 0 .8.3 1.3.3 1.3s-.9 3.6-1 4.2c-.3 1.1 0 3 .1 3.1 0 .1.1.1.2 0s1.2-1.6 1.5-2.7c.1-.4.6-2 .6-2 .3.5 1.1 1 2.1 1 2.7 0 4.6-2.4 4.6-5.3-.3-2.9-2.7-5-5.8-5z' style='fill:%23eee'/%3E%3C/svg%3E");}


.color-bordered {
	display: inline-block;
	border-bottom: 2px solid #ddd;
}
.post-color-preview {
	min-width: 280px;
	max-width: 280px;
	height: 180px;
	text-align: center;
	border: 1px solid #ddd;
	border-radius: 14px;
	overflow: hidden;
	position: relative;
	margin-top: 12px;
}
.post-color-preview img {
	width: 100%;
	height: auto;
	object-fit: cover;
}
.post-color-preview figcaption {
	position: absolute;
	width: 100%;
	text-align: center;
	background-color: #fff;
	left: 0;
	bottom: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
	padding: 10px;
}
.cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 60px;
}
.colsfirst {
	grid-template-columns: auto auto;
}
.cols-reverse .col1 {order: 2;}

.post-color-preview .dd-parent {width: 100%;}
.cn-download-button {
	cursor: pointer;
	display: block;
	width: 100%;
	padding: 4px 10px;
	border: 1px solid #ddd;
	border-radius: 7px;
}
.cn-download-button:hover {background-color: #eee;}
.cn-download-button:active {background-color: #ddd;}

.color-codes {
	width: 100%;
	border-collapse: collapse;
}
.color-codes tr {border: 1px solid #ddd; border-left: none; border-right: none;}
/*.color-codes tr:nth-child(odd) {background-color: #eee;}*/
.color-codes td, .color-codes th {
/*	width: 50%;*/
	padding: 6px 20px;
	text-align: left;
	border: none;
	
}
.color-codes td i {font-style: normal;}
.color-codes .color-display {
	display: inline-block;
	width: 20px; height: 20px;
	border-radius: 4px;
	border: 1px solid rgba(0,0,0,0.2);
	margin-bottom: -4px;
	margin-right: 10px;

}
.copy-text {cursor: pointer;}
.copy-text:hover {opacity: 0.6;}
.copy-text:active {transform: scale(0.8);}
.copy-icon {
	display: inline-block;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 26px;
	border-radius: 50%;
	cursor: pointer;
}
.copy-icon:hover {background-color: #ddd;}
.copytip {
      display: none;
      position: fixed;
      bottom: 20px;
      left: 50%;
      background-color: #333;
      color: #fff;
      padding: 10px 28px;
      border-radius: 20px;
      font-size: 14px;
      z-index: 1000;
      opacity: 0.9;
      transform: translate(-50%, 0)
}
.copytip .cn-icon {line-height: 23px;}
.shades {
	display: flex;
	list-style: none;
	gap: 10px;
	margin-bottom: 10px;
}
.shades li {
	flex: 1;
	position: relative;
}
.shades li svg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.shades li .icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.9);
	color: #fff;
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background-color: rgba(0,0,0,0.2);
	border-radius: 50%;
	font-size: 18px;
	visibility: hidden;
	opacity: 0;
	transition: all ease 0.2s;
}
.shades li:hover .icon {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.0);
}

.cn-palettes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 20px;
}
.cn-palettes li,
.cn-rainbow-palette li {
	list-style: none;
	margin: 0; padding: 0;
}
.cn-palettes-item,
.cn-rainbow-palette {
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
}
.cn-rainbow-palette {margin-top: 20px;}
.cn-palette {
	display: flex;
	gap: 3px;
}
.cn-palette li {
	flex: 1;
	height: 72px;
/*	font-size: 0;*/
text-indent: -9999px;
}
.cn-palettes .cn-palette-info,
.cn-rainbow-palette .cn-palette-info{
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 10px;
}
.cn-palettes .cn-palette-info h3,
.cn-rainbow-palette h3 {
	font-size: 14px;
	margin: 0;
	padding: 4px 10px;
	white-space: nowrap;
	width: 100%;
	overflow: hidden;
	text-align: left;
}
.cn-palette-download {
	display: inline-block;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
}
.internal-nav {
	position: sticky;
	top: 0;
	background-color: #fff;
	text-align: center;
	padding: 10px;
	border-bottom: 1px solid #ddd;
	z-index: 10;
}
.internal-nav .centered {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 10px;
}
.internal-nav a {
	color: rgba(0,0,0,0.8);
	display: inline-block;
	padding: 0px 10px;
	height: 42px;
	line-height: 39px;
	border: 1px solid rgba(0,0,0,0.1);
	border-radius: 6px;
	white-space: nowrap;
	overflow: hidden;
}
.internal-nav a:hover {background-color: #eee; border-color: rgba(0,0,0,0.2);}
.internal-nav a:active,.internal-nav a:focus {background-color: #ddd; transform: scale(0.96);}
.internal-nav a .cn-icon {margin-bottom: -2px;}

.cn-patterns {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cn-patterns li svg {
	display: block;
	width: 100%;
	height: 100%;
}
.cn-patterns li {
	border: 1px solid #eee;
	border-radius: 5px;
	overflow: hidden;
}
.cn-patterns li h3 {
	font-size: 14px;
	margin: 0;
	text-align: center;
	padding: 5px;
}


.hero-buttons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
}

.mockups {
/*	padding: 40px;*/
}
.mockups ul {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
/*	grid-gap: 20px;*/
}
.mockups ul li {
/*	border: 2px solid #fff;*/
}
.mockups ul li svg {
	display: block;
	width: 100%;
	height: auto;
/*	border-radius: 16px;*/
}

.dd-search {
	display: none;
	background-color: rgba(255, 255, 255, 0.95);
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	position: fixed;
	top: 0;
	right: 0;
	padding: 20px 0;
	z-index: 300;
}
.dd-search .centered-small {position: relative;}
.dd-search-open {
	display: block;
}
.dd-search .search-close {
	display: inline-block;
	padding: 4px;
	width: 32px; height: 32px;
	text-align: center;
	position: absolute;
	top: 10px;
	right: 40px;
	cursor: pointer;
	line-height: 25px;
}
.dd-search .search-close span {font-size: 22px;}


/* Tools: Image to Color Name */
.tool-cn-from-pic {}
.tool-cn-from-pic .drop-zone {
  border: 1px dashed #1B1B8C;
  background-color: #E8EAF9;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
  display: table;
  width: 100%;
  min-height: 300px;
}
.tool-cn-from-pic .drop-zone p {
	color: #1B1B8C;
	display: table-cell;
	vertical-align: middle;
	margin: 0;
}
.tool-cn-from-pic .drop-zone .img-icon {
	font-size: 40px;
	display: block;
	width: 40px;
	height: 40px;
	margin: 0 auto;
	opacity: 0.6;
}
.tool-cn-from-pic .drop-zone.hidden {
  display: none;
}
.tool-cn-from-pic .drop-zone:hover, .drop-zone.active {
  border-color: #000;
  background-color: #d6daf5;
}
.tool-cn-from-pic .drop-zone:active, .drop-zone.active {
  border-color: #000;
  background-color: #c6cbec;
}
.tool-cn-from-pic .drop-zone.active .img-icon,
.tool-cn-from-pic .drop-zone:active .img-icon {opacity: 1; transform: scale(0.8);}

.tool-cn-from-pic #canvas-container {
    display: none; /* Hide canvas initially */
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #333;
}
.tool-cn-from-pic #canvas {
    width: 100%;
    height: auto;
    display: block;
}
.tool-cn-from-pic #color-display {
    position: absolute;
    top: 10px;
    left: 10px;
    display: none;
    text-align: center;
    padding: 0px;
    cursor: move;
    transition: transform 0.2s ease, opacity 0.2s ease;
}
#color-display.pop {
    transform: scale(1.08); /* Scale up more to make it visible */
    opacity: 1; /* Ensure full opacity during the pop */
}
@keyframes pop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }
    100% {
        transform: scale(1);
    }
}


.tool-cn-from-pic #color-link {
    width: 130px;
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #fff;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 1px 0px 13px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.tool-cn-from-pic #color-link h3 {font-size: 14px; line-height: 120%; display: block; width: 100%; padding: 10px; margin: 0; background-color: #fff;}
.tool-cn-from-pic #color-link h3 .hextx {font-size: 12px; color: #888; font-weight: normal; display: block; padding: 3px 0 0 0;}
.tool-cn-from-pic #color-box {
    display: block;
    width: 100%;
    height: 130px;
    margin: 0 auto;
    cursor: pointer;
}

.tool-cn-from-pic #message {
    font-size: 12px;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 8px 10px;
    border-radius: 16px;
    z-index: 10;
    border: 1px solid #fff;
}
.tool-cn-from-pic #reset-button {display: none;}
.pre-dot {
	display: inline-block;
	width: 20px; height: 20px;
	vertical-align:middle;
	margin-top: -3px;
	font-size: 0;
	border-radius: 50%;
}

.tool-cn-from-pic #color-link {
display: inline-block;
transition: transform 0.2s ease-in-out;
}

.tool-cn-from-pic .color-display-inner {
    position: relative;
}
.tool-cn-from-pic .close-color-display {
    color: #fff;
    font-size: 12px;
    display: inline-block;
    width: 24px; height: 24px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
    position: absolute;
    top: -7px;
    right: -7px;
    background-color: #000;
    border: 1px solid #fff;
    padding: 0;
}
.tool-cn-from-pic .close-color-display:hover {transform: scale(1.10);}
.tool-cn-from-pic .close-color-display span {width: 22px; margin: 0; padding: 0;}

.tool-gradient-creator {
	border-radius: 14px;
	border: 1px solid #ddd;
	padding-bottom: 6px;
	overflow: hidden;
}
.tool-gradient-controls {
	padding: 20px;
}
.tool-gradient-preview-bg {
	border-radius: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' xml:space='preserve'%3E%3Cpath fill='%23E6E6E6' d='M0 0h20v20H0z'/%3E%3Cpath fill='gray' d='M0 0h10v10H0zM10 10h10v10H10z'/%3E%3C/svg%3E");
}
.tool-gradient-preview {
	display: block;
	text-indent: -9999px;
	width: 100%;
	min-height: 300px;
	border-radius: 14px;
	margin-bottom: 10px;
}
.cn-picker {
	width: 30px;
	height: 30px;
	padding: 0;
	outline: none;
	border: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
}
.cn-picker::-webkit-color-swatch-wrapper {
	border: none;
	padding: 0;
}

.cn-picker::-webkit-color-swatch {
border: none;
border-radius: 8px;
border: 1px solid rgba(0,0,0,0.2);
}
.cn-picker-and-input {
	position: relative;
/*	margin-bottom: 10px;*/
}

.cn-picker-and-input .cn-picker {
	position: absolute;
	top: 9px; left: 9px;
}
.cn-picker-and-input .cn-input {
	text-transform: uppercase;
	display: block;
	width: 100%;
	padding-left: 50px;
}

.tool-gradient-creator label,
.tool-contrast-checker label
 {color: #888; font-size: 10px; text-transform: uppercase;}

.tool-contrast-checker {
	display: block;
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 14px;
}

.tool-contrast-checker #tool-contrast-checker-preview {
 	min-height: 300px;
 	padding: 40px;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	border-radius: 14px;
 }
#tool-contrast-checker-preview p, .tool-contrast-checker p {text-align: center; margin: 0; display: block;}
#tool-contrast-checker-preview p span {font-size: 30px; font-weight: bold;}
.contrast-result-feedback {
	font-size: 18px;
	padding: 20px;
	border: 1px solid #eee;
	border-radius: 14px;
}
.tool-contrast-controls {
	padding: 20px;
}
.tool-contrast-checker .big-text {
	display: block;
	text-align: center;
	font-size: 30px;

}
.tool-contrast-checker-result {
	display: block;
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 20px;
	margin-bottom: 20px;
}
#accessibility-feedback {
	display: block;
	padding: 10px;
	margin-top: 20px;
	border-radius: 6px;
}
.green {
  color: green;
  font-weight: bold;
  background-color: #C7FFD0;
}

.orange {
  color: #FF792E;
  font-weight: bold;
  background-color: #FFE0A9;
}

.red {
  color: #C93939;
  font-weight: bold;
  background-color: #FFC7C7;
}

.tool-color-code-converter {}
.tool-color-code-converter #color-preview {
	min-height: 200px;
	background-color: #f00;
	border-radius: 14px;
	text-indent: -9999px;
}
.tool-color-code-converter table td {padding: 10px;}
.input-button {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 10px;
}
.tool-color-palette-generator {}
.tool-color-palette-generator .cn-palettes {grid-gap: 40px;}
.tool-color-palette-generator .cn-palettes .cn-palette {gap: 4px;}

.cn-craft {
	background-color: #fff;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 0px;
	padding: 0px;
}
.cn-craft h1 {font-size: 16px;}
.cn-craft-nav {
	max-width: 320px;
	padding: 30px;
/*	border-radius: 10px;*/
/*	background-color: #fff;*/
border-right: 1px solid #ddd;
}
.cn-craft-nav-in {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
}
.cn-craft-nav-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 10px;
	opacity: 0.6;
}
.cn-craft-nav-buttons:hover {opacity: 0.8;}
.cn-craft-nav-buttons:active {opacity: 1;}

.color-palette {
	display: flex;
	width: 100%;
	margin: 0 auto;
	border-radius: 10px;
	overflow: hidden;
}

.color-palette div {
	flex: 1;
	height: 60px;
	cursor: pointer;
	border: 1px solid transparent;
	position: relative;
}
.color-palette input[type="color"] {
    width: 100%;
    height: 100%;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    opacity: 0;
}
.color-palette div:hover:after {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	opacity: 0.4;
	background-color: #000;
	top: 50%;
	left: 50%;
	margin-left: -2px;
	z-index: 100;
	position: absolute;
}

/*
.craft-tabs .craft-tab {
	display: block;
	padding: 10px 20px;
	border: 1px solid #1B1B8C;
	border-radius: 8px;
	margin-bottom: 5px;
}
.craft-tabs .craft-tab.active {background-color: #1B1B8C; color: #fff;}

.cn-craft-mockups {
	padding: 30px;
}

.craft-gallery {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 40px;
}
.craft-gallery-item svg, .craft-gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 1px;
}

.craft-gallery-item {
	display: none;
}
.craft-gallery-item.active {
	display: block;
}
*/

#scrollTopBtn {
	color: #fff;
	display: none;
	position: fixed;
	width: 50px;
	height: 50px;
	line-height: 63px;
	text-align: center;
	bottom: 20px;
	right: 30px;
	z-index: 99;
	border: none;
	background-color: #333;
	cursor: pointer;
	border-radius: 10px;
}

.page404 {
	color: #fff;
	background-color: #1E2952;
	display: table;
	width: 100%;
	min-height: 80vh;
	background-image: url(images/space.webp);
	background-size: auto 100%;
	animation: zoomBackground 25s ease-in-out infinite;
}
.page404box {
	color: #fff;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
@keyframes zoomBackground {
0% {
    background-size: 100%;
}
50% {
    background-size: 110%;
}
100% {
    background-size: 100%;
}
}
.page404box h1 {color: #fff;}
.page404box img {
	display: block;
	max-width: 160px;
	height: auto;
	margin: 0 auto;
}


@-webkit-keyframes spaceboots {
	0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
	10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
	20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
	30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
	40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
	50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
	60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
	70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
	80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
	90% { -webkit-transform: translate(1px, 2px) rotate(-1deg); }
	100% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
}
.animation-loop {
	-webkit-animation-name: spaceboots;
	-webkit-animation-duration: 10s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

.post-edit-link {
	display: inline-block;
	width: 40px; height: 40px;
	border-radius: 50%;
	text-align: center;
	line-height: 37px;
	color: #fff;
	font-size: 20px;
	background-color: rgba(0,0,0,0.3);
	border: 2px solid #fff;
	position: fixed;
	bottom: 30px; left: 30px;
}
.post-edit-link:active {background-color: #000;}



.pagination {}
.pagination a, .current {
	font-size: 14px;
	font-weight: 600;
	color: #1B1B8C;
	display: inline-block;
	width: 50px; height: 50px;
	line-height: 48px;
	text-align: center;
	/*background-color: #f0f0f0;*/
	border:  1px solid #1B1B8C;
	margin: 0 4px;
	border-radius: 10px;
}
.pagination a:hover {background-color: #1B1B8C; color: #fff;}
.pagination a:active {transform: scale(0.90); background-color: #000; border-color: #000;}
.current {border-color: #1B1B8C; background: #1B1B8C; color: #fff;}


.cat-tabs, .color-dots {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-gap: 4px;
text-align: center;
cursor: pointer;
list-style: none;
}
.color-dots li {margin: 0; padding: 0;}
.cat-tab, .color-dots li a {
display: block;
padding: 10px 10px;
border: 1px solid #ddd;
border-radius: 10px;
text-align: center;
overflow: hidden;
}
.cat-tab.active {background: #eee;}
.cat-tab:active {background: #ddd;}


.cat-content {
display: none;
}
.cat-content.active,
.cat-content[data-category="all"] {
display: block;
}

.cat-tab .dot, .color-dots li .dot {
	display: inline-block;
	width: 20px; height: 20px;
	border-radius: 4px;
	margin-bottom: -5px;
	border: 1px solid rgba(0,0,0,0.2);
}

#content {}
.post-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	background: #eee url(images/loading.svg) no-repeat center center;
}
.post-featured-image {margin-bottom: 40px;}
#content {}
#content h2 {margin-bottom: 16px;}
#content p {margin-bottom: 40px;}

#content hr {margin-bottom: 24px;}
#content hr.duallines {
	margin: 0;
	margin-top: 60px;
	margin-bottom: 55px;
	padding: 0;
	height: 3px;
	border:  none;
	border-top:  1px solid #ccc;
	border-bottom:  1px solid #ccc;
}

#content hr.flourish {
	margin: 0;
	margin-top: 60px;
	margin-bottom: 55px;
	padding: 0;
	height: 8px;
	border:  none;
	/*border-top:  1px solid #ccc;
	border-bottom:  1px solid #ccc;*/
	background: url(images/flourish.svg) repeat-x center center;
	position: relative;
	opacity: 0.5;
}

#content hr.flourish:before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #000;
	position: absolute;
	top: 1px;
	left: 0;
}
#content hr.flourish:after {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #000;
	position: absolute;
	top: 1px;
	right: 0;
}

#content .wp-block-image {display:  block; width:  100%; border:  1px solid rgba(0,0,0,0.1); border-radius: 6px; overflow: hidden; position: relative; margin-bottom: 20px;}
#content .wp-block-image img {display: block; width: 100%; height: auto!important;}
#content .wp-block-image figcaption {position: absolute; bottom: 6px; right: 6px; display: inline-block; background-color: rgba(255,255,255,0.2); border-radius: 4px; font-size: 10px; text-align: left; margin: 0; padding: 1px 4px;}
#content .wp-block-image figcaption:hover {background-color: rgba(255,255,255,0.4);}

#content .size-full {margin-bottom: 40px;}

#content ul, #content ol {
	margin: -16px 0 34px 24px;
}
#content ul li, #content ol li {
	margin: 0 0 12px 0px;
}
#content table {margin-bottom: 40px;}
#content table td, #content table th {padding: 10px 12px;}

#content .color-display {
    font-size: 0;
    display: inline-block;
    width: 18px;
    height: 18px;
    
    margin-right: 5px;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 4px;
}
#content table td .color-display {
	width: 100%;
	height: 40px;
}

#content blockquote {
	width: 100%;
	font-weight: 700;
	display: inline-block;
	background-color: #E8EAF9;
	overflow: hidden;
	border-radius: 10px;
	color: #555;
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='20px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'%3E%3Cg opacity='0.4'%3E%3Cpath fill='%23c0c0c0' d='M6.868,19.434c0.505,0,1.278-0.033,2.32-0.1v-3.887c-3.165,0-4.744-1.465-4.744-4.393l0.052-1.766h3.278V0 H0v10.045C0.001,16.305,2.291,19.434,6.868,19.434z M20,15.447v3.887c-0.906,0.066-1.545,0.1-1.918,0.1 c-4.576,0-6.863-3.129-6.863-9.389V0h7.773v9.289h-3.281l-0.049,1.767C15.66,13.814,17.109,15.277,20,15.447z'/%3E%3C/g%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 28px auto;
	margin: 10px 0;
	margin-bottom: 30px;
}
#content blockquote div {
	padding: 30px 50px;

	background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='20px' height='20px' viewBox='0 0 20 20' enable-background='new 0 0 20 20' xml:space='preserve'%3E%3Cg opacity='0.4'%3E%3Cpath fill='%23c0c0c0' d='M13.134-0.001c-0.505,0-1.278,0.033-2.32,0.1v3.887c3.165,0,4.744,1.465,4.744,4.393l-0.052,1.766h-3.278 v9.288h7.773V9.387C20,3.127,17.711-0.001,13.134-0.001z M0.001,3.985V0.098c0.906-0.066,1.545-0.1,1.918-0.1 c4.576,0,6.863,3.129,6.863,9.389v10.045H1.009v-9.289h3.281l0.049-1.767C4.341,5.618,2.892,4.155,0.001,3.985z'/%3E%3C/g%3E%3C/svg%3E");
	background-position: top right;
	background-repeat: no-repeat;
	background-size: 28px auto;
}

#content blockquote div p {color: #555; font-style: italic; margin: 0;}
#content blockquote div span {font-size: 14px!important; display:block; width: 100%; text-align: right; font-style: normal!important;}
#content .simplefavorite-button {display: none;}


.name-a-color {
	background-color: #E8EAF9;
	padding: 30px;
	border-radius: 10px;
}
.name-a-color .full {
	display: block;
	width: 100%;
}
.name-a-color label.full {
	margin-bottom: 10px;
}
.name-a-color .cn-button {
	display: inline-block;
	width: auto;
}
.cn-radio {margin-right: 10px; display: inline-grid;}

.visualizer-cols {
	display: grid;
	grid-template-columns: 240px 1fr;
	grid-gap: 0;
}
.visualizer-col1, .visualizer-col2 {
	padding: 30px;
}

.visualizer-col1 {
	width: 100%;
	border: 1px solid #eee;
}
.visualizer-col1 h1 {font-size: 18px; margin-bottom: 15px; line-height: 150%;}
.visualizer-col2 h2 {font-size: 16px; margin-bottom: 15px;}
.visualizer-col1 h1 .hxtitle {
	display: block;
	font-size: 12px!important;
	color: #666;
	
}
.visualizer-col2 {position: relative;}
.visualizer-col2 .section { display: none; }
.visualizer-col2 .tabs {
	padding-bottom: 16px;
	width: 100%;
/*	text-align: center;*/
}

.visualizer-col2 .tabs button {
flex: 1;
color: #555;
border: none;
padding: 8px 10px; 
background: #fff;
border: 1px solid #eee;
cursor: pointer;
border-radius: 5px;
margin-bottom: 4px;
}
.visualizer-col2 .tabs button.active {
	color: #000;
	background-color: #eee;
}
.tab-content { display: none; }
.tab-content.active { display: block; }


.visualizer-color-menu {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
	position: sticky;
	top: 20px;
	z-index: 100;
}

.visualizer-nav-button-items {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 6px;
}
.visualizer-nav-button {
	font-size: 14px;
	text-align: left;
	border: none;
	border: 1px solid transparent;
	color: #333;
	display: block;
	width: 100%;
	cursor: pointer;
	padding: 10px 14px;
	background-color: #fff;
	border-radius: 8px;
}

.visualizer-nav-button:hover {
	color: #000; 
	background-color: #eee;
	border-color: #eee;
}
.visualizer-nav-button.active,
.visualizer-nav-button:active {
	background-color: #ddd;
}
.visualizer-col2 .mockups ul {
	grid-template-columns: repeat(2, 1fr);
}
.visualizer-palettes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;
}
.visualizer-palette {
	border: 1px solid #eee;
	border-radius: 12px;
	overflow: hidden;
}
.visualizer-palette ul {
	display: flex;
	gap: 2px;
	list-style: none;
	margin: 0; padding: 0;
}
.visualizer-palette ul li {
	flex: 1;
	min-height: 300px;
	font-size: 0;
}
.visualizer-palette .info {
	padding: 10px 20px;
	display: grid;
	grid-template-columns: 1fr auto;
}
.visualizer-palette .info h3 {font-size: 13px; margin: 0; padding: 5px 0;}

.visualizer-mockups,
.visualizer-backgrounds,
.visualizer-patterns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 10px;
}
.visualizer-patterns,
.visualizer-backgrounds {grid-gap: 10px;}

.visualizer-mockups svg,
.visualizer-backgrounds svg,
.visualizer-patterns svg {
	display: block;
	width: 100%;
	height: auto;
}
.visualizer-patterns svg {
	min-height: 400px;
}
.visualizer-color-codes {margin-bottom: 30px;}
.visualizer-color-codes th,
.visualizer-color-codes td {
	padding: 12px;
	border: none;
}
.visualizer-color-codes tr {
	border: 1px solid #ddd;
}
.visualizer-color-codes tr:nth-child(odd) {
	background-color: #eee;
}

.visualizer-mockup,
.visualizer-effect,
.visualizer-pattern {
	position: relative;
}
.visualizer-mockup-info {
	position: absolute;
	display: grid;
	grid-template-columns: 1fr 40px;
	grid-gap: 10px;
	width: 100%;
	bottom: 0;
	padding: 10px 20px;
	background: rgba(0, 0, 0, 0) linear-gradient(360deg, rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0)) repeat scroll 0% 0% / auto padding-box border-box;
	transition: all ease 0.2s;
}
.visualizer-mockup:hover .visualizer-mockup-info,
.visualizer-effect:hover .visualizer-mockup-info,
.visualizer-pattern:hover .visualizer-mockup-info
 {
	background: rgba(0, 0, 0, 0) linear-gradient(360deg, rgba(0, 0, 0, 0.64), rgba(0, 0, 0, 0)) repeat scroll 0% 0% / auto padding-box border-box;
}
.visualizer-mockup-info h3 {
	color: #fff;
	font-size: 14px;
	margin: 0;
	padding: 6px 0 0 0;
}
.visualizer-mockup-info .download-png {
	border: none;
	display: inline-block;
	background-color: transparent;
	color: #fff;
	width: 40px; height: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	cursor: pointer;
}
.visualizer-mockup-info .download-png:hover {
	background-color: rgba(0,0,0,0.3);
}
.visualizer-mockup-info .download-png:active {
	background-color: rgba(0,0,0,0.6);
	transform: scale(0.94);
}
.visualizer-icons {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 20px;
	list-style: none;
}
.visualizer-icons li {
	border: 1px solid #eee;
	padding: 10px;
	border-radius: 6px;
	text-align: center;
/*	height: 100px;*/
	aspect-ratio: 1 / 1;
	position: relative;
}
.visualizer-icons li span {
	font-size: 40px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.9);
}

#cn-login {
	max-width: 400px;
	margin: 0 auto;
}


.hidden {display: none;}
.success-message {color: green; font-size: 16px; background-color: #adffcd; border: 2px solid #fff; border-radius: 10px; text-align: center; width: 100%; padding: 10px 20px; margin: 0;}
.success-message p {margin: 0;}
.success-message a {text-decoration: underline;}
#form-messages .error,
#form-messages .success {
	color: #000;
	text-align: center;
	border-radius: 8px;
	padding: 10px 20px;
	margin-bottom: 30px;
	display: block;
	background-color: #fff;
	border: 1px solid #000;
}
#form-messages .error {background-color: #ff8fa5;}
#form-messages .success {background-color: #adffcd;}


.pricing {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: 1fr 1fr;
}
.level-box {
	background-color: #fff;
	text-align: center;
	overflow: hidden;
	border: 1px solid #f0f0f0;
	padding: 10px;
	border-radius: 14px;
}
.level-box:hover {
	box-shadow: 1px 1px 30px 5px rgba(0,0,0,0.060);
}
.level-box h2 {color: #fff; font-size: 26px; background-color: #CFCFCF; padding: 30px; line-height: 100%; margin: 0;}
.level-box h2 span {display: block; font-size: 14px; font-weight: 200; margin-top: 5px;}
.level-box h2 span em {display: inline-block; font-style: normal; width: 100px;}
.level-box table {margin: 0; padding: 0; border-collapse: collapse; width: 100%;}
.level-box table td {border: none; padding: 10px; text-align: center; font-size: 14px; font-weight: 500;}
.level-box table tr:nth-child(even) {background-color: #f9f9f9;}

.color-categories {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 10px;
}
.color-categories li {
	font-size: 14px;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.1);
	transition: all ease 0.2s;
}
.color-categories li:hover {
	transform: scale(0.90);
}
.color-categories li svg {
	display: block;
	width: 100%;
	height: auto;
}
.color-categories li .color-category-name {
	position: absolute;
	top: 50%;
	display: block;
	width: 100%;
	margin-top: -6px;
	text-align: center;
	font-size: 12px;
}

.horizontal-scroll-container {
	display: grid;
	grid-template-columns: 40px 1fr 40px;
	grid-gap: 4px;
	border-radius: 5px;
	border: 1px solid #ddd;
	padding: 10px;
}
.horizontal-scroll-wrapper {
overflow-x: auto;
overflow-y: hidden; /* Hide vertical scrollbar */
flex: 1;
white-space: nowrap;
/*scroll-behavior: smooth;*/
-webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.horizontal-scroll-wrapper::-webkit-scrollbar {
display: none;
}
.horizontal-scroll-content {
display: inline-flex;
gap: 10px;
}
.color-tabs li a {
	display: inline-block;
	min-width: 72px;
	padding: 0 14px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	border-radius: 6px;
}
.color-tabs li a.current-color {
	outline: 2px solid #000;
	transform: scale(0.9);
}
.color-tabs li a:hover {opacity: 0.9}
.color-tabs li a:active {opacity: 1; transform: scale(0.960);}
.color-tabs li { list-style: none; text-align: center;}
.horizontalBtns {
	color: #000;
	display: block;
	border: none;
	width: 40px;
	height: 40px;
	line-height: 40px;
	border-radius: 50%;
	text-align: center;
	cursor: pointer;
}
.horizontalBtns:hover {background-color: #eee;}
.horizontalBtns:active {background-color: #ddd;}

.horizontalBtns.disabled {
    color: #ddd; /* Change color to indicate disabled state */
    cursor: not-allowed;
}

.search-unlock p {
	display: inline-block;
	font-size: 16px;
	margin: 0;
}

.pattern-smallscreen {cursor: zoom-in;}

.pattern-fullscreen {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%!important;
	height: 100%!important;
	cursor: zoom-out;
	z-index: 100;
}
#pmpro_account-profile .pmpro_list {margin-top: 20px!important;}
#pmpro_account-profile .pmpro_section_title,
#pmpro_account-membership .pmpro_section_title,
#pmpro_order_list .pmpro_section_title
 {display: none!important;}


/* Modal Background */
.modal {
	display: none; /* Hidden by default */
	position: fixed;
	z-index: 900;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.6);
	padding: 20px;
/*	display: flex;*/
    align-items: center;
    justify-content: center;
}

/* Modal Content */
.modal-content {
	background-color: #fff;
	
	padding: 40px;
	width: 80%;
	max-width: 600px;
	position: relative;
	border-radius: 14px;
}
.width-min {max-width: 440px}
.modal-btn {
	display: inline-block;
	min-width: 100px;
}
.close-modal {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 32px;
	height: 32px;
	display: inline-block;
	font-size: 28px;
	font-weight: bold;
	cursor: pointer;
	line-height: 32px;
}
.steps {
/*	background-color: #eee;*/
	border: 2px dotted #ddd;
	padding: 30px;
	border-radius: 14px;
	grid-gap: 30px;
	margin-bottom: 40px;
}
.steps img {
	display: block;
	width: 100%;
	height: auto;
}
.steps h2 {
	text-align: left;
}
.steps ol, .steps ul {
	text-align: left;
	margin: 16px 0 0 0;
}


#cn-privacy-popup{
	display:none;
	z-index:600;
	position:fixed;
	width:100%;
	right:0;
	bottom:0;
	padding:0px;
	font-size:11px;
	background:transparent;
	text-align:center
}
#cn-privacy-popup p{
	font-size: 11px;
	line-height:180%;
	margin:0;
	color:#fff;
	padding:0;
	padding-right:50px
}
#cn-privacy-popup p a{
	color:#fff;
	text-decoration:underline!important
}
#cn-privacy-popup p a:hover{
	color:#000;
	text-decoration:underline
}
#cn-privacy-popup .centered{
	max-width:1060px;
	margin:0 auto;
	position:relative;
	padding: 8px;
	background-color:#1A8DFF;
	border-radius:4px;
	box-shadow:0 0 10px rgba(0,0,0,0.2)
}
#cn-privacy-popup-close{
	position:absolute;
	top:50%;
	padding: 0;
	margin-top:-15px;
	right:10px;
	width:30px;
	height:30px;
	line-height: 18px;
	border-radius:50%;
	font-size:14px;
	border:none;
	display:inline-block;
	cursor:pointer;
	color:#1A8DFF;
	background-color:#fff;
	text-align:center;
	border:2px solid #fff;
	outline:none
}
#cn-privacy-popup-close:hover{
	opacity: 0.9;
}


/* Responsive */
@media screen and (max-width: 720px) {
	
h2 {font-size: 22px;}
h3 {font-size: 16px;}
h4 {font-size: 15px;}
h5 {font-size: 14px;}

.nodesktop {display: block!important;}
.nomobile {display: none!important;}
.header .header-inside {
	grid-template-columns: auto 1fr auto  auto auto;
	grid-gap: 20px;
}
.hero {padding: 30px 0;}
.hero h1 {font-size: 30px;}
.hero .color-picker-wrapper {margin: 0 auto;}
.hero-inside {grid-template-columns: 1fr; grid-gap: 50px;}
.hero-buttons {max-width: 80%; margin: 0 auto;}
.hero-column1, .hero-column2 {text-align: center;}
.hero-column1 > div {width: 100%; margin: 0 auto;}
.hero-column2 figure {height: 160px;}
.hero-column2 figure.home-tool p {bottom: 12px; white-space: nowrap;}

.hero .hex-rgb-info {font-size: 14px; padding-bottom: 10px;}

.featured {padding: 20px;}
.featured ul {grid-template-columns: repeat(2, 1fr); margin: 0 auto;}
.featured ul li {padding: 20px 10px; text-align: left;}

.featured {padding: 20px;}
.featured ul {grid-template-columns: repeat(2, 1fr);}
.featured ul li {padding: 20px 10px;}

.home-text {width: 100%;}

.color-posts {grid-template-columns: repeat(2, 1fr); grid-gap: 30px;}
.color-posts li h3,
.color-posts li h2,
.color-posts li h4 {font-size: 12px;}

.showcase {
	min-height: 100%;
	padding: 20px 0;
}
.showcase-inside {grid-template-columns: 1fr; grid-gap: 20px; text-align: center;}
/*.showcase-inside {width: 70%;}*/
.showcase-inside h2 {font-size: 20px;}
.showcase-inside img {margin: 0 auto;}

/*.popular-hexcode ul {grid-template-columns: repeat(5, 1fr);}*/
.cat-tabs, .color-dots {grid-template-columns: repeat(5, 1fr);}

.internal-nav {position: inherit;}

.internal-nav .centered {
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 5px;
}
.internal-nav .centered > :first-child {
	grid-column: 1 / -1;
}


.cn-blog-posts {grid-template-columns: 1fr;}

.hero-subpage h1 {font-size: 26px;}
.footer-inside {grid-template-columns: 1fr; text-align: center;}

.cols {grid-template-columns: 1fr; grid-gap: 20px;}
.cols-reverse .col1 {order: inherit;}
.cols {text-align: center;}
.post-color-preview {margin: 0 auto; min-width: inherit; max-width: 80%;}

.mockups ul {grid-template-columns: repeat(2, 1fr);}
.tool-color-palette-generator .cn-palettes {grid-gap: 20px; grid-template-columns: 1fr;}
.cn-patterns {grid-template-columns: repeat(2, 1fr);}

.visualizer-cols {grid-template-columns: 1fr;}
.visualizer-col1 {
	width: 100%;
	
}
.visualizer-col1 h1 {font-size: 22px; text-align: center;}
.visualizer-col2 h2 {font-size: 16px; text-align: center;}

.visualizer-col2 .tabs {
	text-align: center;
}

.visualizer-color-menu {
	grid-template-columns: 1fr 1fr;
	grid-gap: 50px;
	border-radius: 10px;
	border: 1px solid #ddd;
	background-color: #fff;
	
}
.visualizer-color-menu .cn-picker-and-input .cn-input {border: none;}

.visualizer-main-menu-btn {
	width: 100%;
	border: none;
	color: #000;
	text-align: right;
	background-color: #fff;
	font-size: 13px;
	padding: 0px 20px;
	border-radius: 10px;
	height: 50px;
	line-height: 48px;
}
.visualizer-nav-buttons {display: none;}
.visualizer-nav-buttons {
  display: none; /* Hidden by default */
}

.visualizer-menu-wrapper {
	position: relative;
}
.visualizer-nav-buttons.active {
  display: block; /* Show when active */
  position: absolute;
  top: 60px;
  right: 0;
  width: 200px;
  background-color: #fff;
  padding: 20px; 
  border-radius: 10px;
  border: 1px solid #ddd;
}

/*.visualizer-nav-buttons { display: flex; }
.visualizer-nav-buttons .cn-picker-and-input,
.visualizer-nav-buttons .cn-button {min-width: 130px; width: auto;}*/
.visualizer-patterns svg {min-height: 180px;}

.pricing {grid-template-columns: 1fr;}
.visualizer-palettes {grid-template-columns: 1fr; grid-gap: 30px;}
.visualizer-palette ul li {min-height: 90px;}
.visualizer-palette .info h3 {font-size: 12px;}
.visualizer-shades .shades {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px;}
.color-categories, .popular-hexcode ul {grid-template-columns: repeat(3, 1fr); grid-gap: 20px;}
.visualizer-mockup-info {padding: 10px;}

.visualizer-icons {grid-template-columns: repeat(5, 1fr); grid-gap: 10px;}
.visualizer-icons li span {font-size: 30px;}

}

@media screen and (max-width: 500px) {
.featured ul {grid-template-columns: 1fr;}

.hero-column2 {padding: 30px;}
.hero-column2 {width: 80%; margin: 0 auto;}
.hero-column2 figure {height: 140px;}
.hero-column2 figure.home-tool svg {transform: scale(0.5); margin: 0 auto;}
.hero-column2 figure.home-tool svg:hover {transform: scale(0.6);}
.hero-column2 figure img {margin-top: -20px;}

.tool-cn-from-pic .drop-zone {min-height: 200px;}
.hero-subpage.space-top-xl {padding-top: 40px;}
.hero-subpage.space-bottom-xl {padding-bottom: 40px;}
.post-color-preview {margin: 0 auto; min-width: inherit; max-width: 90%;}
}


@media screen and (max-width: 400px) {
.cn-logo .logo-text {font-size: 18px;}
.header .header-inside {grid-gap: 14px;}
.hero h1 {font-size: 28px;}
.hero-buttons {max-width: 100%;}
}


@media screen and (max-width: 352px) {
.cn-logo .logo-text {font-size: 0px;}
.hero-column2 figure {height: inherit; width: 90%; aspect-ratio: 1 / 1;}
}