:root {
  --brand-main: #6fc83e;
  --main-hover: #3aa003;
  --white: #ffffff;
  --black: #1a1a1a;
  --gray: #adb5bd;
  --bgc: #f1f1f1;
  --bxsdw: 0 20px 50px rgba(0, 0, 0, 0.05);
  --trz: all 0.3s;
  --quick-index-marker: "-";
}

.rl_quickindex.card1 {
  display: none;
}

.blog .rl_quickindex.card1 {
  display: block;
}

.mod-articlesnews.newsflash figure{
  height: auto;
  margin-bottom: 0px;
}

 .popular--news {
    margin-top: 40px;
}

.newsflash-title {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0px;
}


figure.newsflash-image {
    max-width: 150px;
}

.mod-articlesnews__item::before {
  content: "";
  height: 1px;
  width: 100%;
  position: absolute;
  bottom: -15px;
  background: #cccccc4f;
}

.mod-articlesnews__item {
  margin-bottom: 30px;
  display: flex;
  flex-flow: row-reverse;
  gap: 10px; 
  position: relative;
}

/* Common */

@media (min-width: 1400px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl,
  .container-xxl {
    max-width: 1400px !important;
  }
}

.article-details h2 {
  margin-top: 30px;
  margin-bottom: 15px;
}


.article-details {
  margin-bottom: 100px;
}

.blog {
    margin-bottom: 100px;
}

h1 {
  margin-bottom: 30px;
}

h1,
h2,
h3 {
  text-transform: uppercase;
  margin-bottom: 30px;
}

ul {
  padding-left: 15px;
}

::marker {
  color: var(--brand-main);
  font-size: 24px;
}

a {
  color: var(--black);
}

a:focus,
a:active {
  color: var(--white);
}

a:hover {
  color: var(--brand-main) !important;
}

.breadcrumb {
  padding: 10px 0;
}

#sp-left .sp-module,
#sp-right .sp-module {
  margin-top: 0px;
  border: 1px solid #00000008;
  padding: 30px;
  border-radius: var(--brdrds);
  background: #ffffff1b;
  box-shadow: 1px 0px 20px 3px #00000011;
}

#sp-left .sp-module ul>li>a, #sp-right .sp-module ul>li>a {
    display: block;
    padding: 7px 0;
    line-height: 25px;
    font-size: 18px;
}

#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title {
    margin: 0px 0 15px;
  }


.sp-megamenu-parent > li.active > a {
  color: var(--brand-main) !important;
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
  color: var(--brand-main);
}

#sp-left .sp-module {
  background: var(--brand-main);
  border-radius: 20px;
  color: var(--white);
  a {
    color: var(--white);
    &:hover {
      color: #f4f2f2d2 !important;
    }
  }
}

.btn:active {
  border-color: var(--brand-main) !important;
}

.btn {
  background-color: var(--brand-main);
  padding: 15px 25px;
  border: 2px solid var(--brand-main);
  color: var(--white);
  border-radius: 30px;
  text-transform: uppercase;
  font-weight: 500;
  &:hover {
    background-color: var(--main-hover);
    border: none;
    color: var(--white) !important;
    border: 2px solid var(--main-hover);
  }
  &:active {
    background-color: var(--brand-main) !important;
  }
}

.btn-outline-primary {
  font-weight: 500;
  border-radius: 30px;
  color: var(--black);
  background-color: var(--white) !important;
  &:hover {
    background-color: var(--brand-main) !important;
  }
}

.burger-icon > span {
  display: block;
  height: 3px;
  background-color: var(--brand-main);
}

body.ltr #offcanvas-toggler.offcanvas-toggler-right {
  margin-left: 0px !important;
}

.offcanvas-active .burger-icon > span,
#modal-menu-toggler.active .burger-icon > span {
  background-color: var(--brand-main);
}

.work-time p {
  margin-bottom: 0;
  color: #0000008c;
}

.text-decor,
.accent-color {
  color: var(--brand-main);
}

.main-page #sp-main-body {
  padding: 0px !important;
}

