/* site styles */
@font-face {
  font-family: "Poppins";
  src: url('font/Poppins-Regular.woff') format('woff'),
       url('font/Poppins-Regular.ttf') format('truetype');
        /*font-weight: normal;
        font-style: normal;*/
}
:root {
	 --blue: #007bff;
   --blue-dark: #0d154e;
	 --indigo: #6610f2;
	 --purple: #6f42c1;
	 --pink: #e83e8c;
	 --red: #fc7575;
	 --orange: #fd7e14;
	 --yellow: #f9c943;
	 --green: #18c46e;
	 --teal: #20c997;
	 --cyan: #17a2b8;
	 --white: #fff;
	 --gray: #999B9D;
	 --gray-dark: #343a40;
	 --primary: #007bff;
	 --secondary: #6c757d;
	 --success: #28a745;
	 --info: #17a2b8;
	 --warning: #ffc107;
	 --danger: #f4405a;
	 --light: #f8f9fa;
	 --dark: #2f3459;
  }

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Poppins", Helvetica, Arial, "Arial Unicode", sans-serif;
  font-size: 13px;
  color: #444;
  /*height: 100%;*/

  width: 100%;

}

body {
    overflow-y: scroll;
    overflow-x: auto;
    /*overflow: hidden;*/
}


img {
  border: none;
}

.contentLeft h1{
  font-size: 22px;
}

a {
  text-decoration: none;
  color: #332c4a;
}
a:hover {
  text-decoration: none;
}
.link-font{
  color: #0e33a1 !important;
}
.clear {
  clear: both;
}

/*.pageErrors {
  padding: 10px;
  background-color: #fff;
  border: 2px solid red;
  width: 521px;
  float: left;
}
.pageErrors li,
.pageSuccess li {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}
.pageSuccess {
  padding: 10px;
  background-color: #fff;
  border: 2px solid green;
  width: 521px;
  float: left;
}
*/

.btn-danger {
	 background-color: var(--red) !important;
	 border: 1px solid var(--red) !important;
}
.btn-warning {
	 background-color: var(--yellow) !important;
	 border: 1px solid var(--yellow) !important;
}
.btn-success {
	 background-color: var(--green) !important;
	 border: 1px solid var(--green) !important;
}
td {
  vertical-align: top;
}

/* site specific */
.mainPageContainer {
  /*background-color: #f5f6fa;*/
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  margin-top: 2rem !important;
  overflow-x: hidden;
}
.pageContainer {
  float: left;
}
.mainPageContent {
  float: left;
  width: 100%;
}
.toolbarContainer {
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  min-width: 800px;
}
/*.pageMainContent {
  min-height: 300px;
  margin-bottom: 34px;
}*/
.genericPageTitle h1 {
  font-size: 18px;
  /*margin-left: 1rem;*/
  font-weight: 400;
  color: var(--dark-gray);
}
.genericPageTitle .contentRight {
  float: right;
}
.genericPageTitle .contentLeft {
  float: left;
}

.pageInnerContainer {
  margin: 16px;
  margin-bottom: 6px;
  margin-top: 8px;
}

.fontPreviewHeader {
  width: 100%;
  background-color: #ddd;
  clear: both;
  font-size: 13px;
}
.fontPreviewHeaderInner {
  padding: 6px;
}

.fontPreviewHeader a {
  color: #222;
  font-weight: bold;
  text-decoration: none;
}
.fontPreviewHeader a:hover {
  text-decoration: underline;
}

.fontPreviewImageWrapper {
  height: 107px;
  margin-top: 25px;
  cursor: pointer;
}
.fontPreviewImageWrapperDefault {
  height: 107px;
  margin-top: 25px;
}
/*.fontPreviewImageWrapper .rightSection,
.fontPreviewImageWrapperDefault .rightSection {
  float: right;
  background: #fff;
  *height: 92px;
  width: 258px;
  cursor: default;
  padding-right: 9px;
}
.fontPreviewImageWrapper .rightSection .downloadButton,
.fontPreviewImageWrapperDefault .rightSection .downloadButton,
.fontPreviewImageWrapper .rightSection .detailsButton,
.fontPreviewImageWrapperDefault .rightSection .detailsButton {
  float: right;
}*/
.downloadButtonElement a i, .detailsButtonElement a i{
  color: #fff;
}


.downloadButtonElement {
  border: 1px solid #ffc107;
  background: #ffc107;
  color: #fff;
  cursor: pointer;
  padding: .375rem .75rem;
  border-radius: .25rem;
}

.fontPreviewImageWrapper .rightSection .downloadButtonCart .downloadButtonElement, .fontPreviewImageWrapperDefault .rightSection .downloadButtonCart .downloadButtonElement
{
	 border:					1px solid #fdb81f;
	 padding-right:			10px;
	 padding-left:			10px;
	 padding-top:			5px;
	 padding-bottom:			5px;
	 font-weight:			bold;
	 background:				#fdb81f;
	 color:					#fff;
	 margin-top:				30px;
	 margin-right:			5px;
	 cursor:					pointer;
	 float:					right;
}

.downloadButtonQueueSelected {
  border: 1px solid #ccc;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: bold;
  background: #ccc;
  color: #fff;
  cursor: pointer;
  border-radius: .25rem;
}
/*.fontPreviewImageWrapper .rightSection .detailsButton .detailsButtonElement,
.fontPreviewImageWrapperDefault
  .rightSection
  .detailsButton
  .detailsButtonElement {
  border: 1px solid #2ae2be;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-weight: bold;
  background: #2ae2be;
  color: #fff;
  margin-top: 15px;
  margin-right: 5px;
  cursor: pointer;
}*/
/*.fontPreviewImageWrapper
  .rightSection
  .downloadButton
  .downloadButtonElement:hover,
.fontPreviewImageWrapperDefault
  .rightSection
  .downloadButton
  .downloadButtonElement:hover {
  background: #333;
  border: 1px solid #333;
}*/
/*.fontPreviewImageWrapper .rightSection .downloadButton .downloadButtonElement a,
.fontPreviewImageWrapperDefault
  .rightSection
  .downloadButton
  .downloadButtonElement
  a {
  color: #fff;
  text-decoration: none;
}*/
.fontPreviewImageWrapper
  .rightSection
  .downloadButton
  .downloadButtonQueueSelected:hover,
