/* @import url('https://fonts.googleapis.com/css?family=Roboto:400,500&subset=cyrillic,cyrillic-ext'); */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400&display=swap');
@import url('https://fonts.googleapis.com/css?family=Fredericka+the+Great&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lora:700i&display=swap&subset=cyrillic,cyrillic-ext');

* {
	margin: 0px;
	padding: 0px;
}
*, *:before, *:after {
	-ms-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
:root {
	--bg: #fefefc;
	--text: #666666;
	--link: #333333;
	--link-hover: #999999;
}
html {
	height: 100%;
	/* scroll-behavior: smooth; */
}
body {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 16px;
	font-size: 100%;
	background-color: var(--bg);
	/* background-color: #000208; */
	direction: ltr;
	color: var(--text);
	width: 100%;
}
a {
	text-decoration: none;
	color: var(--link);
	font-weight: 400;
	/* text-decoration: underline; */
}
	a:hover {
		color: var(--link-hover);
		text-decoration: underline;
		/* text-decoration: none; */
	}
p {
	font-size: 100%;
	font-weight: normal;
	line-height: 1.7;
	padding-bottom: 20px;
	text-shadow: 0 0 1px rgba(0,0,0,0.2); /*<<<antialiasing*/
	color: #808080;
	color: var(--text);
}
	p > a {
		text-decoration: underline;
	}
		p > a:hover {
			text-decoration: none;
		}

#header_text {
	padding: 40px 40px;
	width: 100%;
	/* max-width: 1200px; */
	margin: 0 auto;
	text-align: left;
	position: relative;

	
	padding: 20px 40px 20px 40px;
		padding: 20px 20px 20px 20px;
		
		max-width: 1320px;

	margin: 0 auto;

	background-color: #ffffff;
}

#header {
	padding: 40px 40px;
	width: 100%;
	/* max-width: 1200px; */
	margin: 0 auto;
	text-align: left;
	position: relative;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	padding: 20px 40px 20px 40px;
		padding: 20px 20px 20px 20px;
		
		max-width: 1320px;

	margin: 0 auto;

	background-color: #ffffff;
}

	#logo {
		text-align: center;
	}
		#logo > a {
			font-family: 'Fredericka the Great', cursive;
			color: #666666;
			font-weight: 400;
			font-style: normal;
			font-size: 250%;
		}
		#logo > a:hover {
			text-decoration: none;
		}



	#header-nav {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		flex-grow: 1;
	}

#header_text > #header-nav {
	justify-content: center;
}
		#header-nav > a {
			margin: 0px 20px 0px 20px;
		}
		#header-nav > a:last-child {
			margin: 0px 0px 0px 20px;
		}


	/*#nav {
		text-align: center;
		padding: 0px 0px 10px 0px;
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;
	}
	#nav a {
		margin: 0 2%;
		color: #999999;
		font-size: 90%;
	}
		#nav a:hover {
			text-decoration: none;
			color: #333333;
		}
	#nav > a > div {
		content: "";
		width: 10px;
		height: 10px;
		border-radius: 5px;
		display: inline-block;
	}*/


	

#main-head { /*переименовать в nav*/
	width: 100%;
	color: #ffffff;
	background-color: #000c10;
	padding: 20px 40px 20px 40px;
		padding: 0px 40px 0px 40px;

	font-size: 130%;
	text-align: center;
}
	#main-head #nav-for {
		display: flex;
		font-size: 80%;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: center;
		justify-content: space-evenly;
		align-items: center;
	}
		#main-head a {
			color: #ffffff;
			padding: 20px 20px;
		}
			#main-head a:hover {
				/*opacity: 0.8;*/
				text-decoration: none;
				background-color: #fff;
				color: #000;
			}

		#main-head #nav-for a.active {

		}




#main1 {
	max-width: 1320px;
	padding: 0px 20px;
	margin: 0 auto;
	display: flex;
	

	padding-bottom: 100px;

	background-color: #ffffff;
}
	#side-left {
		/* background-color: #ff0; */
		width: 15%;
		min-width: 180px;
	}
	#content {
		/* background-color: #0ff; */
		width: 70%;
		min-width: 600px;
		padding: 0px 20px;
	}
	#side-right {
		/* background-color: #f0f; */
		width: 15%;
		min-width: 180px;
	}

