/**
 * Stellar
 * Stellar is star rating system helps you rate and like articles on a website and keep track of results.
 * Exclusively on https://1.envato.market/stellar
 *
 * @encoding        UTF-8
 * @version         2.1.3
 * @copyright       (C) 2018 - 2021 Merkulove ( https://merkulov.design/ ). All rights reserved.
 * @license         Envato License https://1.envato.market/KYbje
 * @contributors    Nemirovskiy Vitaliy (nemirovskiyvitaliy@gmail.com), Dmitry Merkulov (dmitry@merkulov.design)
 * @support         help@merkulov.design
 **/
.mdp-stellar-box {
  font-size: initial;
  font-weight: initial;
  letter-spacing: initial;
  /* Valuation tooltip */
  /* Valuation before and after */
  /* Results and Votes count before and after */ }
  .mdp-stellar-box .mdp-box-icon {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 calc( var(--mdp-stellar-space) / -2); }
    .mdp-stellar-box .mdp-box-icon i {
      margin: 0 calc( var(--mdp-stellar-space) / 2); }
  .mdp-stellar-box .mdp-stellar-tooltip {
    display: block;
    position: absolute;
    background: white;
    padding: .25rem .75rem;
    border-radius: 8px;
    box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.022), 0 8.7px 6.9px rgba(0, 0, 0, 0.031), 0 17.7px 14.2px rgba(0, 0, 0, 0.039), 0 36.5px 29.2px rgba(0, 0, 0, 0.048), 0 100px 80px rgba(0, 0, 0, 0.07);
    transition: .2s;
    font-size: smaller;
    white-space: nowrap;
    text-align: center;
    -webkit-animation-name: mdp-stellar-tooltip-hide;
            animation-name: mdp-stellar-tooltip-hide;
    -webkit-animation-duration: .1s;
            animation-duration: .1s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both; }
    .mdp-stellar-box .mdp-stellar-tooltip:after {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      position: absolute;
      border-top: 8px solid white;
      border-bottom: 8px solid transparent;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      left: calc( 50% - 8px);
      bottom: -15px; }
    .mdp-stellar-box .mdp-stellar-tooltip.mdp-stellar-tooltip-show {
      display: block;
      -webkit-animation-name: mdp-stellar-tooltip-show;
              animation-name: mdp-stellar-tooltip-show;
      -webkit-animation-duration: .4s;
              animation-duration: .4s;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both; }
  .mdp-stellar-box .mdp-stellar-val-before,
  .mdp-stellar-box .mdp-stellar-val-after {
    display: block;
    position: relative;
    background: white;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    font-size: smaller;
    white-space: nowrap;
    min-width: 54px;
    text-align: center;
    box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.022), 0 8.7px 6.9px rgba(0, 0, 0, 0.031); }
  .mdp-stellar-box .mdp-stellar-val-before {
    order: -1;
    margin-right: 1.25rem; }
    .mdp-stellar-box .mdp-stellar-val-before:after {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      position: absolute;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 8px solid white;
      border-right: 8px solid transparent;
      right: -15px;
      top: calc( 50% - 8px); }
  .mdp-stellar-box .mdp-stellar-val-after {
    margin-left: 1.25rem; }
    .mdp-stellar-box .mdp-stellar-val-after:before {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      position: absolute;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 8px solid transparent;
      border-right: 8px solid white;
      left: -15px;
      top: calc( 50% - 8px); }
  .mdp-stellar-box .mdp-stellar-results-before,
  .mdp-stellar-box .mdp-stellar-votes-before,
  .mdp-stellar-box .mdp-stellar-results-after,
  .mdp-stellar-box .mdp-stellar-votes-after {
    display: block;
    position: relative;
    background: white;
    padding: .5rem 1.25rem;
    border-radius: 8px;
    box-shadow: 0 3.4px 2.7px rgba(0, 0, 0, 0.022), 0 8.7px 6.9px rgba(0, 0, 0, 0.031); }
    .mdp-stellar-box .mdp-stellar-results-before span,
    .mdp-stellar-box .mdp-stellar-votes-before span,
    .mdp-stellar-box .mdp-stellar-results-after span,
    .mdp-stellar-box .mdp-stellar-votes-after span {
      white-space: nowrap; }
  .mdp-stellar-box .mdp-stellar-results-before,
  .mdp-stellar-box .mdp-stellar-votes-before {
    margin-right: 1.25rem;
    order: -2; }
    .mdp-stellar-box .mdp-stellar-results-before:after,
    .mdp-stellar-box .mdp-stellar-votes-before:after {
      width: 16px;
      height: 16px;
      content: '';
      display: block;
      position: absolute;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 8px solid white;
      border-right: 8px solid transparent;
      right: -15px;
      top: calc( 50% - 8px); }
  .mdp-stellar-box .mdp-stellar-results-after,
  .mdp-stellar-box .mdp-stellar-votes-after {
    margin-left: 1.25rem; }
    .mdp-stellar-box .mdp-stellar-results-after:before,
    .mdp-stellar-box .mdp-stellar-votes-after:before {
      width: 16px;
      height: 16px;
      content: '';
      display: block;
      position: absolute;
      border-top: 8px solid transparent;
      border-bottom: 8px solid transparent;
      border-left: 8px solid transparent;
      border-right: 8px solid white;
      left: -15px;
      top: calc( 50% - 8px); }
  .mdp-stellar-box .mdp-stellar-message {
    position: absolute;
    font-size: small;
    background: white;
    opacity: 1;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    display: flex;
    align-items: inherit;
    justify-content: center;
    -webkit-animation: stellar-fadeout;
            animation: stellar-fadeout;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
    -webkit-animation-duration: 1.1s;
            animation-duration: 1.1s; }
  .mdp-stellar-box .mdp-stellar-buttons {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none; }
    .mdp-stellar-box .mdp-stellar-buttons i {
      vertical-align: middle;
      cursor: pointer;
      position: relative;
      font-size: 0;
      line-height: 0;
      border: none;
      transition: 0.4s;
      display: inline; }
      .mdp-stellar-box .mdp-stellar-buttons i.mdp-stellar-rated {
        -webkit-animation-name: mdp-stellar-rated;
                animation-name: mdp-stellar-rated;
        -webkit-animation-duration: .4s;
                animation-duration: .4s;
        -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
        -webkit-animation-timing-function: ease-in;
                animation-timing-function: ease-in; }
      .mdp-stellar-box .mdp-stellar-buttons i.mdp-stellar-hover {
        transform: scale(1.15);
        transition: 1s; }
      .mdp-stellar-box .mdp-stellar-buttons i:hover {
        transition: none; }
      .mdp-stellar-box .mdp-stellar-buttons i.mdp-box-list-hover svg:not(.mdp-stellar-bubbles) *,
      .mdp-stellar-box .mdp-stellar-buttons i.mdp-box-list-hover div svg:not(.mdp-stellar-bubbles) * {
        fill: var(--mdp-stellar-hover); }
      .mdp-stellar-box .mdp-stellar-buttons i svg {
        height: auto; }
        .mdp-stellar-box .mdp-stellar-buttons i svg:not(.mdp-stellar-bubbles) {
          width: var(--mdp-stellar-size);
          max-width: var(--mdp-stellar-size);
          fill: var(--mdp-stellar-color); }
          .mdp-stellar-box .mdp-stellar-buttons i svg:not(.mdp-stellar-bubbles):last-child {
            min-width: var(--mdp-stellar-size); }
            .mdp-stellar-box .mdp-stellar-buttons i svg:not(.mdp-stellar-bubbles):last-child * {
              fill: var(--mdp-stellar-active); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-bubbles {
          position: absolute;
          top: 0;
          left: 1px;
          z-index: -1;
          overflow: visible;
          transform-origin: left top;
          height: 100%;
          width: 100%; }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp2, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp3, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp4, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp5, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp6, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp7 {
          opacity: 1;
          transition: 0.1s opacity 0.3s; }
          .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp2 .oval1, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp3 .oval1, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp4 .oval1, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp5 .oval1, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp6 .oval1, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp7 .oval1 {
            transform-origin: 0 0 0;
            transition: 0.5s transform 0.3s; }
          .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp2 .oval2, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp3 .oval2, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp4 .oval2, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp5 .oval2, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp6 .oval2, .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp7 .oval2 {
            transform-origin: 0 0 0;
            transition: 1.5s transform 0.3s; }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp1 .oval1 {
          transform: scale(0) translate(0, -30px); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp1 .oval2 {
          transform: scale(0) translate(10px, -50px); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp2 .oval1 {
          transform: scale(0) translate(30px, -15px); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp2 .oval2 {
          transform: scale(0) translate(60px, -15px); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp3 .oval1 {
          transform: scale(0) translate(30px, 0px); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp3 .oval2 {
          transform: scale(0) translate(60px, 10px); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp4 .oval1 {
          transform: scale(0) translate(30px, 15px); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp4 .oval2 {
          transform: scale(0) translate(40px, 50px); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp5 .oval1 {
          transform: scale(0) translate(-10px, 20px); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp5 .oval2 {
          transform: scale(0) translate(-60px, 30px); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp6 .oval1 {
          transform: scale(0) translate(-30px, 0px); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp6 .oval2 {
          transform: scale(0) translate(-60px, -5px); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp7 .oval1 {
          transform: scale(0) translate(-30px, -15px); }
        .mdp-stellar-box .mdp-stellar-buttons i svg.mdp-stellar-click #grp7 .oval2 {
          transform: scale(0) translate(-55px, -30px); }
      .mdp-stellar-box .mdp-stellar-buttons i .mdp-stellar-segment {
        overflow: hidden;
        position: absolute;
        top: 0; }
  .mdp-stellar-box .oval1 {
    fill: var(--mdp-stellar-color); }
  .mdp-stellar-box .oval2 {
    fill: var(--mdp-stellar-active); }
  .mdp-stellar-box .mdp-stellar-active > svg:not(.mdp-stellar-bubbles) * {
    fill: var(--mdp-stellar-active); }
  .mdp-stellar-box .mdp-stellar-unable i {
    cursor: default; }
  .mdp-stellar-box.row-right > div {
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .mdp-stellar-box.row-right > div .mdp-stellar-description {
      max-width: 60%; }
    .mdp-stellar-box.row-right > div .mdp-stellar-buttons {
      text-align: right; }
    .mdp-stellar-box.row-right > div .mdp-box-icon {
      text-align: right; }
  .mdp-stellar-box.row-left > div {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: space-between; }
    .mdp-stellar-box.row-left > div .mdp-stellar-description {
      max-width: 60%; }
    .mdp-stellar-box.row-left > div .mdp-box-icon {
      text-align: left; }
  .mdp-stellar-box.bottom-left > div {
    display: flex;
    align-items: flex-start;
    flex-direction: column; }
    .mdp-stellar-box.bottom-left > div .mdp-box-icon {
      text-align: left; }
  .mdp-stellar-box.bottom-center > div {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center; }
    .mdp-stellar-box.bottom-center > div .mdp-box-icon {
      text-align: center; }
  .mdp-stellar-box.bottom-right > div {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    text-align: right; }
    .mdp-stellar-box.bottom-right > div .mdp-box-icon {
      text-align: right; }
  .mdp-stellar-box.top-center > div {
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    text-align: center; }
    .mdp-stellar-box.top-center > div .mdp-box-icon {
      text-align: center; }
  .mdp-stellar-box.top-left > div {
    display: flex;
    align-items: flex-start;
    flex-direction: column-reverse; }
    .mdp-stellar-box.top-left > div .mdp-box-icon {
      text-align: left; }
  .mdp-stellar-box.top-right > div {
    display: flex;
    align-items: flex-end;
    flex-direction: column-reverse;
    text-align: right; }
    .mdp-stellar-box.top-right > div .mdp-box-icon {
      text-align: right; }

.mdp-hidden {
  display: none !important; }

.mdp-stellar-your-rating {
  font-size: smaller;
  margin-top: calc( var( --mdp-stellar-size ) / 4); }

@-webkit-keyframes mdp-stellar-tooltip-show {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0); } }

@keyframes mdp-stellar-tooltip-show {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0); }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0); } }

@-webkit-keyframes mdp-stellar-tooltip-hide {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0); }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0); } }

@keyframes mdp-stellar-tooltip-hide {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0); }
  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0); } }