.fontPreviewImageWrapperDefault
  .rightSection
  .downloadButton
  .downloadButtonQueueSelected:hover {
  background: #333;
  border: 1px solid #333;
}
/*.fontPreviewImageWrapper
  .rightSection
  .downloadButton
  .downloadButtonQueueSelected
  a,
.fontPreviewImageWrapperDefault
  .rightSection
  .downloadButton
  .downloadButtonQueueSelected
  a {
  color: #fff;
  text-decoration: none;
}
.fontPreviewImageWrapper
  .rightSection
  .detailsButton
  .detailsButtonElement:hover,
.fontPreviewImageWrapperDefault
  .rightSection
  .detailsButton
  .detailsButtonElement:hover {
  background: #333;
  border: 1px solid #333;
}
.fontPreviewImageWrapper .rightSection .detailsButton .detailsButtonElement a,
.fontPreviewImageWrapperDefault
  .rightSection
  .detailsButton
  .detailsButtonElement
  a {
  color: #fff;
  text-decoration: none;
}*/


.rightSection {
	 float: right;
	 background: #fff;
	 height: 101px;
	 cursor: default;
	 padding-right: 9px;
	 padding-left: 9px;
	 margin-top: 10px;
}
.glass{
  float: right;
  background: linear-gradient(to left, #fff 0%, rgba(255,255,255,0) 130%);
  width: 20px;
  height: 101px;
}
 .markButton, .downloadButton, .detailsButton{
  display: inline-block;
  float: right;
  margin-right: 5px;
}
.buttonGroup{
  margin-top: 24px;
}
.feed{
  text-align: center;
}

.likeCount{
  font-size: 12px;
}






.fontPreviewWrapper {
  margin-bottom: 3px;
}
.fontPreviewWrapper:hover {
  #background: url("../images/fontPreviewBG.png") repeat-x bottom;
}
.fontPreviewTitle {
  float: left;
  font-weight: 500;
  color: #999B9D;
}

.fn-categories{
  font-weight: 500;
  color: #999B9D;
}

.fn-categories a{
  color: var(--gray);
  font-weight: 700 !important;
  transition: all .2s ease
}
.fn-categories a:hover{
  color: var(--red);
}

.fn-download a{
  color: var(--gray);
  font-weight: 700 !important;
  transition: all .2s ease
}
.fn-download a:hover{
  color: var(--red);
}
.fontPreviewTitle a{
  color: var(--gray);
  font-weight: 700 !important;
  transition: all .2s ease
}
.fontPreviewTitle a: hover{
  color: var(--red);
}
.fontPreviewTitle a:hover{
  color: var(--red);
}

.rateFontBlock {
  float: right;
  margin-right: 3px;
  width: 90px;
}
.rateFontText {
  float: right;
  width: 60px;
  margin-right: 102px;
  font-size: 13px;
  padding-top: 2px;
  text-align: right;
  background: #fff;
  height: 20px;
}
.rateFontBlock .starsOn,
.rateFontBlock .starsOff {
  width: 90px;
  height: 17px;
  position: absolute;
}
.rateFontBlock .starsOn {
  z-index: 11;
  background: url("../images/stars_on.png") no-repeat bottom left;
}
.rateFontBlock .starsOff {
  z-index: 10;
  background: url("../images/stars_off.png") no-repeat bottom right;
}

.categoryBar {
  width: 100%;
  background-color: #f7cc62;
  font-size: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  border-radius: 7px;
}
.categoryBarInner {
  padding: 12px;
  border-radius: 7px;
}
.letterListing {
 /* width: 650px;*/
  margin-left: auto;
  margin-right: auto;
}
.categoryLink {
  width: 135px;
}
.letterLink {
  text-align: center;
  width: 14px;
}
.categoryLink,
.letterLink {
  float: left;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
}
.categoryLink:hover,
.letterLink:hover {
  cursor: pointer;
  background-color: #feb721;
  border-radius: 5px;
}
.categoryLink:hover a,
.letterLink:hover a {
  color: #fff;
  text-decoration: underline;
}
.categoryLink a,
.letterLink a {
  text-decoration: none;
}
.categoryLink a:hover,
.letterLink a:hover {
  text-decoration: underline;
}

/*.settingsBar {
  width: 100%;
  background-color: #eee;
  font-size: 12px;
  margin-bottom: 20px;
  overflow: hidden;
}

.mainNavBar {
  width: 100%;
  background-color: #4096ee;
  font-size: 16px;
  color: #aaa;
  height: 43px;
  overflow: hidden;
}
.mainNavBar a {
  color: #fff;
  text-decoration: none;
}
.mainNavBar a:hover {
  text-decoration: underline;
}
.mainNavBarInner {
}
.mainNavBarInner .navBarLeftLinks {
  float: left;
  padding: 10px;
  padding-top: 11px;
  padding-left: 18px;
  padding-right: 0px;
}

.toolbarContainerInner {
  margin-bottom: 20px;
}
*/
/* paging */
.pagingWrapper {
  float: right;
  padding-top: 20px;
  padding-bottom: 10px;
}
.pagingWrapper .pagingLink,
.pagingWrapper .pagingLinkOff,
.pagingWrapper .pagingLinkSelected {
  float: left;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-right: 5px;
}

.Selected{
  background-color: #f7cc62;
}
.pagingWrapper .pagingLink {
  border: 1px solid #4096ee;
  background: #4096ee;
  color: #fff;
  cursor: pointer;
}
.pagingWrapper .pagingLink:hover {
  background: #fff;
}
.pagingWrapper .pagingLinkOff {
  border: 1px solid #ddd;
  background: #ddd;
  color: #fff;
}
.pagingWrapper .pagingLinkSelected {
  border: 1px solid #fff;
  background: #fff;
}

.list-group-item:hover{
  background: #ddd;
}
.fa{
  font-size: 18px;
  font-weight: 600;
}

li{
  list-style: none;
}
.pagingWrapper .pagingLinkSelected a {
  text-decoration: none;
  font-weight: bold;
  color: #4096ee;
}
.pagingWrapper .pagingLink a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}
.pagingWrapper .pagingLink:hover a {
  color: #000;
}
.pagingLabelWrapper {
  float: left;
  font-size: 13px;
  padding-top: 24px;
  font-weight: bold;
  padding-right: 12px;
}

.footer {
  background-color: #4096ee;
  color: #fff;
  text-align: center;
  padding: 16px;
}
.footer a {
  color: #fff;
  text-decoration: underline;
}
.footer a:hover {
  text-decoration: none;
}

