@charset "UTF-8";

@font-face {
  font-family: "icon-font";
  src: url("../fonts/icon-font.eot?99499834");
  src: url("../fonts/icon-font.eot?99499834#iefix") format("embedded-opentype"), url("../fonts/icon-font.woff2?99499834") format("woff2"), url("../fonts/icon-font.woff?99499834") format("woff"), url("../fonts/icon-font.ttf?99499834") format("truetype"), url("../fonts/icon-font.svg?99499834#social-icons") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.icon1-font:before {
  font-family: "icon-font";
  font-style: normal;
  font-weight: normal;
  display: inline-block;
  text-decoration: inherit;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  -moz-osx-font-smoothing: grayscale;
}

[class^=icon1-],
[class*=" icon1-"] {
  font-family: "icon-font" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

.icon1-add:before {
  content: "\e800";
}

/* '' */

.icon1-bag:before {
  content: "\e801";
}

/* '' */

.icon1-battery:before {
  content: "\e802";
}

/* '' */

.icon1-bell:before {
  content: "\e803";
}

/* '' */

.icon1-bluetooth:before {
  content: "\e804";
}

/* '' */

.icon1-bookmark:before {
  content: "\e805";
}

/* '' */

.icon1-briefcase:before {
  content: "\e806";
}

/* '' */

.icon1-calendar:before {
  content: "\e807";
}

/* '' */

.icon1-cancel-1:before {
  content: "\e808";
}

/* '' */

.icon1-cancel:before {
  content: "\e809";
}

/* '' */

.icon1-clip:before {
  content: "\e80a";
}

/* '' */

.icon1-clock-1:before {
  content: "\e80b";
}

/* '' */

.icon1-clock:before {
  content: "\e80c";
}

/* '' */

.icon1-cloud:before {
  content: "\e80d";
}

/* '' */

.icon1-correct:before {
  content: "\e80e";
}

/* '' */

.icon1-credit-card:before {
  content: "\e80f";
}

/* '' */

.icon1-cursor-1:before {
  content: "\e810";
}

/* '' */

.icon1-cursor:before {
  content: "\e811";
}

/* '' */

.icon1-cut:before {
  content: "\e812";
}

/* '' */

.icon1-cutlery:before {
  content: "\e813";
}

/* '' */

.icon1-down-arrow:before {
  content: "\e814";
}

/* '' */

.icon1-download:before {
  content: "\e815";
}

/* '' */

.icon1-edit:before {
  content: "\e816";
}

/* '' */

.icon1-envelope:before {
  content: "\e817";
}

/* '' */

.icon1-export:before {
  content: "\e818";
}

/* '' */

.icon1-favorite:before {
  content: "\e819";
}

/* '' */

.icon1-file:before {
  content: "\e81a";
}

/* '' */

.icon1-folder:before {
  content: "\e81b";
}

/* '' */

.icon1-forward:before {
  content: "\e81c";
}

/* '' */

.icon1-gallery:before {
  content: "\e81d";
}

/* '' */

.icon1-gamepad:before {
  content: "\e81e";
}

/* '' */

.icon1-garbage:before {
  content: "\e81f";
}

/* '' */

.icon1-headphones:before {
  content: "\e820";
}

/* '' */

.icon1-heart:before {
  content: "\e821";
}

/* '' */

.icon1-help:before {
  content: "\e822";
}

/* '' */

.icon1-home:before {
  content: "\e823";
}

/* '' */

.icon1-hourglass:before {
  content: "\e824";
}

/* '' */

.icon1-info:before {
  content: "\e825";
}

/* '' */

.icon1-layer:before {
  content: "\e826";
}

/* '' */

.icon1-layout:before {
  content: "\e827";
}

/* '' */

.icon1-left-arrow-1:before {
  content: "\e828";
}

/* '' */

.icon1-left-arrow:before {
  content: "\e829";
}

/* '' */

.icon1-lightning:before {
  content: "\e82a";
}

/* '' */

.icon1-link:before {
  content: "\e82b";
}

/* '' */

.icon1-logout:before {
  content: "\e82c";
}

/* '' */

.icon1-magnet:before {
  content: "\e82d";
}

/* '' */

.icon1-map:before {
  content: "\e82e";
}

/* '' */

.icon1-menu:before {
  content: "\e82f";
}

/* '' */

.icon1-monitor:before {
  content: "\e830";
}

/* '' */

.icon1-moon:before {
  content: "\e831";
}

/* '' */

.icon1-padnote:before {
  content: "\e832";
}

/* '' */

.icon1-paint:before {
  content: "\e833";
}

/* '' */

.icon1-pause:before {
  content: "\e834";
}

/* '' */

.icon1-photo-camera:before {
  content: "\e835";
}

/* '' */

.icon1-placeholder:before {
  content: "\e836";
}

/* '' */

.icon1-play-button:before {
  content: "\e837";
}

/* '' */

.icon1-power:before {
  content: "\e838";
}

/* '' */

.icon1-presentation:before {
  content: "\e839";
}

/* '' */

.icon1-printer:before {
  content: "\e83a";
}

/* '' */

.icon1-profile:before {
  content: "\e83b";
}

/* '' */

.icon1-prohibition:before {
  content: "\e83c";
}

/* '' */

.icon1-push-pin:before {
  content: "\e83d";
}

/* '' */

.icon1-puzzle:before {
  content: "\e83e";
}

/* '' */

.icon1-refresh:before {
  content: "\e83f";
}

/* '' */

.icon1-remove:before {
  content: "\e840";
}

/* '' */

.icon1-rewind:before {
  content: "\e841";
}

/* '' */

.icon1-right-arrow-1:before {
  content: "\e842";
}

/* '' */

.icon1-right-arrow:before {
  content: "\e843";
}

/* '' */

.icon1-rocket-launch:before {
  content: "\e844";
}

/* '' */

.icon1-screen:before {
  content: "\e845";
}

/* '' */

.icon1-search:before {
  content: "\e846";
}

/* '' */

.icon1-settings-1:before {
  content: "\e847";
}

/* '' */

.icon1-settings-2:before {
  content: "\e848";
}

/* '' */

.icon1-settings:before {
  content: "\e849";
}

/* '' */

.icon1-share:before {
  content: "\e84a";
}

/* '' */

.icon1-shield:before {
  content: "\e84b";
}

/* '' */

.icon1-shopping-cart:before {
  content: "\e84c";
}

/* '' */

.icon1-shutter:before {
  content: "\e84d";
}

/* '' */

.icon1-smartphone:before {
  content: "\e84e";
}

/* '' */

.icon1-speech-bubble:before {
  content: "\e84f";
}

/* '' */

.icon1-speedometer:before {
  content: "\e850";
}

/* '' */

.icon1-stats:before {
  content: "\e851";
}

/* '' */

.icon1-store:before {
  content: "\e852";
}

/* '' */

.icon1-sun:before {
  content: "\e853";
}

/* '' */

.icon1-switch:before {
  content: "\e854";
}

/* '' */

.icon1-tag:before {
  content: "\e855";
}

/* '' */

.icon1-target:before {
  content: "\e856";
}

/* '' */

.icon1-timer:before {
  content: "\e857";
}

/* '' */

.icon1-unlock:before {
  content: "\e858";
}

/* '' */

.icon1-up-arrow:before {
  content: "\e859";
}

/* '' */

.icon1-upload:before {
  content: "\e85a";
}

/* '' */

.icon1-video-camera:before {
  content: "\e85b";
}

/* '' */

.icon1-video:before {
  content: "\e85c";
}

/* '' */

.icon1-visible:before {
  content: "\e85d";
}

/* '' */

.icon1-voice-recorder:before {
  content: "\e85e";
}

/* '' */

.icon1-volume:before {
  content: "\e85f";
}

/* '' */

.icon1-waiting:before {
  content: "\e860";
}

/* '' */

.icon1-wifi:before {
  content: "\e861";
}

/* '' */

.icon1-zoom-out:before {
  content: "\e862";
}

/* '' */

.icon1-zoom:before {
  content: "\e863";
}

/* '' */

.icon1-clock-2:before {
  content: "\e864";
}

/* '' */

.icon1-placeholder-1:before {
  content: "\e865";
}

/* '' */

.icon1-right-quote-sign:before {
  content: "\e866";
}

/* '' */

.icon1-telephone-1:before {
  content: "\e867";
}

/* '' */

@font-face {
  font-family: "spa-icons";
  src: url("../fonts/spa-icons.eot?v19jf3");
  src: url("../fonts/spa-icons.eot?v19jf3#iefix") format("embedded-opentype"), url("../fonts/spa-icons.ttf?v19jf3") format("truetype"), url("../fonts/spa-icons.woff?v19jf3") format("woff"), url("../fonts/spa-icons.svg?v19jf3#spa-icons") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^=spa-icons-],
[class*=" spa-icons-"] {
  font-family: "spa-icons" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

.spa-icons-ice-tea:before {
  content: "\e900";
}

.spa-icons-incense:before {
  content: "\e901";
}

.spa-icons-incense-1:before {
  content: "\e902";
}

.spa-icons-leaf:before {
  content: "\e903";
}

.spa-icons-lotus:before {
  content: "\e904";
}

.spa-icons-massage:before {
  content: "\e905";
}

.spa-icons-mortar:before {
  content: "\e906";
}

.spa-icons-nail-polish:before {
  content: "\e907";
}

.spa-icons-relaxing:before {
  content: "\e908";
}

.spa-icons-sauna:before {
  content: "\e909";
}

.spa-icons-scent:before {
  content: "\e90a";
}

.spa-icons-spa:before {
  content: "\e90b";
}

.spa-icons-swimming-pool:before {
  content: "\e90c";
}

.spa-icons-tea:before {
  content: "\e90d";
}

.spa-icons-towel:before {
  content: "\e90e";
}

.spa-icons-treatment:before {
  content: "\e90f";
}

.spa-icons-yin-yang:before {
  content: "\e910";
}

.spa-icons-yoga:before {
  content: "\e911";
}

.spa-icons-bamboo:before {
  content: "\e912";
}

.spa-icons-bathtub:before {
  content: "\e913";
}

.spa-icons-candle:before {
  content: "\e914";
}

.spa-icons-candle-1:before {
  content: "\e915";
}

.spa-icons-cream:before {
  content: "\e916";
}

.spa-icons-drop:before {
  content: "\e917";
}

.spa-icons-drop-1:before {
  content: "\e918";
}

.spa-icons-fishes:before {
  content: "\e919";
}

.spa-icons-flip-flops:before {
  content: "\e91a";
}

.spa-icons-footprint:before {
  content: "\e91b";
}

.spa-icons-hairdryer:before {
  content: "\e91c";
}

.spa-icons-hot-stones:before {
  content: "\e91d";
}

@font-face {
  font-family: "inter";
  src: url("../fonts/inter/inter.ttf");
}

@font-face {
  font-family: "unbounded";
  src: url("../fonts/unbounded/unbounded.ttf");
}

body {
  background: #504a4b;
}

header,
section,
footer {
  display: flex;
  flex-direction: column;
}

.block-scroll {
  overflow: hidden;
}

.unblock-scroll {
  overflow: scroll;
}

* {
  margin: 0;
  font-family: "Inter";
  font-optical-sizing: auto;
}

.hide {
  display: none;
}

.section-wrapper {
  grid-column: 2/14;
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  cursor: pointer;
}

.btn-tprnt-1 {
  background: none;
  color: #424242;
  border: #9e9e9e 1px solid;
  transition: background 0.3s linear;
}

.btn-tprnt-1:hover {
  background: #f5f5f5;
}

.btn-small {
  font-size: 0.8rem;
  padding: 0.3rem 1.7rem;
  border-radius: 5px;
  font-weight: 500;
}

.btn-medium {
  font-size: 1rem;
  padding: 0.5rem 2rem;
  border-radius: 5px;
}

.grid-col-14 {
  display: grid;
  grid-template-columns: 10vw repeat(12, 1fr) 10vw;
}

.grid-col-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.wrap {
  flex-wrap: wrap;
}

.wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

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

.jc-center {
  justify-content: center;
}

.c-pointer {
  cursor: pointer;
}

.jc-ai-center {
  justify-content: center;
  align-items: center;
}

.jc-start {
  justify-content: flex-start;
}

.jc-end {
  justify-content: flex-end;
}

.jc-sa {
  justify-content: space-around;
}

.jc-sb {
  justify-content: space-between;
}

.ai-start {
  align-items: flex-start;
}

.ai-center {
  align-items: center;
}

.ai-end {
  align-items: flex-end;
}

.bg-white {
  background: #fff;
}

.burger-btn-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.burger-btn {
  display: none;
  width: 25px;
  height: 25px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin: 1rem 0;
  z-index: 10000;
}

.burger-btn span {
  width: 25px;
  height: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  transition: all 0.3s;
}

.burger-btn span:nth-of-type(2) {
  top: calc(50% - 6px);
}

.burger-btn span:nth-of-type(3) {
  top: calc(50% + 6px);
}

.burger-menu {
  z-index: 20;
  overflow: scroll;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #504a4b;
  transform: translatey(calc(-70px - 100%));
  transition: transform 0.3s linear;
}

.burger-menu ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 90%;
  margin: 5rem 0 0 0;
  padding: 0;
  list-style-type: none;
}

.burger-menu ul li {
  margin: 0.75rem 0;
  padding: 0.25rem;
  width: 90%;
  border-bottom: 0.5px solid #98989a;
}

.burger-menu ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
}

.burger-menu ul li:nth-last-child(-n+1) {
  border-bottom: none;
}

.burger-current {
  color: #9e9e9e;
}

.burger-item-active {
  transform: translateY(50px);
}

.active {
  transform: translateY(0);
}

.burger-close span:nth-of-type(1) {
  opacity: 0;
}

.burger-close span:nth-of-type(2) {
  transform: translate(-50%, 5px) rotate(45deg);
  background: #fff;
}

.burger-close span:nth-of-type(3) {
  transform: translate(-50%, -7px) rotate(-45deg);
  background: #fff;
}

header {
  background: #504a4b;
  align-items: center;
  position: fixed;
  width: 100%;
  z-index: 1250;
  height: 111px;
  top: 0;
  left: 0;
  width: 100vw;
}

header .header-wrapper {
  z-index: 1250;
}

body {
  margin-top: 111px;
}

.header-wrapper {
  margin-left: -3rem;
  width: 1440px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.logo-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  margin: 1.5rem 0;
}

.logo-header a {
  text-decoration: none;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

footer {
  background: #222222;
  align-items: center;
}

.footer-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem 0 3rem 0;
}

.footer-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  margin: 2rem 0 1rem 0;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.footer-nav ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.footer-nav ul li {
  margin: 0 0.5rem;
}

.footer-nav ul li a {
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
}

.footer-info-item h3 {
  font-size: 1rem;
  color: #fff;
  font-weight: 500;
}

.footer-info-item p {
  color: #fff;
  margin: 0.5rem 0;
}

.footer-social {
  margin: 1rem 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.footer-social-item {
  margin-right: 16px;
  cursor: pointer;
}

.nav-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.nav-desktop {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 1rem 0;
}

.nav-desktop ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style-type: none;
}

.nav-desktop ul li {
  margin-left: 25px;
  cursor: pointer;
  padding: 0.5rem 0;
  font-size: 18px;
}

.nav-desktop ul a {
  text-decoration: none;
  padding: 0.5rem 0;
  color: white;
  white-space: nowrap;
}

.nav-desktop ul .desktop-current {
  color: #87ec33;
}

.nav-login {
  margin-left: 3rem;
}

.nav-login a {
  text-decoration: none;
  font-weight: 500;
}

.current-user {
  margin-right: 2rem;
}

.index-banner {
  background: linear-gradient(to right, rgba(55, 53, 53, 0.7215686275), rgba(157, 151, 151, 0.2)), url(../img/back_01.png) 100%/cover no-repeat;
  align-items: center;
}

.index-banner-wrapper,
.index-about-wrapper,
.index-book-wrapper,
.index-video-wrapper,
.feedback-form-wrapper,
.footer-wrapper {
  width: 1440px;
}

.index-banner-title {
  margin: 5rem 0 0;
  width: 1282px;
}

.index-banner-title h1 {
  font-family: "Unbounded";
  font-weight: 600;
  font-style: normal;
  font-size: 60px;
  line-height: 70px;
  color: #87ec33;
}

.index-banner-content {
  margin: 2rem 0 0 0;
  width: 600px;
}

.index-banner-content p {
  color: white;
  font-size: 20px;
  font-weight: 500;
}

.index-banner-button {
  margin: 1rem 0 5rem 0;
}

.index-banner-button a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 270px;
  height: 55px;
  text-decoration: none;
  background: #87ec33;
  color: #282727;
  font-size: 22px;
}

