@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap');
/*@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300&display=swap');*/

* {
	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;
}
html {height: 100%;}
body {
	




	/*OPEN SANS отсутствует

	проверить все font-family*/






	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 100%;
		background-color: #131311;
		
	direction: ltr;
		color: #e3e3e2;
	width: 100%;
	height: 100%;

	transition: background-color 0.5s ease;

	background-color: #f0f0f0;
	color: #333;
	color: #919191;

	text-align: left;
}

#content {
	width: 100%;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

}

#header {
	font-size: 500%;
	font-family: 'Josefin Sans', sans-serif;
	font-weight: 100;
	
	margin: auto;
	margin-top: 10%;
	margin-bottom: 2%;
}
	#header a {
		text-decoration: none;
		color: #a3a3a2;
	}
#main {

	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-bottom: 50px;
	margin-bottom: 20px;
}
#footer {

}

#quad {
	width: 400px;
	height: 400px;

	border: 0px;
	border-radius: 10px;

	background: rgb(0,69,148);
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

	margin: 50px;
}
.box_color_left, .box_color_right {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: 300;
}
	.color_text {
		font-size: 200%;
		text-transform: uppercase;
		letter-spacing: 2px;
		color: #b1b1b1;
		cursor: pointer;
	}
	.circle {
		width: 60px;
		height: 60px;
		border: 0px;
		border-radius: 30px;
		margin: 20px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		cursor: pointer;
	}
		.one {
			background-color: rgba(0,69,148,1);
		}
		.two {
			background-color: #B8002A;
		}




/* DAY-NIGHT */
	body.night {
		background-color: #131311;
		color: #a3a3a2;
	}
	body.night .color_text {
		color: #909090;
	}

	.toggle-box {
		position: absolute;
		top: 10px;
		right: 10px;
	}
	.toggle-box-label-left:empty {
		margin-left: -10px;
	}
	.toggle-box-label-left:before,
	.toggle-box-label-left:after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		-webkit-transition: 0.25s ease-in-out;
		-moz-transition: 0.25s ease-in-out;
		-o-transition: 0.25s ease-in-out;
		transition: 0.25s ease-in-out;
		outline: none;
	}
	.toggle-box input[type=checkbox],
	.toggle-box input[type=checkbox]:active {
		position: absolute;
		top: -5000px;
		height: 0;
		width: 0;
		opacity: 0;
		border: none;
		outline: none;
	}
	/*bg widget*/
	.toggle-box label {
		display: inline-block;
		position: relative;
		padding: 0px;
		margin-bottom: 20px;
		font-size: 14px;
		line-height: 16px;
		cursor: pointer;
		color: rgba(149, 149, 149, 0.51);

		font-weight: normal;
	}
	/*sun*/
	.toggle-box-label-left:before {
		content: '';
		display: block;
		position: absolute;
		z-index: 1;
		line-height: 34px;
		text-indent: 40px;
		height: 16px;
		width: 16px;
		margin: 4px;
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
		right: 26px;
		bottom: 0px;
		background: #FFB200;
			background: #E6C77F;

		transform: rotate(-45deg);
		box-shadow: 0 0 10px white;
	}
	/*sun on bg*/
	.toggle-box-label-left:after {
		content: "";
		display: inline-block;
		width: 40px;
		height: 24px;
		-webkit-border-radius: 16px;
		-moz-border-radius: 16px;
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.15);

		vertical-align: middle;
		margin: 0 10px;
		border: 2px solid #FFB200;
		border: 2px solid #E6C77F;
	}
	/*black side moon and moon*/
	.toggle-box input[type=checkbox]:checked + .toggle-box-label-left:before {
		right: 17px;
		box-shadow: 5px 5px 0 0 #eee;
			box-shadow: 5px 5px 0 0 #909090;
		background: transparent;
	}
	/*border night*/
	.toggle-box input[type=checkbox]:checked + .toggle-box-label-left:after {
		background: rgba(0, 0, 0, 0.15);
		border: 2px solid white;
			border: 2px solid #909090;
	}
/* /DAY-NIGHT */


