:root {
    --grey1: rgba(34, 34, 34, .05);
    --grey2: rgba(34, 34, 34, .08);
    --body-color: #fff;
    --header-color: #fff;
    --orange1: #FFBE00;
    --orange2: #F1211F;
    --colorButton: #222;
    --color1: #222;
    --color2: #7a7a7a;
    --color3: #ababab;;
    --hoverBox: rgba(0,0,0,.05);
    --navBg: rgba(0,0,0,.9);
    --green1: #259208;
  }
* { margin: 0; padding: 0; outline: none; box-sizing: border-box}
img {border:0;}
body {background: var(--body-color); font:15px/1.5 BlinkMacSystemFont,-apple-system,segoe ui,Roboto,Oxygen-Sans,Ubuntu,Cantarell,helvetica neue,arial,sans-serif; color: var(--color1)}
.container { max-width:1346px; margin: 0 auto; padding: 0 15px; position: relative;}
ul {list-style:none;}
a {color: var(--orange2)} 
a:hover {text-decoration: underline; color:var(--orange1)}
a, button, .button-1, .scrollToTop {transition: all .15s ease-in-out;}
strong {font-weight: 600}

header {height: 70px; background: var(--header-color); position: fixed; left: 0; top: 0; right: 0; z-index: 5; box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.04);}
.pad {height: 70px; margin-bottom: 30px;}
.logo {position: absolute; left: 15px; top: 22px; height: 26px; width: auto}
#main-nav {position: absolute; left: 140px; top: 0; right: 0}
.nav-list {position: absolute; top: 15px; right: 5px;}
.nav-list li {float: left;}
.nav-list li a {line-height: 40px; font-size: 18px; display: block; padding: 0 7px; color: var(--color1); font-weight: 400; text-decoration: none}
.nav-list li a:hover {color: var(--orange1); text-decoration: none;}
.nav-list li a.active {color: var(--orange2);}