.index-about-section {
  align-items: center;
  background: #373737;
  margin: 3rem 0;
}

.index-about-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.index-about-left {
  margin: 2rem 0 0 0;
  padding-right: 3rem;
  border-right: 1px #87ec33 solid;
  width: 767px;
}

.index-about-right {
  padding-left: 3rem;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.index-about-title {
  margin: 2rem 0 0;
}

.index-about-title h2 {
  font-family: "unbounded";
  font-weight: 700;
  font-style: normal;
  font-size: 1.8rem;
  color: white;
}

.index-about-content {
  margin: 2rem 0 0;
}

.index-about-content p {
  color: white;
  line-height: 1.5rem;
  margin: 1.2rem 0;
}

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

.skill-value {
  font-family: "Unbounded";
  color: #87ec33;
  font-size: 100px;
  font-weight: 700;
}

.skill-description {
  color: white;
}

.skill-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem 0;
  margin: 0 0 2.5rem 0;
}

.skill-item p {
  text-align: center;
}

.after-about {
  display: none;
}

.after-books {
  display: flex;
}

.index-video-section {
  margin: 5rem 0 2rem 0;
  align-items: center;
}

.index-video-wrapper {
  width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#video-index {
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}

.index-book-section {
  align-items: center;
}

.index-book-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.index-book-left {
  background: url("../img/rect-01.png") 10% 100%/auto no-repeat;
  width: 438px;
  height: 590px;
  margin-right: 92px;
}