.pageDetailsLeft {
  float: left;
  width: 100%;
  /*padding-right: 20px;*/
  display: block;
}
.pageDetailsRight {
  float: left;
  width: 100%;
  display: block;
}

.characterMap {
  /*float: left;*/
  padding-top: 8px;
}

.fontArchiveContents {
  float: left;
  width: 100%;
  padding-top: 8px;
}
/*.fontArchiveContents table {
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.fontArchiveContents th,
.fontArchiveContents td {
  padding: 7px;
  border-bottom: 1px solid #ccc;
}
.fontArchiveContents th {
  background: #dddddd;
  color: #666;
  text-align: left;
}
.fontArchiveContents tr:hover {
  background: #efefef;
}
.fontArchiveContents a {
  text-decoration: none;
}
.fontArchiveContents a:hover {
  text-decoration: underline;
}*/
.userCommentsForm {
  padding-top: 14px;
	margin: 36px;
	padding-bottom: 43px;
}
.userCommentsForm .formLabel {
  /*width: 100px;
  float: left;*/
}
.userCommentsForm textarea {
  /*width: 400px;
  height: 50px;*/
}
.userCommentsForm label {
  padding-left: 10px;
}
.userCommentsForm input {
  width: 250px;
}
.userCommentsForm .submitButton {
  width: 130px;
}
.userCommentsForm .userCommentsIntro {
  float: left;
  width: 541px;
  padding-bottom: 20px;
}

.userCommentsList {
  padding-top: 24px;
}
.userCommentsList .commentRight {
  float: left;
  display: block;
}
.userCommentsList .commentLeft {
  float: left;
  overflow: hidden;
  display: block;
  font-size: 24px;
  font-weight: bold;
  color: #fff;
	width: 50px;
	height: 50px;
	background: var(--red);
	text-align: center;
	border-radius: 50px;
	margin-top: 5px;
	padding: 7px;
	margin: 11px;

}
.userCommentsList .commentHead {
  color: #bbb;
}
.userCommentsList .commentsWrapper {
  border-bottom: 1px solid #bbb;
  padding-top: 10px;
  padding-bottom: 10px;
}
.userCommentsList .commentFirst {
  border-top: 1px solid #bbb;
}
.userCommentsList .commentBody {
  width: 500px;
}

/* ads */
.mainHeaderAds {
  float: right;
  text-align: right;
}
.leftPageAds {
  float: left;
  padding-right: 20px;
}
.rightPageAds {
  float: left;

}
.footerPageAds {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 14px;
}

/* custom preview area */
.customPreviewSettings {
  font-size: 14px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  width: 650px;
}
.customPreviewSettings .customPreviewTextLabel,
.customPreviewSettings .customPreviewTextColourLabel,
.customPreviewSettings .customPreviewTextInput,
.customPreviewSettings .customPreviewTextColourPicker,
.customPreviewSettings .customPreviewTextSubmit {
  float: left;
}
.customPreviewSettings .customPreviewTextLabel,
.customPreviewSettings .customPreviewTextColourLabel {
  padding-top: 2px;
  padding-right: 5px;
}
.customPreviewSettings .customPreviewTextInput {
  padding-right: 16px;
}
.customPreviewSettings .colourPickerBox {
  margin-right: 14px;
}
.customPreviewSettings .customPreviewTextInput input {
  width: 240px;
}

/* submit font form */
.submitFontForm {
  padding-left: 30px;
  padding-top: 20px;
}
.submitFontForm label {
  float: left;
  width: 200px;
}
.submitFontForm div {
  clear: right;
  padding: 5px;
}
.submitFontForm input,
.submitFontForm select,
.submitFontForm textarea {
  width: 400px;
}
.submitFontForm textarea {
  height: 100px;
}
.submitFontForm .submitButton {
  width: 120px;
}