@-webkit-keyframes mdp-stellar-rated {
  from {
    transform: scale(1.15); }
  25% {
    transform: scale(0.25); }
  to {
    transform: scale(1); } }

@keyframes mdp-stellar-rated {
  from {
    transform: scale(1.15); }
  25% {
    transform: scale(0.25); }
  to {
    transform: scale(1); } }

@-webkit-keyframes stellar-fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

@keyframes stellar-fadeout {
  from {
    opacity: 1; }
  to {
    opacity: 0; } }

.mdp-stellar-top {
  display: flex;
  flex-wrap: wrap;
  padding: var(--mdp-stellar-gutter); }
  .mdp-stellar-top .mdp-stellar-post {
    margin-bottom: var(--mdp-stellar-gutter); }
  .mdp-stellar-top .mdp-stellar-post-image {
    display: flex;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; }
  .mdp-stellar-top h1.mdp-stellar-post-title,
  .mdp-stellar-top h2.mdp-stellar-post-title,
  .mdp-stellar-top h3.mdp-stellar-post-title,
  .mdp-stellar-top h4.mdp-stellar-post-title,
  .mdp-stellar-top h5.mdp-stellar-post-title,
  .mdp-stellar-top h6.mdp-stellar-post-title {
    margin: var(--mdp-stellar-gutter) 0; }
    .mdp-stellar-top h1.mdp-stellar-post-title a,
    .mdp-stellar-top h2.mdp-stellar-post-title a,
    .mdp-stellar-top h3.mdp-stellar-post-title a,
    .mdp-stellar-top h4.mdp-stellar-post-title a,
    .mdp-stellar-top h5.mdp-stellar-post-title a,
    .mdp-stellar-top h6.mdp-stellar-post-title a {
      text-decoration: none; }
  .mdp-stellar-top .mdp-stellar-post-rating {
    display: flex;
    align-items: center;
    font-size: var(--mdp-stellar-size); }
  .mdp-stellar-top .mdp-stellar-post-value {
    line-height: var(--mdp-stellar-size);
    margin: 0 14px;
    white-space: nowrap; }
  .mdp-stellar-top .mdp-stellar-post-stars {
    position: relative;
    display: flex; }
    .mdp-stellar-top .mdp-stellar-post-stars i {
      vertical-align: middle;
      position: relative;
      font-size: 0;
      line-height: 0;
      border: none;
      transition: 0.4s;
      display: inline;
      margin: 0 var(--mdp-stellar-space); }
    .mdp-stellar-top .mdp-stellar-post-stars.mdp-stellar-rated {
      -webkit-animation-name: mdp-stellar-rated;
              animation-name: mdp-stellar-rated;
      -webkit-animation-duration: .4s;
              animation-duration: .4s;
      -webkit-animation-fill-mode: both;
              animation-fill-mode: both;
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in; }
    .mdp-stellar-top .mdp-stellar-post-stars.mdp-stellar-hover {
      transform: scale(1.15);
      transition: 1s; }
    .mdp-stellar-top .mdp-stellar-post-stars:hover {
      transition: none; }
    .mdp-stellar-top .mdp-stellar-post-stars.mdp-box-list-hover svg:not(.mdp-stellar-bubbles) *,
    .mdp-stellar-top .mdp-stellar-post-stars.mdp-box-list-hover div svg:not(.mdp-stellar-bubbles) * {
      fill: var(--mdp-stellar-hover); }
    .mdp-stellar-top .mdp-stellar-post-stars svg {
      height: auto; }
      .mdp-stellar-top .mdp-stellar-post-stars svg:not(.mdp-stellar-bubbles) {
        width: var(--mdp-stellar-size);
        max-width: var(--mdp-stellar-size);
        fill: var(--mdp-stellar-color); }
        .mdp-stellar-top .mdp-stellar-post-stars svg:not(.mdp-stellar-bubbles):last-child {
          min-width: var(--mdp-stellar-size); }
          .mdp-stellar-top .mdp-stellar-post-stars svg:not(.mdp-stellar-bubbles):last-child * {
            fill: var(--mdp-stellar-active); }
    .mdp-stellar-top .mdp-stellar-post-stars .mdp-stellar-segment {
      overflow: hidden;
      position: absolute;
      top: 0; }

