@charset "UTF-8";
*,
*:before,
*:after {
  padding: 0px;
  margin: 0px;
  border: 0px;
  box-sizing: border-box;
}

button {
  outline: none;
  font-weight: normal;
  cursor: pointer;
}

body {
  font-family: "Roboto", sans-serif;
}

h1 {
  color: #333;
  font-weight: 400;
  font-size: 28px;
  padding: 20px;
  text-align: center;
}

p {
  padding-bottom: 10px;
  line-height: 1.5em;
}

.common-a {
  text-decoration: none;
  color: #3d5eab;
}

.common-a:hover {
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  -webkit-text-decoration-style: solid;
          text-decoration-style: solid;
  color: black;
  -webkit-text-decoration-color: royalblue;
          text-decoration-color: royalblue;
}

.text-center {
  text-align: center;
}

.primary-button {
  background-color: #3d5eab;
  border-radius: 3px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  height: 38px;
  margin: 20px auto 10px;
  padding: 0 30px;
}

.primary-button:hover {
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}

.primary-button:active {
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
  color: orange;
}

.secondary-button {
  background-color: #6090ff;
  border-radius: 3px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  height: 38px;
  margin: 20px auto 10px;
  padding: 0 30px;
}

.secondary-button:hover {
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}

.secondary-button:active {
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
  color: orange;
}

.hide {
  display: none;
}

.answer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-bar {
  text-align: center;
  padding-top: 30px;
}

.result__data {
  font-size: 24px;
}

.bright-button {
  background-color: #e0e0e0;
  border-radius: 3px;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.1);
  color: #7c7c7c;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  height: 38px;
  margin: 20px auto 10px;
  padding: 0 30px;
}

.bright-button[disabled] {
  box-shadow: none;
  background-color: #ececec;
  color: #a7a7a7;
}

.bright-button:hover {
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.05);
}

.bright-button[disabled]:hover {
  box-shadow: none;
}

.bright-button:active {
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0);
  color: #414141;
}

.bright-button[disabled]:active {
  box-shadow: none;
  color: #f51010;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff"), url("../fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Black.woff2") format("woff2"), url("../fonts/Roboto-Black.woff") format("woff"), url("../fonts/Roboto-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-BlackItalic.woff2") format("woff2"), url("../fonts/Roboto-BlackItalic.woff") format("woff"), url("../fonts/Roboto-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff"), url("../fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-BoldItalic.woff2") format("woff2"), url("../fonts/Roboto-BoldItalic.woff") format("woff"), url("../fonts/Roboto-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Italic.woff2") format("woff2"), url("../fonts/Roboto-Italic.woff") format("woff"), url("../fonts/Roboto-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-MediumItalic.woff2") format("woff2"), url("../fonts/Roboto-MediumItalic.woff") format("woff"), url("../fonts/Roboto-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Medium.woff2") format("woff2"), url("../fonts/Roboto-Medium.woff") format("woff"), url("../fonts/Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-ThinItalic.woff2") format("woff2"), url("../fonts/Roboto-ThinItalic.woff") format("woff"), url("../fonts/Roboto-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Thin.woff2") format("woff2"), url("../fonts/Roboto-Thin.woff") format("woff"), url("../fonts/Roboto-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.woff2") format("woff2"), url("../fonts/Roboto-Light.woff") format("woff"), url("../fonts/Roboto-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-LightItalic.woff2") format("woff2"), url("../fonts/Roboto-LightItalic.woff") format("woff"), url("../fonts/Roboto-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/RobotoCondensed-Italic.woff2") format("woff2"), url("../fonts/RobotoCondensed-Italic.woff") format("woff"), url("../fonts/RobotoCondensed-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/RobotoCondensed-Regular.woff2") format("woff2"), url("../fonts/RobotoCondensed-Regular.woff") format("woff"), url("../fonts/RobotoCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/RobotoCondensed-Bold.woff2") format("woff2"), url("../fonts/RobotoCondensed-Bold.woff") format("woff"), url("../fonts/RobotoCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: bold;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/RobotoCondensed-Light.woff2") format("woff2"), url("../fonts/RobotoCondensed-Light.woff") format("woff"), url("../fonts/RobotoCondensed-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/RobotoCondensed-BoldItalic.woff2") format("woff2"), url("../fonts/RobotoCondensed-BoldItalic.woff") format("woff"), url("../fonts/RobotoCondensed-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/RobotoCondensed-LightItalic.woff2") format("woff2"), url("../fonts/RobotoCondensed-LightItalic.woff") format("woff"), url("../fonts/RobotoCondensed-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "icons";
  src: url("../fonts/icons.eot");
  src: url("../fonts/icons.eot") format("embedded-opentype"), url("../fonts/icons.ttf") format("truetype"), url("../fonts/icons.woff") format("woff"), url("../fonts/icons.svg") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
[class^=icon-], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icons" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-libra-new:before {
  content: "";
}