/* popup containers (yui) */
.yui-overlay,
.yui-panel-container {
  visibility: hidden;
  position: absolute;
  z-index: 2;
}
.yui-panel {
  position: relative;
}
.yui-panel-container form {
  margin: 0;
}
.mask {
  z-index: 1;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.mask.block-scrollbars {
  overflow: auto;
}
.masked select,
.drag select,
.hide-select select {
  _visibility: hidden;
}
.yui-panel-container select {
  _visibility: inherit;
}
.hide-scrollbars,
.hide-scrollbars * {
  overflow: hidden;
}
.hide-scrollbars select {
  display: none;
}
.show-scrollbars {
  overflow: auto;
}
.yui-panel-container.show-scrollbars,
.yui-tt.show-scrollbars {
  overflow: visible;
}
.yui-panel-container.show-scrollbars .underlay,
.yui-tt.show-scrollbars .yui-tt-shadow {
  overflow: auto;
}
.yui-panel-container.shadow .underlay.yui-force-redraw {
  padding-bottom: 1px;
}
.yui-effect-fade .underlay,
.yui-effect-fade .yui-tt-shadow {
  display: none;
}
.yui-tt-shadow {
  position: absolute;
}
.yui-override-padding {
  padding: 0 !important;
}
.yui-panel-container .container-close {
  overflow: hidden;
  text-indent: -10000em;
  text-decoration: none;
}
.yui-overlay.yui-force-redraw,
.yui-panel-container.yui-force-redraw {
  margin-bottom: 1px;
}
.mask {
  background-color: #000;
  opacity: 0.35;
  filter: alpha(opacity=35);
}
.popupContainer .yui-panel-container {
  padding: 0 1px;
  *padding: 2px;
}
.popupContainer .yui-panel {
  position: relative;
  left: 0;
  top: 0;
  border-style: solid;
  border-width: 1px 0;
  border-color: #808080;
  z-index: 1;
  *border-width: 1px;
  *zoom: 1;
  _zoom: normal;
}
.popupContainer .yui-panel .hd,
.popupContainer .yui-panel .bd,
.popupContainer .yui-panel .ft {
  border-style: solid;
  border-width: 0 1px;
  border-color: #808080;
  margin: 0 -1px;
  *margin: 0;
  *border: 0;
}
.popupContainer .yui-panel .hd {
  border-bottom: solid 1px #ccc;
}
.popupContainer .yui-panel .bd,
.popupContainer .yui-panel .ft {
  background-color: #f2f2f2;
}
.popupContainer .yui-panel .hd {
  padding: 0 10px;
  font-size: 93%;
  line-height: 2;
  *line-height: 1.9;
  font-weight: bold;
  color: #000;
  background: url(//yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/sprite.png)
	 repeat-x 0 -200px;
}
.popupContainer .yui-panel .bd {
  padding: 10px;
}
.popupContainer .yui-panel .ft {
  border-top: solid 1px #808080;
  padding: 5px 10px;
  font-size: 77%;
}
.popupContainer .container-close {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 25px;
  height: 15px;
  background: url(//yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/sprite.png)
	 no-repeat 0 -300px;
  cursor: pointer;
}
.popupContainer .yui-panel-container .underlay {
  right: -1px;
  left: -1px;
}
.popupContainer .yui-panel-container.matte {
  padding: 9px 10px;
  background-color: #fff;
}
.popupContainer .yui-panel-container.shadow {
  _padding: 2px 4px 0 2px;
}
.popupContainer .yui-panel-container.shadow .underlay {
  position: absolute;
  top: 2px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  *top: 4px;
  *left: -1px;
  *right: -1px;
  *bottom: -1px;
  _top: 0;
  _left: 0;
  _right: 0;
  _bottom: 0;
  _margin-top: 3px;
  _margin-left: -1px;
  background-color: #000;
  opacity: 0.12;
  filter: alpha(opacity=12);
}
.popupContainer .yui-dialog .ft {
  border-top: none;
  padding: 0 10px 10px 10px;
  font-size: 100%;
}
.popupContainer .yui-dialog .ft .button-group {
  display: block;
  text-align: right;
}
.popupContainer .yui-dialog .ft button.default {
  font-weight: bold;
}
.popupContainer .yui-dialog .ft span.default {
  border-color: #304369;
  background-position: 0 -1400px;
}
.popupContainer .yui-dialog .ft span.default .first-child {
  border-color: #304369;
}
.popupContainer .yui-dialog .ft span.default button {
  color: #fff;
}
.popupContainer .yui-dialog .ft span.yui-button-disabled {
  background-position: 0 -1500px;
  border-color: #ccc;
}
.popupContainer .yui-dialog .ft span.yui-button-disabled .first-child {
  border-color: #ccc;
}
.popupContainer .yui-dialog .ft span.yui-button-disabled button {
  color: #a6a6a6;
}
.popupContainer .yui-simple-dialog .bd .yui-icon {
  background: url(//yui.yahooapis.com/2.8.0r4/build/assets/skins/sam/sprite.png)
	 no-repeat 0 0;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  float: left;
}
.popupContainer .yui-simple-dialog .bd span.blckicon {
  background-position: 0 -1100px;
}
.popupContainer .yui-simple-dialog .bd span.alrticon {
  background-position: 0 -1050px;
}
.popupContainer .yui-simple-dialog .bd span.hlpicon {
  background-position: 0 -1150px;
}
.popupContainer .yui-simple-dialog .bd span.infoicon {
  background-position: 0 -1200px;
}
.popupContainer .yui-simple-dialog .bd span.warnicon {
  background-position: 0 -1900px;
}
.popupContainer .yui-simple-dialog .bd span.tipicon {
  background-position: 0 -1250px;
}
.popupContainer .yui-tt .bd {
  position: relative;
  top: 0;
  left: 0;
  z-index: 1;
  color: #000;
  padding: 2px 5px;
  border-color: #d4c237 #a6982b #a6982b #a6982b;
  border-width: 1px;
  border-style: solid;
  background-color: #ffee69;
}
.popupContainer .yui-tt.show-scrollbars .bd {
  overflow: auto;
}
.popupContainer .yui-tt-shadow {
  top: 2px;
  right: -3px;
  left: -3px;
  bottom: -3px;
  background-color: #000;
}
.popupContainer .yui-tt-shadow-visible {
  opacity: 0.12;
  filter: alpha(opacity=12);
}

.popupContainer .yui-panel .bd li {
  padding-bottom: 10px;
}

.popupContainer {
  display: none;
}

/* v1.2 */
.fontTopCategories {
  float: right;
  text-align: right;
  padding-right: 14px;
  color: #888;
}
.fontTopCategories a {
  color: #888;
  text-decoration: none;
}
.fontTopCategories a:hover {
  color: #888;
  text-decoration: underline;
}
.fontTotalDownloads {
  float: right;
  text-align: right;
}
.inlinePageAds {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding: 14px;
}

div#demoBanner {
  background-color: #333333;
  width: 100%;
  text-align: center;
  padding: 7px;
  font-weight: bold;
  color: #ffffff;
  opacity: 0.5;
  filter: alpha(opacity=50); /* For IE8 and earlier */
}

div#demoBanner span {
  cursor: pointer;
}

div#demoBanner a {
  color: #ffffff;
}

div#demoBanner:hover {
  opacity: 1;
  filter: alpha(opacity=100); /* For IE8 and earlier */
}

/* V2.0 */
.fontDesigner {
  padding-bottom: 14px;
}

.fontDesigner table {
  border-left: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
}

.fontDesigner td {
  border-bottom: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  padding: 7px;
}

.fontDesigner td:first-child {
  background-color: #dddddd;
}

.pageDetailsRight {
  padding-top: 8px;
  color: #222222;
}

.sortFilterForm {
  float: right;
  padding-top: 8px;
}

.icon-color-heart:hover{
  color: var(--red);
}
.icon-color-hot:hover{
  color: var(--orange);
}
.icon-color-least:hover{
  color: var(--blue);
}

.navBarRightSearch form {
  width: 160px;
  display: inline;
}

.navBarRightSearch input {
  width: 120px;
}
.navbar {
	 box-shadow: 0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15);
}

.mainNavBarInner .navBarRightSearch {
  float: right;
  padding: 10px;
  padding-right: 18px;
  padding-left: 0px;
}

.mainNavBarInner .navBarRightSearch form {
  color: #fff;
}

.footerSocial {
  text-align: center;
  clear: both;
  padding-bottom: 12px;
}

.fontPreview {
	 /*width: 550px;
	height: 954px;*/
  /*width: 957.75px;*/ 
  height: auto;
  padding: 1rem;
  width: 100%;
}

.tinynav {
  display: none;
}

#nav .selected a,
#nav2 .selected a {
  color: red;
}

.navBarRightLinks {
  float: left;
}

.searchButton {
  display: none;
}