.price-img img {
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

figure {
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

/* First-section */

.first {
  background: url(bg-metal.jpg);
  background-repeat: no-repeat;
  background-position: bottom;
  background-color: #1a1a1a90 !important;
  background-blend-mode: darken;
  background-size: cover;
}

section#sp-first {
  background-color: var(--bgc);
  height: 100%;
}

.first-section {
  position: relative;
  margin-block: 75px 0px !important;

  h1 {
    text-transform: uppercase;
    font-weight: 700;
    line-height: 52px;
    margin-bottom: 35px;
    color: var(--white);
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.614);
  }
  .list-numbered {
    column-count: 2;
    margin-bottom: 35px;
    color: var(--white);
    text-shadow: 2px 3px 5px black;
  }
  .list-item {
    font-size: 18px;
    padding-bottom: 8px;
    font-weight: 700;
  }
  .first-img {
    max-width: 700px;
    position: relative;
    bottom: 0px;
    left: 200px;
    opacity: 0;
    animation: fadeIn 2.5s ease forwards;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.first-form {
  position: relative;
  z-index: 3;
  h2 {
    font-size: 25px !important;
    font-weight: 500;
    line-height: 27px;
  }
  .cf-form-wrap {
    padding: 32px !important;
    box-shadow: var(--bxsdw);
    background-color: var(--white);
    border-radius: 50px !important;
  }
  .cf-checkbox-group,
  .convertforms .cf-radio-group {
    gap: 10px;
  }
  .cf-control-group
    :is(input[type="text"], input[type="tel"], input[type="email"], textarea) {
    border-radius: 20px;
    padding: 16px 25px !important;
  }
  input#form3_number7 {
    padding: 13px 16px !important;
    border-radius: 20px;
  }

  .form-check-input:focus {
    border-color: transparent;
    box-shadow: none;
  }

  .cf-btn {
    background-color: var(--brand-main) !important;
    padding: 15px 40px !important;
    border: 2px solid var(--brand-main) !important;
    border-radius: 30px !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;
    color: var(--white) !important;
    width: 100%;
    &:hover {
      background-color: var(--main-hover) !important;
      border: 2px solid var(--main-hover);
    }
    &:active {
      background-color: var(--brand-main) !important;
    }
  }
}

.eb-content {
  .cf-form-wrap {
    border-radius: 0px !important;
    padding: 0 !important;
  }
}

.services-list {
  .form-check-input {
    padding: 10px;
  }
  .form-check-input {
    border-color: var(--main-hover);
  }
  .form-check-input:checked {
    background-color: var(--brand-main);
    border-color: var(--main-hover);
  }
}

.privacy-check {
  a {
    color: var(--brand-main);
  }
  .form-check-input:checked {
    background-color: var(--brand-main);
    border-color: var(--main-hover);
  }
  .form-check-input {
    border-color: var(--main-hover);
    width: 20px;
    height: 20px;
  }
  .cf-label {
    padding-top: 5px;
  }
}

/* Top */
section#sp-top {
  background-color: var(--bgc);
}

/* Header */
header#sp-header {
  background-color: var(--bgc);
  padding-block: 0 20px;
  transition: 0.3s;
}

/* Stcky-header */
.fixed-header {
  transition: 0.4s;
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000 !important;
  background: var(--white) !important;
  height: 58px !important;
  box-shadow: var(--bxsdw) !important;
  border-bottom: 1px solid #cccccc70;
  .container-inner {
    padding-top: 0px !important;
    border-top: none !important;
    .row {
      align-items: center;
    }
  }
  a {
    color: rgb(0, 0, 0) !important;
  }
}

.fixed-header #sp-menu {
  box-shadow: none;
}

.logo-group {
  align-items: center;
  gap: 10px;
  .text {
    font-weight: 600;
    font-size: 23px;
    line-height: 25px;
    .text-decor {
      font-size: 17.6px;
    }
  }
}

.header-logo {
  max-width: 260px;
}

.sp-megamenu-parent > li:hover > a {
  color: var(--brand-main);
}

#sp-menu {
  background-color: var(--white);
  border-radius: 50px;
  box-shadow: var(--bxsdw);

  a {
    width: 100%;
    padding: 0 25px;
  }
  .sp-dropdown-inner a {
    padding: 8px 0 !important;
  }
}

/* Gallery */

#sp-gallery {
  .btn {
    margin: 30px auto 0px;
    float: none;
  }
}

/* Sections */

.section-banner {
  position: relative;
  .container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
  }
  img {
    filter: brightness(0.5);
            width: 100%;
  }
  h1 {
    color: var(--white);
    text-wrap: balance;
    line-height: 53px;
    margin: 0;
  }
}