.icon-close:before {
  content: "";
}

.icon-copy:before {
  content: "";
}

.icon-favorite:before {
  content: "";
}

.icon-favorite_border:before {
  content: "";
}

.icon-menu:before {
  content: "";
}

.icon-more_vert:before {
  content: "";
}

.icon-notifications:before {
  content: "";
}

.icon-notifications-outlined:before {
  content: "";
}

.icon-share:before {
  content: "";
}

.icon-arrow_left:before {
  content: "";
}

.icon-arrow_right:before {
  content: "";
}

.icon-home:before {
  content: "";
}

.icon-article_black:before {
  content: "";
}

.icon-delete_black:before {
  content: "";
}

.icon-group_black:before {
  content: "";
}

.icon-language_black:before {
  content: "";
}

.icon-history_black:before {
  content: "";
}

.icon-home_black:before {
  content: "";
}

.icon-notes_black:before {
  content: "";
}

.icon-settings_black:before {
  content: "";
}

.icon-rss_feed_black:before {
  content: "";
}

.icon-trending_up_black:before {
  content: "";
}

.icon-cases_black:before {
  content: "";
}

.icon-home_work_black:before {
  content: "";
}

.icon-paid:before {
  content: "";
}

.icon-login:before {
  content: "";
}

.icon-add_circle:before {
  content: "";
}

.icon-add:before {
  content: "";
}

.icon-translate:before {
  content: "";
}

.icon-payment:before {
  content: "";
}

.icon-dashboard:before {
  content: "";
}

.icon-edit:before {
  content: "";
}

.icon-done:before {
  content: "";
}

.header__wrapper {
  display: grid;
  grid-template: 56px/1fr;
  background-color: #212121;
  justify-items: center;
  align-items: center;
}
@media (min-width: 600px) {
  .header__wrapper {
    grid-template: 64px/1fr;
  }
}

.header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 1200px;
  width: 100%;
  position: relative;
}

.header__section {
  display: flex;
  flex-direction: row;
  background-color: transparent;
  align-items: center;
}

.top-menu__button {
  background-color: transparent;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  color: white;
  font-size: 24px;
  text-decoration: none;
  cursor: pointer;
}

.top-menu__button:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transition: 0.2s;
  color: white;
}

.top-menu__button:active {
  background-color: rgba(255, 255, 255, 0.4);
}

.top-menu {
  position: absolute;
  left: 10px;
}

.top-menu-logo img {
  width: 40px;
  height: 40px;
}

.top-menu__body {
  display: flex;
  flex-direction: column;
  padding: 0 0 10px 0;
  position: fixed;
  z-index: 10;
  background-color: #fff;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  top: 0;
}
@media (min-width: 600px) {
  .top-menu__body {
    width: 300px;
    height: auto;
    position: absolute;
    box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3);
    top: auto;
    left: auto;
  }
}

.top-menu__body_left {
  left: 0;
}

.top-menu__body.open {
  opacity: 1;
  visibility: visible;
  transition-duration: 300ms;
}

.top-menu__body.fade {
  transition-duration: 300ms;
}

.top-menu__title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  background-color: #3d5eab;
  padding: 0 0 0 20px;
}
@media (min-width: 600px) {
  .top-menu__title {
    display: none;
  }
}

.top-menu__close-button {
  padding: 12px;
  background-color: #3d5eab;
  height: 48px;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}

.top-menu__close-button.icon-close {
  font-size: 24px;
  color: #fff;
}

.top-menu__close-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.top-menu__close-button:active {
  background-color: rgba(255, 255, 255, 0.2);
}

.top-menu__link {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  padding: 10px 20px;
  text-decoration: none;
  color: #373737;
  word-break: normal;
  overflow: hidden;
  cursor: pointer;
}

.top-menu__link:hover {
  background-color: rgba(160, 160, 160, 0.233);
}

.top-menu__link:active {
  background-color: rgba(190, 190, 190, 0.233);
}

.top-menu__items {
  overflow-y: auto;
  padding-top: 10px;
}

.top-menu__item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  padding: 10px 20px;
  color: #373737;
  text-decoration: none;
}
.top-menu__item :hover {
  background-color: transparent;
}
.top-menu__item :active {
  background-color: transparent;
}

.top-menu__icon {
  font-size: 24px;
  color: #636363;
}

.logo {
  display: flex;
  flex-direction: row;
  text-decoration: none;
  color: #fff;
  align-items: center;
  gap: 10px;
}

.logo img {
  width: 36px;
  height: 36px;
}