/* MODAL COLOR */
	.overlay {
		height: 0;
		width: 100%;

		position: fixed;
		z-index: 1;
		left: 0;
		bottom: 0;
			bottom: -100%;
		background-color: rgb(0,0,0);
		background-color: rgba(0,0,0, 0.9);
		overflow-x: hidden;
		transition: 0.5s;
	}

	.overlay-content {
		position: relative;
		top: 25%;
		width: 100%;
		text-align: center;
		margin-top: 30px;
	}

	.overlay a {
		padding: 8px;
		text-decoration: none;
		font-size: 36px;
		color: #818181;
		display: block;
		transition: 0.3s;
	}

	.overlay a:hover, .overlay a:focus {
		color: #f1f1f1;
	}

	.overlay .closebtn {
		position: absolute;
		top: 20px;
		right: 45px;
		font-size: 60px;
		color: #bbbbbb;
	}


	@media screen and (max-height: 450px) {
		.overlay a {
			font-size: 20px;
		}
		.overlay .closebtn {
			font-size: 40px;
			top: 15px;
			right: 35px;
		}
	}



	/* hsl-picker */
	.hsl-picker {
		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: 'Source Sans Pro', Arial, sans-serif;
		letter-spacing: 2px;
		font-style: normal;
		font-weight: 400;
		width: 100%;
		height: 100px;
		background-color: var(--value);
		margin-top: 20px;
		border-radius: 25px;
		padding: 5px 20px;
		font-size: 90%;

		display: flex;
		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;
	}

	.hsl-picker > [data-pick=hue] {
		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))
		);
	}

	.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;
	}

		#view_btn {
			padding: 12px 35px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
				border: 0;
				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: #eee;
			color: #555;
		}
		#div_view_btn {
			text-align: center;
		}



	.hsl-picker input[type=text] {
		-webkit-appearance: none;
		margin: 20px 0;
		width: 100%;
		height: 50px;
		display: block;
		outline: none;
		border-radius: 25px;
		padding-left: 50px;
		border:none;
		box-shadow:none;
		font-size: 26px;
		color:#686868;
		font-family: 'Source Sans Pro', sans-serif;
		font-weight: 300;
		letter-spacing: 2px;
	}


	#view_btn {
		background: linear-gradient(-45deg, #ec4646, #ece446, #46ec49, #46ece6, #4659ec, #c546ec, #ec4699, #ec4646, #ece446, #46ec49, #46ece6);
		background-size: 400% 400%;
		animation: gradient 10s ease infinite;
	}
	@keyframes gradient {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}

	#view_btn::before {
		content: "";
	}
/* /MODAL COLOR */



@media screen and (max-width: 1100px) {
	#main {
		flex-direction: column;
		width: 90%;
		max-width: 900px;
	}
	#quad {
		margin: 20px;
	}
	.box_color_left {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.box_color_right {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
}

@media screen and (max-width: 800px) {
	#header  {
		font-size: 600%;
		font-size: 400%;
	}
	#main {
		flex-direction: column;
		width: auto;
		max-width: none;
	}

	.box_color_left, .box_color_right {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.box_color_left {
		width: 100%;
		justify-content: flex-end;
			justify-content: space-between;
		align-items: center;
		padding-right: 150px;/*200-30-20*/
	}
	.box_color_right {
		width: 100%;
		justify-content: flex-start;
			justify-content: space-between;
		align-items: center;
		padding-left: 150px;/*200-30-20*/
	}
	#quad {
		margin: 0px;
	}
}

@media screen and (max-width: 600px) {
	#header  {
		font-size: 500%;
		font-size: 300%;
	}
	#quad {
		width: 350px;
		height: 350px;
		border-radius: 8px;
	}
	.box_color_left {
		flex-direction: row-reverse;
		width: 350px;
		justify-content: flex-end;
		align-items: center;
		padding: 0px;
	}
	.box_color_left > .circle.one {
		margin-left: 0px;
	}
	.box_color_right {
		flex-direction: row-reverse;
		width: 350px;
		justify-content: flex-start;
		align-items: center;
		padding: 0px;
	}
	.box_color_right > .circle.two {
		margin-right: 0px;
	}
}

@media screen and (max-width: 400px) {
	#header  {
		font-size: 350%;
		font-size: 300%;
	}
	#quad {
		width: 250px;
		height: 250px;
		border-radius: 5px;
	}
	.box_color_left {
		flex-direction: row-reverse;
		width: 250px;
		justify-content: flex-end;
		align-items: center;
		padding: 0px;
	}
	.box_color_left > .circle.one {
		margin-left: 0px;
	}
	.box_color_right {
		flex-direction: row-reverse;
		width: 250px;
		justify-content: flex-start;
		align-items: center;
		padding: 0px;
	}
	.box_color_right > .circle.two {
		margin-right: 0px;
	}

	.overlay-content {
	    top: 15%;
	}
}