/* Article */
.article-list .article {
  height: 100%;
  border: 1px solid #f7f1f1 !important;
  transition: all 0.3s ease;
  box-shadow: 0 20px 10px rgb(178 188 191 / 10%);
  background: var(--brand-main);
  border-radius: 20px !important;
  margin-bottom: 0px;
  a {
    color: var(--white) !important;
  }
  &:hover {
    transition: all 0.3s ease;
    box-shadow: 0 70px 60px rgb(178 188 191 / 30%);
    cursor: pointer;
    transform: translateY(-5px);
  }
}

.article-intro-image {
  max-height: 240px;
}

.article-details .section {
  margin-block: 0 75px;
}

.article .article-intro-image img {
  border-radius: 19px 19px 0 0 !important;
  width: 100%;
}

.article .article-intro-image {
  border-bottom: none !important;
}

.max-width-text .container {
  max-width: 850px !important;
  padding: 30px;
  box-shadow: 0px 0px 10px 1px #00000021;
  border-radius: 20px;
}

/* FAQ */

.accordion {
  display: grid;
  row-gap: 20px;
  transition: all 0.3s;
}

.accordion-flush .accordion-item {
  padding: 0;
}

.accordion-item {
  color: var(--black);
  border-color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 20px 35px rgba(0, 0, 0, 0.05);
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  display: grid;
  -webkit-transition: var(--trz);
  transition: var(--trz);
}

.accordion-item :is(.accordion-button, .accordion-body) {
  --p: 16px 20px;
  padding: var(--p);
}

@media (min-width: 768px) {
  .accordion-item :is(.accordion-button, .accordion-body) {
    --p: 20px 40px;
  }
}

@media (min-width: 1200px) {
  .accordion-item :is(.accordion-button, .accordion-body) {
    --p: 24px 60px;
  }
}

.accordion-item .accordion-body {
  padding-top: 0;
}

.accordion-item {
  transition: all 0.3s;
}

.accordion-item:hover {
  transition: all 0.3s;
  translate: 0 -5px;
  -webkit-box-shadow: 0 20px 75px 5px rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 75px 5px rgba(0, 0, 0, 0.08);
}

.accordion-item:hover .accordion-button {
  color: var(--brand-main);
}

.accordion-item:hover .accordion-button::after {
  -webkit-filter: invert(77%) sepia(12%) saturate(2424%) hue-rotate(50deg)
    brightness(91%) contrast(85%);
  filter: invert(77%) sepia(12%) saturate(2424%) hue-rotate(50deg)
    brightness(91%) contrast(85%);
}

.accordion-button {
  --fz: 16px;
  font-size: var(--fz);
  font-weight: 600;
  line-height: 1.35;
  padding: 0;
  -webkit-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
  -webkit-transition: var(--trz);
  transition: var(--trz);
}

@media (min-width: 768px) {
  .accordion-button {
    --fz: 18px;
    -webkit-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
  }
}

@media (min-width: 992px) {
  .accordion-button {
    --fz: 20px;
  }
}

@media (min-width: 1200px) {
  .accordion-button {
    --fz: 22px;
  }
}

