@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");
#overlay {
  background: rgba(0, 0, 0, 0.65);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1040;
  justify-content: center;
  pointer-events: none;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  scroll-behavior: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Onest";
  color: #000;
  margin-bottom: 8px;
  font-weight: 700;
  line-height: 48px;
}
h1.center,
h2.center,
h3.center,
h4.center,
h5.center,
h6.center {
  text-align: center !important;
}
h1.iframe,
h2.iframe,
h3.iframe,
h4.iframe,
h5.iframe,
h6.iframe {
  margin-bottom: 0 !important;
}

.hidden {
  display: none !important;
}

.base-title {
  font-size: 64px;
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  .base-title {
    font-size: 32px;
    font-weight: 700;
  }
}

ul {
  padding-left: 1rem;
}

.navbar-brand {
  font-size: 1.25rem;
}

.navbar-collapse.show {
  z-index: 1500;
  background-image: #fff;
  height: 100vh;
  width: 100vw;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: scroll;
}

a:not(.navbar-brand),
p,
li {
  font-family: "Onest";
  color: #000 !important;
  text-decoration: none;
  font-size: 18px;
  line-height: 150%;
}
@media screen and (max-width: 768px) {
  a:not(.navbar-brand),
  p,
  li {
    width: 100%;
  }
}

p,
li {
  margin-bottom: 8px;
}

@keyframes carousel-slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.carousel-mobile {
  display: flex;
  overflow: hidden;
}

.carousel-mobile img {
  width: 100%;
  transition: transform 0.5s ease-in-out;
}

.carousel-modile img:not(:first-child) {
  margin-left: -100%;
}

.carousel-mobile img:first-child {
  animation: carousel-slide 5s infinite alternate;
}

.carousel {
  background: #000;
  max-width: 100%;
  margin: 0 auto;
}

.carousel-cell {
  width: 300px;
  height: 300px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 301px;
  height: auto;
  margin-right: 32px;
  counter-increment: gallery-cell;
}

.carousel-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-hero {
  background-image: url("/img/word-culture/hero.svg");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  margin: auto;
  margin-top: 120px;
  padding-bottom: 50px;
  padding-top: 50px;
}
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.image-container img {
  max-width: 400px;
  max-height: 100%;
}

body {
  font-family: "Onest";
  color: #000;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-attachment: scroll;
}
@media screen and (max-width: 768px) {
  body {
    background-image: #fff;
  }
}
body.modal-open {
  overflow: hidden;
}

header {
  align-items: center;
  display: flex;
  width: 100%;
  background-color: transparent;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
  position: fixed !important;
  top: 0;
  z-index: 1030;
  right: 0;
  left: 0;
  backdrop-filter: blur(25px);
  max-height: 120px;
  height: 120px;
  -webkit-backdrop-filter: blur(25px);
}

main {
  width: 90%;
  position: relative;
  max-width: 1440px;
  margin: auto;
}

footer {
  width: 90%;
  position: relative;
  max-width: 1440px;
  margin: auto;
  padding: 0px 0px 32px 0px;
}

@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
}
.navbar-brand img {
  width: 160px;
  height: auto;
}

.mirta-row {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 32px;
  align-items: flex-start;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .mirta-row {
    flex-direction: column;
    flex-wrap: wrap;
    text-wrap: wrap;
    width: 100%;
  }
  .mirta-row.only-row {
    flex-direction: row !important;
    flex-wrap: nowrap;
  }
}
.mirta-row.gap-16 {
  gap: 16px !important;
}
.mirta-row.gap-8 {
  gap: 8px !important;
}
.mirta-row.gap-8.mobile-16 {
  gap: 16px !important;
}
.mirta-row.gap-4 {
  gap: 4px !important;
}
.mirta-row.justify-between {
  justify-content: space-between;
}
.mirta-row.w-50 {
  width: 50%;
}
.mirta-row.center {
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 10%;
  margin-left: 10%;
  width: auto;
}

.mirta-column {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  flex-direction: column;
  gap: 32px;
  height: auto;
  height: max-content;
}
.mirta-column.gap-16 {
  gap: 16px !important;
}
.mirta-column.gap-8 {
  gap: 8px !important;
}
.mirta-column.gap-8.mobile-16 {
  gap: 16px !important;
}
.mirta-column.gap-4 {
  gap: 4px !important;
}