.book-img-wrapper {
  position: relative;
  display: flex;
  margin: 2rem 3rem 2rem 3rem;
}

.index-book-img img {
  width: 345px;
}

.book-stamp-wrapper {
  position: absolute;
  right: -58px;
  top: -10px;
}

.index-book-right .right-button button {
  margin: 0.5rem 0 2rem 2.5rem;
  background: #87ec33;
  padding: 0.8rem 3rem;
  border: none;
}

.index-book-right .right-button button a {
  text-decoration: none;
  color: #282727;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 18px;
}

.right-quote {
  border: #87ec33 3px solid;
  padding: 2rem 2rem 2rem 3rem;
  width: calc(861px - 5rem);
}

.right-quote p {
  font-family: "inter";
  font-size: 3rem;
  font-weight: 700;
  color: white;
}

.right-quote-author {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.right-quote-author p {
  font-family: "inter";
  font-size: 1.15rem;
  font-weight: 400;
  color: #b4b4b4;
  margin: 1rem 0;
}

.right-description {
  width: 715px;
}

.right-description p {
  color: #fff;
  font-size: 20px;
  margin: 1rem 5rem 1rem 2.5rem;
  line-height: 1.5rem;
  font-family: "inter";
}

.start-soon {
  align-items: center;
}

.start-soon-wrapper {
  width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

.index-directions-wrapper {
  width: 1440px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.index-directions-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3rem 0 1.8rem 0;
}

.index-directions-title h2 {
  color: #fff;
  font-family: "unbounded";
  font-weight: 700;
  font-size: 2.5rem;
}

.index-directions-content-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.index-directions-item {
  margin: 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  padding: 36px;
  background-color: #222;
  cursor: pointer;
}

.dir-title,
.dir-description {
  width: 345px;
}

.dir-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0;
}

.dir-title p {
  color: #fff;
}

.dir-description {
  margin: 1rem 0;
}

.dir-description p {
  color: #98989a;
}

.index-articles-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.index-articles-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3rem 0 1.8rem 0;
}