.accordion-button:focus,
.accordion-button:focus-visible {
  outline: none;
  border-color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.accordion-button::after {
  translate: 0 4px;
}

.accordion-button.collapsed {
  color: var(--black);
}

.accordion-button:not(.collapsed) {
  color: var(--brand-main);
  background-color: var(--white);
  -webkit-box-shadow: none;
  box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
  -webkit-filter: invert(77%) sepia(12%) saturate(2424%) hue-rotate(50deg)
    brightness(91%) contrast(85%);
  filter: invert(77%) sepia(12%) saturate(2424%) hue-rotate(50deg)
    brightness(91%) contrast(85%);
  background-image: var(--bs-accordion-btn-icon);
}

.accordion-body {
  padding: 0 40px 0 0;
}

/*Portfolio*/

.portfolio {
  h2 {
    margin-block: 0px 30px;
    text-align: center;
  }
  .nav-tabs {
    justify-content: center;
    margin-bottom: 15px;
    border: none;
    border-radius: 15px;
    .nav-link.active {
      border: none;
      color: var(--white);
      background-color: var(--brand-main);
    }
    .nav-link {
      color: var(--black);
      border: none;
      border-radius: 15px;
      text-transform: uppercase;
      &:hover {
        border: none;
      }
    }
  }
}

.portfolo-wrapper {
  margin: 50px 0px 0px 0px;
}

.portfolio__item img {
  transition: 0.3s;
  object-fit: cover;

  &:hover {
    transform: scale(1.03);
    transition: 0.2s;
  }
}

.portfolio-img {
  width: 100%;
  overflow: hidden;
  max-height: 300px;
}

figure {
  margin: 0;
  overflow: hidden;
}

/* select */

#sp-select {
  /* background-color: var(--bgc); */
  ul {
    column-count: 3;
    margin-bottom: 50px;
  }
  .card-img {
    border-radius: 50px 0px 0px 50px;
    max-height: 370px;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}

.select-card {
  background-color: var(--white);
  border-radius: 50px;
  box-shadow: var(--bxsdw);
  .img-wrapper {
    padding: 0;
  }
  a {
    font-size: 17px;
  }
}
.select-card.row {
  margin-bottom: 30px;
}

.price-items {
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 50px;
  p {
    margin-bottom: 0;
  }
  .price,
  .time {
    padding: 15px 25px;
    border: 1px solid var(--gray);
    border-radius: 50px;
  }
}

.select-wrapper {
  padding: 30px;
}

/* Contacts */
.seo-content .wf-column {
  box-shadow: 0 20px 35px rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  border: 1px solid #cccccc2f;
  padding: 30px;
}

/* Resume */

h3 {
  margin-bottom: 15px;
}
.link-wrapper {
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  gap: 10px;
  img {
    width: 32px;
  }
}

.resume-content {
  flex-direction: column;
  align-items: baseline;
  justify-content: space-between;
  height: 100%;
}

.list-bulleted {
  margin-bottom: 0px;
}
.phone-content {
  justify-items: baseline;
  margin-bottom: 10px;
}
.header-messendgers {
  margin-bottom: 10px;
}
.header-phone {
  font-size: 19px;
}

/* Callback */
#sp-callback {
  background-color: var(--bgc);
  position: relative;
  .row {
    align-items: center;
  }
  img {
    position: relative;
  }
}

/* Footer */
#sp-bottom {
  background-color: var(--white);
  color: var(--black) !important;
  h3 {
    color: var(--black) !important;
    margin-bottom: 15px !important;
  }
  li,
  p {
    margin-bottom: 8px !important;
  }
  a {
    color: var(--black) !important;
    font-size: 16px;
    font-weight: 500;
    &:hover {
      color: var(--main-hover) !important;
    }
    .btn {
      color: var(--white) !important;
    }
  }

  .header-messendgers {
    margin-bottom: 10px;
  }

  .phone-content {
    justify-items: baseline;
    margin-bottom: 10px;
    .link-wrapper {
      margin-bottom: 0px;
      display: flex;
      align-items: center;
      gap: 10px;

      img {
        width: 32px;
      }
      .header-phone {
        font-size: 19px;
        color: var(--black);
      }
    }
  }
}

#sp-bottom4 {
  .btn {
    margin-bottom: 30px;
    margin-top: 3px;
  }
  .link-wrapper {
    margin-bottom: 10px;
  }
  .footer-logo {
    margin-bottom: 15px;
  }
}

.cf-btn {
  width: 100%;
}

/* Media */

@media (min-width: 991px) {
  .first-item {
    padding: 0 !important;
  }

  #sp-left {
    width: 30.9%;
  }
  ul {
    padding-inline: 25px;
  }
}

@media (max-width: 1400px) {
  .logo-group {
    .text {
      font-size: 20px;
      line-height: 25px;
      .text-decor {
        font-size: 15px;
      }
    }
    .header-logo {
      width: 120px;
    }
  }
  .work-time {
    font-size: 13px !important;
  }
  #sp-select {
    .card-img {
      max-height: unset;
      height: 100%;
    }
    figure {
      height: 100%;
    }
  }
}
@media (max-width: 1200px) {
  .first-form h2 {
    font-size: 23px !important;
    font-weight: 500;
    line-height: 30px !important;
  }
  .first-section {
    h1 {
      font-size: 29px !important;
    }
    .list-item {
      font-size: 15px;
    }
    .first-img {
      max-width: 500px;
      position: relative;
      top: 200px;
      left: 70px;
    }
  }
  .sp-megamenu-parent > li > a {
    font-size: 16px !important;
  }
  .logo-group {
    .text {
      font-size: 14px;
      line-height: 18px;

      .text-decor {
        font-size: 11px;
      }
    }
    .header-logo {
      width: 100px;
    }
  }
  .header-section {
    padding-top: 15px !important;
  }
  .work-time {
    font-size: 10px !important;
  }
  .btn-outline-primary {
    font-size: 15px;
    padding: 13px 22px;
  }
  .price-items .price,
  .price-items .time {
    padding: 10px 20px;
  }
  .select-card a {
    font-size: 14px;
  }
  .section-banner h1 {
    font-size: 21px !important;
    line-height: 24px !important;
    margin-bottom: 0;
  }
}