.mirta-center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .mirta-center {
    align-items: flex-start;
  }
}

.mirta-hero {
  padding: 60px;
}
@media screen and (max-width: 768px) {
  .mirta-hero {
    padding: 32px;
  }
}

button:not(.navbar-toggler):not(.menu-toggle):not(.flickity-button) {
  border-radius: 4px !important;
  display: flex;
  padding: 12px 32px;
  justify-content: center;
  align-items: center;
  background-color: #c39a6b;
  gap: 12px;
  color: #fff !important;
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  border: 1px solid #c39a6b;
  cursor: pointer;
  transition: background-color 0.5s ease, box-shadow 0.5s ease;
}
@media screen and (max-width: 768px) {
  button:not(.navbar-toggler):not(.menu-toggle):not(.flickity-button) {
    width: 100%;
  }
}
button:not(.navbar-toggler):not(.menu-toggle):not(.flickity-button):hover {
  box-shadow: 0 0 5px #c39a6b;
}
button:not(.navbar-toggler):not(.menu-toggle):not(.flickity-button).secondary {
  background-color: rgba(0, 0, 0, 0);
  color: #c39a6b !important;
}
button:not(.navbar-toggler):not(.menu-toggle):not(.flickity-button).secondary:hover {
  background-color: #c39a6b;
  color: #fff !important;
}
button:not(.navbar-toggler):not(.menu-toggle):not(.flickity-button).telegram {
  background-color: #289fda;
  color: #000 !important;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 40px rgba(40, 159, 218, 0.5);
  transition: box-shadow 0.5s ease;
}
button:not(.navbar-toggler):not(.menu-toggle):not(.flickity-button).telegram:hover {
  box-shadow: 0 0 60px rgba(40, 159, 218, 0.75);
}
button:not(.navbar-toggler):not(.menu-toggle):not(.flickity-button).telegram img {
  width: 24px;
  height: 24px;
}

.spacer-16 {
  margin-top: 16px;
}
.spacer-32 {
  margin-top: 32px;
}
.spacer-64 {
  margin-top: 64px;
}
.spacer-72 {
  margin-top: 72px;
}

.w-100 {
  width: 100% !important;
}
.w-75 {
  width: 75% !important;
}
.w-50 {
  width: 50% !important;
}
.w-25 {
  width: 25% !important;
}
.w-10 {
  width: 10% !important;
}