.index-articles-title h2 {
  color: #fff;
  font-family: "unbounded";
  font-weight: 700;
  font-size: 2.5rem;
}

.index-articles-content-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.index-articles-item {
  margin: 0 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 417px;
  cursor: pointer;
}

.articles-title,
.articles-description {
  width: 418px;
}

.articles-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin: 1rem 0;
}

.articles-title p {
  color: #fff;
}

.article-topic {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  margin: 0.5rem 0 0 0;
}

.article-topic p {
  color: #87ec33;
}

.articles-title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  width: 100%;
  margin: 0.5rem 0 0 0;
}

.articles-title p {
  color: #fff;
}

.articles-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0.5rem 0 0 0;
}

.articles-info p {
  color: #fff;
}

.articles-info-items {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.articles-info-items div {
  border: #98989a 1px dashed;
  border-radius: 1rem;
  padding: 0.5rem;
  margin-right: 0.5rem;
}

.article-info-button button {
  border: none;
  color: #98989a;
  padding: 0.3rem 1rem;
  background: #222222;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.article-info-button button img {
  margin-left: 0.5rem;
}

.feedback-form-section {
  align-items: center;
}

.index-feedbacks-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.index-feedbacks-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3rem 0 1.8rem 0;
}

.index-feedbacks-title h2 {
  color: #fff;
  font-family: "unbounded";
  font-weight: 700;
  font-size: 2.5rem;
}

.index-feedbacks-content-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.index-feedbacks-item {
  margin: 0 4px;
  width: 417px;
}

.index-feedback-author {
  margin: 0.5rem 0 1rem 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.index-feedback-item-img img {
  width: 417px;
}

.index-feedback-author-name {
  margin-left: 1rem;
}

.index-feedback-author-name .name {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 500;
}

.index-feedback-author-name .description {
  color: #b4b4b4;
}

.index-feedback-author-stars {
  margin: 1rem 0;
}

.index-feedback-item-author {
  background: #373737;
}

.index-feedback-item-author p {
  color: #87ec33;
}

.index-feedback-author-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #373737;
  padding: 0 1rem 2rem 0;
}

.index-feedback-author-text p {
  color: #fff;
  line-height: 1.5rem;
}

.index-frends-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.index-frends-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 1296px !important;
}