@media (max-width: 991px) {
  .article-header h2 {
        font-size: 18px !important;
    }

  .article-details {
  margin-bottom: 30px;
}

  aside#sp-right {
    margin-bottom: 50px;
}

    #sp-left .sp-module ul>li>a, #sp-right .sp-module ul>li>a {
    font-size: 16px;
}

      .article-details .article-header h1, .article-details .article-header h2 {
        font-size: 21px !important;
    }

  h1, h2, h3 {
    margin-bottom: 15px;
}
  
  #sp-main-body {
    padding: 30px 0px 0px !important;
  }
  #sp-menu a {
    width: 100%;
    padding: 0px;
  }
  #sp-menu {
    box-shadow: none !important;
    background-color: transparent !important;
    padding-block: 0px !important;
    margin-bottom: 0px !important;
  }
  .section {
    margin-block: 50px !important;
  }

  .first-section {
    margin-bottom: 0px !important;
  }
  .mobile-form {
    display: block !important;
  }
  #sp-first {
    max-height: 700px;
    .first-img {
      max-width: 370px;
      position: relative;
      top: 0px;
      left: 40px;
    }
    h1 {
      font-size: 23px;
      line-height: 35px;
    }
  }

  .seo-content {
    margin-block: 30px !important;
  }

  .resume .row {
    gap: 30px;
  }

  .first-item {
    display: none;
  }

  #sp-header .sp-module {
    margin-left: 0px;
  }

  #sp-header {
    background-color: var(--white) !important;
    padding-block: 0px !important;
    box-shadow: var(--bxsdw) !important;
  }
  .header-inner {
    display: flex !important;
    justify-content: space-between;
  }
  .header__consultatiton-popup {
    display: none;
  }
  .mobile-button {
    display: block !important;
  }
  .mobile-btn {
    margin-block: 10px;
  }

  .price-items {
    flex-direction: column;
    h3 {
      margin-bottom: 15px;
    }
  }
  .select-card a {
    font-size: 16px;
  }
  .section-select figure {
    max-height: 300px;
    img {
      object-fit: cover;
      border-radius: 50px 50px 0px 0px !important;
    }
  }
  .section-callback {
    position: relative;
    img {
      display: none;
    }
  }
  #sp-left {
    display: none;
  }
  .offcanvas-menu .offcanvas-inner ul.menu li.active a {
    color: var(--brand-main) !important;
  }
  .offcanvas-inner ul.menu > li > ul li a {
    padding: 8px 0px !important;
    display: block;
  }

  .section-banner {
    height: 185px;
    img {
      height: 100%;
    }
  }
  #sp-header .btn-outline-primary {
    padding: 8px 15px !important;
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .header-inner {
    flex-direction: column;
    gap: 15px;
  }
  .header-contacts {
    gap: 30px !important;
  }
  .first-section {
    .list-item {
      font-size: 12px;
    }
    .first-img {
      max-width: 350px !important;
      top: 30px !important;
      left: 0px !important;
    }
  }
  .price-items .d-flex {
    flex-direction: column;
  }
  #sp-select ul {
    column-count: 2;
    margin-bottom: 30px;
  }
  .price-items {
    margin-bottom: 30px;
  }
  .select-card.row {
    margin-inline: 15px;
  }
  .politika .cf-label {
    font-size: 13px !important;
  }
  .eb-dialog {
    --eb-padding: 25px !important;
  }
  .btn {
    background-color: var(--brand-main);
    padding: 10px 20px;
  }
  #sp-price .d-flex {
    flex-direction: column;
    align-items: baseline;
    figure {
      height: 200px;
      margin-bottom: 30px;
    }
    .ms-5 {
      margin-left: 0 !important;
      padding: 30px;
      box-shadow: var(--bxsdw);
      border-radius: 20px;
    }
  }
  .first-form h2 {
    font-size: 18px !important;
    line-height: 25px !important;
    margin-bottom: 15px;
  }
  .cf-control-input p {
    margin-bottom: 5px;
  }
  .convertforms .cf-control-group {
    padding: 8px !important;
  }

  .eb-content .cf-form-wrap {
    padding: 8px !important;
  }
  #sp-price ul:first-child {
    margin-bottom: 0rem !important;
  }
}