.container {
  display: grid;
  grid-template: -webkit-min-content auto min-content/1fr;
  grid-template: min-content auto min-content/1fr;
  min-height: 100vh;
  overflow: hidden;
}

.main {
  display: grid;
  grid-template: auto/1fr;
  justify-items: center;
  justify-content: center;
}

.trigram {
  display: block;
  width: 50px;
  height: 30px;
}

.line1 {
  display: block;
  width: 100%;
  height: 24%;
  background-color: #000;
  margin: 0 0 5px 0;
}

.line2 {
  display: block;
  width: 100%;
  height: 24%;
  background-color: none;
  border: none;
  border-left: 20px solid #000;
  border-right: 20px solid #000;
  margin: 0 0 5px 0;
}

.main__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0px 15px 30px;
  max-width: 600px;
  background-color: #f9f9f9;
}

ol {
  padding-left: 50px;
}

ol li {
  line-height: 1.35em;
  padding-bottom: 5px;
}

.hexa-header {
  text-align: center;
}

.hexa-img {
  display: flex;
  width: 100%;
  justify-content: center;
}

.hexa-img img {
  width: 120px;
  margin: 15px 0 25px;
}

.book-i {
  display: block;
}

.book-i img {
  width: 100%;
  height: 100%;
}

.main__breadcrubs {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  padding: 10px 0;
  font-size: 16px;
  font-family: "Roboto Condensed", sans-serif;
}

.breadcrumbs > li {
  display: inline;
}

.breadcrumbs__item > a {
  text-decoration: none;
  color: #161616;
}

.breadcrumbs__item > .icon-arrow_left {
  color: #e64040;
}

.breadcrumbs__target {
  color: #464646;
}

td, th {
  text-align: center;
  vertical-align: middle;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.2);
  line-height: 1.75em;
  font-weight: 400;
  padding: 0;
}

th img {
  margin: 10px 5px;
  width: calc(100vw / 14);
  vertical-align: middle;
}
@media (min-width: 600px) {
  th img {
    width: 45px;
  }
}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
}

caption {
  text-align: left;
}

td a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: #0a61c4;
  line-height: 2.5em;
}

td:hover {
  border-color: red;
  border-width: 1px;
  border-style: double;
}

.aphorism {
  display: block;
  padding: 20px 50px;
  background-color: #006eff;
  border-radius: 15px;
  color: azure;
  font-weight: 400;
  margin-top: 50px;
}

.aphorism__text {
  font-size: 18px;
}

.aphorism__author {
  font-style: italic;
  text-align: right;
  font-weight: 300;
}

.aphorism.done {
  margin-top: 15px;
}

.login-input {
  border-color: #dfdfdf;
  border-style: solid;
  border-width: 1px;
  font-size: 16px;
  padding: 10px 15px;
  -webkit-padding-before: 12px;
  -webkit-padding-after: 10px;
  outline: none;
  resize: vertical;
}

.login-input.author {
  width: 200px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

textarea.login-input {
  margin-bottom: 15px;
}

.total-cnt {
  margin: 10px 0;
}

form {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 15px;
}

.alert {
  display: none;
  padding: 15px;
  border-radius: 5px;
  text-align: center;
}

.alert.active {
  display: block;
  background-color: #fc6666;
}

.alert.add {
  display: block;
  background-color: #9cedfc;
  margin-bottom: 15px;
}

.alert.done {
  display: block;
  background-color: #a1ffc5;
  margin-top: 15px;
}

.alert.edit {
  display: block;
  background-color: #ffdea1;
  margin-top: 15px;
  margin-bottom: 15px;
}

.aphorism__links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}

.aphorism__links.main {
  justify-content: left;
}

#edit {
  display: block;
}

#result {
  display: none;
}

.totalRows {
  margin-top: 10px;
}

hr {
  border: none;
  background: gray;
  opacity: 50%;
  height: 1px;
}

.a-author {
  text-align: right;
  font-style: italic;
  margin-top: 10px;
  margin-bottom: 10px;
}

.a-text {
  margin-top: 10px;
}

.a-dt {
  font-size: 14px;
  opacity: 50%;
}

.a-controls {
  font-size: 14px;
}

.a-control {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 10px;
  margin-bottom: 10px;
}

.footer {
  display: flex;
  justify-content: center;
  background-color: #212121;
  color: rgba(255, 255, 255, 0.7);
  padding: 20px;
  margin: 0;
}