.letterListing .tittle-abc {
	 float: left;
	 padding-left: 5px;
	 padding-right: 5px;
	 padding-top: 2px;
	 padding-bottom: 2px;
	 font-weight: 700;
}
.form-group {
	 padding: 2rem;
}
/*error 404*/
#notfound {
  position: relative;
  height: 100vh;
  background-color: #fafbfd;
}

#notfound .notfound {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
			 transform: translate(-50%, -50%);
}

.notfound {
  max-width: 520px;
  width: 100%;
  text-align: center;
}

.notfound .notfound-bg {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
			 transform: translateY(-50%);
  z-index: -1;
}

.notfound .notfound-bg > div {
  width: 100%;
  background: #fff;
  border-radius: 90px;
  height: 125px;
}

.notfound .notfound-bg > div:nth-child(1) {
  -webkit-box-shadow: 5px 5px 0px 0px #f3f3f3;
			 box-shadow: 5px 5px 0px 0px #f3f3f3;
}

.notfound .notfound-bg > div:nth-child(2) {
  -webkit-transform: scale(1.3);
		-ms-transform: scale(1.3);
			 transform: scale(1.3);
  -webkit-box-shadow: 5px 5px 0px 0px #f3f3f3;
			 box-shadow: 5px 5px 0px 0px #f3f3f3;
  position: relative;
  z-index: 10;
}

.notfound .notfound-bg > div:nth-child(3) {
  -webkit-box-shadow: 5px 5px 0px 0px #f3f3f3;
			 box-shadow: 5px 5px 0px 0px #f3f3f3;
  position: relative;
  z-index: 90;
}

.notfound h1 {
  font-size: 86px;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 8px;
  color: #151515;
}

.notfound h2 {
  font-size: 26px;
  margin: 0;
  font-weight: 700;
  color: #151515;
}

.notfound .go-back {
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  background: var(--red);
  display: inline-block;
  padding: 15px 30px;
  border-radius: 5px;
  color: #fff;
  font-weight: 700;
  margin-top: 20px;
}

.notfound-social {
  margin-top: 20px;
}

.notfound-social>a {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  width: 40px;
  font-size: 14px;
  color: #fff;
  background-color: #dedede;
  margin: 3px;
  padding: 0px;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
  border-radius: 2rem;
}
.notfound-social>a:hover {
  background-color: var(--red);
}

@media only screen and (max-width: 767px) {
	 .notfound .notfound-bg {
		width: 287px;
		margin: auto;
	 }

	 .notfound .notfound-bg > div {
		height: 85px;
  }
}

@media only screen and (max-width: 480px) {
  .notfound h1 {
	 font-size: 68px;
  }

  .notfound h2 {
	 font-size: 18px;
  }
}

/*Heart*/
	 .heart {
		background: url(../images/web_heart_animation.png);
		background-position: left;
		background-repeat: no-repeat;
		height: 50px;
		width: 50px;
		cursor: pointer;
		/*position: absolute;*/
		left:-14px;
		  background-size:2900%;
		  margin: auto;

		  background-color: #eaeef0;
border-radius: 2rem;
	 }
	 .heart:hover, .heart:focus{
	 background-position: right;
  }

	 @-webkit-keyframes heartBlast {
	 0% {
		background-position: left;
  }
  100% {
		background-position: right;
  }
  }

  @keyframes heartBlast {
		0% {
		background-position: left;
  }
  100% {
		background-position: right;
  }
  }

  .heartAnimation {
	 /*display: inline-block;*/
	 -webkit-animation-name: heartBlast;
	 animation-name: heartBlast;
	 -webkit-animation-duration: .8s;
	 animation-duration: .8s;
	 -webkit-animation-iteration-count: 1;
	 animation-iteration-count: 1;
	 -webkit-animation-timing-function: steps(28);
	 animation-timing-function: steps(28);
	 background-position: right;
	 }
.score{
  font-weight: 400;
  color: var(--gray);
}

.popularSidebar{
  background-color: #fff;
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 4px 15px 0 rgba(0,0,0,0.2);
  margin-top: 15px;
}
.popularSidebar ul li a{
  font-weight: bold;
  font-size: 13px;
  margin: 0;
  padding: 10px 15px;
  display: block;
}
.popularSidebar ul li a:hover{
  background-color: #f1f1f1;
}
.popularSidebar ul li span{
  padding: 0;
  float: right;
  margin: 2px 0 0 0;
  font-size: 13px;
}
.popularSidebar ul {
  padding: 0;
}

.icon-button {
	 position: fixed;
	bottom: 20px;
   right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: #333333;
  background: var(--yellow);
  border: none;
  outline: none;
  border-radius: 50%;
  box-shadow: 0 5px 11px 0 rgba(0,0,0,0.18),0 4px 15px 0 rgba(0,0,0,0.15);
  z-index: 1;
}

.icon-button:hover {
  cursor: pointer;
}

.icon-button:active {
  background: #cccccc;
}