.nav-sidebar a {
	display: block;
	/*margin-left: 10%;*/
	margin-bottom: 5px;
}
	
	.nav-history {
		margin-top: 20px;
	}
		.nav-history a {
			padding: 5px;
			margin-bottom: 1px;
		}
	
	.nav-history h3 {
			font-family: 'Open Sans', sans-serif;
			font-weight: 600;
			font-style: normal;
	
			font-size: 110%;
		}
		.nav-history a {
			display: block;
		}




		.example-code {
			border: 1px solid #dddddd;
			margin-bottom: 20px;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: flex-start;
			align-items: stretch;
		}
			.example {
				/* border: 1px solid green; */
				width: 50%;
				padding: 10px;
			}
			.code {
				/* border: 1px solid blue; */
				width: 50%;
				padding: 10px;
			}
				.example p, .example div {
					font-size: 100%;
					font-weight: normal;
					line-height: normal;
					padding: 0px;
					/* text-shadow: 0 0 1px rgb(0 0 0 / 20%); */
					text-shadow: none;
					margin-bottom: 10px;
					width: 100%;
				}
				.example div {
					margin-bottom: 0px;
				}
	
				.pd-l-2 { padding-left: 10px; }
				.pd-l-4 { padding-left: 20px; }
				/* hl - highlight */
				.hl-tag { color: #df2083; }
				.hl-style { color: #20b6df; }
				/* .hl-params { color: #50df20; } */
				.hl-comm { color: #bbbbbb; }
				.hl-attr { color: #e17e2d; }
				.hl-val { color: #2ddf20; }



@media (max-width: 1024px) {
	#main1 {
		/* color: red; */
	}
	#side-right {
		display: none;
	}
	#content {
		width: 85%;
	}

	#nav-for a {
		display: flex;
		flex-direction: column;
		/* padding-top: 10px; */
	}
	#nav-for a span {
		font-size: 80%;
	}
}
@media (max-width: 800px) {
	#main1 {
		/* color: green; */
		flex-wrap: wrap;
	}
	#header {
		justify-content: center;
	}
	#header-nav {
		display: none;
	}
	#side-left {
		/* display: none; */
		width: 100%;
		text-align: center;
	}
	#content {
		width: 100%;
	}
}
@media (max-width: 600px) {
	#main1 {
		/* color: blue; */
	}
	#main-head {
		padding: 0px;
	}
	#main-head #nav-for {
		display: block;
	}
		#main-head #nav-for a {
			display: block;
			padding: 10px 0px 10px 0px;
			/*border-bottom: 1px solid #333;*/
		}
		#nav-for a span {
			font-size: 100%;
		}

	#side-left {
		/* display: none; */
	}
	#side-right {
		display: none;
	}
	#content {
		min-width: 100%;
	}
	.example {
		width: 100%;
	}
	.code {
		width: 100%;
	}
}




.main_h1 {
	margin-top: 50px;
}

/* 6 color header */
#box_6_color {
	display: -webkit-flex; /* Safari */
	display: flex;
	justify-content: center;
	justify-content: space-around;
	width: 50%;
	margin: 0 auto;
}
#box_6_color > a > div {
	width: 10px;
	height: 10px;
	border-radius: 5px;
}





/* search color */
.search_box {
  position: relative;
  text-align: center;
  margin: 20px 0px 20px 0px;
}