.index-frends-item {
  margin: 0 0.2rem;
  border: #222 2px solid;
  width: 206px;
  height: 237px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.index-frends-item img,
.index-frends-item picture {
  width: 198px;
  height: 237px;
}

.feedback-form-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.feedback-form {
  width: 44rem;
  padding: 2rem 0;
  margin: 4rem 0;
  background: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.feedback-form button {
  width: 30.2rem;
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  background: #87ec33;
  border: none;
  margin: 2rem 0;
}

.feedback-form form {
  width: 30rem;
  margin: 2rem 0;
}

.feedback-form-title h2 {
  color: #fff;
  font-family: "unbounded";
  font-size: 2.5rem;
  font-weight: 700;
}

.form-item {
  margin-top: 1.5rem;
  width: 100%;
}

.form-item p {
  color: #fff;
}

.form-item input {
  width: 27rem;
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
}

.form-item textarea {
  width: 27rem;
  font-size: 1.2rem;
  padding: 1rem 1.5rem;
  height: 10rem;
  resize: none;
}

.book-section {
  align-items: center;
}

.books-content-section {
  align-items: center;
}

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

.books-title h1 {
  font-family: "Unbounded";
  font-size: 45px;
  font-weight: 700;
  color: #fff;
  margin-top: 30px;
}

.books-content-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.books-item-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 425px;
  padding: 40px 0;
}

.book-item-img {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.book-item-img img {
  width: 345px;
}

.books-item-title,
.books-item-authors,
.books-item-price {
  width: 345px;
}

.books-item-title,
.books-item-price {
  color: #fff;
}

.books-item-authors p {
  color: #98989a;
  font-family: "Inter";
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -3%;
  margin-top: 20px;
}

.books-item-title h2 {
  font-family: "Inter";
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -3%;
  margin-top: 20px;
}

.books-item-price {
  margin-top: 20px;
}

.books-item-price span {
  font-family: "Inter";
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -3%;
}

.books-item-button button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 275px;
  border: none;
  background: #87ec33;
  padding: 12px 0;
  margin-top: 20px;
}

.books-item-button button span {
  text-transform: uppercase;
  font-family: "Inter";
  font-size: 16px;
  font-weight: 700;
}

.books-section-educations {
  align-items: center;
}

.books-educations-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 60px 0 90px 0;
}

.books-educations-item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 400px;
  height: 80px;
  cursor: pointer;
}

.books-educations-item img {
  margin-right: 1rem;
}

.books-educations-item h4 {
  font-family: "Inter";
  font-size: 24px;
  font-weight: 600;
  color: #b4b4b4;
}

.books-educations-item:nth-child(n+2) {
  border-left: 1px #b4b4b4 solid;
}

.book-item-img-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: 87px;
}

.book-stamp {
  position: absolute;
  top: -87px;
  right: -10px;
}

.book-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.book-description-wrapper {
  width: 751px;
  margin: 87px 0 0 31px;
}

.book-title {
  width: 640px;
}

.book-title h1 {
  font-family: "Unbounded";
  color: #87ec33;
  font-weight: 600;
  font-size: 30px;
}

.book-authors {
  margin-top: 17px;
}

.book-authors p {
  font-family: "Inter";
  font-size: 18px;
  font-weight: 400;
  color: #b4b4b4;
}

.book-description {
  margin: 17px 0 0;
  border-bottom: 1px #98989a solid;
}

.book-description p {
  font-family: "Inter";
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #fff;
  margin-bottom: 17px;
}

.book-description-moredetails p {
  font-family: "Inter";
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  color: #b4b4b4;
  margin-bottom: 17px;
  cursor: pointer;
}

.book-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px #98989a solid;
}

.book-price p {
  margin: 32px 0;
  font-family: "Unbounded";
  font-weight: 700;
  font-size: 25px;
  color: #fff;
}

.description-info-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 32px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px #98989a solid;
}

.description-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.description-info-row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.decription-info-item-title,
.decription-info-item-value {
  width: 135px;
  margin: 8px 0;
}

.decription-info-item-title p,
.decription-info-item-value p {
  font-family: "Inter";
}

.decription-info-item-title {
  font-size: 16px;
  font-weight: 600;
  color: #252021;
}

.decription-info-item-value {
  font-size: 16px;
  font-weight: 500;
  color: #b4b4b4;
}

.description-button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 32px;
}

.description-button button {
  width: 193px;
  border: none;
  background: #87ec33;
  color: #282727;
  font-family: "Inter";
  font-size: 18px;
  font-weight: 700;
  padding: 17px 0;
}

.books-fragments {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.book-fragment-item {
  margin: 0 6px;
}

.book-description-full {
  background: #222;
  width: 1088px;
  margin: 100px 0 0;
}

.modal-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  padding: 0 8px 0 5px;
}

.overlay {
  transform: translateY(-150%);
  position: fixed;
  top: 111px;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
  background: rgba(10, 10, 10, 0.7);
  transition: transform 0.3s ease-in;
}

.modal-more-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #222;
  transition: transform 0.3s ease-in;
}

.modal-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.modal-more-details-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 32px 0 0 32px;
}

.modal-more-details-title h1 {
  color: #87ec33;
  font-family: "Inter";
  font-size: 32px;
  font-weight: 600;
}

.modal-content-title {
  display: flex;
  flex-direction: column;
  margin-bottom: 32px;
}

.modal-content-title h2 {
  color: #fff;
  font-family: "Inter";
  font-size: 19px;
  font-weight: 700;
}

.modal-content-text {
  margin-bottom: 32px;
}

.modal-content-text p {
  color: #fff;
  font-family: "Inter";
  font-size: 19px;
  font-weight: 400;
}

.modal-more-details-content-about {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.modal-more-details-content-about h3 {
  color: #fff;
  font-family: "Inter";
  font-size: 19px;
  font-weight: 700;
}

.modal-more-details-content-about p {
  color: #fff;
  font-family: "Inter";
  font-size: 19px;
  font-weight: 400;
}

.modal-more-details-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 32px;
}