@media (max-width: 568px) {
  .header-logo {
    width: 85px;
  }
  .logo-group .text .text-decor {
    font-size: 10px;
  }
  .header-messendgers img {
    width: 35px;
  }
  .header-contacts {
    gap: 20px !important;
  }
  #sp-menu {
    border-radius: 0px;
  }
  #sp-header {
    height: 60px !important;
  }
  .first-section {
    margin-bottom: 0px !important;
    .list-numbered {
      column-count: 1;
      margin-bottom: 30px;
    }
    h1 {
      font-size: 19px !important;
      line-height: 29px !important;
      margin-bottom: 30px;
    }
    .first-img {
      max-width: 290px !important;
      top: 0px !important;
      left: 0px !important;
    }
  }
  #sp-select ul {
    column-count: 1;
  }
  .select-buttons {
    flex-direction: column;
  }
  .price-items p {
    font-size: 13px;
  }
  h3 {
    font-size: 17px !important;
    margin-bottom: 15px;
  }
  .section-select figure {
    max-height: 190px;
  }
  .section-banner {
    height: 180px;
    img {
      height: 100%;
      object-fit: cover;
    }
  }
  .section-banner h1 {
    font-size: 19px !important;
    line-height: 24px !important;
    margin-bottom: 0;
  }
  #sp-main-body {
    padding: 30px 0px 0px !important;
  }
  .header-phone {
    font-size: 17px;
  }
}

@media (max-width: 480px) {
  .header-inner {
    align-items: baseline !important;
  }
}


/* Pagination */

@charset "UTF-8"; :root {
    --color--primary: hsl(202deg 63% 51%);
    --color--primary-80: hsla(202, 63%, 51%, 0.8);
    --color--primary-20: hsla(202, 63%, 51%, 0.2);
    --color--primary-hover: hsl(202deg 100% 40%);
    --color--secondary: hsl(210deg 44% 20%);
    --color--secondary-hover: hsl(210deg 65% 13%);
    --color--blue: hsl(202, 63%, 51%);
    --color--blue-hover: hsl(202, 100%, 40%);
    --color--violet: hsl(210, 44%, 20%);
    --color--violet-hover: hsl(210, 65%, 13%);
    --color--white: hsla(0, 0%, 100%, 0.98);
    --color--grey-lighten: hsl(0deg 0% 95%);
    --color--grey-light: hsl(0deg 0% 92%);
    --color--grey: hsl(0deg 0% 69%);
    --color--grey-dark: hsl(0deg 0% 42%);
    --color--grey-darker: hsl(0, 0%, 24%);
    --color--black: hsl(227deg 29% 13%);
    --tz: all 0.2s ease
}

.article-info {
    float: left
}

.article-info>span {
    display: inline-flex
}

.article-info>span>* {
    display: inline-flex;
    flex-direction: row-reverse;
    column-gap: 8px;
    align-items: center
}

.article-info>span>*::after {
    content: "";
    width: 1rem;
    min-width: 1rem;
    height: 1rem;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    background-color: #000
}

.article-info .createdby>span::after {
    -webkit-mask-image: url("/images/icon-pack/regular/user.svg")
}

.article-info .category-name>a::after {
    -webkit-mask-image: url("/images/icon-pack/regular/folder-bookmark.svg")
}

.article-info .modified>time::after {
    -webkit-mask-image: url("/images/icon-pack/regular/calendar-pen.svg")
}

.article-info .published>time::after {
    -webkit-mask-image: url("/images/icon-pack/regular/calendar.svg")
}

.article-info .hits>meta {
    padding-right: 8px
}

.article-info .hits>meta::after {
    -webkit-mask-image: url("/images/icon-pack/regular/eye.svg")
}