input#search, input#search:focus {
	border:none;
	box-shadow:none;
	background-color: inherit;
	outline: 0;
	font-size:16px;
	font-family:'Open Sans';
	font-weight: 400;
	color:#686868;
	
	width: 60%;
	max-width: 200px;
	padding:0px 12px;

	height: 48px;
	vertical-align: top;

	transition: all 0.3s ease;
}
	input {
		color: #999;
		transition: all 0.3s ease;
	}
	input::placeholder {
		color:#bbb;
		transition: all 0.3s ease;
	}
	
	#form_search {
		border-bottom: 1px solid #ddd;
		display:inline-block;
		height: 50px;
		transition: all 0.3s ease;
	}
	#form_search:hover {
		border-bottom: 1px solid #686868;
		transition: all 0.3s ease;
	}

	#form_search:hover input::placeholder, #form_search:hover input, #form_search:hover .search_link {
		color: #686868;
		transition: all 0.3s ease;
	}
		#form_search:hover #new_color_preview{
			border: 1px solid #686868;
			transition: all 0.3s ease;
		}
	.search_box:focus-within input#search, .search_box:focus-within .search_link, 
		.search_box:focus-within div#new_color_block {
		color: #686868;
		transition: all 0.3s ease;
	}
		.search_box:focus-within #new_color_preview{
			border: 1px solid #686868;
			transition: all 0.3s ease;
		}
		.search_box:focus-within #form_search{
			border-bottom: 1px solid #686868;
			transition: all 0.3s ease;
		}
#search_link {
	color:#bbb;
	display:inline-block;
	height:48px;
	width:48px;
	line-height: 64px;
	text-align: center;
	cursor: pointer;
	vertical-align: top;
	
	transition: all 0.3s ease;
}


#new_color_block {
	display:inline-block;
	height:48px;
	width:48px;
}


/* hsl-picker */
.hsl-picker {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0 15px;
  margin: auto;
  	width: 100%;
  	max-width: 500px;
  --hue: 180;
  --saturation: 50%;
  --light: 50%;
  --value: hsl(var(--hue), var(--saturation), var(--light));
}

#new_color {
	/*font-family: 'Roboto', Verdana, Arial, sans-serif;*/
	font-family: 'Open Sans', Verdana, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	width: 100%;
	height: 100px;
	background-color: var(--value);
	margin-top: 20px;
	border-radius: 25px;
	padding: 5px 20px;
	/* //color: #fff; */
	font-size: 90%;
	/*text-shadow: 1px 1px 1px rgba(0,0,0,0.2);*/

	display: flex;
	/*justify-content: space-between;*/
	justify-content: space-around;
	flex-wrap: wrap;
	align-items: center;
	flex-direction: row;
}

.hsl-picker input[type=range] {
  -webkit-appearance: none;
  margin: 20px 0;
  width: 100%;
  height: 50px;
  display: block;
  outline: none;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0px 0px 0px 1px #eee;
}

.hsl-picker > [data-pick=hue] {
  /*background: linear-gradient(to right, red, yellow, lime, aqua, blue, fuchsia, red);*/
  /*background: linear-gradient(to right, red 0, yellow 60, lime 120, aqua 180, blue 240, fuchsia 300, red 0);*/

  background: linear-gradient(to right,
    hsl(0, var(--saturation), var(--light)),
    hsl(60, var(--saturation), var(--light)),
    hsl(120, var(--saturation), var(--light)),
    hsl(180, var(--saturation), var(--light)),
    hsl(240, var(--saturation), var(--light)),
    hsl(300, var(--saturation), var(--light)),
    hsl(0, var(--saturation), var(--light))
  );

  /*background: linear-gradient(to right,
    hsl(0, var(--saturation), var(--light)),
    hsl(15, var(--saturation), var(--light)),
    hsl(30, var(--saturation), var(--light)),
    hsl(60, var(--saturation), var(--light)),
    hsl(90, var(--saturation), var(--light)),
    hsl(120, var(--saturation), var(--light)),
    hsl(150, var(--saturation), var(--light)),
    hsl(180, var(--saturation), var(--light)),
    hsl(210, var(--saturation), var(--light)),
    hsl(240, var(--saturation), var(--light)),
    hsl(270, var(--saturation), var(--light)),
    hsl(300, var(--saturation), var(--light)),
    hsl(330, var(--saturation), var(--light)),
    hsl(345, var(--saturation), var(--light)),
    hsl(0, var(--saturation), var(--light))
  );*/
}

.hsl-picker > [data-pick=saturation] {
  background: linear-gradient(to right, hsl(0, 0%, 50%), hsl(0, 100%, 50%));
  background: linear-gradient(to right,
    hsl(var(--hue), 0%, var(--light)),
    hsl(var(--hue), 100%, var(--light))
  );
}