.modal-more-details-button button {
  width: 193px;
  background: #87ec33;
  padding: 17px 0;
  font-family: "Inter";
  font-size: 18px;
  font-weight: 700;
  color: #282727;
  border: none;
}

.none-scroll-body {
  overflow: hidden;
}

.modal-close {
  position: absolute;
  top: 32px;
  right: 32px;
  cursor: pointer;
}

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

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

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

.blog-title h1 {
  font-family: "unbounded";
  font-size: 45px;
  font-weight: 700;
  color: #fff;
}

.blog-box-wrapper {
  width: 1330px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.blog-box-wrapper a {
  text-decoration: none;
}

.blog-box-item {
  width: 413px;
  margin: 16px 15px;
}

.blog-box-item-img {
  width: 413px;
  margin: 8px 0;
}

.blog-box-item-img img {
  width: 413px;
}

.blog-box-item-tags {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 8px 0;
}

.blog-box-item-tags span {
  font-family: "inter";
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -3%;
  color: #87ec33;
}

.blog-box-item-description {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 8px 0;
}

.blog-box-item-description p {
  font-family: "inter";
  font-size: 20px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -3%;
  color: #fff;
}

.blog-box-item-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.blog-box-item-footer p {
  font-family: "inter";
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -3%;
  color: #98989a;
  border: 1px #98989a dashed;
  border-radius: 1rem;
  padding: 0.5rem;
  background: none;
}

.blog-box-item-footer a {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #222222;
  text-decoration: none;
  font-family: "inter";
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -3%;
  color: #98989a;
  padding: 0.5rem;
}

.blog-box-item-footer a img {
  margin-left: 4px;
}

.blog-pagination {
  margin: 16px 0 130px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.pag-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 38px;
  padding: 10px 0;
  background: #373737;
  margin: 0 5px;
  border-radius: 5px;
}

.dots {
  background: none;
}

.section-blog-item {
  align-items: center;
}

.blog-item-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #373737;
  width: 1300px;
  margin-bottom: 16px;
}

.blog-item-tags-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.blog-item-tags-wrapper span {
  color: #87ec33;
  font-size: 24px;
  font-weight: 500;
  margin: 20px 7px;
}

.blog-item-title {
  width: 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-item-title h1 {
  font-size: 64px;
  font-weight: 500;
  color: #fff;
  line-height: 120%;
  letter-spacing: -3%;
  text-align: center;
}

.blog-item-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 7px 0;
}

.blog-item-date span {
  font-size: 22px;
  line-height: 120%;
  letter-spacing: -3%;
  color: #b4b4b4;
}

.blog-item-author-wrapper {
  margin: 7px 0;
  padding: 20px 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.blog-item-author-image,
.blog-item-author-description {
  display: flex;
  flex-direction: column;
  margin: 0 6px;
}

.blog-item-author-name p {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  line-height: 150%;
}

.blog-author-profession p {
  font-size: 18px;
  font-weight: 400;
  color: #b4b4b4;
}

.blog-item-description {
  width: 830px;
}

.blog-item-description-title p {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

.blog-item-description-content {
  margin: 7px 0 96px 0;
}

.blog-item-description-content ul li {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}

.blog-item-box-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 830px;
}

.blog-item-box-title h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 150%;
  color: #87ec33;
}

.blog-item-box-content {
  margin: 0 0 7px 0;
}

.blog-item-box-content p {
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  line-height: 150%;
}

.blog-item-box-img {
  margin: 7px 0;
}

.order-form {
  align-items: center;
}

.order-form-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #222;
  width: 100vw;
}

.order-form-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.order-form-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 90px 0;
}

.order-form-title h1 {
  font-family: "Unbounded";
  font-size: 45px;
  font-weight: 700;
  color: #fff;
}

.order-form-item p {
  font-family: "Inter";
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}

.order-form-item input {
  padding: 0 20px;
  width: 360px;
  height: 60px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.order-form-item textarea {
  padding: 20px;
  width: 360px;
  height: 140px;
  resize: none;
}

.order-form-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0 150px 0;
}

.order-form-button button {
  border: none;
  width: 400px;
  height: 60px;
  font-family: "Inter";
  font-size: 16px;
  font-weight: 700;
  color: #252021;
  text-transform: uppercase;
  background: #87ec33;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-container {
  overflow: hidden;
  width: 1275px;
}

.carousel-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  transition: transform 0.3s ease-in-out;
}

.hide {
  display: none;
}

.tmp {
  height: 100vh;
  background: url("../img/back-tmp.png") 40%/cover no-repeat;
  background-size: cover;
  position: relative;
}

.tmp-title {
  position: absolute;
  top: 6vh;
  left: 9.8vw;
}

.tmp-shevron {
  position: absolute;
  top: 4vh;
  right: 18vw;
}

@media (max-width: 1681px) {
  .advantages-item {
    margin: 2rem 1.5rem;
  }
}

@media (max-width: 1441px) {
  .burger-btn {
    display: flex;
  }

  .nav-desktop {
    display: none;
  }

  .header-wrapper {
    width: 96%;
  }
}

@media (max-width: 1367px) {
  .advantages-item {
    width: auto;
  }

  .cat-group-wrapper {
    grid-column: 1/15;
    padding: 0 2vw;
  }
}

@media (max-width: 1281px) {
  .contacts-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .contacts-info {
    align-items: center;
  }

  .goods-item-image img {
    width: 400px;
  }

  .goods-item-specifications {
    width: 460px;
  }
}