.mirta-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  justify-items: flex-start;
  align-items: flex-start;
  text-align: start;
  min-height: 100%;
  height: 100%;
}
.mirta-grid.template-14 {
  grid-template-columns: 35% 65%;
}
@media (max-width: 768px) {
  .mirta-grid.template-14 {
    grid-template-columns: 100% !important;
  }
}
.mirta-grid.template-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 768px) {
  .mirta-grid.template-4 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
.mirta-grid.gap-16 {
  gap: 16px !important;
}
.mirta-grid.gap-8 {
  gap: 8px !important;
}
.mirta-grid.gap-8.mobile-16 {
  gap: 16px !important;
}
.mirta-grid.start {
  align-items: flex-start;
}
.mirta-grid.px-50 {
  padding-left: 50px;
  padding-right: 50px;
}
@media screen and (max-width: 768px) {
  .mirta-grid.px-50 {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.mirta-grid.px-75 {
  padding-left: 75px;
  padding-right: 75px;
}
@media screen and (max-width: 768px) {
  .mirta-grid.px-75 {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.mirta-grid.px-100 {
  padding-left: 100px;
  padding-right: 100px;
}
@media screen and (max-width: 768px) {
  .mirta-grid.px-100 {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.mirta-grid.px-150 {
  padding-left: 150px;
  padding-right: 150px;
}
@media screen and (max-width: 768px) {
  .mirta-grid.px-150 {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.mirta-grid.px-200 {
  padding-left: 200px;
  padding-right: 200px;
}
@media screen and (max-width: 768px) {
  .mirta-grid.px-200 {
    padding-left: 0px;
    padding-right: 0px;
  }
}

.mirta-card {
  background-color: rgba(255, 255, 255, 0.1);
  width: 100%;
  border-radius: 4px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 2px solid #c39a6b;
  height: 100%;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  min-height: 100%;
  max-height: 100%;
  height: 100%;
}
.mirta-card.max-content {
  height: auto;
  height: max-content;
}
.mirta-card.first {
  background: url("/img/word-culture/auditory.svg");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  min-height: 100%;
  max-height: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .mirta-card.first {
    background: none !important;
  }
}
.mirta-card.first-2 {
  background: url("/img/word-culture/how-to-part.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  min-height: 100%;
  max-height: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .mirta-card.first-2 {
    min-height: 230px;
  }
}
.mirta-card.first-2 h2 {
  color: #fff;
  text-align: left;
}
.mirta-card.first h2 {
  color: #fff;
  text-align: left;
}
@media (max-width: 768px) {
  .mirta-card.first h2 {
    color: #000;
    text-align: center;
    display: flex;
    justify-content: center;
  }
}
.mirta-card.gray {
  background-color: #f8f9fa;
  border: none;
}
.mirta-card.background {
  background-color: #f4ece2;
  border: none;
  padding: 16px;
}
.mirta-card.background-2 {
  background-color: #f4ece2;
  border: none;
  padding: 16px;
}
.mirta-card.center {
  align-items: center;
  justify-content: center;
}
.mirta-card .number {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  height: 60px;
  width: 60px;
  font-size: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mirta-card .number.start {
  align-items: flex-start;
}
.mirta-card .number img {
  max-height: 80px;
  height: 80px !important;
  width: 80px !important;
}
@media (max-width: 768px) {
  .mirta-card .number img {
    max-height: 100px;
    height: 100px !important;
    width: 100px !important;
  }
}
.mirta-card.p-8 {
  padding: 8px !important;
}
.mirta-card.p-16 {
  padding: 16px !important;
}
.mirta-card .image {
  width: 100%;
  height: 100%;
  max-height: 48px;
  object-fit: contain;
}
.mirta-card .image.no-max-height {
  max-height: none;
}
.mirta-card .image.no-width {
  width: auto;
}
.mirta-card.small {
  padding: 16px 24px !important;
  min-width: 100%;
  width: 100%;
  width: max-content;
  border-radius: 20px;
}
@media screen and (max-width: 768px) {
  .mirta-card.small {
    width: 100%;
  }
}
.mirta-card.small p {
  margin-bottom: 0px;
}
.mirta-card.light {
  background-color: rgba(255, 255, 255, 0.5);
}
.mirta-card.orange {
  background: linear-gradient(26deg, #845a4a 18%, #31253e 108%);
  border: none;
  height: auto;
}
.mirta-card.pink {
  background: linear-gradient(26deg, #6b3760 18%, #241a1e 108%);
  height: auto;
}
.mirta-card.green {
  background: linear-gradient(26deg, #225845 18%, #17221e 108%);
  height: auto;
}
.mirta-card.red-one {
  background: linear-gradient(26deg, #6a1b3b 18%, #181519 108%);
}
.mirta-card.red-two {
  background: linear-gradient(26deg, #621921 18%, #171517 108%);
}
.mirta-card.purple-one {
  background: linear-gradient(26deg, #252987 18%, #262176 108%);
}
.mirta-card.purple-two {
  background: linear-gradient(26deg, #2d2ba7 18%, #4e1b9f 108%);
}
.mirta-card.purple-three {
  background: linear-gradient(26deg, #242783 18%, #201a49 108%);
}
.mirta-card.purple-four {
  background: linear-gradient(26deg, #272891 18%, #4d1dc0 108%);
}

[data-modal],
.close-dialog {
  cursor: pointer;
}

@keyframes open {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes close {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
dialog {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  border: none;
  width: 80%;
  height: 90%;
  transition: display 0.6s allow-discrete, overlay 0.6s allow-discrete;
  transition: opacity 0.6s ease;
  animation: close 1s forwards;
  border: none !important;
  outline: none !important;
}
dialog[open] {
  border: none !important;
  outline: none !important;
  animation: open 0.6s forwards;
}
@media (max-width: 768px) {
  dialog {
    width: 100%;
    height: 100%;
  }
}
dialog:active, dialog:focus, dialog a:focus, dialog a:active, dialog button:focus, dialog button:active {
  border: none !important;
  outline: none !important;
}
dialog .button-close {
  position: sticky;
  bottom: 4px;
}
dialog.iframe {
  width: 60%;
  height: 80%;
  padding: 0 !important;
  overflow-y: hidden;
}
@media (max-width: 768px) {
  dialog.iframe {
    width: 100%;
    height: 100%;
  }
}

.dialog-modal {
  display: block;
  position: relative;
}
.dialog-modal.iframe {
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .dialog-modal {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-direction: column;
  }
}
.dialog-modal .image {
  min-width: 544px;
  max-width: 544px;
  width: 640px;
  object-fit: contain;
  float: left;
  margin-left: 8px;
  margin-right: 64px;
  border-radius: 16px;
}
@media (max-width: 768px) {
  .dialog-modal .image {
    max-width: 100%;
    min-width: 100%;
    width: 100%;
    margin: 0 !important;
  }
}
.dialog-modal li {
  list-style: inside;
}
.dialog-modal a {
  text-decoration: underline;
}
.dialog-modal .body {
  margin-top: 20px;
}
.dialog-modal .body.iframe {
  width: 100%;
  height: 100%;
  margin-top: 0;
}
.dialog-modal .body iframe {
  width: 100%;
  height: 100%;
}

.close-dialog {
  position: absolute;
  top: -20px;
  right: 25px;
}
.close-dialog.iframe {
  top: 20px !important;
  right: 35px !important;
}

.mirta-image-card {
  background-color: rgba(255, 255, 255, 0.1);
  width: 100%;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #c39a6b;
  margin-bottom: 16px;
  height: auto;
  height: max-content;
}
.mirta-image-card.first {
  background: linear-gradient(333.42deg, #2d60a3 18.96%, rgba(34, 15, 80, 0.51) 59.22%, #141517 108.03%);
  border: none;
}
.mirta-image-card .image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  max-height: 220px;
  object-position: center;
  min-height: 220px;
}
.mirta-image-card .image.contain {
  object-fit: contain;
  height: auto;
  max-height: auto !important;
  min-height: auto !important;
  height: max-content !important;
  max-height: max-content !important;
  min-height: max-content !important;
}
.mirta-image-card.small {
  max-width: 20rem;
  height: 25rem;
  max-height: 40rem;
}
.mirta-image-card .body {
  padding: 8px 16px 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 250px;
}
.mirta-image-card .body.small {
  padding: 8px 32px 16px 32px;
  width: 100%;
}
.mirta-image-card small strong {
  color: #c39a6b;
}
.mirta-image-card.accent {
  border: 2px #c39a6b solid;
  border-radius: 18px;
}

.lh-16 {
  line-height: 16px !important;
}
.lh-24 {
  line-height: 24px !important;
}
.lh-32 {
  line-height: 32px !important;
}

.text-secondary {
  color: rgba(255, 255, 255, 0.5);
}

.footer-mirta-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 32px 0px 0px 0px;
}
@media screen and (max-width: 768px) {
  .footer-mirta-row {
    flex-direction: column;
  }
}

.multiline-ellipsis {
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.multiline-ellipsis.multiline-ellipsis-3 {
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.show-mobile {
  display: flex !important;
}

.show-desktop {
  display: none !important;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none !important;
  }
  .show-desktop {
    display: flex !important;
  }
}
.custom-navbar {
  position: relative;
  z-index: 1000;
  width: 100%;
}

.navbar-container {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  width: 100%;
}

.menu-toggle {
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
  color: #000;
}

.nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.98);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  padding: 32px;
}

.nav-menu.open {
  transform: translateY(0);
}

.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.nav-menu li {
  margin: 16px 0;
}

.nav-menu a {
  font-size: 24px;
  text-decoration: none;
  color: #000 !important;
}

a.gap-8 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px !important;
}

.nav-menu .button {
  background-color: rgba(255, 255, 255, 0.98);
  color: #000 !important;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 20px;
}

img.w-150 {
  width: 150px;
  height: auto;
}
img.w-250 {
  width: 250px;
  height: auto;
}
img.w-350 {
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  img.w-350 {
    width: 350px;
    height: auto;
  }
}

p.accent {
  color: #c39a6b !important;
}
p.size-16 {
  font-size: 16px;
}
p.size-24 {
  font-size: 24px;
}

.mt-10 {
  margin-top: 4vh;
}

.video-bordered {
  border-radius: 20px;
}

/******************************************************/

/*# sourceMappingURL=word-culture.css.map */