.hsl-picker > [data-pick=light] {
  background: linear-gradient(to right, white);
  background: linear-gradient(to right, black, hsl(var(--hue), var(--saturation), 50%), white);
}

.hsl-picker ::-webkit-slider-thumb { background-color: var(--value); box-shadow: 0px 0px 1px 2px #fff, 0px 0px 1px 2px #ccc; border: 0px solid #000; height: 25px; width: 25px; border-radius: 50%; cursor: pointer; -webkit-appearance: none; appearance: none; margin: -6px 0; }
.hsl-picker ::-moz-range-thumb { background-color: var(--value); box-shadow: 0px 0px 1px 2px #fff, 0px 0px 1px 2px #ccc; border: 0px solid #000; height: 25px; width: 25px; border-radius: 50%; cursor: pointer; -moz-appearance: none; appearance: none; margin: -6px 0; }
.hsl-picker ::-ms-thumb { background-color: var(--value); box-shadow: 0px 0px 1px 2px #fff, 0px 0px 1px 2px #ccc; border: 0px solid #000; height: 25px; width: 25px; border-radius: 50%; cursor: pointer; appearance: none; margin: -6px 0; }
.hsl-picker ::-moz-range-track { background: none; }
.hsl-picker ::-moz-focus-inner,
.hsl-picker ::-moz-focus-outer { 
  border: 0;
}



#new_color_preview {
	height:30px;
	width:30px;
	margin: 9px;
	cursor: pointer;
	border-radius: 15px;
	border: 1px solid #999;

  border-radius: 100%;
  	box-shadow: inset 0 0 0 1px #fff;
  -webkit-animation: pulse 5s infinite;
          animation: pulse 5s infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(50, 50, 50, 0.4);
  }
  10% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
  51% {
    box-shadow: 0 0 0 0 rgba(50, 50, 50, 0.4);
  }
  60% {
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}







#color_hex {
		/* float: left; */
		width: 200px;
		height: 200px;
		margin-bottom: 0px;
		margin-right: 20px;
	}
	#ans {
		/*background-color: #eeeeee;*/
		/*position: absolute;
		right: 40px;
		top: 0px;*/

		/*position: relative;*/
		/*float: right;*/

		/*width: 400px;*/
	/* float: right; */
		/*clear: both;*/
		/*margin: 0 auto;*/

		border: 1px solid #1a8dff;
		padding: 10px 30px;
	}
	
	#ans_h {
		font-size: 110%;
		/* //font-family: 'Lora', serif; */
    	font-weight: 600;
    	font-style: normal;
    	color: #666666;
	}
	.ans_p {
		font-size: 70%;
		/* //font-family: 'Lora', serif; */
    	font-weight: 400;
    	font-style: normal;
    	color: #999;
    	margin-bottom: 10px;
	}

	.ans_pp {
		/* //font-family: 'Lora', serif; */
    	font-style: normal;
    	color: #888;
    	margin-bottom: 10px;

    	text-align: center;
    	padding-top: 10px;
    	font-size: 80%;
    	font-weight: 700;
	}
	#ans_ta {
		max-width: 280px;
		width: 100%;
		height: 80px;
		border-color: #aaa;
		padding: 10px;
		color: #555;
		border: 1px solid #aaa;
    	box-shadow: inset 0px 0px 3px #C1CFD9;
	}
		#ans_ta::placeholder {
			color: #999;
			font-size: 80%;
		}
		#ans_ta:focus {
			outline: none !important;
			border: 1px solid #aaa;
	    	box-shadow: inset 0px 0px 3px #C1CFD9;
		}
