@import "https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap";

:root {
  --white: hsl(210, 20%, 100%);
  --gray-50: hsl(210, 17%, 97%);
  --gray-100: hsl(210, 16%, 94%);
  --gray-200: hsl(210, 16%, 92%);
  --gray-300: hsl(210, 14%, 89%);
  --gray-400: hsl(210, 14%, 83%);
  --gray-500: hsl(210, 11%, 71%);
  --gray-600: hsl(210, 7%, 56%);
  --gray-700: hsl(210, 9%, 31%);
  --gray-800: hsl(210, 10%, 23%);
  --gray-900: hsl(210, 11%, 15%);
  --color-pl: hsl(206, 95.8%, 72.2%);
  --color-pr: hsl(207, 75.3%, 57.1%);
  --color-pd: hsl(208, 61%, 47.5%);
  --color-warn: hsl(42, 96.1%, 50%);
  --color-wl: hsl(48, 100%, 70%);
  --color-danger: hsl(0, 85.6%, 59.2%);
  --color-dl: hsl(0, 100%, 76.5%);
  --color-success: hsl(131, 52.8%, 45.7%);
  --color-sl: hsl(129, 67.9%, 73.1%);
  --shadow-s: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  /* --shadow-m: 0px 12px 12px hsla(0, 0%, 0%, 0.08); */
}