.icon-button-badge {
  position: absolute;
  top: -6px;
  right: -5px;
  width: 25px;
  height: 25px;
  background: var(--red);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
.icon-button i{
	font-size: 1.25rem;
	line-height: 47px;
	color: #fff;
}

/*navfont*/
.nav-font{
	display: block;
	position: relative;
	top: 0;
	text-align: center;
	width: 100%;
	z-index: 29;
	margin-bottom: 40px;
}
.sticky-navbar-tab-bar{
	background: #fff;
   border-bottom: 1px solid #dadce0;
   height: 48px;
   margin-right: 0;
   max-width: 1440px;
   width: 100%;
   -moz-box-align: center;
   align-items: center;
   display: -moz-inline-box;
   display: inline-flex;
   -moz-box-orient: horizontal;
   -moz-box-direction: normal;
   flex-direction: row;
   list-style-type: none;
   margin-right: 60px;
   transition: margin .3s cubic-bezier(.4,0,.2,1);
    font: 500 14px/20px Google Sans Text,Arial,Helvetica,sans-serif;
    letter-spacing: normal;
}

.nav-link-font{
	border-bottom: 2px solid var(--red);
   color: var(--red);
   margin-bottom: -2px;
   -moz-box-align: center;
   align-items: center;
   display: -moz-box;
   display: flex;
   height: 100%;
   -moz-box-pack: center;
   justify-content: center;
   min-width: 120px;
   padding: 0 24px;
   overflow: hidden;
   position: relative;

}

.section-tab{
	margin-top: 10px;
	padding-top: 40px;
}
.pageMainContent{
  margin-bottom: 10px;
}

/*font description*/
.font-description {
    padding: 13px;
}
.font-description p{
    font-size: 14px;
}
.font-description p a{
    color: #0a87e0;
}
.content-desc{
  margin-top: 40px;
}


.select-box{
    display: none;
}
.nav-mobile{
    display: none;
}
.nav-mobile-round{
    display: none;
}

.width {
    margin: 0 auto;
}
.header {
    height: 60px;
    z-index: 999;
    position: fixed;
    width: 100%;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .1), 0 3px 6px 0 rgba(104, 104, 104, .07);
    background: #fff;
    -webkit-transition: all .15s ease-in;
    -moz-transition: all .15s ease-in;
    -o-transition: all .15s ease-in;
    transition: transform 225ms cubic-bezier(0, 0, .2, 1);
    transition-property: all;
    top: 0;
}
body.main .header {
    width: 80%;
    margin: 15% auto;
}
.header_inner {
    height: 60px;
    position: relative;
    z-index: 1;
}
.header .logo {
    /*display: block;
    width: 60px;
    height: 60px;
    margin-top: -10px;
    float: left;
    text-align: left;*/
    display: block;
    width: 120px;
    height: 60px;

    float: left;
    text-align: left;
    padding-top: 0.313rem;
    padding-bottom: 0.313rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
}
.header .logo.is-fast {
    display: none;
}
.header .back-logo {
    display: none;
    width: 60px;
    height: 60px;
    float: left;
    text-align: center;
    line-height: 60px;
    font-size: 36px;
    position: relative;
    right: 10px;
    color: #666;
}
.header .back-logo:hover {
    color: #333;
}
.header .back-logo.is-fast {
    display: block;
}
.header .auth {
    position: absolute;
    top: 42%;
    right: 0;
    margin-top: -17px;
    z-index: 99;
}

.header .auth.login {
/*    background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhciIgZGF0YS1pY29uPSJ1c2VyLWNpcmNsZSIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OTYgNTEyIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtdXNlci1jaXJjbGUgZmEtdy0xNiBmYS0yeCI+PHBhdGggZmlsbD0iIzY2NiIgZD0iTTI0OCAxMDRjLTUzIDAtOTYgNDMtOTYgOTZzNDMgOTYgOTYgOTYgOTYtNDMgOTYtOTYtNDMtOTYtOTYtOTZ6bTAgMTQ0Yy0yNi41IDAtNDgtMjEuNS00OC00OHMyMS41LTQ4IDQ4LTQ4IDQ4IDIxLjUgNDggNDgtMjEuNSA0OC00OCA0OHptMC0yNDBDMTExIDggMCAxMTkgMCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzODUgOCAyNDggOHptMCA0NDhjLTQ5LjcgMC05NS4xLTE4LjMtMTMwLjEtNDguNCAxNC45LTIzIDQwLjQtMzguNiA2OS42LTM5LjUgMjAuOCA2LjQgNDAuNiA5LjYgNjAuNSA5LjZzMzkuNy0zLjEgNjAuNS05LjZjMjkuMiAxIDU0LjcgMTYuNSA2OS42IDM5LjUtMzUgMzAuMS04MC40IDQ4LjQtMTMwLjEgNDguNHptMTYyLjctODQuMWMtMjQuNC0zMS40LTYyLjEtNTEuOS0xMDUuMS01MS45LTEwLjIgMC0yNiA5LjYtNTcuNiA5LjYtMzEuNSAwLTQ3LjQtOS42LTU3LjYtOS42LTQyLjkgMC04MC42IDIwLjUtMTA1LjEgNTEuOUM2MS45IDMzOS4yIDQ4IDI5OS4yIDQ4IDI1NmMwLTExMC4zIDg5LjctMjAwIDIwMC0yMDBzMjAwIDg5LjcgMjAwIDIwMGMwIDQzLjItMTMuOSA4My4yLTM3LjMgMTE1Ljl6IiBjbGFzcz0iIj48L3BhdGg+PC9zdmc+);
*/    width: 42px;
    background-size: 33px;
    height: 42px;
    background-position: 5px 4px;
    cursor: pointer;
    background-repeat: no-repeat;
}
.header .auth.login:hover {
    background-color: #f6f6f6;
    border-radius: 25px;
}
.header .auth.login:active {
    border: 3px solid #c2c2c2;
    margin: -20px -3px;
    border-radius: 25px;
}
.header .auth.user {
    background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhciIgZGF0YS1pY29uPSJ1c2VyLWNpcmNsZSIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OTYgNTEyIiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtdXNlci1jaXJjbGUgZmEtdy0xNiBmYS0yeCI+PHBhdGggZmlsbD0iIzgyYzkxZSIgZD0iTTI0OCAxMDRjLTUzIDAtOTYgNDMtOTYgOTZzNDMgOTYgOTYgOTYgOTYtNDMgOTYtOTYtNDMtOTYtOTYtOTZ6bTAgMTQ0Yy0yNi41IDAtNDgtMjEuNS00OC00OHMyMS41LTQ4IDQ4LTQ4IDQ4IDIxLjUgNDggNDgtMjEuNSA0OC00OCA0OHptMC0yNDBDMTExIDggMCAxMTkgMCAyNTZzMTExIDI0OCAyNDggMjQ4IDI0OC0xMTEgMjQ4LTI0OFMzODUgOCAyNDggOHptMCA0NDhjLTQ5LjcgMC05NS4xLTE4LjMtMTMwLjEtNDguNCAxNC45LTIzIDQwLjQtMzguNiA2OS42LTM5LjUgMjAuOCA2LjQgNDAuNiA5LjYgNjAuNSA5LjZzMzkuNy0zLjEgNjAuNS05LjZjMjkuMiAxIDU0LjcgMTYuNSA2OS42IDM5LjUtMzUgMzAuMS04MC40IDQ4LjQtMTMwLjEgNDguNHptMTYyLjctODQuMWMtMjQuNC0zMS40LTYyLjEtNTEuOS0xMDUuMS01MS45LTEwLjIgMC0yNiA5LjYtNTcuNiA5LjYtMzEuNSAwLTQ3LjQtOS42LTU3LjYtOS42LTQyLjkgMC04MC42IDIwLjUtMTA1LjEgNTEuOUM2MS45IDMzOS4yIDQ4IDI5OS4yIDQ4IDI1NmMwLTExMC4zIDg5LjctMjAwIDIwMC0yMDBzMjAwIDg5LjcgMjAwIDIwMGMwIDQzLjItMTMuOSA4My4yLTM3LjMgMTE1Ljl6IiBjbGFzcz0iIj48L3BhdGg+PC9zdmc+);
    width: 42px;
    height: 42px;
    background-size: 33px;
    background-position: 5px 4px;
    cursor: pointer;
    background-repeat: no-repeat;
    overflow: hidden;
}
.header .auth.user.hover {
    background-color: #f6f6f6;
    border-radius: 25px;
    overflow: visible;
}