textarea#ans_ta::-webkit-input-placeholder {
	width: 100%;
	/* //height: 50px; */
	/*line-height: 500%;*/
	/* //resize:vertical; */
	text-align: right;
	font-size: 80%;
	padding-top: 15px;
	/* //color: #aaa; */
	color: #999;
	font-style: italic;
}
	#ans_btn {
		padding: 8px 28px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 14px;
		border: none;
		border-radius: 3px;
		background-color: #555555;
		color: white;
		border: 2px solid #555555;
		transition-duration: 0.4s;
		cursor: pointer;
		margin-top: 10px;

		background-color: white;
		color: black;

		outline: none;
	}
	#ans_btn:hover {
		background-color: white;
		color: black;

		background-color: #555555;
		color: white;
	}
	#ans_btn:focus {
		/*outline: #bbb solid 1px;*/
		transition-duration: 0.0s;
		background: #888;
		color: white;
	}
	#ans_div_btn {
		text-align: center;
	}

	@media screen and (max-width:600px){
		#color_hex {
			/* //float: none; */
		}
		#ans {
			/*background-color: #eeeeee;*/
			float: none;
			display: inline-block;
			margin-left: calc(50% - 130px);
			/* //margin-left: 50px;
			//margin-top: 10px; */
			margin-bottom: 30px;
		}

		
	}













#content_text {
	padding: 0px 40px 100px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	text-align: left;
	position: relative;
}

h1 {
	font-family: 'Lora', serif;
	font-weight: 700;
	font-style: italic;

	font-size: 180%;
	/*margin: 20px 0px 20px 0px;*/
	margin: 30px 0px 30px 0px; /*24.04.2023*/
}

h1.h1_color_hex {
	/*margin-bottom: 10px;*/
	margin-bottom: 30px; /*24.04.2023*/
}
	h1.h1_color_hex > span {
		/* font-family: 'Roboto', Verdana, Arial, sans-serif; */
		font-family: 'Open Sans', Verdana, Arial, sans-serif;
		font-style: normal;
		font-weight: 400;

		font-size: 90%;
	}

h2 {
	font-family: 'Lora', serif;
	font-weight: 700;
	font-style: italic;

	font-size: 150%;

	margin-top: 20px;
	/*margin-bottom: 10px;*/
	margin-bottom: 20px;/*24.04.2023*/
}
	h2 > span {
		/* font-family: 'Roboto', Verdana, Arial, sans-serif; */
		font-family: 'Open Sans', Verdana, Arial, sans-serif;
		font-style: normal;
		font-weight: 500;
		font-weight: 400;

		font-size: 90%;

	}

h2 + h3 {
	margin-top: 10px;
}

h3 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-style: normal;

	font-size: 120%;

	margin-top: 40px;
	margin-bottom: 10px;

	font-weight: bold;
}
	h3 > span {
		/* font-family: 'Roboto', Verdana, Arial, sans-serif; */
		font-family: 'Open Sans', Verdana, Arial, sans-serif;
		font-style: normal;
		font-weight: 400;

		font-size: 100%;
	}
h3.lor {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-style: normal;
	font-family: 'Lora', serif;
	font-weight: 700;
	font-style: italic;

	font-size: 120%;

	margin-top: 20px;
	margin-bottom: 10px;
}

h3 a span.circ_ans {
		display: inline-block;
		color: #999;
		border: 1px solid #999;
		font-size: 11px;
		border-radius: 8px;
		width: 17px;
		height: 17px;
		text-align: center;
		/*position: relative;
		top: -10px;*/
		vertical-align: super;

	}
		h3:hover a span.circ_ans {
			color: #333;
			border: 1px solid #333;
			/*background: #a9ffad;*/
			font-weight: bold;
		}

h4 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-style: normal;

	font-size: 100%;
	font-weight: bold;
	font-style: italic;

	margin-top: 20px;
	margin-bottom: 10px;
}

#footer {
	width: 100%;
	position: relative;
	/* margin-top: 100px; */
	/*background-color: #282828;*/
	background-color: #000c10;
}

#footer_content {
	padding: 80px 40px 30px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	text-align: left;
}

#random_colors {
	display: -webkit-flex; /* Safari */
	display: flex;
	justify-content: center;
	justify-content: space-around;
	margin: 0 auto;
	
	-webkit-flex-wrap: wrap; /* Safari */
	flex-wrap: wrap;
}