:is(.pagination-wrapper, .jshop_pagination) {
    --text--color: transparent;
    --text--size: 0.9rem;
    --text--weight: 400;
    --icon: "";
    --icon--color: var(--color--grey, hsl(0deg 0% 69%));
    --icon--size: 10px;
    --bg: var(--color--grey-lighten, hsl(0deg 0% 95%));
    --bg--active: var(--color--grey, hsl(0deg 0% 69%));
    --bg--arrow: transparent;
    --bg--size: 0.5;
    --btn--radius: 50%;
    --btn--size: 2rem;
    --counter__text--color: transparent;
    --counter__text--size: 0.8rem;
    --counter__text--weight: 300;
    display: grid !important;
    justify-items: center;
    justify-content: revert !important;
    row-gap: 1rem
}

:is(.pagination-wrapper, .jshop_pagination):hover {
    --text--color: var(--color--black, hsl(0, 0%, 0%));
    --bg: transition;
    --bg--active: var(--color--grey-lighten, hsl(0deg 0% 95%));
    --bg--size: 1;
    --counter__text--color: var(--color--grey, hsl(0deg 0% 69%))
}

:is(.pagination-wrapper, .jshop_pagination) .pagination {
    margin: 0 !important
}

:is(.pagination-wrapper, .jshop_pagination) .page-item {
    margin-bottom: 0
}

:is(.pagination-wrapper, .jshop_pagination) .page-item.disabled {
    display: none
}

:is(.pagination-wrapper, .jshop_pagination) .page-item.active .page-link {
    color: var(--text--color) !important;
    background-color: transparent !important
}

:is(.pagination-wrapper, .jshop_pagination) .page-item.active .page-link::after {
    --bg: var(--bg--active)
}

:is(.pagination-wrapper, .jshop_pagination) .page-link {
    color: var(--text--color);
    font-size: var(--text--size);
    font-weight: var(--text--weight);
    background-color: transparent;
    border: 0 solid transparent;
    border-radius: var(--btn--radius) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--btn--size);
    height: var(--btn--size);
    padding: 0;
    margin-left: 0 !important;
    position: relative;
    transition: var(--tz)
}

:is(.pagination-wrapper, .jshop_pagination) .page-link::before,:is(.pagination-wrapper, .jshop_pagination) .page-link::after {
    width: var(--btn--size);
    height: var(--btn--size);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: var(--tz)
}

:is(.pagination-wrapper, .jshop_pagination) .page-link::after {
    content: "";
    background-color: var(--bg);
    background-size: var(--bg--size);
    border-radius: var(--btn--radius);
    scale: var(--bg--size);
    z-index: -1
}

:is(.pagination-wrapper, .jshop_pagination) .page-link:hover,:is(.pagination-wrapper, .jshop_pagination) .page-link:focus,:is(.pagination-wrapper, .jshop_pagination) .page-link:active {
    color: var(--text--color)
}

:is(.pagination-wrapper, .jshop_pagination) .page-link:hover::after,:is(.pagination-wrapper, .jshop_pagination) .page-link:focus::after,:is(.pagination-wrapper, .jshop_pagination) .page-link:active::after {
    --bg: var(--color--grey-light, hsl(0deg 0% 92%))
}

:is(.pagination-wrapper, .jshop_pagination) .page-link:where([title="В начало"], [title="Start"], [title="Назад"], [title="«"], [title="Вперед"], [title="»"], [title="В конец"], [title="End"]) {
    color: transparent;
    font-size: 0;
    overflow: hidden
}

:is(.pagination-wrapper, .jshop_pagination) .page-link:where([title="В начало"], [title="Start"], [title="Назад"], [title="«"], [title="Вперед"], [title="»"], [title="В конец"], [title="End"])::before {
    content: "";
    -webkit-mask-image: var(--icon);
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: var(--icon--size);
    background-color: var(--icon--color);
    z-index: 1
}

:is(.pagination-wrapper, .jshop_pagination) .page-link:where([title="В начало"], [title="Start"], [title="Назад"], [title="«"], [title="Вперед"], [title="»"], [title="В конец"], [title="End"])::after {
    --bg: var(--bg--arrow)
}

:is(.pagination-wrapper, .jshop_pagination) .page-link:where([title="В начало"], [title="Start"], [title="Назад"], [title="«"], [title="Вперед"], [title="»"], [title="В конец"], [title="End"]):hover::before {
    --icon--color: var(--color--black, hsl(0, 0%, 0%))
}