.header .auth.user>a {
    display: block;
    width: 32px;
    height: 52px;
    cursor: pointer;
}
.header .auth.login:hover {
    cursor: pointer;
    background-repeat: no-repeat;
}
.header .auth.user:hover {
    cursor: pointer;
    background-repeat: no-repeat;
}
.header .auth.user ul {
    display: none;
    user-select: none;
    position: absolute;
    right: 4px;
    top: 75%;
    z-index: 999;
    padding: 0;
    margin: 0;
    background: #fff none repeat scroll 0% 0%;
    margin-top: 13px;
    box-shadow: 0 0 14px 0 rgba(50, 50, 93, .1), 0 3px 6px 0 rgba(0, 0, 0, .07);
    min-width: 150px;
}
.header .auth.user ul:before {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    content: "";
    position: absolute;
    top: 0;
    margin-top: -6px;
    right: 10px;
    z-index: 999;
}
.header .auth.user.hover ul {
    display: block
}
.header .auth.user ul li {
    text-align: left;
    padding: 10px 15px;
    padding-left: 40px;
}
.header .auth.user ul li:hover {
    background: #f6f6f6;
}
.header .auth.user ul li a {
    text-decoration: none;
}
.header .auth.user ul li a:hover {
    text-decoration: none;
    color: #666;
}

.btn-search.open .icon-left {
    display: block;
}
.btn-search .icon-left {
    display: none;
}
.btn-search.open {
    background: 0 0;
    font-size: 25px;
    color: #c2c2c2;
    -webkit-tap-highlight-color: transparent;
    left: -3px;
    color: #666;
    top: 11px;
}

.head-menu {
    float: left;
    margin: 0 1px 0 0;
    padding: 19px 3px;
    position: relative;
    text-decoration: none;
}
.head-menu>a {
    text-decoration: none;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    padding: 10px 14px 12px;
    border-radius: 25px;
    font-weight: 600;
    color: #7b7b7b;
}
.head-menu a .icon-color-least:hover {
    text-decoration: none;
}

.search-form {
    height: 40px;
    background: 0 0;
    margin: 10px 0px 0 0;
    padding: 0;
    display: block;
    float: right;
    position: relative;
    background: #f6f6f6;
    padding: 0;
    width: 30%;
    border-radius: 50px;

}
.search-form input:hover {}
.search-form input {
    border: 0;
    padding: 1px 1px 1px 17px;
    padding-right: 85px;
    margin: 0;
    font-family: Poppins, sans-serif;
    font-weight: 500;
    font-size: 19px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: 0 0;
    width: 100%;
    height: 40px;
    color: #999;
}
.search-form input:focus {
    border: none;
    color: #333;
    background-color: #fff;
    border-radius: 50px;
    box-shadow: 0 0 0 2pt #c2c2c2;
    border-color: green;
    outline: none;
}

.search-form:hover>a.randomQuery {
    display: block;
}
.search-form button {
    position: absolute;
    top: 0;
    right: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    border: none;
    text-indent: -9999px;
    overflow: hidden;
    background: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTYuOTY2IDU2Ljk2NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTYuOTY2IDU2Ljk2NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwYXRoIGZpbGw9IiM2NjYiIGQ9Ik0xNS43LDE0LjNsLTMuMTA1LTMuMTA1QzEzLjQ3MywxMC4wMjQsMTQsOC41NzYsMTQsN2MwLTMuODY2LTMuMTM0LTctNy03UzAsMy4xMzQsMCw3czMuMTM0LDcsNyw3ICBjMS41NzYsMCwzLjAyNC0wLjUyNyw0LjE5NC0xLjQwNUwxNC4zLDE1LjdjMC4xODQsMC4xODQsMC4zOCwwLjMsMC43LDAuM2MwLjU1MywwLDEtMC40NDcsMS0xQzE2LDE0Ljc4MSwxNS45NDYsMTQuNTQ2LDE1LjcsMTQuM3ogICBNMiw3YzAtMi43NjIsMi4yMzgtNSw1LTVzNSwyLjIzOCw1LDVzLTIuMjM4LDUtNSw1UzIsOS43NjIsMiw3eiIvPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: 10px 10px;
    background-size: 72px;
}
.search-form button:hover {}
.search-form .clear-form {
    position: fixed;
    top: 14px;
    left: 10px;
    background: red;
    display: block;
    width: 30px;
    height: 30px;
}