/* #footer_content */
	.color_rand_link {
		display: inline-block;
	}
	.color_rand_circle {
		background-color: #fff;
		width: 20px;
		height: 20px;
		border-radius: 10px;
		margin: 30px 30px;

		-webkit-transition: all 0.3s ease;;
		-moz-transition: all 0.3s ease;;
		-o-transition: all 0.3s ease;;
		transition: all 0.3s ease;
	}
	.color_rand_link:hover > .color_rand_circle {
		-webkit-transform: scale(3);
		-ms-transform: scale(3);
		transform: scale(3);
	}

/* color_hex */
/* p.conversions {
	font-family: 'Roboto', Verdana, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 90%;
	padding-bottom: 10px;
}
p.conversions > b {
	padding-right: 8px;
} */

.color_block {
	width: 100%;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	font-size: 100%;

	margin-bottom: 2px;
	/* font-family: 'Roboto', Verdana, Arial, sans-serif; */
	font-family: 'Open Sans', Verdana, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
}



table.name_web_colors, table.name_web_colors td, table.name_web_colors th {
	border: 1px solid #dddddd;
}
table.name_web_colors th {
	border: 1px solid #fff;
	border-bottom: 1px solid #dddddd;
}
table.name_web_colors {
	border-collapse: collapse;

	font-size: 100%;
	font-weight: normal;
	text-shadow: 0 0 1px rgba(0,0,0,0.2); /*<<<antialiasing*/
}
table.name_web_colors th {
	padding: 8px 8px;
	text-align: center;
}
table.name_web_colors td {
	padding: 10px 15px;
}

	table.name_web_colors td.hex_code {
		/* font-family: 'Roboto', Verdana, Arial, sans-serif; */
		font-family: 'Open Sans', Verdana, Arial, sans-serif;
		font-style: normal;
		text-align: center;
	}
table.name_web_colors td.color_name {
	padding: 5px 10px;
	font-size: 90%;
	text-align: center;
	vertical-align: middle;
}
table.name_web_colors a {
	color: #666666;
}
table.name_web_colors a:hover {
	text-decoration: none;
	color: #999999;
}




	div.cont_fl {
		display: flex;
		justify-content: space-between;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: center;
	}
	div.cont_fl_item {
		padding-right: 20px;
	}


	.chart-text {
		font-size: 12px;
		font-family: arial, sans-serif;
		fill: #000;
		transform: translateY(0.20em);
	}
	.chart-number {
		font-size: 0.6em;
		line-height: 1;
		text-anchor: middle;
		/* //transform: translateY(-0.25em); */
	}

	div.cont_fl2 {
		display: flex;
		justify-content: space-between;
		justify-content: space-around;
		flex-wrap: wrap;
		align-items: flex-start;
	}










table#conversion_color {
		margin-top: 10px;
		margin-bottom: 30px;
		/* font-family: 'Roboto', Verdana, Arial, sans-serif; */
		font-family: 'Open Sans', Verdana, Arial, sans-serif;
	    font-style: normal;
	    font-weight: 400;
	    text-shadow: 0 0 1px rgba(0,0,0,0.2);
	}
	table#conversion_color, tr, th, td {
		border-collapse: collapse;
		border: 1px solid #999;
	}
	table#conversion_color td {
		padding: 8px 15px;
		/* //border-bottom: 1px solid #999;
		//border-right: 1px solid #999; */
		font-size: 90%;
		text-align: left;
	}
		table#conversion_color td:last-child {
			/* //padding: 8px 5px;
			//border-right: 0px solid #999;
			//font-size: 90%; */
		}
		table#conversion_color td:first-child {
			font-weight: 700;
		}







	#story {
		text-align: center;
		margin-top: 10px;
		margin-bottom: 20px;
	}
	#story a {
		display: inline-block;
		font-size: 70%;
		
		/*padding: 10px 8px;
		margin: 0px 0px;*/
		padding: 10px 12px;
		margin: 0px 5px 5px;

		color: #000000;
		border: 1px solid #ffffff;
	}
	#story a:hover {
		color: #000000;
		text-decoration: none;
		border: 1px solid #333333;
	}





