/*
Theme Name: Color Name 2.3
Author: Simplygraphix
Author URI: https://www.color-name.com/
Description: Theme developed by Keshav Naidu.
Version: 2.3
Tags: Clean, Simple, White, Scape, Open
Text Domain: www.color-name.com
*/


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

* {-moz-box-sizing: border-box; box-sizing: border-box; font-family:  'Poppins', Arial, Verdana; margin: 0; padding: 0; text-decoration-line: none;/* letter-spacing: 0.5px;*/}

body {color: #333; font-size: 14px; line-height: 150%; font-weight: normal;}

html {scroll-behavior: smooth; -webkit-text-size-adjust: 100%;}
a {color: #000; text-decoration: none;}
a:hover {color: #3e4a5a;}
input, textarea {/*-webkit-appearance: none;*/ outline: none; -moz-border-radius: 0; border-radius: 0;}
button {outline: none;}
p {font-size: 14px; padding: 2px 0 33px 0; line-height: 180%; font-weight: 400;}
p a {text-decoration: underline;}
h1, h2, h3, h4, h5, h6 {padding: 0 0 4px 0; margin: 0; margin-top: -3px; font-weight: bold; line-height: 130%; color: #000;}
h1 {font-size: 34px; color: #000; padding: 0 0px 8px 0;}
h2 {font-size: 24px; color: #000;}
h3, .h3 {font-size: 18px; color: #555;}
h4 {font-size: 16px; color: #555;}

table {
	font-size: 12px;
	border-collapse: collapse;
	width: 100%;
	margin-top: 8px;
	margin-bottom: 30px;
	text-align: left;
}
table td, table th {border: 1px solid #f0f0f0!important; padding: 10px;}
table th {background-color: #f9f9f9; font-weight: bold;}

select,
textarea,
input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=search],
input[type=button],
input[type=submit],
button,
.button,
.viewmore a,
.input-style,
.button-style
{
	font-size: 12px;
	display: inline-block;
	border: 1px solid #ddd;
	height: 38px;
	line-height: 38px;
	padding: 0px 12px;
	border-radius: 4px;
	outline: none;
	-webkit-appearance: none;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
}

select:hover,
textarea:hover,
input[type=text]:hover,
input[type=password]:hover,
input[type=number]:hover,
input[type=email]:hover,
input[type=search]:hover,
input[type=button]:hover,
button:hover,
.input-style:hover,
.button:hover,
.viewmore a:hover,
.button-style:hover
{
	/*border-color: #ddd;*/
}

select:focus,
textarea:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=search]:focus
{
	border-color: #999;
	outline: none;
}

.button,
.button-style,
.viewmore a,
button,
input[type=submit],
input[type=button] {
	color: #fff;
	background: #333;
	/*text-transform: uppercase;*/
	border: none;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

.button-style:hover,
.viewmore a:hover,
.button:hover,
button:hover,
input[type=submit]:hover,
input[type=button]:hover {
	background: #666;
	color: #fff;
	text-decoration: none!important;
}

.button-style:active,
button:active,
.viewmore a:active,
input[type=submit]:active,
input[type=button]:active {
	background: #000;
	transform: scale(0.94);
}
.button:active {
	transform: scale(0.94);
}

input[type="button"]:disabled, button:disabled {
	background: #f0f0f0;
	color: #c0c0c0;
}
.invertbutton {
	background: transparent!important;
	color: #333!important;
	border: 1px solid #333!important;
}

.viewmore a {
	/*text-transform: uppercase;*/
	padding: 0 30px;
}

.clr {clear: both;}
.centered {max-width: 1100px; margin: 0 auto;}
.centered-small {max-width: 900px; margin: 0 auto;}

.float-right {float: right;}
.float-left {float: left;}
.space-top {padding-top: 40px;}
.nospace-bottom {padding-bottom: 0;}
.space-bottom {padding-bottom: 40px;}
.space-top-small {padding-top: 30px;}
.space-bottom-small {padding-bottom: 30px;}
.space-top-vsmall {padding-top: 16px;}
.space-bottom-vsmall {padding-bottom: 16px;}
.align-center {text-align: center;}
.uppercase {text-transform: uppercase;}
.gray-bg {background-color: #fafbfc;}
hr {background: none; border: none; border-top: 1px solid #f0f0f0;}
strong, b {font-weight: 800!important; }

header {
	width: 100%;
	height: 60px;
	padding: 16px 0;
	/*position: sticky;
	top: 0;
	z-index: 100;*/
}


.headerin {
	display: grid;
	grid-template-columns: auto 1fr auto auto 20px;
	grid-gap: 20px;
}
.
.logg-section {
	/*background-color: pink;*/
}
.logg {min-width: 180px;}
.logg h4 {text-transform: capitalize; color: #000; font-weight: bold; font-size: 13px; padding: 12px 16px 10px 16px; line-height: 100%; border-bottom: 1px solid #f0f0f0;}
.login-form {display: grid; grid-template-columns: 1fr; grid-gap: 12px; padding: 16px;}
.login-form input, .login-form button {display: block!important; width: 100%!important;}
.login-form .button-style {text-align: center; display: block; width: 100%;}
.login-form p {font-size: 11px; margin: 8px 0 5px 0; padding: 0;x}
.logg-items {list-style: none; margin: 0; padding: 8px 16px;}
.logg-items li {font-size: 12px;}
.logg-items li a {display: block; padding: 5px 8px; border-radius: 4px; transition: all 0.2s ease-in-out;}
.logg-items li a:hover {color:  #000; background-color: #f0f0f0;}
.logg-items li a:active {background-color: #ddd;}


.login-btn {
	font-size: 12px;
	/*text-transform: uppercase;*/
	display: inline-block;
	padding: 0 20px;
	height: 28px;
	line-height: 26px;
	border: 1px solid #fff;
	border-radius: 4px;
	background: transparent!important;
}


.login-btn:active {transform: scale(0.96)!important;}
.username {
	color: #fff;
	display: inline-block;
	font-size: 12px;
	line-height: 30px;
	height: 30px;
	padding: 0;
	text-transform: capitalize;
}

.username img {display: inline-block; width: 26px; height: 26px; margin-bottom: -8px; margin-left: 5px; border-radius: 50%;}
.control {
display: inline-block;
position: relative;
}

.trigger {
  cursor: pointer;
  user-select: none;
}


.dropdown {
/*display: none;*/
	visibility: hidden;
  opacity: 0;
  transform: scale(0.80);
  position: absolute;
  top: 28px;
  padding: 0px;
  z-index: 10;
  background-color: #fff;
  transition: all 0.080s ease-in-out;
  box-shadow: 0 0 22px 1px rgba(0,0,0,0.1);
  border-radius: 4px;
  /*overflow: hidden;*/
}
.ar {}
.ar:before {
	content: '';
	display: block;
	width: 10px; height: 10px;
	position: absolute;
	right: 24px;
	top: -9px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath fill='%23fff' d='M0 10l5-6 5 6z'/%3E%3C/svg%3E");
}
.dropdown.is-open {
  /*display: block;*/
  top: 44px;
  visibility: visible;
  transform: scale(1,1);
  opacity: 1;
}
.dropdown h4 {font-size: 14px; font-weight: 400; color: #333; padding: 20px 20px 18px 20px;}
.right0 {right: 0;}
.arrow-top {}
.arrow-top:after {
  content: '';
  position: absolute;
  top: -10px;
  right: 18px;
  display: block;
  width: 0;
      height: 0;
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 12px solid #fff;
  
}
.duddu {
position: relative;
padding-right: 16px!important;
}
.duddu:after {
  content: '';
  display: inline-block;
  /*width: 8px; height: 8px;
  background-color: red;*/

  	width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 6px solid #ccc;
      position: absolute;
      right: 2px;
      top: 12px;


}

.trans {transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;}
.zoom:hover, .zoomed {transform: scale(1.5, 1.5);}



blockquote {
	font-weight: 700;
	display: inline-block;
	color: rgba(0,0,0,0.4);
	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;
}
blockquote div {
	padding: 14px 36px 0 36px;
	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;
}

blockquote div p {color: rgba(0,0,0,0.4); font-style: italic;}
blockquote div span {font-size: 14px!important; display:block; width: 100%; text-align: right; font-style: normal!important;}
/*
blockquote.whitequote {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='%23FFFFFF' 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")!important;}
blockquote.whitequote div {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='%23FFFFFF' 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")!important;}
blockquote.whitequote div p, blockquote.whitex div span {color: rgba(255,255,255,0.7)!important;}
*/

ul {
	margin-left: 15px;
	margin-bottom: 20px;
	list-style: none;
}


#information p {text-align: justify;}
#information .simplefavorite-button {display: none;}
.icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url(images/icons.svg);
	background-repeat: no-repeat;
	background-position: 0 0;
}

.grid {
	display: grid;
  grid-template-columns: auto 90px;
  grid-gap: 5px;
  line-height: 100%;
}

.logo {
	color: #fff;
	float: left;
	font-size: 20px;
	line-height: 24px;
	display: inline-block;
	margin: 2px 0 0 0px;
	padding-left: 33px;
	position: relative;
}
.logo:hover {color: #fff; text-decoration: none;}

.logo:before {
	content: '';
	position: absolute;
	display: block;
	left: 0;
	width: 24px; height: 24px;
	background-image: url("data:image/svg+xml,%3C%3Fxml%20version='1.0'%20encoding='utf-8'%3F%3E%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%3E%3Cpath%20fill='%23ffffff'%20d='M48,5a5,5,0,00-5-5H5a5,5,0,00-5,5v38a5,5,0,005,5h38a5,5,0,005-5V5zM37,34.531A2.468,2.468,0,0134.531,37H17.833L11,42.75V13.469A2.468,2.468,0,0113.469,11h21.062A2.468,2.468,0,0137,13.469v21.062z'/%3E%3C/svg%3E");
	background-size: 100% auto;
}

nav {float: right;}
nav ul {list-style: none; margin-top: 0px; margin-right: -10px;}
nav ul li {display: inline-block; font-size: 12px;/* letter-spacing: 1px;*/ padding: 0 2px;}
nav ul li a {display: inline-block; color: #fff; font-weight: normal; /*text-transform: uppercase;*/ line-height: 28px; height: 28px; padding: 0px 10px; border : 1px solid transparent; border-radius: 4px;}
nav ul li a:hover {color: #fff;}
nav ul li a:hover {color: #fff; border-color: rgba(255,255,255,0.8);}
nav ul li a:active {transform: scale(0.94);}
.search-triger {
	font-size: 14px;
	color: #fff;
	display: inline-block;
	width: 18px;
	height: 28px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
}

.welcome {
	width: 100%;
	display: block;
	background-color: yellow;
}
.welcome .welcome-child {
	color: #fff;
	padding-top: 8vh;
	padding-bottom: 8vh;
}

.welcome .welcome-child .centered {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 40px;
}

.welcome-title {display: table; width: 100%;}
.welcome-title-child {width:  100%; display: table-cell; vertical-align: middle;}

.welcome .welcome-child h1 {
	color: #fff;
	font-size: 50px;
	margin: 0; padding: 0 0 12px 0;
}
.welcome .welcome-child h2,
.welcome .welcome-child h3,
.welcome .welcome-child h4,
.welcome .welcome-child p {color:  #fff; font-size: 16px; padding: 0; margin: 0 0 24px 0;}
/*
.welcome .welcome-child .centered {
	display: grid;
	grid-template-columns: 1fr 260px;
	grid-gap: 40px;
}
*/
.welcome-child p {}

.welcome-like-download {
	max-width: 300px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 16px;
/*	background-color: rgba(0, 0, 0, 0.2);*/
	margin-top: 30px;
}
.welcome-like .simplefavorite-button {
	color: #fff;
	display: block;
	width: 100%;
	background-color: transparent;
	border: 1px solid #fff;
}
.welcome-like .active {opacity: 1!important;}
.welcome-like .sf-icon-love {font-size: 13px; display: inline-block; transition: all 0.2s;}

.welcome-like .active .sf-icon-love {color: #FF73A5; background-color: #fff; display: inline-block; padding: 4px; border-radius: 50%;}

.welcome-like-download .button-style {
	color: #fff;
	display: block;
	width: 100%;
	background-color: transparent;
	border: 1px solid #fff;
}

.main-title h1 {margin-bottom: 0; padding-bottom: 0;}
.main-title p {text-align: center; font-size: 12px;}

.squar {
	display: block;
	width: 230px;
	height: 230px;
	/*border: 20px solid #fff;*/
	position: relative;
	text-align: center;
	border-radius: 12px;
	background-image: url("data:image/svg+xml,%3C%3Fxml%20version='1.0'%20encoding='utf-8'%3F%3E%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='230'%20height='230'%3E%3Cpath%20fill='%23ffffff'%20d='M12.489,0C5.592,0,0,5.592,0,12.489v205.023C0,224.408,5.592,230,12.489,230h205.023c6.896,0,12.488-5.592,12.488-12.488V12.489C230,5.592,224.408,0,217.512,0H12.489m9.366,27.269a5.414,5.414,0,015.414-5.414H202.73a5.414,5.414,0,015.414,5.414V202.73a5.414,5.414,0,01-5.414,5.414H41.92l-20.065,14.57V27.269z'/%3E%3C/svg%3E");
	background-size: 100% auto;
}
.color_name_slide {
	display: block;
	font-size: 11px;
	letter-spacing: 1px;
	width: 100%;
	text-align: center;
	position: absolute;
	color: #fff;
	z-index: 50;
	bottom: 22px;
}
.color_name_slide span {
	color: #fff;
	display: inline-block;
	background-color: rgba(0,0,0,0.3);
	padding: 1px 10px;
	border-radius: 5px;
}
.squar div div {
	position: absolute; width: 100%; height: 100%; display: block; bottom: 0px; margin: 0 auto;
	border-radius: 12px;
	background-image: url("data:image/svg+xml,%3C%3Fxml%20version='1.0'%20encoding='utf-8'%3F%3E%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='230'%20height='230'%3E%3Cpath%20fill='%23ffffff'%20d='M12.489,0C5.592,0,0,5.592,0,12.489v205.023C0,224.408,5.592,230,12.489,230h205.023c6.896,0,12.488-5.592,12.488-12.488V12.489C230,5.592,224.408,0,217.512,0H12.489m9.366,27.269a5.414,5.414,0,015.414-5.414H202.73a5.414,5.414,0,015.414,5.414V202.73a5.414,5.414,0,01-5.414,5.414H41.92l-20.065,14.57V27.269z'/%3E%3C/svg%3E");
	background-size: 100% auto;

}
.squar img {position: absolute; width: 186px; height: auto; display: block; left: 22px; bottom: 22px; margin: 0 auto;}

.squar .download-cover {
	opacity: 0;
	position: absolute;
	bottom: 24px; right: 28px;
	color: #fff;
}
.squar:hover .download-cover {
	opacity: 1;
}
.finder {
	max-width: 400px;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 12px;
	margin-top: 20px;
}
.onsearch {
	background-color: #f0f0f0;
	padding: 20px;
	max-width: 100%;
}

.labels {}

.finder input.new-input-style {
	background: none;
	border: none;
	border-bottom: 1px solid #fff;
	border-radius: 0;
	display: block;
	width: 100%;
	-moz-appearance: none;
	-webkit-appearance: none;
	outline: none;
	font-size: 12px;
	height: 26px;
	padding: 0 22px 0 10px;
	line-height: 25px;
	letter-spacing: 1px;
	color: #fff;
	text-transform: uppercase;
}
.finder input:focus {}

.find {
	position: relative;
}

.picker {
	display: block;
	position: relative;
}
.picker input {padding-left: 30px!important;}

.pik {position: absolute; left: 0; top: 1px; display: inline-block; font-size: 0;  width: 22px; height: 22px; padding: 0; outline: none; border-radius: 50%; border: 1px solid #fff; cursor: pointer;}

.find-button {
	position: absolute;
	right: 0;
	top: 0;
	display: inline-block;
	font-size: 15px;
	width: 22px; height: 22px;
	color: #fff;
	background: transparent;
	border: none;
	margin-top: 2px;
	text-align: center;
	line-height: 25px;
	padding: 0;
	cursor: pointer;
}
.find-button:hover, .find-button:active {color:  inherit; background: transparent;}
.color-code {
color: #fff;
letter-spacing: 1px;
padding: 0px 0 12px 0;
}


.radio {
  display: inline-block;
  position: relative;
  height: 20px;
  line-height: 20px;
  padding-left: 26px;
  padding-right: 10px;
  cursor: pointer;
  font-size: 12px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* Hide the browser's default radio button */
.radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
	border: 2px solid #fff;
  border-radius: 50%;
  opacity: 0.5;
  transition: all 0.3s ease-in-out;
}

/* On mouse-over, add a grey background color */
.radio:hover input ~ .checkmark {
opacity: 1;
}

/* When the radio button is checked, add a blue background */
.radio input:checked ~ .checkmark {
opacity: 1;
border-width: 6px;

}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio input:checked ~ .checkmark:after {
  display: block;
}


.scroll {
	color: #fff;
	display: inline-block;
	margin: 0 auto;
	line-height: 40px;
	text-align: center;
	border-radius: 50%;
	width: 40px; height: 40px;
	background-color: transparent;
	border: 1px solid #fff;
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -20px;
	opacity: 0.7;
}
.scroll:hover {color: inherit; opacity: 1;}

.menu {display: none;}

.download-nav {
	text-align: center;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 12px;
}
.download-nav a {
	display: block;
	font-size: 12px;
	color: #333!important;
	padding: 14px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	line-height: 14px;
	/*background-color: #555;*/
}
.download-nav a:hover {background-color: #f0f0f0;}
.download-nav a:active {transform: scale(0.96); background-color: #ddd;}

.download-nav a span {
	/*display: block;*/
	font-size: 10px;
	margin-right: 5px;
	color: #bbb;
	width: 100%;
	text-align: center;
}
.color-posts, .pattern-posts {
	list-style: none;
	display: grid;
	grid-gap: 36px;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
}
.color-posts li , .pattern-posts li {
	width: 100%;
	display: block;
	background-color: #fff;
	padding: 0px;
	box-shadow: 0 0 14px 0px rgba(0,0,0,0.052);
	border-radius: 6px;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
	border: 1px solid rgba(0,0,0,0.060);
}
.title-info {
	display: block;
	display: grid;
	grid-template-columns: auto 20px;
	grid-gap: 6px;
	padding: 4px 12px 8px 12px;
}


/*.color-posts li .box {border-radius: 2px; overflow: hidden;}*/
.color-posts li a img {
	display: block;
	width: 100%;
	height: auto;
	visibility: hidden;
	transition: all 0.4s ease-in-out;
	opacity: 0;
	/*transform: scale(0.9);*/
	filter: blur(8px);
	padding: 16px;
	border-radius: 4px;
}
.pattern-posts img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 4px;
}
.pattern-posts h2 {text-transform: capitalize;}
.color-posts .box, .pattern-posts .pattern-box {
	border-radius: 0px;
	overflow: hidden;
	margin-bottom: 4px;
}

.smallscreen {cursor: zoom-in;}
.fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 102;
	cursor: zoom-out;
}

.pattern-box img {width: 100%; height: auto; padding: 0; margin: 0; transform: scale(0); }
.color-posts li h2, .pattern-posts h2, .tools-list li h2 {font-size: 12px; margin: 0; padding: 0; line-height: 140%;}
.color-posts li .hx {color: #ccc; font-size: 10px; display: block; padding: 5px 0 0 0; line-height: 100%;}
.color-posts li:hover, .pattern-posts li:hover {
	box-shadow: 0 0 38px 0px rgba(0,0,0,0.160);
}
.color-posts li a:hover img {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
	filter: blur(0);
}
.blog-posts {
	list-style: none;
	display: grid;
	grid-gap: 40px;
	grid-template-columns: 1fr 1fr;
	margin: 0;
	padding: 0;
}
.blog-posts li {text-align: center;}
.blog-posts li img {
	max-width: 150px;
	height: auto;
	margin: 0 auto;
	visibility: visible!important;
	opacity: 1!important;
	filter: blur(0)!important;
}

.scroll-top {
	position: fixed;
	/*display: none;*/
	visibility: hidden;
	bottom: 0px;
	right: 20px;
	width: 40px;
	height: 40px;
	background-color: #fff;
	border: 1px solid #f0f0f0;
	text-align: center;
	line-height: 42px;
	border-radius: 50%;
	transform: rotate(180deg);
	box-shadow: 0 0 23px 0px rgba(0,0,0,0.040);
	transition: all 0.2s ease-in-out;
}
.scroll-top:hover {
	box-shadow: 0 0 33px 0px rgba(0,0,0,0.080);
}
.top {visibility: visible; bottom: 20px;}
.arial {font-family: Arial, Verdana!important;}
footer {
	background-color: #000;
	padding: 25px 0;
}
footer p {font-size: 12px; color: #aaa; padding: 0; /*text-transform: uppercase;*/}
footer p a {color: #aaa; text-decoration: none;}
footer p a:hover {color: #fff;}
.statement {
	font-size: 10px;
	color: #999;
	margin: 0; padding: 10px;
	line-height: 150%;
	background-color: #fff;
	/*border-left: 2px solid #333;*/
	box-shadow: 0 0 4px 1px rgba(0,0,0,0.030);

}
.footer-left {float: left;}
.footer-right {float: right;}

.swiper-container {
      width: 100%;
      height: 100%;
      position: absolute;
      bottom: 0;
      overflow: none!important;
    }
    .swiper-slide {
      display: block;
      margin: 0; padding: 0;
      overflow: none;
    }
    .swiper-wrapper img {display: block; margin: 0; padding: 0; width: 100%; height: auto; /*bottom: 0;*/}
    

.color-bio {
	display: block;
	/*grid-gap: 20px;
	grid-template-columns: 140px 1fr;*/
}
.color-bio figure {
	float: left;
	width: 125px;
	height: 125px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-top: 8px;
	overflow: hidden;
	border-radius: 4px;
}
.color-bio img {display: block; padding: 0px;}
.color-bio p {margin-top: -4px;}

.color-codes-table table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	border: 1px solid #f0f0f0;
	margin-bottom: 30px;
}
.color-codes-table table tr {}
/*.color-codes-table table tr:nth-child(even) {background-color: rgba(255,255,255,0.8);}*/
.color-codes-table table tr:last-child {border-bottom: none;}
.color-codes-table table td, .color-codes-table table th {padding: 10px 16px; font-size: 12px;}
.color-codes-table table td i {font-style: normal;}
.color-codes-table table h3, .color-codes-table table .h3 {font-size: 13px; margin: 0; padding: 0; text-align: center;}

.left, .right {width: 50%;}
.left {text-align: left;}
.right {text-align: left; /*font-family: "Lucida Console", Courier, monospace!important;*/}



.color-schemes {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 30px;
}
.color-scheme {
	display: block;
	/*background-color: pink;*/
	display: grid;
	grid-template-columns: 60px 1fr;
	grid-gap: 30px;
	border: 1px solid #f0f0f0;
	border-radius: 4px;
	padding: 20px;
	/*padding-top: 40px;*/

}
.color-scheme p, .color-scheme h3 {padding: 0 0 10px 0; margin: 0;}
.color-scheme img {display: block; width: 100%; height: auto;}
/*.color-scheme img {transform: rotate(45deg);}*/
/*.color-scheme .color-display {width: 26px; height: 26px; margin-top: 4px;}
.color-scheme .color-display:hover {
	box-shadow: 3px 2px 10px 2px rgba(0,0,0,0.1);
	cursor: pointer;
}
.color-scheme .color-display:active {
	box-shadow: 2px 1px 5px 1px rgba(0,0,0,0.2);
	transform: scale(0.98);
}*/

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

.colors-table .color-display {
	width: 100%;
	
}

.color-palette-group {
	margin-top: 5px;
	display: flex;
	overflow: hidden;
	border-radius: 4px;
}
.color-palette-group span {
	flex: 1;
	height: 50px;
	display: block;
	position: relative;
}
.color-palette-group span i {
	font-size: 10px;
	font-style: normal;
	display: block;
	width: 100%;
	position: absolute;
	text-align: center;
	bottom: 14px;
	color: #fff;
}

.color-nav {
	width: 100%;
	display: block;
	padding: 5px 0 40px 0;
}
.color-nav a, .flatbutton {
	color: #fff;
	display: inline-block;
	font-size: 11px;
	text-transform: uppercase;
	padding: 0px 12px!important;
	height: 30px;
	line-height: 28px!important;
	margin-right: 2px;
	background: none;
	border: 1px solid #fff;
	border-radius: 4px;
	opacity: 0.7;
}

.color-nav a:hover, .flatbutton:hover {opacity: 1;}
.color-nav a:active, .flatbutton:active {transform: scale(0.95);}

.color-nav-bar {
	background-color: #f2f2f2;
	text-align: center;
	/*position: sticky;
	top: -1px;
	z-index: 101;*/
	border-top: 5px solid #000;
}
.color-nav-bar .centered {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 1px;
}
.color-nav-bar a {
	font-size: 12px;
	font-weight: bold;
	color: #000;
	padding: 8px;
	border-right: 1px solid #ddd;
}
.color-nav-bar a:hover {color: #000; background-color: #eee;}
.color-nav-bar a:active {background-color: #ddd;}
.color-nav-bar a:last-child {
	border-right: none;
}

.search-form {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 80px;
	grid-gap: 10px;
}
.search-form button {text-align: center; padding: 10px 0px;}

.credit {
	display: block;
	width: 100%;
	/*background-color: #f0f0f0;*/
	/*border: 1px dotted #f0f0f0;*/
	padding: 10px 10px 0px 10px;
	font-size: 10px;
	text-align: center;
	margin-bottom: -15px;
}

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





.validation-info {color: #ff0000;}
.req {display: inline-block; font-size: 9px; background-color: #fff; color: #ff0000; text-transform: lowercase; width: 14px; height: 14px; text-align: center; line-height: 14px; border-radius: 50%;}

#mail-status .thankyou {
	color: #000;
	background-color: #fff;
	display: grid;
	grid-template-columns: 50px 1fr;
	grid-gap: 40px;
	padding: 20px;
	border-radius: 10px;
	margin-bottom: 40px;
}
#mail-status .thankyou p {padding:  0; padding-top: 10px; font-size: 12px;}
#mail-status .thankyou svg {float: left; margin-top: 3px; margin-right: 20px; width: 65px; height: 65px;}

.thankyou {border:  1px solid #38b458;}
.error {border-color: red!important;}
#mail-status .error {color: #ff0000; border-color: #ff0000;}



.name-a-color {
	position: relative;
}
.name-a-color-thankyou {
	background-color: #fff;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 30;
}

.name-a-color-thankyou svg {float: left; margin-right: 10px; }
.form-fields {
	/*This is ul*/
	margin: 0; padding: 0;
	text-align: left;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 22px;
}
.form-fields li {}
.form-fields .input {
	display: block;
	width: 100%;
}
textarea.input {
	min-height: 90px;
	line-height: 150%;
	padding: 14px;
}

.form-fields label {font-size: 12px; display: inline-block; margin-bottom: 5px;}
.form-fields label sup {color: #000;}

.form-fields .pik {border-width: 2px; padding: 0; top: 8px!important; left: 8px!important;}
.small-note {opacity: 0.4; font-size: 10px; display: block; margin-top: -4px;}
.form-fields hr {border: none; display: block; width: 100%; height: 1px; background-color: #eee; margin: 8px 0 2px 0; padding: 0;}
.form-fields .radio {font-size: 10px!important; }
.form-fields .checkmark {border-color: #555; width: 18px; height: 18px;}

.grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
}
.auto1 {grid-template-columns: 1fr;}
.auto2 {grid-template-columns: 1fr 1fr;}
.auto3 {grid-template-columns: 1fr 1fr 1fr;}
.auto4 {grid-template-columns: 1fr 1fr 1fr 1fr;}
.auto5 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}


.gap5{grid-gap:5px}
.gap10{grid-gap:10px}
.gap20{grid-gap:20px}
.gap30{grid-gap:30px}
.fr1{grid-template-columns:1fr}
.fr2{grid-template-columns:1fr 1fr}
.fr3{grid-template-columns:1fr 1fr 1fr}
.fr4{grid-template-columns:1fr 1fr 1fr 1fr}
.fr5{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
.fr6{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr}


@-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); }
}
.shake {
	-webkit-animation-name: spaceboots;
	-webkit-animation-duration: 10s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

.flash {position: fixed;display: inline-block; font-size:  11px; width:auto;height: auto;padding: 10px 20px; border-radius: 4px; bottom: 40px;right: 20px;background-color: rgba(0,0,0,0.4);color: #fff;-moz-animation: cssAnimation 0s ease-in 2s forwards;-webkit-animation: cssAnimation 0s ease-in 2s forwards;-o-animation: cssAnimation 0s ease-in 2s forwards;animation: cssAnimation 0s ease-in 2s forwards;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;}@keyframes cssAnimation {to {opacity: 0;visibility: hidden; transform: scale(0.9);}}

.nodesktop {display: none!important;}

.p-inline {display: inline-block; padding: 0; margin: 0 auto; text-align: center;}
.hiddencs {font-size: 12px; display: block; color: #333; width: 100%; text-align: center; background-color: #fce5b4; border: 1px solid #f0a453; border-radius: 4px; padding: 10px 12px;}
.hiddencs span {display: block; width: 100%; padding-bottom: 8px;}
.hiddencs button {font-size: 12px; cursor: pointer;}
.showcs {display: none;}

.hiddencs ~ .color-schemes {display: none;}
.showcs ~ .color-schemes {display: block;}


.shades {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.shades li {text-align: center; display: inline-block; font-size: 10px; margin: 0; padding: 0;}
.shades li span {display: block; border: 1px solid #fff; border-radius: 4px;}
.shades img {display: block; width: 100%; height: auto; border-radius: 0;  transition: all 0.1s ease-in-out; transform: scale(0); opacity: 0;}
.shades li a {color: #999;}


.social {
	width: 100%;
	background-color: #f0f0f0;
	text-align: center;
	padding: 8px;
}
.social a {
	display: inline-block;
	padding: 6px;
	text-align: center;
	line-height: 0;
	margin: 2px;
	margin-top: 8px;
	opacity: 0.6;
}
.social a:hover {
	opacity: 1;
}
.social a:active {
	background-color: #ddd;	
}
.social a svg {
	display: block;
	width: 20px; height: 20px;
}
.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;
	border-radius: 4px;
}
.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;}


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

#cn-login p {margin: 0 0 8px 0; padding: 0; display: block!important;}
#cn-login hr {display: none;}
#cn-login .button {width: 100%; display: block;}
#cn-login .pmpro_actions_nav {width: 100%; text-align: center; padding: 8px;}

#pmpro_account-profile {border: 1px solid #f0f0f0;}
.pmpro_box ul {margin: 0; padding: 0; margin-bottom: 14px!important;}
.pmpro_actionlinks {margin-top: 15px;}
.pmpro_actionlinks a {
	font-size: 12px;
	display: inline-block;
	color: #fff;
	background-color: #555;
	padding: 4px 14px;
	text-decoration: none;
	border-radius: 3px;
}
.pmpro_table td a {text-decoration: underline;}


.big-favo {position: fixed; display: inline-block; bottom: 150px; right: 20px; text-align: center;}
.big-favo .simplefavorite-button {
	display: block;
	width: 40px;
	height: 40px;
	background-color: #fff;
	box-shadow: 0 0 13px 0px rgba(0,0,0,0.090);
	border: 1px solid #f0f0f0;
	color: #888;
	text-align: center;
	line-height: 42px;
	border-radius: 50%;
	font-size: 0;
	text-align: center;
	padding: 0!important;
}


.cn-favo .simplefavorite-button:hover {color: #FF73A5;}
.big-favo .simplefavorite-button i {display: inline-block; font-size: 18px; line-height: 40px; margin-right: -2px;}
.cn-favo .active {background-color: #FF73A5!important; color: #fff!important; opacity: 1!important;}
.cn-favo .loading,
.welcome-like .simplefavorite-button .loading {
	background-color: #fff;
	/*background: url(images/loading.svg) no-repeat center center;*/
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' width='32' height='32' viewBox='0 0 128 128'%3E%3Cg%3E%3Cpath d='M75.4 126.63a11.43 11.43 0 01-2.1-22.65 40.9 40.9 0 0030.5-30.6 11.4 11.4 0 1122.27 4.87h.02a63.77 63.77 0 01-47.8 48.05v-.02a11.38 11.38 0 01-2.93.37z' fill='%23000' opacity='0.2' /%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 64 64' to='360 64 64' dur='400ms' repeatCount='indefinite'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 22px 22px;
	background-position: center;
	background-repeat: no-repeat;
}
.small-favo .loading {background-size: 12px 12px;}
.small-favo .simplefavorite-button,
.small-favo .simplefavorite-button2 {
	font-size: 0;
	background-color: #fff;
	color: #c0c0c0;
	padding: 0;
	display: block;
	width: 20px;
	text-align: center;
	line-height: 34px;
	height: 20px;
	margin-top: 4px;
	transition: all 0.2s ease;
}
.small-favo .simplefavorite-button i,
.small-favo .simplefavorite-button2 i {font-size: 14px; margin-right: -2px;}
.small-favo .active {background-color: #fff!important; color: #FF73A5!important; opacity: 1!important;}

.small-favo .simplefavorite-button:hover,
.small-favo .simplefavorite-button2:hover {color: #333;}
.small-favo .simplefavorite-button:active,
.small-favo .simplefavorite-button2:active {transform: scale(0.9);}

.interiors {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 30px;
}
.interiors figure {
	background-color: #fff;
	padding: 0px;
	box-shadow: 0 0 10px 0px rgba(0,0,0,0.042);
	border-radius: 4px;
	overflow: hidden;
}
.interiors figure img {
	display: block;
	width: 100%;
	height: auto;
	background-color: #f0f0f0;
}
.interiors figure figcaption {padding: 10px 15px;}
.interiors figure figcaption h4 {margin:  0; color: #000; padding: 0; font-size: 14px; line-height: 160%;}

#contact-form {position: relative; text-align: left;}
.contact-form-fields {width: 100%; list-style: none; margin: 0; padding: 0;}
.contact-form-fields input,
.contact-form-fields label,
.contact-form-fields textarea {
  display: block;
  width: 100%;
}
.contact-form-fields label {font-size: 11px; margin-bottom: 5px; margin-left: 2px;}
.contact-form-fields textarea {
  min-height: 120px;
  line-height: 150%;
  padding: 14px;
}

/*.contact-form-fields .input-style,
 {
  border-color: #333;
}*/

.contact-form-fields .button-style {
  background-color: #333;
  border-color: #333;
  color: #fff;
}

#contact-form {/*position: relative;*/ text-align: left;}

.validation-info {color: #ff0000;}
.req {display: inline-block; font-size: 9px; background-color: #fff; color: #ff0000; text-transform: lowercase; width: 14px; height: 14px; text-align: center; line-height: 14px; border-radius: 50%;}




/* @@@@@@@@@@@ Foreground Management */

.body-foreground-black {}
.body-foreground-black .welcome-child h1,
.body-foreground-black .welcome-child h2,
.body-foreground-black .welcome-child h3,
.body-foreground-black .welcome-child h4,
.body-foreground-black .welcome-child p,
.body-foreground-black .squar .download-cover,
.body-foreground-black nav ul li a,
.body-foreground-black .login-btn,
.body-foreground-black .logo,
.body-foreground-black .finder .radio,
.body-foreground-black .finder .new-input-style,
.body-foreground-black .finder .find-button,
.body-foreground-black .color-palette-group span i,
.body-foreground-black .username,
.body-foreground-black .search-triger,
.body-foreground-black .model .flaticon-search,
.body-foreground-black .model .flaticon-close,
.body-foreground-black .search-area form input,
.body-foreground-black .model-content h3,
.body-foreground-black .search-area .labels,
.body-foreground-black .welcome-like .simplefavorite-button,
.body-foreground-black .welcome-like-download .button-style
{
	color: #000;
}

/* borders */
.body-foreground-black .squar,
.body-foreground-black nav ul li a:hover,
.body-foreground-black .login-btn,
.body-foreground-black .logo:before,
.body-foreground-black .finder .checkmark,
.body-foreground-black .finder .pik,
.body-foreground-black .finder .new-input-style,
.body-foreground-black .search-area form input,
.body-foreground-black .search-area .checkmark,
.body-foreground-black .welcome-like .simplefavorite-button,
.body-foreground-black .welcome-like-download .button-style
{
	border-color: #000;
}

.body-foreground-black .logo:before {
	background-image: url("data:image/svg+xml,%3C%3Fxml%20version='1.0'%20encoding='utf-8'%3F%3E%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%3E%3Cpath%20fill='%23000000'%20d='M48,5a5,5,0,00-5-5H5a5,5,0,00-5,5v38a5,5,0,005,5h38a5,5,0,005-5V5zM37,34.531A2.468,2.468,0,0134.531,37H17.833L11,42.75V13.469A2.468,2.468,0,0113.469,11h21.062A2.468,2.468,0,0137,13.469v21.062z'/%3E%3C/svg%3E");
	/*background-image: url("data:image/svg+xml,%3C!--Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)--%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' style='enable-background:new 0 0 48 48' xml:space='preserve'%3E%3Cpath style='fill:%23722a82' d='M0 11h48v31.8H0z'/%3E%3Cpath style='fill:%23405faa' d='M0 11h48v26.5H0z'/%3E%3Cpath style='fill:%230d8040' d='M0 11h48v21.2H0z'/%3E%3Cpath style='fill:%23fceb05' d='M0 11h48v15.9H0z'/%3E%3Cpath style='fill:%23f58b1f' d='M0 11h48v10.6H0z'/%3E%3Cpath style='fill:%23e21e26' d='M0 11h48v5.3H0z'/%3E%3Cpath d='M48 5c0-2.8-2.2-5-5-5H5C2.2 0 0 2.2 0 5v38c0 2.8 2.2 5 5 5h38c2.8 0 5-2.2 5-5V5zM37 34.5c0 1.4-1.1 2.5-2.5 2.5H17.8L11 42.8V13.5c0-1.4 1.1-2.5 2.5-2.5h21.1c1.4 0 2.5 1.1 2.5 2.5v21z'/%3E%3C/svg%3E");*/
}
.body-foreground-black .squar {
	background-image: url("data:image/svg+xml,%3C%3Fxml%20version='1.0'%20encoding='utf-8'%3F%3E%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='230'%20height='230'%3E%3Cpath%20fill='%23000000'%20d='M12.489,0C5.592,0,0,5.592,0,12.489v205.023C0,224.408,5.592,230,12.489,230h205.023c6.896,0,12.488-5.592,12.488-12.488V12.489C230,5.592,224.408,0,217.512,0H12.489m9.366,27.269a5.414,5.414,0,015.414-5.414H202.73a5.414,5.414,0,015.414,5.414V202.73a5.414,5.414,0,01-5.414,5.414H41.92l-20.065,14.57V27.269z'/%3E%3C/svg%3E");
}

.social-share {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 10px;
	margin-top: 16px;
}
.social-share a {
	display: block;
	text-align: center;
	padding: 6px;
	border:  1px solid #ccc;
	border-radius: 4px;
}
.social-share a svg {display: block; width: 20px; margin: 0 auto; opacity: 0.5;}
.social-share a:hover {background-color: #f2f2f2;}
.social-share a:active {transform: scale(0.94);}
.social-share a:hover svg {opacity: 1;}

.post-edit-link {
  font-size: 0px;
  display: inline-block;
  width: 40px; height: 40px;
  position: fixed;
  bottom: 160px;
  left: 20px;
  background-color: #333;
  background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' x='0' y='0' viewBox='0 0 16 16' xml:space='preserve'%3E%3Cstyle%3E.st0%7Bfill:%23f7f9f9%7D%3C/style%3E%3Cpath class='st0' d='M13.14 8a.57.57 0 00-.57.57v5.71c0 .32-.26.57-.57.57H1.71a.57.57 0 01-.57-.57V2.86c0-.32.26-.57.57-.57h6.86c.32 0 .57-.26.57-.57s-.25-.58-.57-.58H1.71C.77 1.14 0 1.91 0 2.86v11.43C0 15.23.77 16 1.71 16H12c.95 0 1.71-.77 1.71-1.71V8.57a.57.57 0 00-.57-.57z'/%3E%3Cpath class='st0' d='M15.36.64a2.195 2.195 0 00-3.1 0L4.74 8.17c-.06.06-.11.14-.14.22l-1.14 3.43a.567.567 0 00.72.72l3.43-1.14c.08-.03.16-.08.22-.14l7.53-7.53c.85-.85.85-2.23 0-3.09z'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
}
.post-edit-link:hover {box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.040);}
.post-edit-link:active {transform: scale(0.92);}

.alink {
	display: inline-block;
	width: 16px; height: 16px;
	margin-left: 5px;
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' xml:space='preserve'%3E%3Cg fill-rule='evenodd' clip-rule='evenodd'%3E%3Cpath d='M.286 14.781c.09-.386.155-.779.275-1.153.208-.649.582-1.205 1.061-1.687 1.348-1.352 2.7-2.701 4.05-4.051.013-.013.029-.023.061-.048.005.038.015.064.012.09-.125.893-.008 1.764.248 2.621.042.14.015.227-.089.329-.881.872-1.759 1.747-2.631 2.627-.976.984-.939 2.468.074 3.366.84.743 2.149.747 2.984-.003.277-.249.535-.521.798-.784 1.127-1.126 2.257-2.25 3.379-3.382.9-.905.935-2.293.094-3.198-.017-.018-.032-.04-.052-.054-.194-.134-.32-.292-.318-.554.002-.34-.016-.684.233-.948.25-.266.533-.503.82-.77.443.239.858.591 1.199 1.029 1.211 1.559 1.325 3.626.278 5.304a4.95 4.95 0 0 1-.695.848c-1.308 1.323-2.627 2.632-3.94 3.948-.772.774-1.691 1.246-2.782 1.37-.043.006-.085.021-.127.033h-.759a2.857 2.857 0 0 0-.184-.038c-1.817-.285-3.067-1.281-3.718-3.002-.136-.36-.183-.756-.271-1.134v-.759z'/%3E%3Cpath d='M19.714 5.219c-.09.385-.154.778-.275 1.154-.209.654-.589 1.213-1.072 1.698-1.237 1.241-2.477 2.478-3.715 3.716-.021.021-.045.04-.095.085 0-.074-.006-.121.001-.165.116-.87-.008-1.715-.255-2.546-.043-.145-.014-.237.094-.345.783-.772 1.562-1.548 2.336-2.331 1.101-1.115.878-2.862-.454-3.626-.831-.476-1.913-.379-2.611.273-.619.578-1.206 1.19-1.806 1.788-.694.692-1.39 1.382-2.079 2.08-.889.902-.929 2.279-.102 3.185.021.023.045.045.064.07.099.12.288.155.296.363.016.392.088.801-.204 1.122-.25.273-.543.509-.837.78a3.66 3.66 0 0 1-1.204-1.045c-1.1-1.505-1.283-3.119-.526-4.827.215-.484.539-.897.913-1.271 1.233-1.234 2.468-2.467 3.701-3.702.769-.768 1.684-1.233 2.769-1.357.042-.005.084-.021.127-.033h.759c.062.013.122.028.184.039 1.818.285 3.068 1.281 3.719 3.001.137.361.184.755.271 1.134l.001.76z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 100%;
	opacity: 0.4;
}
h2 a:hover .alink {opacity: 1;}

.trending-related {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 14px;
}
.trending-related li {}
.trending-related a,
.color-dots a {
	display: block;
	color: #333;
	padding: 8px 14px;
	border:  1px solid #eee;
	border-radius: 5px;
}
.trending-related a:hover {background-color: #fafafa;}
.trending-related a:active {border-color: #eee; background-color: #eee; transform: scale(0.99);}

.color-dots {
	margin: 3px 0 0 0;
	padding: 0;
}
.color-dots li {display: inline-block; margin: 0 1px 4px 0;}
.color-dots a {display: inline-block; padding: 8px 10px; font-size: 12px; text-align: center;}
.color-dots a .dot {display: inline-block; width: 18px; height: 18px; margin-bottom: -5px; border-radius: 50%; transition: all 0.2s;}

.color-dots a:hover .dot {transform: scale(1.2);}

.trend-color-heading {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 10px;
}
.trend-color-heading h2 {padding-bottom: 20px;}
.trend-small-button a {
	font-size: 10px;
	display: inline-block;
	color: #333;
	border:  1px solid #eee;
	padding: 2px 10px;
	border-radius: 4px;
}
.trend-small-button a span {transform: scale(0.80) rotate(-90deg); display: inline-block;}

.trend-small-button a:hover {
	border-color: #ccc;
}
.trend-small-button a:active {
	background-color: #ccc;
	transform: scale(0.98);
}

#content {}
#content h2 {margin-bottom: 6px;}
#content p {margin-bottom: 5px;}
#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;}
#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;
}


.model{
  z-index: 80;
  display:none;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0px;
  /*background-color: #fff;*/
  /*cursor: zoom-out;*/
  /*background-color: rgba(0,0,0,0.6);*/
  /*backdrop-filter: blur(8px);*/
  z-index: 120;
  text-align: center;
}
.model-inner {
  display: table-cell;
  width: 100%;
  height: 100vh;
  vertical-align: top;
  text-align: center;
}
.close-model-hidden {
  display: table-cell;
  /*background-color: rgba(0,0,0,0.1);*/
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0; top: 0;
  z-index: 91;
}
.model-content {
  /*background-color: yellow;*/
  position: relative;
  display: block;
  /*max-width: 1000px;*/
  padding: 20px;
  margin: 0 auto;
  /*box-shadow: 0 0 140px rgba(0,0,0,0.5);*/
  border-radius: 4px;
  z-index: 100;
  top:  90px;
}

.model-content h3 {padding-bottom: 20px; color: #fff;}
.model-close-button {
  position: absolute;
  right: 20px;
  top: 10px;
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 500;
  color: #fff;
  font-size: 14px;
  line-height: 40px;
  border-radius: 50%;
  text-decoration: none;
}


.search-area {
  text-align: left;
}
.search-area h3 {color: #fff; padding-right: 10px; font-size: 30px;}
.search-area form input {
  font-size: 14px;
  font-weight: normal;
  color: #fff;
  display: block;
  width: 100%;
  background: transparent;
  outline: none;
  border: 2px solid #fff;
  border-radius: 10px;
  height: 50px;
  padding: 10px 50px 10px 20px;
  text-transform: uppercase;
}
.search-area form input:focus {
	border-color: inherit;
}
.search-area .labels {
	color: #fff;
	display: block;
	margin-bottom: 10px;
}
.search-area form {
  position: relative;
  height: 50px;
}
.search-area .pik {top: 14px; left: 14px;}
.search-area form button {
	
}
.search-area form .find-button {
	display: inline-block;
	width: 30px;
	height: 30px;
	/*background-color: pink;*/
	line-height: 30px;
	display: inline-block;
	font-size: 18px;
  position: absolute;
  top:  7px;
  right: 8px;
  border:  none;
  background: transparent;
}
.search-area form .find-button:hover {color: inherit;}
/*.search-area .model-close-button {
	top:  20px; right: 33px;
	background-color: pink;
	display: block;
}*/

.search-area form input::placeholder {
  color: rgba(255,255,255,0.6);
}

.search-notification {
	font-size: 12px;
	color: #000;
	background-color: #ffecb3;
	display: block;
	text-align: center;
	width: 100%;
	padding: 15px;
	border-radius: 6px;
	margin-bottom: 40px;
}

#content .simplefavorite-button {display: none;}

.tools-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px;
}
.tools-list li {
	box-shadow: 0 0 14px 0px rgba(0,0,0,0.052);
	border-radius: 6px;
	overflow: hidden;
	transition: all 0.3s ease-in-out;
	border: 1px solid rgba(0,0,0,0.060);
}
.tools-list li:hover {box-shadow: 0 0 24px 0px rgba(0,0,0,0.092);}
.tools-list li img {
	display: block!important;
	width: 100%!important;
	height: auto!important;
}

.tools-list li .title-info {
	padding: 10px;
}

.tool-title {
	text-align: left;
	display: grid;
	grid-template-columns: 1fr 60px;
	grid-gap: 10px;
}
.tool-title h1 {text-align: left;}
.tool-title svg {width: 100%; height: auto; transition: all 0.4s ease-in-out; animation: 1s ease-out 0s 1 spin;}
.tool-title svg:hover {transform: rotate(216deg);}

.tool-form {}
.tool-form .input {width: 100%;}
.tool-form label {color: #000; display: block; font-size: 10px;}
.tool_color_pre {display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(0,0,0,0.3); border-radius: 50%; margin-bottom: -2px;}
.input_1 {
	display: grid;
	grid-template-columns: 1fr 80px;
	grid-gap: 10px;
}
.input_3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 80px;
	grid-gap: 10px;
}
.input_4 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 80px;
	grid-gap: 10px;
}
.tool_color_preview {
	display: block;
	width: 100%;
	min-height: 200px;
	border-radius: 5px;
	display: table;
	padding: 20px;
	border: 1px solid rgba(0,0,0,0.1);
}
.tool_color_preview div {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
.tool_color_preview div h2 {font-size: 28px; font-weight: normal; text-align: center; font-family:courier, courier new, serif;}
.tool_error {font-size: 12px; background-color: #fff0da; border: 1px solid #e43737; color: #000; display: block; width: 100%; padding: 6px 10px; border-radius: 5px; margin-bottom: 14px;}
.color-white {color: #fff;}

.bcn {
  display: block;
  font-size: 10px;
  color: #c0c0c0;
  text-transform: uppercase;
  padding-bottom: 0px;
  letter-spacing: 1px;
  list-style: none;
  margin-bottom: 14px;
}
.bcn li {list-style-type: none; display: inline;}
.bcn li:after {
  content: ' / ';
  margin-left: 5px;
  margin-right: 5px;
}
.bcn li:last-child:after {content: '';}
.bcn a {color: #c0c0c0;}
.bcn a:hover {color: #333;}

.smallbutton {height: 25px; line-height: 23px; font-size: 11px;}


@keyframes spin {
  0% {
  	opacity: 0;
    transform: rotate(-216deg) /*scale(0.9)*/;
  }
  100% {
  	opacity: 1;
    transform: rotate(0deg) /*scale(1)*/;
  }
}


/* @@@@@@@@@@@ Responsive @@@@@@@@@@ */
@media screen and (max-width: 1160px) {
.centered {max-width: 92%;}
}
@media screen and (max-width: 880px) {
.centered-small {max-width: 86%;}
.welcome .welcome-child h1 {font-size: 40px;}
.squar {
	display: block;
	width: 190px;
	height: 190px;
	border-width: 16px;
	position: relative;
	text-align: center;
}
.squar img {width: 144px; left: 18px;}
nav.nomobile {display: none!important;}
nav ~ .nodesktop {display:  block!important;}
}

@media screen and (max-width: 760px) {
body, p {font-size: 13px;}
h1 {font-size: 24px; color: #000; padding: 0 0px 8px 0;}
h2 {font-size: 18px; color: #333;}
h3, .h3 {font-size: 16px; color: #555;}
h4 {font-size: 15px; color: #555;}
.nodesktop {display:  block!important;}
.nomobile {display: none!important;}
.fullonmobile {grid-template-columns:1fr}
.login-btn {padding: 0 10px;}

.logo {font-size: 18px;}
/*
.logo {font-size: 14px;line-height: 19px; margin: 4px 0 0 0px; padding-left: 26px;}
.logo:before {width: 10px; height: 10px;border-width: 4px;}
*/

.headerin {
	grid-gap: 10px;
}

.welcome .welcome-child .centered {
	grid-template-columns: 1fr;
	grid-gap: 44px;
	text-align: center;
}
.welcome .welcome-child {
	padding-top: 6vh;
	padding-bottom: 6vh;
}

.welcome .welcome-child h1 {font-size: 30px; letter-spacing: 0;}
.welcome .welcome-child h4, .welcome .welcome-child h2 {font-size: 14px; font-weight: normal;}
.welcome .welcome-child h1 span {display: block;}
.welcome-child p {width: 99%;}
.squar {
	display: block;
	width: 180px;
	height: 180px;
	border-width: 16px;
	position: relative;
	text-align: center;
	margin: 0 auto;
}

.color-nav a, .flatbutton {
	color: #fff;
	font-size: 9px;
	margin-right: 2px;
	margin-right: 2px;
	border: 1px solid #fff;
	opacity: 0.7;
}
.color-nav a {padding: 0px 6px!important;}
.finder {
	max-width: 300px; margin: 0 auto;
	grid-template-columns: 1fr;
	text-align: left;
	margin-top: 20px;
}
.welcome-like-download {
	max-width: 300px;
	margin: 0 auto;
	margin-top: 30px;
}
.finder .labels {text-align: center;}
.finder input.new-input-style {
	border: 1px solid rgba(255,255,255,0.6);
	height: 38px;
	border-radius: 4px;
	padding: 0 25px;
}
.finder .find-button {top: 6px; right: 4px;}
.finder .pik {top: 8px; left: 4px;}

nav {display: none;}
.menu {
	float: right;
	display: block;
	width: 30px; height: 30px;
	background-color: rgba(0,0,0,0.1);
	background-position: 4px 4px;
	border: none;
	outline: none;
	cursor: pointer;
	border-radius: 4px;
	-webkit-appearance: none;
}
.menu:hover {background-color: rgba(0,0,0,0.2);}
.menu:active {background-color: rgba(0,0,0,0.3);}
.menu:checked {background-position: 4px -23px;}
.menu:checked ~ nav {display: block;}
nav {
	width: 220px;
	background-color: #fff;
	position: absolute;
	right: 30px;
	top: 60px;
	padding: 0;
	border-radius: 4px;
	box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.040);
}
nav ul {margin: 0; padding: 20px; text-align: center;}
nav ul li {display:block; padding: 5px 0;}
nav ul li a {color: #000; border: none;}
nav ul li a:hover {color: #c0c0c0;}

.footer-left, .footer-right {
	float: inherit;
	text-align: center;
}

footer p {padding: 5px;}
.contact-form-input {grid-template-columns: 1fr;}

/*.color-bio {grid-template-columns: 1fr;}*/
.color-bio figure {/*display: none;*/ width: 60px; height: 60px;}
.name-a-color-thankyou {grid-template-columns: 1fr; text-align: center;}

.color-scheme {grid-template-columns: 1fr; text-align: center; grid-gap: 10px; border: 1px solid #f0f0f0; border-radius: 4px; padding: 20px;}
.color-scheme img {margin: 0 auto; width: 100px; height: auto;}
.color-scheme p {text-align: justify; font-size: 12px;}
.form-fields {max-width: 100%;}

.shades {grid-template-columns: repeat(4, 1fr); grid-gap: 12px; font-size: 12px}

.pricing {grid-template-columns: 1fr;}



.color-nav-bar a {font-size: 10px; padding: 9px 5px;}

.download-nav {grid-template-columns: 1fr 1fr;}

.trend-color-heading h2 {text-align: center;}


}

@media screen and (max-width: 580px) {
.color-posts, .pattern-posts {
	grid-gap: 30px;
	grid-template-columns: 1fr 1fr;
}
.interiors {grid-template-columns: 1fr;}
.color-codes-table table td i {font-size: 10px; display: block;}
}

@media screen and (max-width: 400px) {
.download-nav {grid-template-columns: 1fr;}
.radio {font-size: 10px;}
.finder {max-width: 80%;}
.color-posts, .pattern-posts {grid-gap: 20px;}
.logo {font-size: 14px;}
.squar {
	width: 150px;
	height: 150px;
	border-width: 14px;
}
.squar img {display:  block; left: 14px; bottom: 14px; width: 122px;}

.full-label {display: block; width: 100%;}

.trending-related {grid-template-columns: 1fr;}

}

@media screen and (max-width: 300px) {
.centered {max-width: 90%;}
.centered-small {max-width: 82%;}
.welcome .welcome-child h1 {font-size: 24px;}
.welcome .welcome-child h4, .welcome .welcome-child h2 {font-size: 12px; font-weight: normal;}
.finder {max-width: 100%;}
.logo {font-size: 0;}
.color-posts li h2, .pattern-posts h2 {font-size: 11px;}
.color-posts, .pattern-posts {grid-gap: 30px; grid-template-columns: 1fr;}
.squar {
	width: 120px;
	height: 120px;
	border-width: 10px;
}
.squar img {display:  block; left: 10px; bottom: 10px; width: 100px;}
}