.mdp-stellar-cols-1 > div {
  width: 100%;
  max-width: 100%;
  padding: var(--mdp-stellar-gutter); }

.mdp-stellar-cols-2 > div {
  width: 50%;
  max-width: 50%;
  padding: var(--mdp-stellar-gutter); }

.mdp-stellar-cols-3 > div {
  width: 33.33333%;
  max-width: 33.33333%;
  padding: var(--mdp-stellar-gutter); }

.mdp-stellar-cols-4 > div {
  width: 25%;
  max-width: 25%;
  padding: var(--mdp-stellar-gutter); }

.mdp-stellar-cols-5 > div {
  width: 20%;
  max-width: 20%;
  padding: var(--mdp-stellar-gutter); }

.mdp-stellar-cols-6 > div {
  width: 16.66667%;
  max-width: 16.66667%;
  padding: var(--mdp-stellar-gutter); }

.mdp-stellar-cols-7 > div {
  width: 14.28571%;
  max-width: 14.28571%;
  padding: var(--mdp-stellar-gutter); }

.mdp-stellar-cols-8 > div {
  width: 12.5%;
  max-width: 12.5%;
  padding: var(--mdp-stellar-gutter); }

.mdp-stellar-cols-9 > div {
  width: 11.11111%;
  max-width: 11.11111%;
  padding: var(--mdp-stellar-gutter); }

.mdp-stellar-cols-10 > div {
  width: 10%;
  max-width: 10%;
  padding: var(--mdp-stellar-gutter); }

.mdp-stellar-cols-11 > div {
  width: 9.09091%;
  max-width: 9.09091%;
  padding: var(--mdp-stellar-gutter); }

.mdp-stellar-cols-12 > div {
  width: 8.33333%;
  max-width: 8.33333%;
  padding: var(--mdp-stellar-gutter); }

@media (max-width: 767px) {
  .mdp-stellar-top > div {
    width: 100%;
    max-width: 100%; } }

@media (max-width: 500px) {
  .mdp-stellar-post {
    display: flex; }
  .mdp-stellar-post-image {
    width: 100px;
    max-width: 100px;
    margin-right: var(--mdp-stellar-gutter); }
  .mdp-stellar-post-content {
    width: calc( 100% - 100px - var( --mdp-stellar-gutter ) - var( --mdp-stellar-gutter ));
    margin-left: var(--mdp-stellar-gutter); } }