p img.img5 {
	max-width: 500px;
	width: 100%;
}
p img.img1 {
	max-width: 100px;
}
p img.img3 {
	max-width: 300px;
	width: 100%;
	/*margin: 20px;*/
	padding: 20px;
}
p.p_center {
	text-align: center;
}

.example_colors {
	text-align: center;
	padding-bottom: 20px;
}
.example_colors_b {
	display: inline-block;
	background-color: black;
	padding: 20px;
	border: 1px solid black;
}
.example_colors_w {
	display: inline-block;
	background-color: white;
	padding: 20px;
	border: 1px solid black;
}
	.example_colors_b div, .example_colors_w div {
		display: inline-block;
	}


.cards2 {
		background-color: #ffffaa;

		/*display: -webkit-grid;
		grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
		grid-gap: 0.5em;
		margin: initial;*/

		display: flex;
		flex-flow: column wrap;
		align-content: space-between;
		height: 600px;
		width: 100%;
		/* //counter-reset: items;

		//flex-wrap: wrap;
		//margin: -1em 0 1em -0.5em;
		//justify-content: space-around;
		//justify-content: center;
		//justify-content: flex-start; */

		/*display: inline-block;*/
}
a.card2 {
	background-color: #ffaaaa;

	width: 24%;
	position: relative;
	margin-bottom: 2%;
	box-sizing: border-box;
	/*padding: initial;
	max-width: none;*/
	
	/* //padding: 1em 0 0 0.5em;
	//flex: 1 0 20em;
	//max-width: 20em;
	//width: auto;
	//margin: initial;
	//margin: 10px; */

	/*width: 20em;
	display: inline-block;
	vertical-align: top;
	margin: 1em 0.5em;
	text-align: left;*/
}

/*@media screen and (min-width: 480px) {
	a.card2 {
		width: 50%;
	}
}
@media screen and (min-width: 768px) {
	a.card2 {
		width: 33.333%;
	}
}
@media screen and (min-width: 1024px) {
	a.card2 {
		width: 25%;
	}
}
@media screen and (min-width: 1280px) {
	a.card2 {
		width: 20%;
	}
}*/


	.cards {
		/* //padding-top: 20px;
		//padding-bottom: 20px; */
		/*text-align: center;*/

		display: flex;
		flex-direction: row;
		/*justify-content: space-around;*/
		justify-content: center;
		/*align-items: stretch;*/
		flex-wrap: wrap;

		/* //background-color: #ffffaa;
		//padding: 0px 0px 20px 20px; */
		margin: -10px;
		align-items: stretch;
	}
	a.card {
		border: 1px solid #666;
		display: block;
		/*//display: inline-block;
			display: block;
		//width: 30%;
		max-width: 300px;
		padding: 20px;*/
		text-decoration: none;
		/*box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);*/
		transition: box-shadow .3s;

		/* //background-color: #ffaaaa; */
		width: 30%;
		min-width: 250px;
		max-width: 400px;
		flex-grow: 1;
		padding: 20px;
		/* //margin: 20px 20px 0px 0px; */
		margin: 10px;
	}
		div.card_img {
			height: 200px;
		}
		div.card_title {
			text-align: left;
			font-size: 140%;
			font-family: 'Lora', serif;
	    	font-weight: 700;
	    	/* //font-style: italic; */
	    	padding-bottom: 10px;
	    	color: #666666;
		}
		div.card_description {
			text-align: left;
			padding-bottom: 10px;
			color: #808080;
		}
	a.card:hover {
		text-decoration: none;
		/*box-shadow: 0 10px 20px 0 rgba(0,0,0,0.4),0 6px 20px 0 rgba(0,0,0,0.19);*/
		box-shadow: 0 5px 11px rgba(33,33,33,.3);
	}
	a.card_break {
		/*display: inline-block;
		flex-basis: 100%;
		width: 0;
		margin: 0;
		content: "";
		padding: 0;

		min-width: 0px;
		max-width: 0px;
		flex-grow: unset;*/
		/* //border: 0;
		//margin: 0; */
		content: "";
		/* //padding: 0; */
		visibility: hidden;
	}
	/*a.card:nth-child(2n) {
		background-color: red;
	}*/
	/*a.card:nth-of-type(3n+1) {
		background-color: red;
	}*/
	/*a.card + a.card {
		margin-left: 20px;
	}*/





