/*
Theme Name: FontMagic - White v5.1 / 2020
Author: Manish Sharma
Author URI: https://www.simplygraphix.com/
Description: Theme developed By Keshav Naidu.
Version: 4.1
Tags: light, white, black, gray
Text Domain: FontMagic.com
*/
/* -------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: inherit;
	/*-webkit-font-smoothing: antialiased;*/
	word-break: break-word;
	word-wrap: break-word;
	letter-spacing: 0.5px;
}

@supports ( font-variation-settings: normal ) {
body {font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;}
}

::selection {
	color: #fff;
	background: #333;
}


* {
	margin: 0;
	padding: 0;
	/*font-family: Arial, Verdana;*/
	-moz-box-sizing: border-box; box-sizing: border-box;
}

html {
	/*scroll-behavior: smooth;*/
	-webkit-text-size-adjust: 100%;
}
body {
	font-size: 14px;
	color: #555;
	line-height: 150%;
	font-weight: inherit;
}
a {
	text-decoration: none;
	color: #888;
}
a:hover {
	color: #000;
	/*text-decoration: underline;*/
}

h1, h2, h3, h4, h5 {
	display: block;
	color: #333;
	margin: 0 0 10px 0;
	padding: 0;
	line-height: 100%;
}
h1 {font-size: 50px; margin-bottom: 20px;}
h2 {font-size: 16px; color: #555;}
h3 {font-size: 15px; color: #333;}
h4 {font-size: 14px; color: #c0c0c0;}
h5 {font-size: 14px;}


p {
	margin: 0 0 30px 0;
	padding: 0;
	line-height: 180%;
}
p a {color: #000;}

hr {
	background-color: none;
	height: 1px;
	border: none;
	border-top: 1px solid #eee;
	margin: 6px 0;
}

input[type=text],
input[type=password],
input[type=number],
input[type=email],
input[type=search],
input[type=button],
input[type=submit],
textarea,
button,
.button
{
	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;
}

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

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

.button,
button,
input[type=submit],
input[type=button] {
	color: #fff;
	background: #333;
	border: none;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
}

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

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

input[type="button"]:disabled, button:disabled {
	background: #f0f0f0;
	color: #c0c0c0;
}

input[type=radio],
input[type=checkbox]
 {

}

input[type=range] {
	height: 20px;
	-webkit-appearance: none;
	display: block;
	margin: 0px 0;
	width: 100%;
	background: none;
	transition: all 0.2s ease-in-out;
	margin-bottom: 0;
	padding: 0;
}
input[type=range]:focus {
	outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 6px;
	animate: 0.7s;
	background: #ddd;
	border-radius: 4px;
	border: none;
}
input[type=range]::-webkit-slider-runnable-track:hover {
	background: #ccc;
}
input[type=range]::-webkit-slider-thumb {
	border: none;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: #999;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -7px;
}
input[type=range]::-webkit-slider-thumb:hover {
	background: #666;
	transform: scale(1.1);
}
input[type=range]::-webkit-slider-thumb:active {
	background: #333;
	transform: scale(0.90);
}
button:disabled {opacity: 0.5;}

.icon {
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url(images/icons.svg);
	background-repeat: no-repeat;
	background-position: 0 0;
	/*background-color: pink;*/
}
.close {background-position: 0 -27px;}
.love {background-position: 0 -87px;}
.loved {background-position: 0 -117px;}

.fb {background-position: 5px -157px;}
.tw {background-position: 3px -196px;}
.ins {background-position: 3px -234px;}
.pin {background-position: 4px -270px;}
.eml {background-position: 3px -300px;}

.fb-w {background-position: -14px -158px;}
.tw-w {background-position: -17px -197px;}
.ins-w {background-position: -18px -234px;}
.pin-w {background-position: -16px -271px;}
.eml-w {background-position: -18px -300px;}

.search {background-position: 0px -57px;}
.search-white {background-position: 0px -309px;}
.dwnld {background-position: 0px -374px;}
.dwnld-w {background-position: -17px -374px;}
.igoogle {background-position: 0px -400px;}
.copy {background-position: 0px -426px;}
.share {background-position: 2px -445px;}
.undo {background-position: 3px -466px;}
.ar-right {background-position: 3px -487px;}
.swap {background-position: 3px -507px;}
.dropper {background-position: 3px -528px;}
.reset {background-position: 3px -466px;}
.leftar {background-position: 3px -550px;}
.rightar {background-position: 8px -570px;}

.ext {background-position: 3px -590px;}
.lnk {background-position: 3px -610px;}
.inf {background-position: 3px -630px;}

.eye {background-position: 3px -648px;}
.time {background-position: 3px -666px;}

.clr {clear: both;}
.align-left {text-align: left;}
.align-right {text-align: right;}

.shadow {box-shadow: 0px 1px 13px 1px rgba(0,0,0,0.090);}

label {
	font-size: 12px;
	display: inline-block;
	padding: 0 4px;
}

blockquote {
	display: inline-block;
	background-color: #f9f9f9;
	padding: 10px 10px 10px 30px;
	border-left: 2px solid #333;
	margin-bottom: 30px;
	position: relative;
}
blockquote:before {
	content: '"';
	color: #c0c0c0;
	font-size: 50px;
	position: absolute;
	top: 5px;
	left: 5px;
}
blockquote p {padding: 0; margin: 0;}

ul, ol {
	margin: 0 0 30px 0px
}
ul {list-style: none;}
ul li, ol li {padding-left: 0px; margin-bottom: 10px;}

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

header {
	width: 100%;
	background-color: #fff;
	/*position: -webkit-sticky;
	position: sticky;*/
	position: fixed;
	top: 0;
	z-index: 200;
	height: 70px;
	padding: 15px 0;
	box-shadow: 0px 1px 18px rgba(0,0,0,0.090);
	background-color: #fff;

}

main {
	/*min-height: 84vh;*/
	margin: 0 auto;
}

.trans {transition: all 0.1s ease-in-out;}
.grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
}


.gap5 {grid-gap: 5px;}
.gap10 {grid-gap: 10px;}
.gap20 {grid-gap: 20px;}

.centered,
.centered-medium,
.centered-small,
.centered-vsmall {
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}

.centered {max-width: 1200px;}
.centered-medium {max-width: 1000px;}
.centered-small {max-width: 920px;}
.centered-vsmall {max-width: 720px;}

.space-top {padding-top: 36px;}
.space-bottom {padding-bottom: 36px;}
.space-top-small {padding-top: 20px;}
.space-bottom-small {padding-bottom: 20px;}

.align-center {text-align: center;}
.uppercase {text-transform: uppercase;}

.logo {
	display: inline-block;
	margin-top: -3px;
}
.logo img {display: block; width: 100%; height: auto; margin-top: 0px;}

.head-grid {
	width: 100%;
	display: grid;
	grid-template-columns: 100px 1fr 1fr auto;
	grid-gap: 40px;
}
.head-finder {
	/*background-color: pink;*/
	position: relative;
}
.head-finder input {width: 100%; padding-right: 40px;}
.head-finder button {
	position: absolute;
	top: 8px;
	right: 8px;
	background: none;
	border-radius: 0;
	padding: 0;
	line-height: 0;
	width: 20px; height: 20px;
	opacity: 0.5;
	transform: scale(0.86);
}
.head-finder button:hover {opacity: 1;}
.head-finder button:active {transform: scale(0.7);}

nav {}
nav ul {list-style: none; margin: 0; padding: 0;}
nav ul li {display: inline-block; margin: 0; padding: 0;}
nav ul li .toplevel {
	font-size: 12px;
	display: inline-block;
	height: 38px;
	line-height: 38px;
	padding: 0 14px;
	color: #333;
	font-weight: 500;
}
nav ul li .toplevel:hover {
	color: #000;
}
nav ul li .toplevel:active {
	color: #000;
	/*transform: scale(0.94);*/
}
nav ul li .dp {
	display: inline-block;
	width: 28px; height: 28px;
	border-radius: 50%;
	margin-bottom: -11px;
	margin-left: 8px;
	border: 1px solid #f0f0f0;
}
.menu-more {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 20px;
}
.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: 17px;


}

.model{
	z-index: 80;
	display:none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	padding: 30px;
	background-color: #fff;
	/*cursor: zoom-out;*/
	background-color: rgba(255,255,255,0.94);
	z-index: 90;
	text-align: center;
}
.model-inner {
	display: table-cell;
	width: 100%;
	height: 100vh;
	vertical-align: middle;
	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: #fff;
	position: relative;
	display: block;
	top: 90px;
	max-width: 600px;
	padding: 30px;
	margin: 0 auto;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
	border-radius: 8px;
	z-index: 100;
}

.model-content h3 {padding-bottom: 20px;}
.model-close-button {
	position: absolute;
	right: 10px;
	top: 15px;
	display: inline-block;
	width: 40px;
	height: 40px;
	text-align: center;
	cursor: pointer;
	z-index: 500;
	color: #000;
	font-size: 14px;
	line-height: 40px;
	border-radius: 50%;
	text-decoration: none;
}
.model-close-button:hover {
	opacity: 1;
	transform: scale(1.1,1.1);
}



.flash {
	display: block;
	padding: 4px 10px;
	color: #000;
	font-size: 11px;
	font-weight: 700;
	background-color: #abec9e;
	border-radius: 4px;
	margin-bottom: 10px;
}
.flashonn {
	display: block !important;
}

.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: 30px;
	padding: 20px;
	z-index: 10;
	background-color: #fff;
	transition: all 0.080s ease-in-out;
	border-radius: 4px;
}
.dropdown.is-open {
	/*display: block;*/
	top: 48px;
	visibility: visible;
	transform: scale(1,1);
	opacity: 1;
}
.dropdown h4 {font-size: 15px; font-weight: 400; color: #333;}
.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;
	
}

.right0 {right: 0;}
.explore {width: 300px;}
.explore .head-finder {margin-bottom: 20px;}

.logg {width: 180px;}

.explore-items, .logg-items {margin: 0; padding: 0;}
.explore-items li, .logg-items li {
	font-size: 11px;
	display: inline-block;
	width: 30%;
}
.explore-items li a, .logg-items li a {
	display: block;
	padding: 5px 0;
}
.logg-items li {display: block; width: 100%;}

.login-form {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 10px;
}
.login-form input, .login-form button {width: 100%; display: block;}
.social-login {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 10px;
}
.social-login a {color: #fff; padding: 10px; font-size: 10px;	text-align: center; border-radius: 5px; transition: all 0.2s ease-in-out;}
.social-login a .icon {margin-bottom: -6px;}
.fb {background-color: #4267B2!important;}
.fb:hover {color: #fff!important; background-color: #4267B2;}
.tw {color: #1DA1F2!important; border-color: #1DA1F2!important;}
.tw:hover {color: #fff!important; background-color: #1DA1F2;}
.gm {background-color: #3484F0!important;}
.gm:hover {background-color: #3484F0!important; color: #fff!important;}


.hero {
	display: table;
	width: 100%;
	min-height: 380px;
	/*border-bottom: 1px solid #f0f0f0;*/
	padding: 0px 0;
	background: url(images/hero-bg3.svg) no-repeat top center;
	background-color: #322d9b;
	background-size: 100%;
	background-size: cover;
	text-align: center;
}
.hero .hero-inside {
	display: table-cell;
	vertical-align: middle;
	margin: 0 auto;
	text-align: left;
}
.tansblock {
	background-color: rgba(0,0,0,0.6);
}


.hero h1 {font-size: 62px; color: #fff; padding: 0; display: block; text-shadow: 1px 2px 3px rgba(0,0,0,0.2);}
.hero p {font-size: 12px; color: #fff; text-align: center; margin: 0; padding: 0; margin-top: 15px;}

.headergap {height: 70px;}
.hero-grid {
	/*display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 20px;*/
	text-align: center;
}
.hero-right {
	text-align: center;
	display: block;
	/*background-color: pink;*/
	}
.hero-right img {
	display: block;
	margin: 0 auto;
	width: auto;
	height: 100%;
}

.fonts-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 40px;
	margin: 0; padding: 0;
}
.fonts-list li {
	border-radius: 6px;
	overflow: hidden;
}
.fonts-list .font-thumb {
	display: block;
	width: 100%;
	min-height: 100px;
	background: #f0f0f0 url(images/loader.svg) no-repeat center center;
}
.fonts-list img {
	display: block;
	width: 100%;
	height: auto;
}
.fonts-list .info {
	display: grid;
	grid-template-columns: 1fr auto;
	padding: 10px 16px;
	color: #ccc;
	width: 100%;
	background-color: #fff;
}
.fonts-list li:hover {box-shadow: 0px 1px 40px 4px rgba(0,0,0,0.080);}

.fonts-list li h2 {font-size: 13px; margin: 0 0 1px 0; padding: 0; line-height: 150%;}
.fonts-list li h2 a {color: #333;}
.fonts-list .fav {margin-top: 10px;}
.fonts-list .fav button {font-size: 0;}

.fav button {
	width: 21px;
	height: 21px;
	padding: 0;
	background: none;
	padding-top: 0px;
}

.by {
	font-size: 9px; text-transform: uppercase;
}
.by a {color: #000;}
.by a:hover {color: #000;}

.pop-search {
	column-count: 5;
	font-size: 12px;
	margin: 0;
	padding: 0 0px;
	color: #ecf4fb;
}
.pop-search li {padding: 2px 0;}
.pop-search a {color: #333; display: block;}
.pop-search a:hover {color: #000;}


.pagination {}
.pagination a, .current {
	font-size: 12px;
	color: #000;
	display: inline-block;
	width: 38px; height: 38px;
	line-height: 38px;
	text-align: center;
	background-color: #ddd;
	margin: 0 4px;
	border-radius: 4px;
}
.pagination a:hover {background-color: #000; color: #fff;}
.pagination a:active {transform: scale(0.90);}
.current {border-color: #333; background: #333; color: #fff;}

.text-bar {
	position: sticky;
	top: 60px;
}
.text-bar-in {
	background-color: #fff;
	padding: 10px;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.090);
	margin-top: -28px;
	border-radius: 5px;
	display: grid;
		grid-template-columns: 1fr 100px;
		grid-gap: 10px;

}
.text-bar-in input {display: block; width: 100%; border: none; font-size: 14px;}
.text-bar-in button {
	display: block;
	width: 100%;
}


footer {
	background-color: #333;
	color: #ddd;
	font-size: 12px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 20px;
}
footer ul {margin: 0; padding: 0;}
footer h4 {color: #ddd; text-transform: uppercase; margin-bottom: 20px;}
footer p {margin: 0; padding: 0 0 12px 0;}
footer a {color: #ccc;}
footer a:hover {color: #f0f0f0;}

.footer-logo {
	display: inline-block;
	font-size: 0;
	width: 110px;
	height: 52px;
	opacity: 0.6;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='52' viewBox='0 0 108 52'%3E%3Cpath fill='%23FFF' d='M93.854 9.039c-4.949 3.775-7.426 5.672-7.426 5.688 0 .081.895 3.057 2.682 8.933l-7.697-5.323c-.031 0-2.594 1.768-7.688 5.305.938-3.005 1.832-5.988 2.693-8.949-2.26-1.741-4.737-3.625-7.437-5.654 1.824-.021 4.726-.076 8.704-.164.334-.029.539-.045.62-.043.05-.081.17-.405.362-.974L81.424 0l3.111 8.913c1.271-.04 2.689-.031 4.256.024 1.6.034 2.695.046 3.279.036l1.784.066zm-5.567 1.808s-2.875-.063-5.108-.114c-.359-.952-.944-2.581-1.757-4.886-.243.774-1.885 4.857-1.885 4.857l-5 .114 4.137 3.174-1.508 4.929c2.793-1.961 4.213-2.94 4.262-2.94.03 0 1.431.979 4.193 2.938-.326-1.099-.807-2.752-1.441-4.962 1.06-.785 2.429-1.821 4.107-3.11z'/%3E%3Cg fill='%23FFF'%3E%3Cpath d='M32.285 49.789v-19.83l-9.204 15.566h-.741l-9.205-15.566v19.83h-1.08v-21.93h.988l9.668 16.338 9.667-16.338h.988v21.93h-1.081zM46.277 27.859h.926l9.421 21.93h-1.143l-3.243-7.568H41.242l-3.243 7.568h-1.174l9.452-21.93zm5.621 13.436L46.74 29.217l-5.189 12.078h10.347zM81.091 49.789V21.85h1.081v27.939h-1.081zM103.602 45.879c-.852.944-1.871 1.649-3.062 2.234-1.189.584-2.516.848-3.979.848-1.42 0-2.725-.292-3.914-.847-1.191-.553-2.217-1.304-3.08-2.237s-1.535-2.008-2.014-3.219c-.48-1.211-.721-2.474-.721-3.788 0-1.25.234-2.478.703-3.678.471-1.2 1.131-2.272 1.982-3.216s1.871-1.709 3.062-2.293c1.189-.584 2.516-.877 3.98-.877 1.375 0 2.658.277 3.848.83 1.189.555 2.217 1.299 3.08 2.232.861.934 1.539 2.123 2.029 3.332.105.26.193.904.276.904h1.171c-.1 0-.216-.797-.35-1.135-.523-1.323-1.26-2.566-2.211-3.612-.949-1.046-2.09-1.922-3.422-2.569-1.332-.646-2.807-.984-4.422-.984-1.551 0-2.986.296-4.309.901-1.32.605-2.467 1.416-3.439 2.441-.971 1.028-1.736 2.205-2.293 3.539s-.834 2.727-.834 4.183c0 1.396.262 2.76.785 4.092.525 1.334 1.268 2.514 2.229 3.539.959 1.025 2.105 1.857 3.439 2.492 1.33.637 2.805.955 4.422.955 1.527 0 2.953-.303 4.273-.908 1.322-.605 2.469-1.416 3.439-2.432.973-1.016 1.736-2.071 2.293-3.405.029-.07.05-.097.077-.097h-1.222c-.445 1.001-1.047 1.922-1.816 2.775zM77.975 39.105H67.036v1h9.728c.007 0 .272-.238.272-.244v.244h-.272c-.096 1-.299 1.728-.622 2.581-.459 1.211-1.114 2.289-1.966 3.232-.852.944-1.872 1.708-3.062 2.292s-2.517.878-3.979.878c-1.42 0-2.725-.277-3.914-.831-1.191-.554-2.217-1.297-3.079-2.23-.863-.934-1.535-2.005-2.015-3.216-.48-1.209-.721-2.472-.721-3.785 0-1.251.234-2.478.704-3.677.47-1.201 1.13-2.271 1.981-3.215s1.872-1.709 3.062-2.293 2.517-.877 3.98-.877c1.375 0 2.658.277 3.849.83 1.189.555 2.216 1.299 3.079 2.232.862.934 1.539 2.168 2.03 3.378.072.177.127.7.188.7h1.174c-.081 0-.164-.676-.265-.931-.524-1.323-1.261-2.59-2.211-3.635-.95-1.047-2.091-1.934-3.423-2.581-1.332-.646-2.807-.99-4.422-.99-1.551 0-2.986.293-4.308.898-1.321.605-2.468 1.415-3.439 2.44-.972 1.026-1.736 2.205-2.293 3.537-.557 1.334-.835 2.727-.835 4.183 0 1.396.262 2.76.786 4.092.524 1.334 1.267 2.514 2.228 3.539.96 1.025 2.106 1.857 3.439 2.492 1.331.637 2.806.955 4.422.955 1.528 0 2.953-.303 4.274-.908s2.468-1.416 3.439-2.432 1.736-2.31 2.293-3.644c.388-.928.633-2.017.751-3.017h.032c.036.003.054-.997.054-.997z'/%3E%3C/g%3E%3Cpath opacity='.99' fill='%23FFF' d='M1.035 1.68h15.457v4.848H6.144v4.716h9.3v4.847h-9.3v9.038H1.035V1.68zM26.119 8.558c1.245 0 2.396.213 3.455.639s1.977 1.015 2.752 1.769c.773.753 1.375 1.653 1.801 2.701s.639 2.194.639 3.438c0 1.245-.213 2.391-.639 3.438s-1.027 1.948-1.801 2.702c-.775.753-1.693 1.343-2.752 1.769s-2.21.639-3.455.639c-1.244 0-2.396-.213-3.455-.639-1.059-.426-1.976-1.016-2.75-1.769-.775-.754-1.375-1.654-1.801-2.702s-.639-2.193-.639-3.438c0-1.244.213-2.391.639-3.438s1.025-1.948 1.801-2.701c.774-.754 1.691-1.343 2.75-1.769 1.06-.426 2.211-.639 3.455-.639zm0 12.508c.502 0 .978-.092 1.426-.277.447-.186.846-.447 1.195-.786.348-.338.621-.753.818-1.244.196-.491.295-1.043.295-1.654 0-.61-.099-1.156-.295-1.637-.197-.48-.471-.896-.818-1.245-.35-.349-.748-.616-1.195-.802-.448-.186-.924-.278-1.426-.278s-.977.093-1.424.278-.847.453-1.195.802c-.35.35-.623.765-.818 1.245-.197.48-.295 1.026-.295 1.637s.098 1.163.295 1.654c.195.491.469.906.818 1.244.349.339.748.601 1.195.786s.922.277 1.424.277zM57.461 13.208h-2.816V9.081h2.816V4.169h4.912v4.912h3.963v4.127h-3.963v5.591c0 .362.044.695.131 1s.24.56.459.763c.327.294.753.439 1.276.439.35 0 .885-.13.885-.13l1.725 4.049c-.568.262-.906.35-1.561.503-.655.152-1.354.229-2.097.229-1.725 0-3.089-.514-4.093-1.539-.524-.535-.929-1.198-1.212-1.99-.284-.792-.426-1.667-.426-2.626v-6.289z'/%3E%3Cpath fill='%23FFF' d='M41.693 11.295h.336c1.117-1.744 2.795-2.616 5.031-2.616 2.058 0 3.59.659 4.596 1.979 1.007 1.319 1.51 3.053 1.51 5.2v9.795h-5.031v-9.225c0-.895-.213-1.628-.638-2.197-.425-.57-1.085-.856-1.979-.856-1.141 0-2.008.437-2.6 1.309-.593.873-.889 2.013-.889 3.422v7.548h-5.032V9.215h4.696v2.08z'/%3E%3C/svg%3E");
	background-size: 100%;
	margin-bottom: 14px;
}
.socials a {margin-right: 10px; opacity: 0.4;}
.socials a:hover {opacity: 1;}



.nodesktop {display: none;}



.button .icon {margin-bottom: -5px;}
.invert, .like-share button {
	border: 1px solid #ccc;
	background: rgba(0,0,0,0);
	color: #333;
	font-size: 11px;
	line-height: 36px;
	opacity: 0.8;
}
.invert:hover, .like-share button:hover {
	color: #000;
	border: 1px solid #333;
	background: rgba(0,0,0,0.1);
}
.invert:active, .like-share button:active {
	border: 1px solid #333;
	background: rgba(0,0,0,0.3);
}
.noborder {border: none;}

.picker_group {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 5px;
}
.picker_group input {
	display: block;
	width: 100%;
	height: 28px;
	line-height: 26px;
	padding: 0 10px;
	font-weight: 400;
	font-size: 9px;
	text-align: center;
	border-width: 2px;

}
.picker_group input:focus {border-color: #000;}

.group1 {grid-template-columns: 1fr;}
.group2 {grid-template-columns: 1fr 1fr;}
.group3 {grid-template-columns: 1fr 1fr 1fr;}
.group4 {grid-template-columns: 1fr 1fr;}
.group5 {grid-template-columns: 1fr 1fr 1fr;}
.group6 {grid-template-columns: 1fr 1fr 1fr;}



/*.sharing {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 5px;
}*/

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

.auto30 {grid-template-columns: 30% auto;}

.green {color: #4FDB9F;}
.green-bg {background-color: #4FDB9F;}
.gray-bg {background-color: #555;}
.light-gray-bg {background-color: #fafafa;}
.bigsize {font-size: 17px; color: #666; font-weight: 300;}
.smallsize {font-size: 12px;}


.main {
	height: 380px;
	width: 100%;
	/*background-color: #f0f0f0;*/
	text-align: center;
	display: table;
}

#main h1, #fm_text {font-weight: inherit;}
#main h1, #fm_text {font-weight: normal!important;}

.main-wraper {position: relative;}
.theme_nav {
	position: absolute;
	top: 180px;
	/*left: 0;*/
	/*margin-top: -20px;*/
	background: none!important;
	font-size: 0;
	opacity: 0.5;
	z-index: 50;
}
.theme_nav:hover {
	opacity: 1;
}

#fm_theme_prev {left: 10px;}
#fm_theme_next {right: 10px;}

.main h1 {
	font-size: 30px;
	font-weight: normal!important;
	display: table-cell;
	vertical-align: middle;
	transition: all 0.5s;
}
.main h1 output{
	transition: font-size 0.3s;
}
.bar {
	/*background-color: #f0f0f0;
	padding: 14px;*/
	margin-top: -28px;
}
.btns {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
}
.pik {
	color: transparent!important;
	display: inline-block;
	width: 38px;
	height: 38px;
	border: 1px solid #ccc!important;
	border-radius: 50%!important;
	text-align: center;
	padding: 0!important;
}
.bar .jscolor {border: 1px solid #000!important;}
.pik .icon {margin-bottom: -5px;}
.tool {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto auto auto;
	grid-gap: 20px;
	margin: 0;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.090);
	padding: 12px;
	background-color: #fff;
	border-radius: 5px;
}
.tool .invert {overflow: hidden;}
.tool li {margin: 0; padding: 0;}
.tool #fm_input_text, .tool .save {display: block; width: 100%;}
.tool #fm_input_text {border: none; font-size: 14px;}
.ranger {
	display: grid;
	grid-template-columns: 1fr 30px;
	grid-gap: 10px;
	padding-top: 9px!important;
}
.color_themes {
	width: 300px;
	right: -10px;
}
.themes_list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	padding: 10px 0;
	margin: 0;
}
.themes_list li {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0px;
	border: 2px solid #fff;
	overflow: hidden;
	border-radius: 5px;
}
.themes_list li:hover {border-color: #000;}
.themes_list li span {font-size: 0; cursor: pointer;}
.themes_list li.selected{border-color:#000;}


.cols {
	display: grid;
	grid-template-columns: 1fr 30%;
	grid-gap: 40px;
}


.font-bio {margin: 0;}
.font-bio td {border: none; border-bottom: 0px solid #eee; padding: 10px 0;}
.font-bio td .icon {display: inline-block; margin-bottom: -5px; opacity: 0.4;}
.font-bio td .icon:hover {opacity: 1;}

.bio-note {
	display: block;
	font-size: 10px;
	border: 1px solid #f8dab4;
	border-radius: 4px;
}
.bio-note .icon {margin-bottom: -6px; opacity: 0.5;}

.download-button {
	font-size: 16px;
	width: 100%;
	height: 50px;
	line-height: 50px;
}

.like-share {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
	margin-top: 16px;
}
.like-share button {display: block; width: 100%;}
.like-share button span {margin-bottom: -4px;}

.notification {
	position: relative;
	display: block;
	/*background-color: #fff8ec;*/
	border: 1px solid #f8dab4;
	font-size: 9px;
	/*text-align: center;*/
	padding: 2px 10px;
	border-radius: 4px;
	margin-top: 10px;
	cursor: pointer;
}
.notification .icon {margin-bottom: -7px; opacity: 0.5;}



.notification:after, .notification:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.notification:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 8px;
	margin-left: -8px;
}
.notification:before {
	border-color: rgba(248, 218, 180, 0);
	border-bottom-color: #f8dab4;
	border-width: 9px;
	margin-left: -9px;
}


.sharing {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 20px;
	text-align: center;
}
.sharing a {display: inline-block; width: 38px; height: 38px; text-align: center; border-radius: 50%;}
.sharing a .icon {margin-bottom: -14px;}
.sharing a:hover {transform: scale(1.1);}
.fbc {background-color: #1778F2;}
.twc {background-color: #1DA1F2;}
.pinc {background-color: #F0002A;}
.emlc {background-color: #888;}

.tags {
/*	background-color: yellow;*/
	padding-top: 15px;
}
.tags a {
	display: inline-block;
	font-size: 10px;
	line-height: 120%;
	margin: 0px 3px 6px 0px;
	padding: 10px;

	background-color: #f0f0f0;
	border-radius: 4px;
}
.tags a:before {
	content: "#";
}
.tags .alltags:before {
	content: '';
}
.bcn-and-views {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 10px;
	font-size: 10px;
	text-transform: uppercase;
}

.bcn {
	display: block;
	margin: 0; padding: 0;
	font-size: 10px;
	color: #c0c0c0;
	text-transform: uppercase;
	padding-bottom: 0px;
	letter-spacing: 1px;
	list-style: none;

}
.bcn li {list-style-type: none; display: inline;}
.bcn li:after {
	content: '/';
}
.bcn li:last-child:after {content: '';}
.bcn a {color: #c0c0c0;}
.bcn a:hover {color: #333;}

.views {opacity: 0.6; text-align: right;}
.views div {display: inline-block;}
.views .icon {
	margin-bottom: -5px;
}

.font-chart {
	position: relative;
	margin: 0; padding: 0;
}
.font-chart img {display: block; width: 100%; height: auto;}
.patch {display: block; position: absolute; bottom: 0; width: 100%; height: 15px; background-color: #fff;}
.trans_block {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent;}

.col2 .fonts-list {
	grid-template-columns: 1fr;
	grid-gap: 20px;
}




#commenting {
	background-color: #f5f5f5;
	/*border-top: 2px solid #000;*/
}

.commented {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 60px;
	padding: 30px 0;
}
.commented li {
	list-style: none;
	display: grid;
	grid-template-columns: 70px 1fr;
	grid-gap: 30px;
	text-align: left;
}
.dp img {border: 1px solid #000; border-radius: 50%; width: 70px; height: 70px; margin-top: 2px; background-color: #ccc;}
.comment, .comment p {font-size: 12px; padding: 0;}
.comment h4 {color: #888; float: left; display: inline-block;}
.date {float: right; display: inline-block; font-size: 11px; color: #ccc; text-transform: uppercase; letter-spacing: 1px;}

.add-comment {padding: 30px 0 0 0 ;}
.add-comment-form {
	display: grid;
	grid-template-columns: 1fr 34%;
	grid-gap: 20px;
}
.add-comment-form textarea, .add-comment-form input, .add-comment-form button {display: block; width: 100%;}
.add-comment-form textarea {height: 100%; padding: 12px;}

.add-comment-input-area {
	text-align: left;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
}



.fontinfolist {
	list-style: none;
	font-size: 12px;
	text-align: left;
	padding: 0 20px;
}
.fontinfolist li {border-top: 1px solid #f0f0f0; padding: 4px 0; color: #000; margin: 0;}


.sharebar {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 10px;
	border: 1px solid #f0f0f0;
	background-color: #fff;
	border-radius: 5px;
	padding: 10px;
	position: relative;
	margin-bottom: -28px;
	margin-top: 25px;
}


.sharebar a .icon {margin-bottom: -5px;}
.sharebar a {
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	display: block;
	text-align: center;
	padding: 10px;
	border-radius: 5px;
	transition: all 0.2s ease-in-out;
}
.sharebar a:hover {opacity: 0.9;}

#blog-post .simplefavorite-button {display: none;}
#blog-post {}
#blog-post p {padding-bottom: 30px; line-height: 180%;}
#blog-post p a, #blog-post ul a, #blog-post ol a {
	text-decoration: underline;
	text-decoration-color: #000;
}
#blog-post p a:hover, #blog-post ul a:hover, #blog-post ol a:hover {
	text-decoration-color: #c0c0c0;
}
#blog-post ul, #blog-post ol {
	margin: 0;
	padding: 10px 0 30px 30px;
	line-height: 180%;
}
#blog-post ul li, #blog-post ol li {
	margin: 0 0 15px 0;
}
#blog-post ul li {list-style-type: square;}
#blog-post h2, #blog-post h3, #blog-post h4, #blog-post h5 {padding-bottom: 10px;}

#blog-post table {width: 100%; color: #000; border-collapse: collapse; margin: 8px 0 30px 0;}
#blog-post table td, #blog-post table th {border: 1px solid #f0f0f0; padding: 10px 20px; text-align: left;}
#blog-post table th {background-color: #fafafa;}
#blog-post img {display: block;}
#blog-post .full, .size-full, .wp-caption {width: 100%; height: auto;}
#blog-post .wp-caption {width: 100%!important;}

.full {width: 100%; height: auto;}
.thumbnail {width: 120px; height: auto;}

.wp-block-image {
	width: 100%;
	margin-bottom: 25px;
}
figure.wp-block-image img {width: 100%; height: auto; display: block;}
figure.wp-block-image figcaption {display: block; font-size: 11px!important; width: 100%; padding: 2px 0;}

code {font-family: "Courier New", Courier, monospace!important;}
blockquote {padding-left: 40px; }

.designers-list {
	margin: 0 0 0px 0;
}
.designers-list li {
	display: block;
	padding: 10px 20px;
	border-bottom: 1px solid #f5f5f5;
	margin: 0;
	text-align: right;
	overflow: hidden;
}
.designers-list li:nth-child(odd) {background: #f5f5f5;}
.designers-list li a {color: #000; float: left;}
.designers-list li a:hover {color: #888;}

.auth-info {color: #fff;}
.auth-info .button {background-color: #fff; color: #333;}
.grav img {
	width: 80px; height: 80px;
	display: inline-block;
	border-radius: 50%;
}

.contact-form-fields {width: 100%; list-style: none!important; margin: 0; padding: 0;}

.contact-form-fields input,
.contact-form-fields label,
.contact-form-fields textarea {
	display: block;
	width: 100%;
}
.contact-form-fields textarea {min-height: 120px;}


.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: #333;
	font-size: 12px;
padding-top: 20px;
text-align: center;
}
#mail-status .thankyou div {
	width: 100%;
	display: block;
}

#mail-status .thankyou svg {margin-top: 3px; margin-right: 20px; width: 65px; height: 65px;}

#mail-status .error {color: #ff0000;}

#mail-status .thankyou blockquote {margin-top: 40px;}

.graphic {
	width: 100%;
	display: block;
	margin-bottom: 30px;
}
.graphic img {display: block; width: 100%; height: auto;}
.graphic figcaption {font-size: 10px;}

#download_ok {
	width: 88px;
}

circle, #checkmark {
	fill: none;
	stroke: #000;
	stroke-linecap: round;
	stroke-miterlimit: 10;
	stroke-width: 4px;
	stroke-dasharray: 400;
}

#checkmark {
	animation: checkmark-stroke 1s forwards;
	animation-timing-function: ease-out;
	animation-delay: 1s;
	stroke-linejoin: round;
	opacity: 0;
}

@keyframes checkmark-stroke {
	0% {
		stroke-dashoffset: 400;
		opacity: 1;
	}
	100% {
		stroke-dashoffset: 0;
		opacity: 1;
	}
}

circle {
	animation: circle-stroke 1s forwards;
}

@keyframes circle-stroke {
	from {
		stroke-dashoffset: -400;
	}
	to {
		stroke-dashoffset: 0;
	}
}

#downloading_box {
	text-align: center;
	width: 100%;
	background-color: #f0f0f0;
}
#downloading_box h1 {text-align: center;}
#downloading_box p {margin: 10px;}
#downloading_box svg {text-align: center; margin: 0 auto;}
#downloading_box .button {
	font-size: 16px;
	padding: 0 20px;
}

.fav .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;
}
.colors-credit {
	display: block; width: 100%;
	font-size: 10px;
	padding-top: 10px;
	color: #888;
}
.colors-credit .icon {transform: scale(0.8); margin-bottom: -5px}
.colors-credit a {text-decoration: underline; color: #000;}


#fm-gdpr-box{
	display:none;
	z-index:600;
	position:fixed;
	width:100%;
	right:0;
	bottom:0;
	padding:20px;
	font-family:Helvetica,Arial,sans-serif;
	font-size:12px;
	background:transparent;
	text-align:center
}
#fm-gdpr-box p{
	line-height:180%;
	margin:0;
	color:#888;
	padding:0;
	padding-right:50px
}
#fm-gdpr-box p a{
	color:#333;
	text-decoration:underline!important
}
#fm-gdpr-box p a:hover{
	color:#000;
	text-decoration:underline
}
#fm-gdpr-box .centerd{
	max-width:960px;
	margin:0 auto;
	position:relative;
	padding:10px;
	background-color:#fff;
	border:1px solid silver;
	border-radius:4px;
	box-shadow:0 0 10px rgba(0,0,0,0.2)
}
#fm-gdpr-close{
	position:absolute;
	top:50%;
	padding: 0;
	margin-top:-15px;
	right:10px;
	width:30px;
	height:30px;
	line-height: 18px;
	border-radius:50%;
	font-size:14px;
	border:none;
	display:inline-block;
	cursor:pointer;
	color:#fff;
	background-color:#555;
	text-align:center;
	border:2px solid #fff;
	outline:none
}
#fm-gdpr-close:hover{
	background:#333
}
#fm-gdpr-close:active{
	background:#000
}

.thankyou {
	display: grid;
	grid-template-columns: 65px 1fr;
	grid-gap: 20px;
	border: 1px solid #38b458;
	background-color: #f6fbf7;
	border-radius: 6px;
	padding: 18px;
}
.thankyou p {margin: 0; padding: 0;}

/* Responsive */

@media screen and (max-width: 720px) {
h1 {font-size: 32px;}
.nodesktop {display: block!important;}
.nomobile {display: none;}
.fullonmobile {grid-template-columns: 1fr!important;}
body {font-size: 13px;}

.head-grid {grid-template-columns: 90px 1fr auto; grid-gap: 10px;}
.logo img {margin-top: 0px;}

.hero-grid {grid-template-columns: 1fr; text-align: center; background-size: 100%;}


.hero h1 {font-size: 32px; line-height: 120%; }
.hero svg {width: 90px; height: auto;}
nav ul li {margin-left: 3px;}

.explore {width: 280px; right: -70px;}
nav .arrow-top:after {display: none;}

.fonts-list {grid-template-columns: 1fr 1fr; grid-gap: 30px;}
.bcn-and-views {grid-template-columns: 1fr; text-align: left;}
.views {text-align: left;}

.cols {
	grid-template-columns: 1fr;
}
.col2 .fonts-list {
	grid-template-columns: 1fr 1fr;
	grid-gap: 30px;
}

.pop-search {column-count: 3;}
footer {text-align: center;}
footer p {padding: 0; margin: 10px;}
.socials {margin-top: 30px; display: block;}
.socials a {margin: 3px;}
.footer-grid {grid-template-columns: 1fr }


.add-comment-form {grid-template-columns: 1fr;}
.add-comment-form textarea {min-height: 100px;}

.commented li {grid-template-columns: 50px 1fr;grid-gap: 20px;}
.dp img {width: 50px; height: 50px;}


.tool {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 20px;
	margin: 0;
}
.tool #fm_input_text {text-align: center;}

.hero {min-height: 300px;}

@media screen and (max-width: 480px) {

.fonts-list {grid-template-columns: 1fr; grid-gap: 20px;}
.pop-search {column-count: 2;}

.col2 .fonts-list {
	grid-template-columns: 1fr;
	grid-gap: 20px;
}




}