.scrollToTop {position: fixed; right: 50px; bottom: 50px; z-index: 5; border-radius: 8px; width: 40px; height: 40px;  background: var(--color3); text-align: center; padding-top: 4px; display: none; cursor: pointer;}
.scrollToTop svg {width: 20px; height: 35px; fill:#fff}
.scrollToTop:hover {background: var(--color2);}

.burger-menu {position:absolute; left:10px; top:12px; width: 30px; height: 40px; cursor: pointer; display:none;}
.burger {position: absolute; background: var(--color2); width: 100%; height: 5px; top: 50%; right: 0; margin-top: -5px; opacity: 1; border-radius:5px;}
.burger::before {position: absolute; background: var(--color2); width: 30px; height: 5px; top: 10px; content: ""; display: block; border-radius:5px;}
.burger::after {position: absolute; background: var(--color2);  width: 30px; height: 5px; bottom: 10px; content: ""; display: block; border-radius:5px;}
.burger::after, .burger::before, .burger { transition: all .3s ease-in-out;}
.menu-on .burger::after{ transform: rotate(-45deg); -webkit-transform: rotate(-45deg); bottom: 0; background:var(--orange1);}
.menu-on .burger::before{ transform: rotate(45deg); -webkit-transform: rotate(45deg); top: 0; background:var(--orange1);}
.menu-on .burger {background: rgba(111,111,111,.0);}

/*Search*/
.main-search {position: absolute; top: 15px; left: 30px; right: 310px;}
.search-input {position: relative;}
.search-input>input { height: 40px; font:16px 'Open Sans', Arial, Helvetica, sans-serif; transition: background .15s ease-in-out; border: 0; background: var(--grey1); color: var(--color1);  display: block; width: 100%; padding: 0 55px 0 15px;  border-radius: 8px;}
.search-input>button {width: 50px; height: 40px; position: absolute; right: 0; top: 0; padding: 0; border: 0; cursor: pointer; background: none;}
.search-input>button svg {transition: all .15s ease-in-out; width: 16px; height: 16px; opacity: .6;}
.search-input>button:hover svg { opacity: 1;}
.search-input>input:focus { background: var(--grey2);}
.search-drop-list {position: absolute; left: 0; right: 0; top: 100%; background: #fff; border:1px solid var(--grey2); box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
   padding: 10px 0; display: none; border-radius: 8px;}
.search-drop-list li a {padding: 5px 15px; display: block; font-size: 16px; color: var(--color1); text-decoration: none;}
.search-drop-list li a:hover { color: var(--orange1); text-decoration: none;}
.search-input>input::placeholder {color: var(--color3); font-style: italic;}
.search-input>input::-webkit-input-placeholder {color: var(--color3); font-style: italic;}
.search-input>input::-ms-input-placeholder {color: var(--color3); font-style: italic;}

h1, .h1 {font-size: 32px; margin-bottom: 30px; line-height: 1.2}
h2, .h2 {font-size: 28px; margin-bottom: 30px;}
h3, .h3 {font-size: 24px; margin-bottom: 20px;}
h4, .h4 {font-size: 20px; margin-bottom: 20px;}
h5, .h5 {font-size: 16px; margin-bottom: 20px;}
.main-txt p { margin-bottom: 10px; font-size: 14px}

/*Main*/
.left {float: left; width: calc(100% - 250px); padding-right: 40px;}
.right {width: 250px; float: left;}
.pr-box {margin:0 0 30px 0; text-align: center;}
.box {margin-bottom: 30px;}

footer {background: var(--grey1);  padding: 30px 0; margin-top: 60px;}
.footer-txt p {margin-bottom: 15px; font-weight: 600;}
.footer-txt div {color: var(--color2); line-height: 1.2; font-size: 13px; max-width: 550px}
.footer-soc {position: absolute; right: 15px; top: 0px; text-align: center;  width: 250px;}
.footer-soc>p {margin-bottom: 15px; font-weight: 600; font-size: 14px;}
.footer-soc ul {text-align: left;}

.fonts-grid-wrap { overflow: hidden; margin: -7.5px -15px 30px -15px;}
.fonts-grid {font-size: 0; margin: 0 -7.5px;}
.font-box {width: 33.33%; display: inline-block; vertical-align: top; font-size: 15px; padding: 7.5px; transition: color .15s ease-in-out;}
.font-box-in {padding: 15px; border-radius: 4px; transition: background .15s ease-in-out; cursor: pointer;}
.font-box-in p {font-size: 16px;}
.font-box-in p a {position: relative; display: block; color: var(--color2); font-weight: 600; text-decoration: none}
.font-box-desc {color: var(--color3); margin-bottom: 10px; font-size: 13px;}
.font-box-in p a svg  {width: 14px; height: 14px; position: absolute; right: 0; top: 5px; }
.font-box-in:hover p a {text-decoration: none; color:var(--color1);}
.font-box-in:hover .font-box-desc {color:var(--color2);}
.font-box-in:hover, .font-box-in.active {background: var(--hoverBox)}

.font-box-preview {margin: 0 -10px;}
.font-box-preview textarea {font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; color: var(--color1); border: 0; width: 100%; height: 64px; background: none; border: 0; font-size: 24px; line-height: 32px; resize: none; padding: 0 10px; overflow: hidden;}
.font-box-preview textarea::placeholder {color: var(--color1)}
.font-box-preview textarea::-webkit-input-placeholder {color: var(--color1)}
.font-box-preview textarea::-ms-input-placeholder {color: var(--color1)}

.button-wrap {text-align: center}
.button-1 {display: inline-block; height: 44px; line-height: 44px; padding: 0 15px; border: 0; cursor: pointer; background: var(--orange1); text-decoration: none; color: var(--colorButton); border-radius: 22px; font-size: 17px; font-weight: 700;}
.button-1:hover {background: var(--orange2);  text-decoration: none; color: #fff}

.button-2 {display: inline-block; height: 45px; line-height: 41px; padding: 0 20px; border: 2px solid var(--orange1); cursor: pointer; background: none; text-decoration: none; color: var(--colorButton); border-radius: 20px; font-size: 16px; font-weight: 600;}
.button-2:hover { border-color:var(--orange2);  background: var(--orange2); color: #fff; text-decoration: none;}

.suggest-button-popup {display: block; margin-bottom: 30px; text-align: center;}
.suggest-button-popup span {font-weight: 600;}
.container:after {content: ''; display: block; clear: both; height: 0; overflow: hidden; font-size: 0;}

/*Popups*/
.popup {position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10; display: none;}
.popup-in {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: auto;}
.popup-table {display: table; width: 100%; height: 100%;}
.popup-cell {display: table-cell; width: 100%; height: 100%; padding: 20px 10px; vertical-align: middle;}
.pop {padding:20px; background: var(--body-color); border-radius: 5px;  box-shadow: 2px 2px 5px 3px rgba(0,0,0,0.26); margin: 0 auto; position: relative;}
.pop-suggest {max-width: 450px;padding:20px 10px 30px 10px;}
.pop-header {font-size: 24px; font-weight: 500; text-align: center; margin-bottom: 20px;}
.pop-txt {font-size: 13px; text-align: center; margin-bottom: 20px;}
.close-popup {position: absolute; top: 15px; right: 15px;}
.close-popup svg {width: 17px; height: 17px; fill: var(--orange1); transition: all .15s ease-in-out}
.close-popup:hover svg {cursor: pointer; fill: var(--orange2)}
.sugest-button { width: 100%; max-width: 304px;}
.wrap {transition: filter .15s ease-in-out}
.for-body { overflow: hidden;}
.for-blur {filter: blur(7px);}
.propose-font-form {text-align: center; position: relative;}
.propose-font-form input, .propose-font-form textarea { max-width: 304px; transition: all .15s ease-in-out; width: 100%; display: block; margin: 0 auto 10px auto; height: 40px; padding: 0 10px; font:15px 'Source Sans Pro', Helvetica, Arial, sans-serif; color: var(--color1); background: var(--grey1); border: 0; border-radius: 8px;}
.propose-font-form textarea { padding: 10px; height: 100px; overflow: auto; resize: none}
.propose-font-form input:focus, .propose-font-form textarea:focus {background: var(--grey2);}
.for-google {width: 304px; margin: 0 auto 10px auto;}
.succesSuggest, .failSuggest {font-weight: 500; font-size: 16px; text-align: center; display: none;}
.succesSuggest {color: var(--green1)}
.failSuggest {color: #ff5252}
.form-loader {position: absolute; left: 0; top: -20px; right: 0; bottom: -20px; background: rgba(255,255,255,.5); display: none;}
.form-loader .loader {top: 30%; left: 50%; margin: -40px 0 0 -40px; position: absolute;}
.form-loader-on .form-loader {display: block;}

/*Font Page*/
.speedbar {font-size: 12px; color: var(--color2);  margin: -15px 0 5px 0}
.speedbar a {color: var(--color3); text-decoration: none}
.speedbar a:hover {color: var(--orange1); text-decoration: none;}
.loader {border: 7px solid var(--orange1); border-radius: 50%; border-top: 7px solid #fff; width: 60px; height: 60px; animation: spin 1s linear infinite; margin: 0 auto 20px auto; text-align: center; position: relative; z-index: 2;}
.loader-big {border: 10px solid var(--orange1); border-top: 10px solid var(--grey1); width: 90px; height: 90px; animation: spin 2s linear infinite;}

.font-h1 {font-size: 35px; margin-bottom: 20px;}
.font-weight-box { padding: 15px 60px 15px 15px; transition: background .15s ease-in-out; border-radius: 4px; position: relative; margin-bottom: 2px;}
.font-weight-header { color: var(--color2); font-weight: 600; margin-bottom: 10px;}
.font-weight-box input {background: none; height: 40px; border: 0; display: block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; font-size: 30px; color: var(--color1);}
.font-weight-box input::placeholder {color: var(--color1)}
.font-weight-box input::-webkit-input-placeholder {color: var(--color1)}
.font-weight-box input::-ms-input-placeholder {color: var(--color1)}
.font-weight-box:hover, .font-weight-box.active { background: var(--hoverBox)}
.font-download-wrap {position: absolute; top: 50%; right: 15px; margin-top: -20px}
.font-download-button svg {width: 23px; height: 23px; fill: var(--orange2)}
.font-download-button {border: 1px solid transparent; transition: all .3s ease-in-out; border-radius: 50%; width: 35px; height: 35px; text-align: center; padding-top: 4px; cursor: pointer;}
.font-weight-box:hover .font-download-button, .font-weight-box.active .font-download-button {border-color: var(--orange1)}
.font-download-button:hover {box-shadow: 0 0 5px 0 var(--orange1);}
.font-download-button-wrap {text-align: center; padding: 30px 0}

.font-foto-wrap {background: var(--grey1); border-radius: 4px; padding: 15px; margin-bottom: 30px;}
.fotorama__thumb-border {border-color: var(--orange1) !important}
.download-slide {margin-bottom: 30px; width: 100%; text-align: center;}
.download-slide svg {width: 25px; height: 25px; vertical-align: middle; margin-right: 5px; fill:var(--colorButton)}
.flash {box-shadow: 0 0 30px 0 var(--orange1)}
.right-box-donate {text-align: center; margin: -10px 0 20px 0;}
.right-box-donate p {margin-bottom: 10px; font-size: 14px;}
.right-box-donate input[type="image"] {width: 150px; height: auto}



.font-bar-wrap {border-top: 1px solid var(--color2); margin: 15px -15px 0 -15px; padding: 15px 15px 0 15px;}
.font-bar-wrap:after {content: ''; display: block; clear: both; height: 0; overflow: hidden;}
.font-bar-wrap ul {padding-top: 5px;}
.font-bar-wrap ul li {float: left; margin-right: 15px; font-size: 13px;}
.font-bar-wrap ul li svg { width: 15px; height: 20px; fill: var(--color3);}
.font-bar-wrap ul li.views-icon svg { width: 18px;}
.font-bar-wrap ul li.downloads-icon svg {width: 20px;}
.font-bar-wrap ul li span {vertical-align: middle; display: inline-block; margin-right: 8px; padding-top: 2px;}
.font-bar-wrap ul li i {font-style: normal;}
.font-bar-wrap ul li.downloads-icon span {padding-top: 3px; margin-right: 3px;}

.rait-font {float: right; position: relative;}
.rait-font>* {float: left;}
.rait-font svg {width: 20px; height: 20px; fill: var(--color3);}
.dislike {transform: rotate(180deg)}
.like, .dislike {cursor: pointer;}
.like:hover svg, .dislike svg:hover {fill: var(--orange1);}
#rait-indicator {padding: 3px 10px 0 10px; font-weight: 600; font-size: 13px;}
.negative-rait { color: lightcoral}
.positive-rait { color: var(--orange1)}

.thanks-popup {position: fixed; z-index: 666; width: 250px; padding: 15px; text-align: center; left: 50%; top: 50%; margin-left: -125px; background: rgba(230, 60, 34, .8); border-radius: 5px; font-size: 18px;  display: none; color: #fff}

.rait-font-inactive svg, .rait-font-inactive .like:hover svg, .rait-font-inactive .dislike svg:hover {fill: var(--color3);}
.rait-font-inactive .like, .rait-font-inactive .dislike {cursor: default;}
.rait-font-inactive:after {display: block; content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0}

.pop-download {max-width: 768px;}
.pop-download .pop-header { font-size: 25px; margin-bottom: 30px;}
.pop-download-box-wrap {display: flex; margin: 0 -20px;}
.pop-download-box {width: 50%; min-height: 50px; text-align: center; padding: 0 20px;}
.pop-download-box:first-child {border-left: 1px solid var(--color3); order: 2}

.pop-download-box h6 {font-size: 16px; font-weight: 600; margin-bottom: 15px;}
.download-popup-donate input[type="image"] {width: 150px; height: auto}
.pop-download {padding: 30px 20px;}
.pop-download-please {font-size: 14px; margin-bottom: 30px;}
.pop-download-please a {border-bottom: 1px dashed var(--orange1); text-decoration: none}
.pop-download-please a:hover {text-decoration: none;}
.download-share-buttons ul {text-align: left}
.download-share-buttons-no {font-size: 12px; color: var(--color1); margin: 10px 0 20px 0; min-height: 18px;}
.download-share-buttons-no span { border-bottom: 1px dashed var(--color1); cursor: pointer}
.download-share-buttons-no span:hover {color: var(--orange1); border-color: var(--orange1)}
/*
.ya-share2__popup { background: var(--headerColor2) !important; border: 1px solid var(--headerColor1) !important; border-radius: 4px;}
.ya-share2__title {color: var(--orange1) !important}
.ya-share2__popup_direction_top {box-shadow: 0 0 20px 0 rgba(0,0,0,0.7);}
.ya-share2__icon_more:before {color: var(--orange1) !important}
.ya-share2__icon_more, .ya-share2__icon_total-counter { background-color: var(--headerColor2) !important; border: 1px solid var(--headerColor1) !important;}
*/
.download-buttons-list {position: relative; margin-top: 10px;}
.download-buttons-list ul {display: flex; justify-content: center}
.download-buttons-list li a {display: block; border-radius: 4px; background: var(--orange1); color: #fff; text-decoration: none; line-height: 25px; width: 50px; margin: 0 2.5px; font-weight: 700; font-size: 12px;}
.download-buttons-list li a:hover {text-decoration: none; background: var(--orange2)}
.pop-download-please2 {margin-bottom: 20px;}
.or {margin: 10px 0; font-size: 18px;}
.web {width: 215px;}
.cat img { width: 100px; height: auto;}
.cat {margin: -20px 0 0 0; opacity: .7;}
.download-buttons-list-hide:after {content:''; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--body-color); opacity: .7}
.donate-page-txt {margin-top: -10px;}
.donatePage-paypal input[type="image"] {width: 150px; height: auto}
.donatePage-paypal {margin-top: 15px;}
.donate-page-txt h2 {margin-bottom: 10px;}


/*Download Page*/
.h2-download-page { color: var(--color2); font-size: 18px;}
.font-h1-download-page {margin-bottom: 30px;}
.pr-box2 {margin-bottom: 50px;}
.pr-box3 {margin-top: 50px;}
.pr-box4 { margin: 30px 0}
.download-button-wrap {position: relative}
.download-button-wrap-hide:after {content: ''; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: var(--body-color); opacity: .7}
.download-share-box {display: none;}
.download-loader {height: 90px; margin: 30px 0; position: relative}
.download-loader p {text-align: center; line-height: 87px; font-size: 35px; position: absolute; left: 0; right: 0; top: 0; font-weight: 600;}

/*Cats box*/
.cats-box { background: var(--grey1); border-radius: 8px; font-size: 14px; padding-bottom: 20px;}
.cats-box a {color: var(--color1); display: block; padding: 3px 20px; text-decoration: none}
.cats-box a:hover { color: var(--orange2); text-decoration: underline}
.cats-box h3 {padding: 10px 20px; font-size: 16px; background: var(--grey2); border-radius: 8px 8px 0 0; margin: 0 0 10px 0;}
.subcat a {padding-left: 30px; font-size: 13px; color: var(--color2)}
.maincat a { font-size: 13px;}
.maincat strong {font-weight: 600;}
.selectric-init {display: none;}
.select-area {font-size: 0; margin-bottom: 30px; position: relative;}
.select-wrap { display: inline-block; vertical-align: middle; margin-right: 20px; width: 200px;}
.select-wrap1 {width: 120px}
.select-wrap2 {width: 170px;}
.select-wrap3 {width: 150px;}

.noFont, .noResult {text-align: center; padding: 50px 0; font-size: 20px;}
.label-for-loading {text-align: center; display: none; position: relative}
.opacity {opacity: .6;}
.more-over button { opacity: .6}
.more-over:after { content: ''; display: block; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; position: absolute;}

.showed {position: absolute; right: 0; top: 10px; font-size: 15px;}
.cat-loader {position: fixed; z-index: 999; left: 50%; top: 50%; margin-top: -40px; margin-left: calc(-40px - 120px - 20px); display: none}
.showed i {font-style: normal; color: var(--orange2)}

.font-desc-box {margin-bottom: 20px; font-size: 13px; position: relative; padding-right: 250px;}
.font-desc-box>ul li span {color: var(--color2); margin-right: 5px;}
.share-box-right { position: absolute; top: 0; right: 0}

.thumbs { margin: 0 -15px; font-size: 0}
.thumb {width: 25%; padding: 0 15px 30px 15px; display: inline-block; vertical-align: top; font-size: 15px;}
.thumb a {display: block; text-decoration: none; font-size: 13px;}
.thumb a span {display: block; padding-bottom: 50%; background-position: center; background-size: cover; margin-bottom: 5px; border-radius: 4px}
.thumb-main { font-weight: 700;}

article p { margin-bottom: 10px; font-size: 16px;}
.color1 {color: var(--color2)}
.article-img {margin-bottom: 10px; max-width: 700px;}
.article-img img {width: auto; height: auto; max-width: 100%;}
.for-anc { height: 0; position: relative; font-size: 0;}
.for-anc a { position: absolute; left: 0; top: -80px; }

.comments-wrap {background: var(--grey1); border: 1px solid var(--grey2); border-radius: 3px; padding: 15px 7px; margin-top: 30px;}
.comments-wrap h3 {padding: 0 0 0 8px;}

/*Forms*/
.inputForm {display: inline-block; background: #fff; border: 1px solid var(--color3); padding: 10px 12px; transition: border-color .15s ease-in-out; font-family: inherit; font-weight: 400; font-size: 14px; color: #222; width: 100%; border-radius: calc(12px/3); background: none;}
.inputForm:hover {border-color: #000;}
.inputForm:focus {border-color: #000;}
.inputForm::placeholder {color: var(--color3);}
.inputForm:disabled {cursor: default; opacity: .3;}

.textareaForm {display: inline-block; background: #fff; border: 1px solid var(--color3); transition: border-color .15s ease-in-out; font-family: inherit; font-weight: 400; font-size: 14px; color: #222; width: 100%; border-radius: calc(12px/3); resize: vertical; overflow: auto; padding: 7px 12px; min-height: 140px; background: none;}
.textareaForm:hover {border-color: #000;}
.textareaForm:focus {border-color: #000;}
.textareaForm::placeholder {color: var(--color3);}
.textareaForm:disabled {cursor: default; opacity: .3;}

.btn {display: inline-block; text-align: center; text-decoration: none; border: 0; cursor: pointer; font-size: 16px;  color: #fff; padding: calc(12px/1.5) calc(24px/1.2); background: var(--orange1); font-weight: 500; border-radius: calc(12px/3);}
.btn:hover {background: var(--orange2); text-decoration: none; color: #fff;}
.btn:active {background: var(--orange2); color: #fff}
.btn:disabled {opacity: .3; cursor: default;}
.btn:disabled:hover {background: #fff;}
 
  


.btn-outline {display: inline-block; text-align: center; text-decoration: none; border: 1px solid var(--orange1); cursor: pointer; font-size: 16px; color: #fff; padding: calc(12px/1.5) calc(24px/2); background: none; font-weight: 500; border-radius: calc(12px/3);}
.btn-outline:hover {background: var(--color3); color: #fff; text-decoration: none;}
.btn-outline:active {background: none; border-color: var(--orange2); color: #fff;}
.btn-outline:disabled {opacity: .3; cursor: default; background: none; color: #fff;}
.btn-outline:disabled:hover {background: none; color: #fff}
.btn-outline svg {fill: var(--orange1);}


/*Comments*/
.row {display: flex; margin-left: -12px;  margin-right: -12px; flex-wrap: wrap;}
.col {padding: 0 12px;}
.comments-wrap {background: var(--grey1); border: 1px solid var(--color3); border-radius: 3px; padding: 12px; margin-top: 24px;}
.name-email-row {margin-bottom: 12px;}
.name-email-row .col {width: 50%;}
.comments-wrap h5 {font-size: 22px;}
.comments-wrap h6 {font-size: 18px; margin-bottom: 8px;}

.add-comments-box { max-width: 600px;}
.add-comments-box textarea {display: block; margin-bottom: 12px;}

.comment-form-alert { border-radius: calc(12px/3); margin-bottom: 12px; text-align: center; padding: 12px; color: #fff; font-weight: 500;}
.comment-form-alert.error {background: #ff5252;}
.comment-form-alert.success {background: #3fb514;}
.comment-form-alert.warning {background: #e0840b;}

.comment-question-wrap {margin-bottom: 12px; display: flex; align-items: center;}
.comment-question-wrap .comment-question span::before {display: inline;}
.comment-question-wrap input {width: 80px; margin: 0 12px 0 5px;}

#refreshAns svg {width: 25px; height: 25px; display: block;}



/*Questions*/
.cq-1::before {content: '100*2+50*2+40';}
.cq-2::before {content: '210/3+5';} 
.cq-3::before {content: '100-11*5+21';} 
.cq-4::before {content: '2*5+3';}
.cq-5::before {content: '84-14*4';} 
.cq-6::before {content: '28*4/8';} 
.cq-7::before {content: '500-320+5';} 
.cq-8::before {content: '174.5*2';} 
.cq-9::before {content: '85+37+100';} 
.cq-10::before {content: '4*10+9';}
.cq-11::before {content: '20*5-10';}
.cq-12::before {content: '9/3*10+2';}
.cq-13::before {content: '(120-9)*6';}
.cq-14::before {content: '666/3+111';}
.cq-15::before {content: '990-650+90*2';}
.cq-16::before {content: '(950-660)/145';}
.cq-17::before {content: '2*3*6';}
.cq-18::before {content: '32*3-55';}
.cq-19::before {content: '7*7*2';}
.cq-20::before {content: '20*5*4*2+200';}

.comment-box {margin-bottom: 24px;}
.comment-box__header {display: flex; justify-content: space-between; padding: calc(12px/3) 0; align-items: center;}
.comment-box__header div {font-weight: 500;}
.comment-box__header span {font-size: 14px;}

.comment-box__body {padding: 0; font-size: 16px;}
.comment-box__body reply { font-weight: 700;}
.comment-box__body q {display: block; background: #ddd; font-size: 13px; padding: calc(12px/2);}
.comment-box__body q b {font-weight: 700;}


.comment-box__ans {border-bottom: 1px solid var(--color3); padding: calc(12px/3) 0; font-size: 14px;}
.comment-box__ans a {margin-right: 12px;}


.how-to-install {text-align: center;}

.ym-small>* {display: block; margin: 10px auto 0 auto}
.ym-big>* {display: block;}

.thanks-img {width: auto; height: auto; max-width: 100%; margin: 30px 0}

.cat-z img {height: 100px; width: auto;}

@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

@media (max-width: 1346px) {
  .cat-loader { margin-left: calc(-40px - 120px - 10px)}
  .thumb {width: 33.33%}
}

@media (max-width: 979px) {
  .logo {top: 11px; left: 55px; height: 26px;}
  .burger-menu {top: 6px; display: block;}
  header {height: 48px;}
  .pad {height: 48px;}
  #main-nav {position: fixed; top:48px; left:0; bottom:0; width:0; overflow: hidden; background: var(--navBg); transition: all .2s ease-in-out;}
  .nav-list { position: static;}
  .nav-list>li>a {line-height: normal; font-size:18px; text-transform: uppercase; color: #fff; padding:0; font-weight:400; height: auto; display: inline-block;}
  .nav-list>li {margin-bottom: 10px; float:none;}
  #main-nav.nav-on {width: 250px; overflow: visible;}
  .nav-list>li>a:hover, header nav>ul>li:hover>a {background: none; }
  .header-search-wrap {width: auto; top: 10px; right: 10px; left: 10px; z-index: 2;}
  .main-search {width: 100%; position: relative; right: auto; top: auto; left: auto; margin-bottom: 15px;}
  #main-nav>div {width: 100%; padding: 15px; overflow: hidden; height: 100%}
  .search-input>button {width: 50px;}
  .search-input>input {font-size: 13px;}
  .search-input>input, .search-input>input:focus { background: #fff;}

  .left {width:100%; padding-right: 0}
  .right { display: none;}

  .cat-loader { margin-left:-40px}

  footer {text-align: center;}
  .footer-soc {position: static; margin: 15px auto 0 auto}
  .footer-txt div {max-width: 100%}
}

@media (max-width: 767px) {
  .font-box {width: 50%;}
  
  h1, .font-h1-download-page {font-size: 28px;}
  h2 {font-size: 24px;}

  .main-txt p {font-size: 13px;}
  .cat-x {display: block;}
  .cat-z {display: none;}
.font-desc-box { padding-right: 0;}
.font-desc-box>ul li span {color: var(--color2); margin-right: 5px;}
.share-box-right { position: static; margin-top: 10px;}
.thumb {width: 50%}

.select-wrap {width: 100% !important; margin-bottom: 10px;}
.showed {position: static;}

.scrollToTop {right: 20px; bottom: 20px;}

.font-h1 {font-size: 25px; }
}

@media (max-width: 568px) {
  .font-box {width: 100%;}
  .footer-txt div br {display: none;}

  .pop-download-box:first-child {border: none; margin-bottom: 30px;}
  .pop-download-box-wrap {display: block;}
  .pop-download-box {width: 100%;}
  .thumb a span {display: none;}
  .thumb {padding-bottom: 10px;}
}

@media (max-width: 480px) {
  .thumb {width: 100%}
}