:is(.pagination-wrapper, .jshop_pagination) .page-link:where([title="В начало"], [title="Start"])::before {
    --icon: url("/images/icon-pack/solid/angles-left.svg")
}

:is(.pagination-wrapper, .jshop_pagination) .page-link:where([title="Назад"], [title="«"])::before {
    --icon: url("/images/icon-pack/solid/angle-left.svg")
}

:is(.pagination-wrapper, .jshop_pagination) .page-link:where([title="Вперед"], [title="»"])::before {
    --icon: url("/images/icon-pack/solid/angle-right.svg")
}

:is(.pagination-wrapper, .jshop_pagination) .page-link:where([title="В конец"], [title="End"])::before {
    --icon: url("/images/icon-pack/solid/angles-right.svg")
}

:is(.pagination-wrapper, .jshop_pagination) :where(.pagination-counter, .pagination_result_counter) {
    color: var(--counter__text--color);
    font-size: var(--counter__text--size);
    font-weight: var(--counter__text--weight);
    margin-bottom: 0
}

.comments-readmore .btn-group [href$="#comments"] {
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    padding-right: 0
}

nav.pagination-wrapper.d-lg-flex.justify-content-between.w-100 {
    margin-top: 30px;
}

/* Quick-index */

.rl_quickindex {
    --quick-index-fz: 16.5px;
    --quick-index-marker: "–";
    font-size: var(--quick-index-fz);
    margin-block:1.5em 2.25em;border-color: rgba(0,0,0,0);
    border-radius: .75em;
    background: var(--white,#fff);
    padding: var(--p,1em 1.5em 1.5em);
    max-width: -moz-fit-content;
    max-width: fit-content;
    box-shadow: var(--bxsh,0 .5em 3em 1em rgba(0,0,0,.03));
    transition: .2s ease-in-out
}

.rl_quickindex:hover {
    --bxsh: 0 0 5em 0 rgb(0 0 0 / 8%)
}

.rl_quickindex :is(.card-header,.card-body) {
    padding-inline:0}

.rl_quickindex .card-header {
    font-weight: 500;
    border-color: rgba(0,0,0,0);
    background-color: rgba(0,0,0,0);
    margin-block:0 .35em;padding-top: 0
}

.rl_quickindex .card-body {
    padding-block:0}

.rl_quickindex .card-body>.index {
    padding-left: 1.25em
}

.rl_quickindex .card-body>.index>li {
    padding-block:.25em}

.rl_quickindex :is(.index,.index-item) {
    margin-bottom: 0;
    overflow: visible
}

.rl_quickindex .index .index {
    font-size: calc(var(--quick-index-fz)*.9125);
    margin-top: .5em;
    padding-left: .65em
}

@media(min-width: 576px) {
    .rl_quickindex .index .index:has(.index-item:nth-child(n+6)) {
        -moz-column-count:2;
        column-count: 2;
        -moz-column-gap: 1.5em;
        column-gap: 1.5em
    }
}

.rl_quickindex .index .index>.index-item {
    padding-block:.18em}

.rl_quickindex ol>li {
    padding-left: .5em
}

.rl_quickindex ul>li {
    padding-left: .75em
}

.rl_quickindex .index-link {
    color: var(--quick-index-c,var(--black,#1a1a1a));
    text-align: left;
    display: block;
    -webkit-text-decoration: underline dashed var(--grey-light,#d1d1d1);
    text-decoration: underline dashed var(--grey-light,#d1d1d1);
    text-decoration-thickness: 1px;
    text-underline-offset: var(--tuo,.2em);
    border-bottom-color: rgba(0,0,0,0);
    transition: .2s ease-in-out
}

.rl_quickindex .index-link:hover {
    color: var(--quick-index-c-h,var(--link-hover,#ff9000));
    text-decoration-color: var(--quick-index-c-h,var(--link-hover,#ff9000));
    text-decoration-style: solid
}

.rl_quickindex .index-link:hover * {
    color: var(--quick-index-c-h,var(--link-hover,#ff9000))
}

.rl_quickindex .index-link * {
    font-weight: 400
}

@media(min-width: 768px) {
    .rl_quickindex {
        --p:1.75em 3em 2em 2.5em
    }

    .rl_quickindex .index-link {
        --tuo: .25em
    }
}