.footer__wrapper {
  display: grid;
  grid-template: repeat(6, auto)/auto auto;
  justify-content: stretch;
  width: 100%;
  margin: 0px 0px;
  grid-template-areas: "footer-logo lang" "about about" "portal portal" "res res" "soc soc" "copy copy";
}
@media (min-width: 767px) {
  .footer__wrapper {
    grid-template: repeat(4, auto)/auto auto auto;
    grid-template-areas: "footer-logo footer-logo lang" "portal about res" "soc soc soc" "copy copy copy";
    width: 100%;
  }
}
@media (min-width: 992px) {
  .footer__wrapper {
    grid-template: repeat(3, auto)/repeat(5, auto);
    grid-template-areas: "footer-logo portal about res lang" "soc soc soc soc soc" "copy copy copy copy copy";
    width: 100%;
    max-width: 1200px;
  }
}

.footer__logo {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  display: flex;
  grid-area: footer-logo;
  justify-content: left;
  padding-left: 10px;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5em;
}
@media (min-width: 767px) {
  .footer__logo {
    justify-content: left;
    padding-left: 20px;
  }
}

.footer__logo img {
  width: 140px;
  height: 20px;
}

.footer__lang {
  -ms-grid-row: 1;
  -ms-grid-column: 2;
  display: flex;
  grid-area: lang;
  justify-content: flex-end;
  margin: 10px;
  text-decoration: none;
}
@media (min-width: 767px) {
  .footer__lang {
    justify-content: flex-start;
    padding-left: 10px;
  }
}
@media (min-width: 992px) {
  .footer__lang {
    display: block;
    justify-content: center;
  }
}

.footer__lang-switch {
  color: rgba(255, 255, 255, 0.7);
  margin: 0 3px;
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;
}
@media (min-width: 767px) {
  .footer__lang-switch {
    font-size: 16px;
  }
}

.footer__lang-switch-middle {
  color: #777;
}

.footer__lang-switch.lang-switch-middle:hover {
  color: #777;
}

.footer__lang-switch-active {
  color: #108cf1;
}

.footer__lang-switch:hover {
  color: orange;
}

.footer__lang-switch:active {
  color: #eec26f;
}

.soc {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: soc;
}

.about {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: about;
}

.portal {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: portal;
}

.res {
  -ms-grid-row: 4;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: res;
}

.footer__social {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  margin: 15px 0px;
  grid-area: soc;
}
@media (min-width: 767px) {
  .footer__social {
    margin: 20px 0px;
  }
}

.footer__social-icons {
  margin-right: 12px;
  margin-left: 0px;
}

.footer__social-icons img {
  width: 36px;
  height: 36px;
}

.footer__copy {
  -ms-grid-row: 6;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 5px;
  grid-area: copy;
  position: relative;
  line-height: 1.5em;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  font-size: 14px;
}

@media (min-width: 767px){
  .footer__logo {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
  .footer__lang {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .soc {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
  .about {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
  .portal {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .res {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }
  .footer__social {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
  .footer__copy {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }
}

@media (min-width: 992px){
  .footer__logo {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }
  .footer__lang {
    -ms-grid-row: 1;
    -ms-grid-column: 5;
  }
  .soc {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
  }
  .about {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
  }
  .portal {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }
  .res {
    -ms-grid-row: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }
  .footer__social {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
  }
  .footer__copy {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 5;
  }
}

.footer__menu {
  display: flex;
  flex-direction: column;
  margin: 10px 0px;
  line-height: 1.5em;
  font-weight: 500;
}
@media (min-width: 767px) {
  .footer__menu {
    margin: 0px 10px 10px;
  }
}

.footer__menu-header {
  display: flex;
  flex-direction: row;
  min-height: 40px;
  cursor: pointer;
  width: 100%;
  background-color: #363636;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 767px) {
  .footer__menu-header {
    cursor: auto;
    background-color: #212121;
  }
}

.footer__h2 {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  padding: 10px 15px;
}

.footer__arrow {
  font-size: 24px;
  padding: 10px;
}
@media (min-width: 767px) {
  .footer__arrow {
    display: none;
  }
}

.footer__links {
  display: none;
  flex-direction: column;
  background-color: #363636;
  width: 100%;
}
@media (min-width: 767px) {
  .footer__links {
    display: flex;
    align-items: flex-start;
    height: 100%;
    background-color: #212121;
    padding-left: 15px;
  }
}

.footer__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 48px;
  padding-left: 25px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  font-size: 14px;
  text-decoration: none;
}
@media (min-width: 767px) {
  .footer__link {
    height: 35px;
    padding-left: 0px;
  }
}

.footer__link:hover {
  color: orange;
}

.footer__partners {
  display: none;
}
@media (min-width: 992px) {
  .footer__partners {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    left: 15px;
    gap: 25px;
  }
}

.r24 img {
  height: 24px;
  width: 58px;
}

.krysha img {
  width: 83px;
  height: 20px;
  margin-top: 5px;
}

.bn-ua img {
  width: 80px;
  height: 24px;
}

.web-wiz img {
  width: 91px;
  height: 36px;
  background: transparent;
}