*,
:before,
:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
html {
  font-size: 62.5%;
}
@media only screen and (max-width: 50em) {
  html {
    font-size: 50%;
  }
}
body {
  color: var(--gray-800);
  background-color: var(--gray-100);
  box-sizing: border-box;
  font-family: Jost, "sans-serif";
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6;
}
.container {
  max-width: 132rem;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 62.5em) {
  .container {
    padding: 0 1.6rem;
  }
}
.aside {
  background-color: var(--gray-50);
  flex-shrink: 0;
  width: 22%;
  padding: 2.4rem;
}
.main {
  flex-grow: 1;
  min-height: 80vh;
  padding: 2.4rem;
}
.flex-grid {
  justify-content: space-between;
  max-width: 132rem;
  min-height: 80vh;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  padding-top: 0.8rem;
}
@media only screen and (max-width: 62.5em) {
  .flex-grid {
    flex-wrap: wrap;
  }
  .aside--right {
    width: 100%;
    min-height: auto;
  }
  .aside--left {
    z-index: 89;
    transform-origin: 0;
    width: 70%;
    min-height: 60vh;
    transition: all 0.3s ease-in-out;
    position: absolute;
    overflow-y: auto;
    transform: scaleX(0);
    box-shadow: var(--shadow-s);
    top: 13rem;
  }
  .aside--left.open {
    transform: scaleX(1);
  }
}
.footer {
  background-color: var(--white);
  padding-top: 6.4rem;
}
.footer__box > * {
  padding: 0 1.6rem;
}
.footer__navbar {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.4rem;
  display: flex;
}
.footer__title {
  text-align: center;
  margin-bottom: 0.8rem;
  font-size: 2rem;
}
.footer__list {
  text-align: center;
  flex-direction: column;
  list-style-type: none;
  list-style-position: inside;
  display: flex;
}
.footer__link,
.footer__link:link,
.footer__link:visited {
  color: var(--color-pr);
  width: 100%;
  padding: 0.4rem 1.2rem;
  text-decoration: none;
  display: inline-block;
}
.footer__link:hover {
  color: var(--color-pl);
  background-color: var(--gray-100);
}
.footer__copyright {
  color: var(--gray-50);
  background-color: var(--gray-900);
  padding: 1.6rem 0;
  font-size: 1.6rem;
}
@media only screen and (max-width: 82.5em) {
  .footer__navbar,
  .footer__copyright {
    padding: 1.6rem;
  }
}
.heading-1 {
  letter-spacing: -2px;
  font-size: 2rem;
  font-weight: 400;
  line-height: 5.2rem;
}
.heading-2 {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 4rem;
}
.heading-3 {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 3.4rem;
}
.heading-4 {
  font-size: 2rem;
  line-height: 2.8rem;
}
.heading-5 {
  font-size: 1.8rem;
  line-height: 2.4rem;
}
.heading-1 a,
.heading-1 a:link,
.heading-1 a:visited,
.heading-2 a,
.heading-2 a:link,
.heading-2 a:visited,
.heading-3 a,
.heading-3 a:link,
.heading-3 a:visited,
.heading-4 a,
.heading-4 a:link,
.heading-4 a:visited {
  font-size: inherit;
}
.list {
  margin: 1.6rem 0;
  list-style-position: inside;
}
.list__item {
  margin-left: 0.4rem;
}
.btn-box {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  display: flex;
}
.btn,
.btn:link,
.btn:visited {
  color: inherit;
  background-color: unset;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  font-size: 1.6rem;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  display: inline-block;
}
.btn--link,
.btn--link:link,
.btn--link:visited {
  color: var(--color-pd);
  padding: 0.4rem;
}
.btn--link:hover {
  color: var(--color-pl);
  background-color: var(--gray-50);
}
.btn--danger-link,
.btn--danger-link:link,
.btn--danger-link:visited {
  color: var(--color-danger);
  padding: 0.4rem;
}
.btn--danger-link:hover {
  color: var(--color-dl);
}
.btn--primary,
.btn--primary:link,
.btn--primary:visited {
  color: var(--gray-50);
  background-color: var(--color-pr);
  padding: 0.8rem 1.6rem;
}
.btn--primary:hover {
  background-color: var(--color-pd);
}
.btn--secondary,
.btn--secondary:link,
.btn--secondary:visited {
  color: var(--color-pr);
  border: 2px solid var(--color-pr);
  padding: 0.6rem 1rem;
}
.btn--secondary:hover {
  color: var(--gray-50);
  background-color: var(--color-pr);
}
.btn--danger,
.btn--danger:link,
.btn--danger:visited {
  color: var(--color-danger);
  border: 2px solid var(--color-danger);
  padding: 0.8rem 1.6rem;
}
.btn--danger:hover {
  color: var(--gray-50);
  background-color: var(--color-danger);
}
.btn--lg,
.btn--lg:link,
.btn--lg:visited {
  padding: 1.6rem 3.2rem;
}
.btn--light,
.btn--light:link,
.btn--light:visited {
  color: var(--gray-50);
}
.btn i {
  margin-right: 8px;
}
.table {
  border-collapse: collapse;
  background-color: var(--white);
  width: 100%;
}
.table caption {
  text-align: left;
  padding: 1.6rem 0;
  font-size: 3.2rem;
}
.table tr > * {
  padding: 1.2rem 1.6rem;
}
.table tr th {
  text-align: left;
  border: none;
}
.table tr td {
  max-width: 15ch;
}
.table tr:nth-of-type(odd) {
  background-color: var(--gray-50);
}
.table tr:first-of-type {
  color: var(--gray-50);
  text-transform: uppercase;
  background-color: var(--gray-800);
}
.table.table-no-top tr:first-of-type {
  color: inherit;
  text-transform: normal;
  background-color: var(--gray-100);
}
.table__img-box {
  width: 5.2rem;
  height: 5.2rem;
  overflow: hidden;
}
.table__img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: inline-block;
}
@media only screen and (max-width: 82.5em) {
  .table th,
  .table tr:first-of-type td {
    display: none;
  }
  .table tr td {
    max-width: initial;
  }
  .table td {
    max-width: 100%;
    font-size: 1.8rem;
    display: block;
  }
  .table td:first-child {
    margin-top: 2.4rem;
  }
  .table td:last-child {
    margin-bottom: 2.4rem;
  }
  .table td:before {
    content: attr(data-cell);
    font-weight: 700;
  }
}
.form {
  flex-wrap: wrap;
  gap: 1.6rem;
  display: flex;
}
.form__group {
  flex-basis: 100%;
}
.form__group-1-2 {
  flex-basis: calc(50% - 0.8rem);
}
.form__group-1-3 {
  flex-basis: calc(33% - 0.9rem);
}
@media only screen and (max-width: 50em) {
  .form__group-1-2,
  .form__group-1-3 {
    flex-basis: 100%;
  }
}
.form--inline {
  flex-wrap: nowrap;
}
.form--filter-end {
  justify-content: end;
}
.form--filter .form__group {
  flex-basis: initial;
}
.form label {
  font-size: inherit;
  margin: 0.4rem 0;
  display: block;
}
.form input:not(input[type="checkbox"]):not(input[type="radio"]),
.form textarea,
.form__select {
  width: 100%;
  font-size: inherit;
  color: inherit;
  background-color: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  padding: 0.4rem 1.2rem;
  font-family: inherit;
  display: block;
  box-shadow: 0 1px 3px hsla(0, 0%, 0%, 0.1);
}
.form input:not(input[type="checkbox"]):focus,
.form textarea:focus,
.form__select:focus {
  outline: none;
  box-shadow: var(--shadow-s);
}
.form input:not(input[type="checkbox"]):focus:required:invalid,
.form textarea:focus:required:invalid,
.form__select:focus:required:invalid {
  border: 1px solid var(--color-err);
}
.form input:not(input[type="checkbox"])::-webkit-input-placeholder {
  color: #1f2937;
  text-transform: capitalize;
  opacity: 0.6;
}
.form textarea::-webkit-input-placeholder {
  color: #1f2937;
  text-transform: capitalize;
  opacity: 0.6;
}
.form__select::-webkit-input-placeholder {
  color: #1f2937;
  text-transform: capitalize;
  opacity: 0.6;
}
.form input[type="color"] {
  height: 3rem;
  padding: 0;
}
.form input[type="checkbox"] ~ label,
.form input[type="radio"] ~ label {
  margin-left: 0.8rem;
  display: inline-block;
}
.form input[type="file"]::file-selector-button {
  color: var(--gray-50);
  cursor: pointer;
  background-color: var(--color-pl);
  border: none;
  border-radius: 4px;
  padding: 0.4rem 1.6rem;
}
.form textarea {
  width: 100%;
  height: 10rem;
  display: block;
}
.form #CONTAINERrich {
  width: 100% !important;
  background-color: var(--white);
}
#CONTROLSrich {
  background-color: var(--white);
}
.form .captcha {
  align-items: center;
  gap: 1.6rem;
  display: flex;
}
.form .captcha img {
  display: inline-block;
}
.flex-cols {
  gap: 2.4rem;
  display: flex;
}
.col-1-of-2 {
  width: calc(50% - 2.4rem);
}
.col-1-of-3 {
  width: calc(33.3% - 2.4rem);
}
.col-2-of-3 {
  width: calc(66.6% - 2.4rem);
}
@media only screen and (max-width: 62.5em) {
  .col-1-of-3 {
    width: calc(50% - 2.4rem);
  }
}
@media only screen and (max-width: 50em) {
  .flex-cols {
    flex-wrap: wrap;
  }
  .col-1-of-2,
  .col-1-of-3 {
    width: 100%;
  }
  .col-2-of-3 {
    width: 100%;
  }
}
.cards {
  flex-wrap: wrap;
  gap: 1.6rem;
  display: flex;
}
.card {
  background-color: var(--white);
  flex-direction: column;
  width: calc(33.33% - 1.6rem);
  display: flex;
  box-shadow: var(--shadow-s);
  border-radius: 8px;
  overflow: hidden;
}
.card .card--4 {
  width: calc(25% - 1.6rem);
}
.card > a {
  font-size: inherit;
  color: inherit;
  background-color: var(--white);
  cursor: pointer;
  border: none;
  flex-direction: column;
  text-decoration: none;
  display: flex;
}
.card__img-box {
  width: 100%;
  height: 20rem;
  overflow: hidden;
}
.card__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: inline-block;
}
.card__content {
  flex-direction: column;
  gap: 0.4rem;
  padding: 2.4rem;
  display: flex;
}
.card--h {
  flex-direction: row;
  width: 100%;
}
.card--h > a {
  flex-direction: row;
}
.card--h .card__img-box {
  display: flex;
  flex-shrink: 0;
  width: 25.6rem;
  min-height: 100%;
}
.card--h .card__content,
.card--h .card__content a {
  justify-content: center;
  gap: 0.4rem;
}
.card--icon .card__img-box {
  border-radius: 50%;
  width: 12.8rem;
  height: 12.8rem;
  margin: 2.4rem auto 0;
}
.card--variant-product {
  width: calc(25% - 1.6rem);
}
.card--variant-product .card__img-box {
  height: 12.8rem;
}
.card--comment {
  flex-direction: row;
  width: 100%;
}
.card--comment .card__img-box {
  align-self: start;
  width: 12.8rem;
  height: 12rem;
  padding-top: 2.4rem;
  padding-left: 2.4rem;
}
.card--comment .card__img {
  border-radius: 50%;
}
@media only screen and (max-width: 75em) {
  .cards {
    flex-wrap: wrap;
  }
  .card {
    width: calc(50% - 1.6rem);
  }
  .card--variant-product {
    width: calc(33.33% - 1.6rem);
  }
  .card--h,
  .card--comment {
    width: calc(100% - 1.6rem);
  }
}
@media only screen and (max-width: 42em) {
  .card--h,
  .card--comment {
    flex-direction: column;
    width: calc(50% - 1.6rem);
  }
  .card > a {
    flex-direction: column;
  }
  .card--h .card__img-box {
    width: 100%;
    height: 20rem;
    min-height: auto;
  }
}
@media only screen and (max-width: 30em) {
  .card {
    width: calc(100% - 1.6rem);
  }
  .card--icon .card__img-box {
    width: 20rem;
    height: 20rem;
  }
}
.breadcrumb {
  border-bottom: 1px solid var(--gray-500);
  align-items: center;
  gap: 0.8rem;
  display: flex;
}
.breadcrumb__separator {
  color: var(--gray-700);
}
.gallery {
  flex-direction: column;
  gap: 1.6rem;
  display: flex;
}
.gallery__main {
  height: 50vh;
}
.gallery__img {
  object-fit: cover;
  border-radius: 4px;
  width: 100%;
  height: 100%;
  display: inline-block;
}
.gallery__thumbs {
  gap: 2.4rem;
  display: flex;
}
.gallery__thumb {
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
  width: 6.4rem;
  height: 6.4rem;
  display: inline-block;
}
.gallery__thumb:hover {
  outline: 2px solid var(--gray-900);
  outline-offset: 2px;
}
.advert {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: inherit;
  margin: 2.4rem 0;
}
.advert__img-box {
}
.advert__img {
  display: inline-block;
  width: 100%;
}
.advert__content a,
.advert__content a:link,
.advert__content a:visited {
  font-size: 1.8rem;
  text-decoration: none;
}
.advert__title {
  font-size: 2rem;
  font-weight: bold;
}
.p-8 {
  padding: 0.8rem;
}
.pt-8 {
  padding-top: 0.8rem;
}
.pr-8 {
  padding-right: 0.8rem;
}
.pb-8 {
  padding-bottom: 0.8rem;
}
.pl-8 {
  padding-left: 0.8rem;
}
.p-16 {
  padding: 1.6rem;
}
.pt-16 {
  padding-top: 1.6rem;
}
.pr-16 {
  padding-right: 1.6rem;
}
.pb-16 {
  padding-bottom: 1.6rem;
}
.pl-16 {
  padding-left: 1.6rem;
}
.mt-8 {
  margin-top: 0.8rem;
}
.mr-8 {
  margin-right: 0.8rem;
}
.mb-8 {
  margin-bottom: 0.8rem;
}
.ml-8 {
  margin-left: 0.8rem;
}
.mt-16 {
  margin-top: 1.6rem;
}
.mr-16 {
  margin-right: 1.6rem;
}
.mb-16 {
  margin-bottom: 1.6rem;
}
.ml-16 {
  margin-left: 1.6rem;
}
.mt-24 {
  margin-top: 2.4rem;
}
.mr-24 {
  margin-right: 2.4rem;
}
.mb-24 {
  margin-bottom: 2.4rem;
}
.ml-24 {
  margin-left: 2.4rem;
}
.mt-32 {
  margin-top: 3.2rem;
}
.mr-32 {
  margin-right: 3.2rem;
}
.mb-32 {
  margin-bottom: 3.2rem;
}
.ml-32 {
  margin-left: 3.2rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.text-xs {
  font-size: 1.2rem;
}
.text-sm {
  font-size: 1.4rem;
}
.text-base {
  font-size: 1.6rem;
}
.text-lg {
  font-size: 2rem;
}
.text-xl {
  font-size: 2.2rem;
}
.text-2xl {
  font-size: 2.4rem;
}
.font-bold {
  font-weight: 700;
}
.italic {
  font-style: italic;
}
.text-center {
  text-align: center;
}
.text-primary {
  color: var(--color-pr) !important;
}
.text-white {
  color: var(--gray-50) !important;
}
.text-black {
  color: var(--gray-900) !important;
}
.text-muted {
  color: var(--gray-700) !important;
}
.text-crimson {
  color: var(--color-danger) !important;
}
.text-danger {
  color: var(--color-danger) !important;
}
.text-success {
  color: var(--color-success) !important;
}
.text-warning {
  color: var(--color-warning) !important;
}
.text-gray-50 {
  color: var(--gray-50) !important;
}
.text-gray-100 {
  color: var(--gray-100) !important;
}
.text-gray-200 {
  color: var(--gray-200) !important;
}
.text-gray-300 {
  color: var(--gray-300) !important;
}
.text-gray-700 {
  color: var(--gray-700) !important;
}
.text-gray-800 {
  color: var(--gray-800) !important;
}
.text-gray-900 {
  color: var(--gray-900) !important;
}
.underline {
  text-decoration: underline;
}
.no-underline {
  text-decoration: none;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.list-none {
  list-style-type: none;
}
.list-disc {
  list-style-type: circle;
}
.list-square {
  list-style-type: square;
}
.list-inside {
  list-style-position: inside;
}
.list-outside {
  list-style-position: outside;
}
.capitalize {
  text-transform: capitalize;
}
.flex-center {
  justify-content: center;
  align-items: center;
  display: flex;
}
.d-none {
  display: none;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap {
  flex-wrap: wrap;
}
.justify-start {
  justify-content: start;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: end;
}
.items-start {
  align-items: start !important;
}
.items-center {
  align-items: center !important;
}
.items-end {
  align-items: end !important;
}
.self-center {
  align-self: center;
}
.self-start {
  align-self: start;
}
.self-end {
  align-self: end;
}
.flex-grow {
  flex-grow: 1;
}
.flex-shrink {
  flex-shrink: 1;
}
.flex-grow-0 {
  flex-grow: 0;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.w-100 {
  width: 100%;
}
.w-80 {
  width: 80%;
}
.w-60 {
  width: 60%;
}
.w-40 {
  width: 40%;
}
@media only screen and (max-width: 50em) {
  .md\:w-100 {
    width: 100%;
  }
  .md\:w-80 {
    width: 80%;
  }
  .md\:w-60 {
    width: 60%;
  }
  .md\:w-40 {
    width: 40%;
  }
}
.w-initial {
  width: initial !important;
}
.bg-crimson {
  background-color: crimson !important;
}
.border-2 {
  border-width: 2px;
}
.border-solid {
  border-style: solid;
}
.border-primary {
  border-color: var(--color-pr);
}
.border-gray-900 {
  border-color: var(--gray-900);
}
.border-gray-700 {
  border-color: var(--gray-700);
}
hr {
  border: 0.4px solid var(--gray-400);
  margin: 2px 0;
}
.img--post {
  display: block;
  width: 80%;
  max-height: 50vh;
  margin: 1.6rem auto;
}
.divider {
  max-width: 60%;
  padding: 1px;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--gray-400);
  border-radius: 4rem;
}

.admin-menu {
  padding: 8px 1.2rem;
  border: 1px solid var(--color-pr);
  border-radius: 4px;
  margin-bottom: 2rem;
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.admin-menu .btn--link,
.admin-menu .btn--link:link,
.admin-menu .btn--link:visited {
  color: var(--gray-50);
  background-color: var(--color-pr);
  padding: 4px 1.2rem;
}
.admin-menu .btn--link:hover {
  background-color: var(--color-pl);
}

/* Page Header styles in Show page */
.page-show__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto 3.2rem;
}
.page-show__title {
  width: 100%;
}
.page-show__author {
  display: flex;
  align-items: center;
  margin-right: 1.6rem;
}
.page-show__author-img {
  display: inline-block;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0.8rem;
}
.page-show__author-name .btn,
.page-show__author-name .btn:link {
  text-decoration: underline;
  font-weight: bold;
}
.page-show__entrydate {
}

/* Site Menu */
.site-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
}
.site-menu .btn--site {
  padding: 0.2rem 0.8rem;
  border: 2px solid var(--gray-800);
  border-radius: 4px;
  font-size: 1.4rem;
}

.site-menu .btn--site:hover {
  color: var(--white);
  background-color: var(--gray-800);
}

.site-menu .btn--site.btn--active {
  color: var(--white);
  background-color: var(--gray-800);
}