@media screen and (max-width:1100px){
	body {
		/*background: red;*/
	}

	div.cont_fl2 {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: flex-start;
		flex-direction: column;
	}

	a.card {
		/* //display: inline-block;
		//width: 40%; */
	}
}

@media screen and (max-width:800px){
	body {
		/*background: red;*/
	}

	a.card {
		/* //display: inline-block;
		//width: 50%; */
	}

	p img.img3 {
		padding: 10px;
	}
}

@media screen and (max-width:600px){
	body {
		/*background: red;*/
	}

	a.card {
		/* //display: block;
		//width: 100%; */
	}

	#box_6_color {
		width: 60%;
	}
	
}

@media screen and (max-width:400px){
	body {
		/*background: red;*/
	}
	
	#color_hex {
		float: none;
		/*width: 100%;*/
		/*height: 200px;*/
		margin-bottom: 20px;
		/*text-align: right;*/
	}

	/* #content, #header {
		padding: 0px 20px;
	} */
	#header {
		padding: 0px 20px;
	}

	#ans {
		/*background-color: #eeeeee;*/
		float: none;
		display: block;
		/* //margin-left: calc(50% - 150px);
		//margin-left: 50px;
		
		//margin-bottom: 30px; */
		margin: 0;
		margin-top: 10px;
		margin-bottom: 30px;
	}

	#ans_ta {
		max-width: 100%;

	}

	/*#test1 {
		float: none;
		width: 100%;
	}*/

	div.cont_fl_item {
		/*background: red;*/
		padding-right: 0px;
		width: 100%;
	}
		div.cont_fl_item div {
			/*background: green;*/
			width: 100%;
		}

		div.cont_fl_pie {
			/*background: red;*/
			margin: 0 auto;
		}

	table#conversion_color {
		width: 100%;
	}

	#story a {
		padding: 10px 8px;
		margin: 0px 0px;
	}

	p img.img3 {
		padding: 0px;
	}

	#box_6_color {
		width: 70%;
	}

}


















	#view_btn {
		padding: 15px 30px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		/*//border: none;
		//border-radius: 30px;
		//background-color: #555555;
		//color: white;*/
			border: 1px solid #888;
			transition-duration: 0.1s;
			cursor: pointer;
		margin-top: 10px;
		margin-bottom: 20px;

		background-color: white;
		color: #888;

		outline: none;


		background-color: #333;
		color: white;


	}
	#view_btn:focus {
		outline: #bbb solid 1px;
	}
	#view_btn:hover {
		/*//background-color: white;
		//color: black;
		//background-color: #555555;
		//color: white;*/

		background-color: #eee;
		border: 1px solid #666;
		color: #555;

		border: 1px solid #888;

	}
		#view_btn span {
			
		}
	#div_view_btn {
		text-align: center;
	}










div.color_block_improved {
		width: 100%;
		padding-top: 20px;
		padding-bottom: 20px;
		text-align: center;
		font-size: 100%;

		margin-bottom: 2px;
		/* font-family: 'Roboto', Verdana, Arial, sans-serif; */
		font-family: 'Open Sans', Verdana, Arial, sans-serif;
		font-style: normal;
		font-weight: 400;

		display: flex;
		justify-content: space-around;
	}
	div.color_block_improved div {
		width: 30%;
		max-width: 224px;
		padding: 2px;
	}
	div.color_block_improved.color4 div {
		width: 22%;
		max-width: 224px;
		padding: 2px;
	}
	div.color_block_improved.color5 div {
		width: 18%;
		max-width: 224px;
		padding: 2px;
	}

	@media screen and (max-width:600px) {
		div.color_block_improved {

			/* //justify-content: space-around;
			//justify-content: center; */
			flex-direction: column;
			align-items: center;
			margin-bottom: 5px;
		}
		div.color_block_improved div, div.color_block_improved.color4 div, div.color_block_improved.color5 div {
			margin-bottom: 5px;
			width: 60%;
		}
	}