@media(min-width:1874px) {
    .width {
        width: 1880px;
    }
    .videos,
    .header_inner {
        width: 1880px;
    }
    
}
@media screen and (max-width:1969px) {
    .width {
        width: 1570px;
    }
    .videos,
    .header_inner {
        width: 1570px;
    }
    body.main .search-form {
        width: 70%;
    }
  
}
@media screen and (max-width:1800px) {
   
    .width {
        width: 1570px;
    }
    .videos,
    .header_inner {
        width: 1570px;
    }
   
}
@media screen and (max-width:1600px) {
    
    .width {
        width: 1270px;
    }
    .videos,
    .header_inner {
        width: 1242px;
    }
    
}
@media screen and (max-width:1280px) {
    .width {
        width: 1020px;
    }
    .videos,
    .header_inner {
        width: 946px;
    }
    body.main .search-form {
        width: 66%;
    }
    .heading .breadcrumb {
        width: 60%;
    }
    
}
@media screen and (max-width:1080px) {
    .width {
        width: 836px
    }
    .videos,
    .header_inner {
        width: 835px
    }
    .header.header-hidden {
        -webkit-transform: translateY(-60px);
        -moz-transform: translateY(-60px);
        -ms-transform: translateY(-60px);
        -o-transform: translateY(-60px);
        transition: transform 195ms cubic-bezier(.4, 0, 1, 1);
        transition-property: all
    }
    .icon-button {
        bottom: 100px;
      }
    
}
@media screen and (max-width:850px) {
    .nav-mobile-round{
    display: block;
    width: 60px;
    height: 60px;
    margin-top: -10px;
    float: left;
    text-align: left;
    }
    .logo .nav-mobile-compl{
        display: none;
    }

    span.hide-item>a>span,
    .btn-search,
    .header .auth.login {
        transform: scale(.8)
    }
   
    .width {
        width: 320px;
    }
   
    .videos,
    .header_inner {
        width: 100%;
    }
    .header .logo.hidden,
    .header .back-logo.hidden {
        display: none;
    }
   
    body.search_open .bg_layer {
        display: block;
        z-index: 11;
    }
    .heading .breadcrumb {
        width: 100%;
    }
    .head-menu {
        /*display: none*/
    }
    .search-form {
        border-radius: 50px;
       /* display: none;*/
        position: absolute;
        top: -1px;
        width: 91%;
        left: 50px;
        z-index: 100;
        border-radius: 50px;
        float: right;
    }
    .search-form:focus {
        width: 230px;
    }
    .btn-search {}
    .search-form input {
        color: #000;
        width: 100%;
    }
    body.search_open .search-form {
        display: block;
        background: 0 0;
        border-bottom: 3px solid;
        border-radius: 0;
    }
    body.search_open .search-form>input {
        padding: 0 42px 0 10px
    }
    body.search_open .search-form>input:focus {
        border-radius: 0;
        box-shadow: none;
    }
    body.search_open .search-form>button {
        right: 0;
    }
    body.main .header {
        margin: 0
    }
    .header .auth {
        right: 45px;
    }
   
    .width {
        width: 557px;
    }
    .head-menu {
        display: none;
    }
    
    body.main .search-form {
        width: 55%
    }
    
    .heading span.filter_btn {
        display: none;
    }

    .nav-mobile{
        display: block;
        color: #333;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        padding: 10px;
        background: #fff;
        flex-direction: row;
        z-index: 999;
        margin: 0;
    }
    .nav-mobile a{
        text-decoration: none;
    }
    .nav-mobile a i{
        font-size: 7vmin;
        cursor: pointer;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #666666;
        min-width: 50px;
        
        white-space: nowrap;
        text-decoration: none;
    }


    .select-box {
      display: flex;
      width: 100%;
      flex-direction: column;
    }

    .select-box .options-container {
      background: var(--danger);
      color: #f5f6fa;
      max-height: 0;
      width: 100%;
      opacity: 0;
      transition: all 0.4s;
      border-radius: 8px;
      overflow: hidden;
      order: 1;
    }

    .selected {
      background: var(--danger);
      border-radius: 8px;
      margin-bottom: 8px;
      color: #f5f6fa;
      position: relative;

      order: 0;
    }

    .selected::after {
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23f5f6fa' d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E");
      background-size: contain;
      background-repeat: no-repeat;

      position: absolute;
      height: 100%;
      width: 32px;
      right: 10px;
      top: 5px;

      transition: all 0.4s;
    }

    .select-box .options-container.active {
      max-height: 240px;
      opacity: 1;
      overflow-y: scroll;
    }

    .select-box .options-container.active + .selected::after {
      transform: rotateX(180deg);
      top: -6px;
    }

    .select-box .options-container::-webkit-scrollbar {
      width: 8px;
      background: #f3566c;
      border-radius: 0 8px 8px 0;
    }

    .select-box .options-container::-webkit-scrollbar-thumb {
      background: #fdc3cc;
      border-radius: 8px;
    }

    .select-box .option,
    .selected {
      padding: 12px 24px;
      cursor: pointer;
    }

    .select-box .option:hover {
      background: #f7536b;
    }

    .select-box label {
      cursor: pointer;
    }

    .select-box .option .radio {
      display: none;
    }
    .option a{
      text-decoration: none;
      color: #fff;
    }

    .foot-display{
      display: none;
    }
    .categoryBarInner{
      display: none;
    }

}
@media screen and (max-width:620px) {
  .foot-display{
      display: none;
    }
}
@media screen and (max-width:566px) {


    .width {
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }
    
    .header_inner {
        margin-left: 10px;
        width: 94%;
    }
   
    .header .logo.hidden,
    .header .back-logo.hidden {
        display: none
    }
    
    .head-menu {
        /*display: none*/
    }
    .search-form {
        border-radius: 50px;
        /*display: none;*/
        position: absolute;
        top: -1px;
        width: 86%;
        left: 50px;
        z-index: 100;
        border-radius: 50px;

    }

    .nav-mobile{
        display: block;
        color: #333;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        padding: 10px;
        background: #fff;
        flex-direction: row;
        z-index: 999;
        margin: 0;
    }
    .nav-mobile a{
        text-decoration: none;
    }
    .nav-mobile a i{
        font-size: 7vmin;
        cursor: pointer;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #666666;
        min-width: 50px;
        
        white-space: nowrap;
        text-decoration: none;
    }
    .element-hidden{
        display: none;
    }
}
@media screen and (max-width:280px){
    .nav-mobile{
        display: none;
    }
    .search-form{
        width: 73%;
    }
    .element-hidden{
        display: none;
    }
}

@media screen and (max-width:1080px) {
    
}
@media screen and (max-width:1024px) {
    .main_width {
        width: 800px
    }
}
@media screen and (max-width:850px) {
   /* .main_width {
        width: 600px
    }
    .main_other {
        display: none
    }*/
    .search-form input {
        padding-right: 44px
    }
    .element-hidden{
        display: none;
    }
}
@media screen and (max-width:660px) {
  .element-hidden{
        display: none;
    }
}
@media screen and (max-width:630px) {
    .main_width {
        width: 100%
    }

}

#st-el-1.st-hidden {
    opacity: 0;
    display: none;
}

.app{
  height: 50px;
  width: 100%;
  background: #f4405a;
  margin-bottom: 5px;
  padding: 5px;
  border-radius: 7px;
  color: #fff;
}
.app p{
  padding: 10px;
}

/*counter*/
.icon-counter {
  background: #f89191;
  position: absolute;
  font-size: 0.9rem;
  margin-top: -.6rem;
  margin-left: -.3rem;
  padding: 0.2em 0.4em;
  border-radius: 50rem !important;
  display: inline-block;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  border: 0.2em solid #fff;
  transform: translateY(-1px);
  font-family: 'Poppins', Roboto;
}
.form-donate{
  display: inline-block;
}
.bd-donation{
    padding: 0.35em 0.65em;
    font-size: .75em;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
    border: none;
}