@media (max-width: 992px) {
  .index-about-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .index-about-content {
    margin: 0;
    padding: 0 0.75rem 0.2rem 1.5rem;
  }

  .index-about-content h3 {
    margin: 0;
  }

  .index-about-content .about-content-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .header-name {
    display: none;
  }

  .nav-desktop {
    display: none;
  }

  .index-about-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .index-about-img img,
  .index-about-img picture {
    width: 90vw;
  }
}

@media (max-width: 577px) {
  .index-about-content {
    width: clamp(28px, 90vw, 560px);
  }

  .advantages-wrapper {
    grid-column: 1/15;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .bread-crumbs {
    margin: 0 0 1rem 0;
  }

  .bread-crumbs a,
  .bread-crumbs span {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  header {
    height: 73px;
  }

  body {
    margin-top: 73px;
  }

  .header-wrapper,
  .index-about-wrapper,
  .index-book-wrapper {
    margin: 0;
    width: 100vw;
    align-items: flex-start;
  }

  .logo-header {
    margin: 0 0 0 15px;
  }

  .logo-header img {
    width: 138px;
  }

  .header-right {
    justify-content: flex-end;
  }

  .burger-btn {
    margin: 0 15px 0;
  }

  .index-banner {
    background: linear-gradient(to right, rgba(55, 53, 53, 0.7215686275), rgba(157, 151, 151, 0.2)), url(../img/back_01_320.png) 100%/cover no-repeat;
    align-items: center;
  }

  .index-banner-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .index-banner-button,
  .index-banner-content,
  .index-banner-title {
    width: 92vw;
  }

  .index-banner-title h1 {
    font-size: 25px;
    line-height: 45px;
  }

  .index-banner-content p {
    font-size: 14px;
    line-height: 100%;
  }

  .index-banner-button a {
    width: 100%;
    font-size: 18px;
  }

  .index-about-left,
  .index-about-right {
    padding: 0;
    border-right: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .skill-item {
    margin: 0;
  }

  .skill-value {
    font-size: 55px;
  }

  .skill-description {
    font-size: 18px;
  }

  .index-book-wrapper {
    flex-direction: column;
    align-content: center;
  }

  .index-book-left,
  .index-book-right {
    width: 92vw;
  }

  .index-book-left {
    background: url("../img/rect-01-320.png") 10% 100%/auto no-repeat;
    height: auto;
    margin-right: 0;
  }

  .book-stamp-wrapper {
    display: none;
  }

  .index-book-img-mobile {
    background: url("../img/book-mobile-01.png");
    width: 320px;
    height: 245px;
  }

  .index-book-img img {
    width: 240px;
  }

  .index-book-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
  }

  .index-book-right .right-button {
    width: 92%;
  }

  .index-book-right .right-button button {
    margin: 0.5rem 0 2rem 0;
    background: #87ec33;
    padding: 0.8rem 3rem;
    border: none;
    width: 100%;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
  }

  .right-quote {
    border: #87ec33 2px solid;
    margin-top: 21px;
    padding: 20px;
    width: calc(92% - 40px);
  }

  .right-quote p {
    margin-top: 40px;
    font-family: "inter";
    font-size: 16px;
    font-weight: 700;
  }

  .right-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 92%;
  }

  .right-description p {
    font-size: 14px;
    margin: 1rem 0 1rem 0;
    line-height: 100%;
  }

  .index-book-quote img {
    width: 23px;
  }

  .after-about {
    display: flex;
  }

  .after-books {
    display: none;
  }

  .start-soon-wrapper {
    width: 100vw;
  }

  .start-soon-wrapper img {
    width: 100vw;
  }

  .index-video-section {
    display: none;
  }

  .description-info-wrapper {
    flex-direction: column;
  }

  .books-educations-wrapper {
    flex-direction: column;
  }

  .index-directions-wrapper {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .index-directions-title {
    margin: 3rem 0 1.8rem 0;
  }

  .index-directions-title h2 {
    color: #fff;
    font-family: "unbounded";
    font-weight: 700;
    font-size: 25px;
    text-align: center;
  }

  .index-directions-content-wrapper {
    width: 92vw;
  }

  .index-directions-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 92vw;
    padding: 0;
    background-color: #222;
    cursor: pointer;
  }

  .index-directions-item .dir-img {
    width: 92vw;
  }

  .index-directions-item picture,
  .index-directions-item img {
    width: 92vw;
    margin: 40px 0 10px 0;
  }

  .dir-title,
  .dir-description {
    width: 92%;
  }

  .dir-title a img {
    width: 22px;
  }

  .index-articles-wrapper {
    width: 100vw;
  }

  .index-articles-content-wrapper {
    width: 100%;
    flex-direction: row;
    justify-content: center;
  }

  .index-articles-item {
    margin: 0;
    width: 92%;
  }

  .index-articles-item:nth-child(n+2) {
    display: none;
  }

  .articles-img img {
    width: 290px;
  }

  .article-topic,
  .articles-title,
  .articles-description {
    width: 100%;
  }

  .articles-title,
  .articles-description {
    width: 100%;
  }

  .articles-info {
    flex-direction: column;
    align-items: flex-start;
  }

  .articles-info-date {
    margin: 9px 0;
  }

  .article-info-button {
    margin: 9px 0;
    width: 100%;
  }

  .article-info-button button {
    width: 100%;
    justify-content: center;
  }

  .index-feedbacks-content-wrapper {
    width: 92vw;
  }

  .index-feedbacks-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 92vw;
  }

  .index-feedback-item-img {
    width: 92%;
  }

  .index-feedback-item-img img {
    width: 100%;
  }

  .index-feedback-author-text-wrapper {
    width: 92%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .index-feedbacks-title h2 {
    font-size: 25px;
  }

  .index-feedback-author-text {
    padding: 3rem 18px 2rem 18px;
  }

  .index-frends-wrapper {
    width: 100vw;
  }

  .index-frends-content {
    width: 216px !important;
  }

  .index-frends-item {
    width: 208px;
  }

  .index-frends-item picture {
    width: 198px;
    height: 237px;
  }

  .feedback-form-wrapper {
    width: 100vw;
  }

  .feedback-form-title {
    width: 92%;
  }

  .feedback-form-title h2 {
    font-size: 25px;
    text-align: center;
  }

  .feedback-form {
    width: 100%;
    padding: 2rem 0;
    margin: 4rem 0;
  }

  .feedback-form button {
    width: 100%;
    font-size: 1.2rem;
    padding: 1rem 1.5rem;
    background: #87ec33;
    border: none;
    margin: 2rem 0;
  }

  .feedback-form form {
    margin: 2rem 0;
    width: 92%;
  }

  .feedback-form .form-item {
    margin-top: 1.5rem;
    width: 100%;
  }

  .feedback-form .form-item p {
    color: #fff;
    margin-bottom: 5px;
  }

  .feedback-form .form-item input {
    width: calc(100% - 3rem);
    font-size: 14px;
    padding: 1rem 1.5rem;
  }

  .feedback-form .form-item textarea {
    width: calc(100% - 3rem);
    font-size: 1.2rem;
    padding: 1rem 1.5rem;
    height: 10rem;
    resize: none;
  }

  .footer-wrapper {
    align-items: center;
    width: 100vw;
  }

  .footer-row {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 92%;
  }

  .footer-info-item {
    width: 92%;
  }

  .footer-logo img {
    width: 270px;
  }

  .footer-nav {
    width: 92%;
    padding: 0;
    margin: 2rem 0;
  }

  .footer-nav ul {
    margin: 0;
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-nav ul li {
    margin: 9px 0;
  }

  .books-content-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .books-item-wrapper {
    align-items: center;
    width: 93vw;
    padding: 40px 0;
  }

  .books-title {
    width: 93vw;
  }

  .books-title h1 {
    font-size: 18px;
  }

  .book-item-img a img {
    width: 290px;
  }

  .books-item-title,
  .books-item-authors,
  .books-item-price {
    width: 93vw;
  }

  .books-item-title h2 {
    font-size: 18px;
  }

  .book-wrapper {
    flex-direction: column;
    align-items: center !important;
  }

  .book-img img,
  .book-img picture {
    width: 290px;
  }

  .book-stamp {
    display: none;
  }

  .book-authors p {
    font-size: 16px;
  }

  .book-fragment-item img,
  .book-fragment-item picture {
    width: 48px;
  }

  .book-description-wrapper {
    width: 92.5vw;
    margin: 87px 0 0 0;
  }

  .book-title {
    width: 100%;
  }

  .book-title h1 {
    font-size: 18px;
    line-height: 36px;
  }

  .description-button button {
    width: 100%;
  }

  .books-educations-item:nth-child(n+2) {
    border-top: 1px #98989a solid;
  }

  .book-description-full {
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .overlay {
    width: 100vw;
    background: #222;
    top: 70px;
  }

  .modal-content {
    width: 92vw;
    margin: 32px 0 0 0;
  }

  .modal-content-text p,
  .modal-more-details-content-about p {
    font-size: 14px;
    line-height: 100%;
  }

  .modal-more-details-title {
    align-items: center;
    width: 92vw;
    margin: 32px 0 0 0;
  }

  .modal-more-details-title h1 {
    font-size: 18px;
    line-height: 26px;
  }

  .modal-content-title h2 {
    font-size: 14px;
  }

  .modal-more-details-content-about h3 {
    font-size: 14px;
  }

  .modal-close {
    top: 12px;
    right: 12px;
    cursor: pointer;
  }

  .modal-close img,
  .modal-close picture {
    width: 15px;
  }

  .order-form-wrapper {
    width: 96vw;
  }

  .order-form-title {
    width: 96%;
  }

  .order-form-title h1 {
    font-size: 18px;
  }

  .order-form-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .order-form-item input {
    width: calc(96% - 40px);
  }

  .order-form-item textarea {
    width: calc(96% - 40px);
  }

  .order-form-button {
    width: 100%;
  }

  .order-form-button button {
    width: calc(96% - 40px);
  }
}

@media (max-width: 313px) {
  .logo-header a img {
    width: 180px;
  }

  .logo-header a {
    margin-left: 1rem;
  }
}
@supports (-webkit-appearance:none){
.index-banner{background:linear-gradient(to right, rgba(55, 53, 53, 0.7215686275), rgba(157, 151, 151, 0.2)), url(../img/back_01.png) 100%/cover no-repeat}
.index-book-left{background:url("../img/rect-01.png") 10% 100%/auto no-repeat}
.tmp{background:url("../img/back-tmp.png") 40%/cover no-repeat}
}

 @media (max-width: 1681px){

@supports (-webkit-appearance:none){

}

}

 @media (max-width: 1441px){

@supports (-webkit-appearance:none){

}

}

 @media (max-width: 1367px){

@supports (-webkit-appearance:none){

}

}

 @media (max-width: 1281px){

@supports (-webkit-appearance:none){

}

}

 @media (max-width: 992px){

@supports (-webkit-appearance:none){

}

}

 @media (max-width: 577px){

@supports (-webkit-appearance:none){

}

}

 @media (max-width: 480px){

@supports (-webkit-appearance:none){
.index-banner{background:linear-gradient(to right, rgba(55, 53, 53, 0.7215686275), rgba(157, 151, 151, 0.2)), url(../img/back_01_320.png) 100%/cover no-repeat}
.index-book-left{background:url("../img/rect-01-320.png") 10% 100%/auto no-repeat}
.index-book-img-mobile{background:url("../img/book-mobile-01.png")}
}

}

 @media (max-width: 313px){

@supports (-webkit-appearance:none){

}

}