@media screen and (max-width: 300px) {
	#header  {
		font-size: 300%;
		font-size: 250%;
	}
	.overlay-content {
	    top: 10%;
	}
	.overlay .closebtn {
	    font-size: 40px;
	}
}






#icon_copy_link {
	width: 20px;
	margin-bottom: 30px;
}
#icon_copy_link svg {
	cursor: pointer;
}
#icon_copy_link svg path {
	fill: #606060;
}
#icon_copy_link:hover svg path {
	fill: #808080;
}


div.wrap_prewiews{
	text-align: center;
}
	div.preview {
		width: 100px;
		object-fit: contain;
		display: inline-block;
	}
		div.preview a {
			text-decoration: none;
			color: #888888;
		}
			div.preview a img {
				height: 100%;
				width: 100%;
				object-fit: contain;
			}


h2 {
	padding: 40px 0px 10px 0px;
  	text-align: left;
  	font-size: 140%;
    color: #909090;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    margin: 0 auto;
	width: 90%;
}


.wrapper {
	margin: 0 auto;
	width: 90%;
	padding-bottom: 20px;
}

.cards {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cards li {
	color: #fff;
	flex: 1 1 200px;
}

.cards h2 {
	margin: 0;
	padding: 10px;
  	text-align: center;

  	font-size: 140%;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #606060;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    width: 100%;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}

	.flex li {
	flex: 1 1 200px;
	margin: 10px;
}

.grid {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-gap: 20px;
}

ul.cards li p {
	width: 200px;
	height: 200px;
}
ul.cards li a {
	display: block;
	width: 200px;
	height: 200px;
	margin: 0 auto;

	padding: 10px;

  	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  	border-radius: 6px;

  	transition: 0.25s ease-in-out;
}
	ul.cards li a:hover {
		box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.5), 0 6px 26px 0 rgba(0, 0, 0, 0.4);
		transform: scale(1.05);
	}
@media screen and (max-width: 1200px) {
	.grid {
		display: grid;
		grid-template-columns: repeat(3,1fr);
		grid-gap: 20px;
	}
}
@media screen and (max-width: 800px) {
	.grid {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		grid-gap: 20px;
	}
}
@media screen and (max-width: 600px) {
	.cards h2 {
		font-size: 120%;
	}
}
@media screen and (max-width: 500px) {
	.cards h2 {
		font-size: 80%;
	}
	ul.cards li a {
		width: 150px;
		height: 150px;
	}
}
@media screen and (max-width: 400px) {
	.cards h2 {
		font-size: 65%;
	}
	ul.cards li a {
		width: 140px;
		height: 140px;
	}
}
@media screen and (max-width: 350px) {
	.cards h2 {
		display: none;
	}
	ul.cards li a {
		width: 120px;
		height: 120px;
	}
}
@media screen and (max-width: 300px) {
	ul.cards li a {
		width: 110px;
		height: 110px;
	}
}


div#cookie {
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	width: 100%;
	padding: 20px 50px;
	text-align: center;
	transition: 0.25s ease-in-out;
}
a#close_cookie {
	position: absolute;
	top: 9px;
		top: calc(50% - 22px);
	right: 5%;			
	font-size: 200%;
	color: #bbbbbb;
	text-decoration: none;
	transition: 0.1s ease-in-out;
	
}
div#cookie:hover {
	background-color: rgba(0,0,0,0.9);
}
div#cookie:hover a {
	color: #ffffff;
	font-weight: bold;
	text-shadow: 0px 0px 5px rgba(255,255,255,0.7);
}
div#cookie:hover a#close_cookie:hover {
	transform: scale(1.5);
	text-shadow: 0px 0px 15px rgba(255,255,255,1.0);
}





@keyframes tap_animation {
   0%   {transform:scale(.5);}
   40%  {transform:scale(2);}
   80% {transform:scale(0);}
}
    
    
.tap_go {
	display: block;
    animation: tap_animation 3.9s;
}

.tap {
	display: none;
}



	input[type=range]{
		pointer-events: none;
	}
	input[type=range]::-webkit-slider-thumb{/*Webkit Browsers like Chome and Safari*/
		pointer-events: auto;
	}
	input[type=range]::-moz-range-thumb{/*Firefox*/
		pointer-events: auto;
	}
	input[type=range]::-ms-thumb{/*Internet Explorer*/
		pointer-events: auto;
	}